springboot vue登录,springboot vue 单点登录

　　这篇文章主要为大家详细介绍了跳羚VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了跳羚VUE实现登录注册的具体代码，供大家参考，具体内容如下

一、springBoot

　　创建跳羚项目

　　分为三个包，分别为控制器，服务，道以及资源目录下的可扩展标记语言文件。

　　UserController.java

　　包装springbootmybatis.controller

　　导入org。spring框架。网络。绑定。注释。交叉起源；

　　导入org。spring框架。网络。绑定。注释。后期映射；

　　导入org。spring框架。网络。绑定。注释。请求正文；

　　导入org。spring框架。网络。绑定。注释。休息控制器；

　　导入跳羚队。POJO。用户；

　　导入跳羚队。服务。用户服务；

　　导入javax。注释。资源；

　　@RestController

　　公共类用户控制器{

　　@资源

　　户服务用户服务；

　　@PostMapping(/register/)

　　@CrossOrigin(* )

　　字符串寄存器(@RequestBody User用户){

　　System.out.println(有人请求注册!);

　　int RES=用户服务。注册(用户。获取帐户()、用户。get password())；

　　if(res==1) {

　　返回注册成功；

　　}否则{

　　返回注册失败；

　　}

　　}

　　@PostMapping(/login/)

　　@CrossOrigin(* )

　　字符串登录(@RequestBody User用户){

　　int RES=用户服务。登录(用户。获取帐户()、用户。get password())；

　　if(res==1) {

　　返回登录成功；

　　}否则{

　　返回登录失败；

　　}

　　}

　　}

　　UserService.java

　　包springbootmybatis.service

　　导入org。spring框架。刻板印象。服务；

　　导入跳羚队。道。用户映射器；

　　导入javax。注释。资源；

　　@服务

　　公共类用户服务{

　　@资源

　　用户映射程序用户映射程序；

　　公共int寄存器(字符串帐户，字符串密码){

　　返回userMapper.register(账号，密码);

　　}

　　公共int登录(字符串帐户，字符串密码){

　　返回用户映射程序.登录(账号，密码);

　　}

　　}

　　User.java(我安装了龙目岛插件)

　　包springbootmybatis.pojo

　　进口龙目岛。数据；

　　@数据

　　公共类用户{

　　私有字符串帐户；

　　私有字符串密码；

　　}

　　UserMapper.java

　　包springbootmybatis.dao

　　导入org。阿帕奇。伊巴提斯。注释。映射器；

　　@Mapper

　　公共接口用户映射程序{

　　（同Internationalorganizations）国际组织寄存器（字符串账号，字符串密码);

　　int登录(字符串账号，字符串密码);

　　}

　　UserMapper.xml

　　？可扩展标记语言版本=1.0 编码=UTF八号？

　　！文档类型映射器

　　PUBLIC -//mybatis。 org//DTD映射器3.0//EN

　　http://我的巴蒂斯。org/dtd/my batis-3-mapper。 dtd

　　映射器命名空间= springbootmybatis。道。用户映射程序

　　插入id=注册

　　插入用户（帐户，密码)值(# {帐户},# {密码});

　　/插入

　　选择id=登录结果类型=整数

　　select count(*)from User where account=# { account } and password=# { password }；

　　/选择

　　/映射器

　　主干配置

　　应用程序。格式

　　服务器端口：8000

　　春天：

　　数据源：

　　用户名：根

　　密码：123456

　　网址：JDBC:MySQL://localhost:3306/community？服务器时区=utcuse unicode=true字符编码=utf-8

　　驱动程序类名称：com.mysql.cj.jdbc.Driver

　　mybatis:

　　类型-别名-包：springbootmybatis.pojo

　　映射器-位置：类路径：mybatis/mapper/* .可扩展标记语言

　　配置：

　　地图下划线到骆驼大小写：真

　　数据库需要建相应得到表

　　创建表"用户"(

　　` account varchar(255)COLLATE utf8 _ bin默认为空，

　　` password varchar(255)COLLATE utf8 _ bin默认为空

　　)ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8 _ bin；

二、创建VUE项目

　　安装节点，npm，配置环境变量。

　　配置cnpm仓库，下载的时候可以快一些。

　　npm i -g cnpm -注册表=https://注册表. npm.taobao.org

　　安装VUE

　　国家预防机制

　　初始化包结构

　　某视频剪辑软件初始化工具项目

　　启动项目

　　# 进入项目目录

　　cd vue-01

　　# 编译

　　新公共管理安装

　　# 启动

　　新公共管理运行开发

　　修改项目文件，按照如下结构

　　APP.vue

　　模板

　　div id=应用程序

　　路由器-视图/

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称："应用程序"

　　}

　　/脚本

　　风格

　　/风格

　　欢迎100 . vue

　　模板

　　差异

　　埃尔-输入虚拟模型=帐户占位符=请输入帐号/el-input

　　El-input v-model= password placeholder=请输入密码显示-密码/El-输入

　　El-button type= primary @ click= log in 登录/el-button

　　El-button type= primary @ click= register 注册/el-button

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名："欢迎",

　　data () {

　　返回{

　　帐户： ,

　　密码：""

　　}

　　},

　　方法：{

　　寄存器：函数(){

　　这个。axios。post(/API/register/，{

　　帐户：这个帐户，

　　密码：this .密码

　　}).然后（函数（响应){

　　console.log(响应);

　　}).接住(函数（错误){

　　console.log(错误);

　　});

　　//这个1000美元路由器。推送({ path:/registry })；

　　},

　　登录：函数(){

　　this.axios.post(/api/login/，{

　　帐户：这个帐户，

　　密码：this .密码

　　}).then(function () {

　　警报(登录成功);

　　}).接住(函数(e) {

　　警报(五)

　　})

　　//这个1000美元路由器。push({ path:/board })；

　　}

　　}

　　}

　　/脚本

　　样式范围

　　/风格

　　主页。射流研究…

　　//要用"导入"命令加载的某视频剪辑软件构建版本

　　//(仅运行时或独立)已在webpack.base.conf中用别名设置。

　　从“vue”导入某视频剪辑软件

　　从导入应用程序 0.5/App

　　从导入路由器。/路由器

　　从"元素-用户界面"导入ElementUI

　　导入元素-ui/lib/主题-粉笔/索引。 CSS

　　从" axios "导入爱可信

　　从“vue-axios”导入VueAxios

　　Vue.use(VueAxios，Axios)

　　Vue.use(ElementUI)

　　Vue.config.productionTip=false

　　/* eslint-禁用无-新*/

　　新Vue({

　　埃尔： #app ，

　　路由器，

　　组件：{App}，

　　模板："应用程序/"

　　})

　　路由器/索引. js

　　从“vue”导入某视频剪辑软件

　　从“vue路由器"导入路由器

　　从" @/组件/欢迎"导入欢迎

　　Vue.use(路由器)

　　导出默认新路由器({

　　路线：[

　　{

　　路径："/",

　　姓名："欢迎",

　　组件：欢迎

　　}

　　]

　　})

　　配置/索引。射流研究…

　　使用严格

　　//模板版本：1.3.1

　　//有关文档，请参见http://vuejs-templates.github.io/webpack。

　　const path=require(path )

　　模块。导出={

　　开发人员：{

　　//路径

　　资产子目录：静态，

　　资产公共路径："/"，

　　代理表：{

　　/api: {

　　target: http://localhost:8000 ，//后端接口的域名

　　//secure: false，//如果是安全超文本传输协议接口，需要配置这个参数

　　changeOrigin: true，//如果接口跨域，需要进行这个参数配置

　　路径重写：{

　　^/api: //路径重写，当你的全球资源定位器(统一资源定位器)带有美国石油学会(美国石油协会)字段时如/API/v1/租户，

　　//可以将路径重写为与规则一样的名称，即你在开发时省去了再添加美国石油学会(美国石油协会)的操作

　　}

　　}

　　},

　　//各种开发服务器设置

　　主机：“本地主机”，//可以被进程.环境.主机覆盖

　　端口：8080,//可以被process.env.PORT覆盖，如果端口正在使用，将确定一个空闲端口

　　autoOpenBrowser: false，

　　错误覆盖：真，

　　notifyOnErrors: true，

　　poll: false，//https://web pack。js。org/configuration/dev-server/# devserver-watch选项-

　　//使用Eslint加载器？

　　//如果为没错，您的代码将在绑定和

　　//林挺错误和警告将显示在控制台中。

　　使用列表：真的，

　　//如果为没错，伊斯林错误和警告也将显示在错误覆盖中

　　//在浏览器中。

　　showeslninterrossinoverlay:假，

　　/**

　　*来源地图

　　*/

　　//https://web pack . js . org/configuration/dev tool/# development

　　开发工具："廉价模块评估源地图",

　　//如果在开发者工具中调试某视频剪辑软件文件时遇到问题，

　　//将此设置为错误-它*可能*有所帮助

　　//https://vue-loader . vue js . org/en/options . html # cache busting

　　破坏声望：没错，

　　cssSourceMap: true

　　},

　　构建：{

　　//index.html的模板

　　index: path.resolve(__dirname，./dist/index.html )，

　　//路径

　　资产根：路径。resolve(_ _ dirname，./dist )，

　　资产子目录：静态，

　　资产公共路径："/"，

　　/**

　　*来源地图

　　*/

　　productionSourceMap: true，

　　//https://web pack . js . org/configuration/dev tool/# production

　　开发工具：“# source-map”，

　　//Gzip默认关闭许多流行的静态主机，如

　　//浪涌或者网络生活已经为你压缩了所有静态资产。

　　//在设置为“真实”之前，请确保：

　　//npm安装-保存-开发压缩-网络包-插件

　　生产邮编：假，

　　productionGzipExtensions: [js ， css]，

　　//运行带有额外参数的生成命令

　　//在构建完成后查看包分析器报告：

　　//`npm运行构建-报告

　　//设置为"真"或"假"以始终打开或关闭它

　　联邦分析员报告：过程。环境。NPM _配置_报告

　　}

　　}

　　输入账号密码，实现简单的注册，登录功能。

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。