springboot vue登录注册,springboot vue 单点登录

　　一.导言二环境工具。设置后端弹簧引导框架1。选择Spring Initializr创建一个新项目2。CommonResult类3。IErrorCode接口4。结果代码枚举5。用户类别6。LoginController类7。修改DemoApplication8，更改application.yml9中的端口号，不同端口需要解决跨域问题。四。构建前端Vue框架1，创建Vue项目2，添加项目依赖框架2.1。使用Vue项目管理器添加依赖2.2。使用命令代码添加依赖项3。测试并运行项目4。编写视图级代码4.1登录页面：login.vue4.2登录成功页面：success.vue4.3登录失败页面：error.vue5、设置路由的统一管理页面5.1创建路由文件5.2将创建的路由引入项目5.3设置路由的出入口6、网络请求6.1封装请求工具6.2登录页面接口API6.3封装axios 5。实现登录功能1。启动两端程序，输入locallhost:80802，输入账号密码2.1正确登录2.2错误登录汇总。

　　10-1010上搜了很多关于spring boot vue前端分离的实用项目，但是最基本的登录功能的博客都是好几年前的了。于是研究了几篇大神的文章，通过实践解决了vue修改等很多问题，实现了登录功能。

一、介绍

　　00-1010最终的项目结构如下图所示，方便后面的步骤。

二、环境工具

包cn . Eli . vue . API；public类CommonResultT { private long code私有字符串消息；私人测试数据；protected common result(){ } protected common result(长码，字符串消息，T数据){ this.code=codethis.message=messagethis.data=data}/* * *成功返回结果* * @ param data */public static t common resultt success(tdata)获得的数据{ return new common resultt(result code . success . get code()、resultcode.success.getmessage()、data)；}/* * *成功返回结果* * @param data获取数据* @param消息提示信息*/public static t common result t success(tdata，string message){ return new common result t(result code . success . get code()，message，data)；}/* * *返回结果失败* * @param errorCode错误代码*/public static t common result t Failed(ierrorcode error code){ return new common result t(error code . get code()、errorcode.getmessage()、null)；}/* * *返回结果失败* * @param消息提示信息*/public static t common resultt Failed(字符串消息){ return new common resultt(result code . Failed . get code()，message，

　　null); } /** * 失败返回结果 */ public static <T> CommonResult<T> failed() { return failed(ResultCode.FAILED); } /** * 参数验证失败返回结果 */ public static <T> CommonResult<T> validateFailed() { return failed(ResultCode.VALIDATE_FAILED); } /** * 参数验证失败返回结果 * * @param message 提示信息 */ public static <T> CommonResult<T> validateFailed(String message) { return new CommonResult<T>(ResultCode.VALIDATE_FAILED.getCode(), message, null); } /** * 未登录返回结果 */ public static <T> CommonResult<T> unauthorized(T data) { return new CommonResult<T>(ResultCode.UNAUTHORIZED.getCode(), ResultCode.UNAUTHORIZED.getMessage(), data); } /** * 未授权返回结果 */ public static <T> CommonResult<T> forbidden(T data) { return new CommonResult<T>(ResultCode.FORBIDDEN.getCode(), ResultCode.FORBIDDEN.getMessage(), data); } public long getCode() { return code; } public void setCode(long code) { this.code = code; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public T getData() { return data; } public void setData(T data) { this.data = data; }}

3、IErrorCode接口

package cn.eli.vue.api; public interface IErrorCode { long getCode(); String getMessage();

4、ResultCode枚举

package cn.eli.vue.api; public enum ResultCode implements IErrorCode { SUCCESS(200, "操作成功"), FAILED(500, "操作失败"), VALIDATE_FAILED(404, "参数检验失败"), UNAUTHORIZED(401, "暂未登录或token已经过期"), FORBIDDEN(403, "没有相关权限"); private long code; private String message; private ResultCode(long code, String message) { this.code = code; this.message = message; } public long getCode() { return code; } public String getMessage() { return message; }}

5、User类

package cn.eli.vue.entity; public class User { private int id; private String username; private String password; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; }}

6、LoginController类

package cn.eli.vue.controller; import cn.eli.vue.api.CommonResult;import cn.eli.vue.entity.User;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RestController; @RestControllerpublic class LoginController { @RequestMapping(value = "/admin/login", method = RequestMethod.POST) public CommonResult login(@RequestBody User user) { if (user.getUsername().equals("test") && user.getPassword().equals("123456")) return CommonResult.success("登录成功"); else return CommonResult.validateFailed(); }}

7、修改DemoApplication

package cn.eli.vue; import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplicationpublic class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } }

8、更改端口号在application.yml

Vue前端位于8080端口，后端修改到8088，不要在同一端口：

server: port: 8088

9、不同端口需要解决跨域问题

Vue端口位于8080，需要访问8088端口服务器，需要修改CorsConfig类，在后端处理即可。

package cn.eli.vue.config; import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.web.cors.UrlBasedCorsConfigurationSource;import org.springframework.web.filter.CorsFilter; @Configurationpublic class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1 corsConfiguration.addAllowedHeader("*"); // 2 corsConfiguration.addAllowedMethod("*"); // 3 return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 4 return new CorsFilter(source); }}

到这里，springboot端的配置已经全部完成，运行可以成功启动。

四、搭建前端Vue框架

1、创建Vue项目

创建Vue项目可以使用电脑自带cmd，也可以使用gitbush，这里我通过vscode自带终端里面的gitbush进行创建。

vue create code1

（code1为vue项目名，可以自己设置）

　　（由于vue3对于以前的依赖和一些代码的不兼容，而且目前适用范围不是很广，这里我就继续选择vue2进行操作）

　　创建完成后，进入项目并运行，检查项目创建是否有误

cd code1npm run serve

运行成功图如下：

　　浏览器进入已经运行的vue项目

　　上面为vue2的默认界面，可以成功进入代表创建项目成功，接下来便开始添加本次功能的依赖

2、添加项目依赖框架

这里可以继续使用gitbash通过代码进行添加，但是由于目前vue版本和依赖版本更新的有些乱，也因为我自己技术水平不够，代码添加的依赖经常不兼容跑错，于是直接使用Vue项目管理器的可视化编辑，大大提高依赖兼容成功性

2.1 使用Vue项目管理器添加依赖

进入code1项目后，使用vue ui 命令打开Vue项目管理器

vue ui

　　随即会跳转到浏览器，未跳转可以自行输入端口进入

　　在依赖里面搜索我们所需的四个依赖：

　　element-ui，一个 element 风格的 UI 框架axios，用于网络请求Vuex，用于管理状态vue-router，用于实现两个 Vue 页面的跳转

　　手动添加后一般都是适应当前vue版本的，不用担心兼容报错问题

2.2 使用命令代码添加依赖

进入code1项目后，按照下列命令依次添加依赖（由于本人学艺不精，命令添加始终无法成功运行element框架，有成功的大神希望可以评论或者私信指导一二，谢谢！）

vue add elementnpm install axiosnpm install vuex --savenpm install vue-router

3、测试运行项目

添加成功依赖后，输入命令npm run serve运行，出现如下图界面即为成功

　　这里先贴图一下最后的Vue目录架构：

4、编写view层面代码

4.1 登陆页面：login.vue

<template> <div> <el-card class="login-form-layout"> <el-form autocomplete="on" :model="loginForm" ref="loginForm" label-position="left" > <div style="text-align: center"> <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon> </div> <h2 class="login-title color-main">mall-admin-web</h2> <el-form-item prop="username"> <el-input name="username" type="text" v-model="loginForm.username" autocomplete="on" placeholder="请输入用户名" > <span slot="prefix"> <svg-icon icon-class="user" class="color-main"></svg-icon> </span> </el-input> </el-form-item> <el-form-item prop="password"> <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autocomplete="on" placeholder="请输入密码" > <span slot="prefix"> <svg-icon icon-class="password" class="color-main"></svg-icon> </span> <span slot="suffix" @click="showPwd"> <svg-icon icon-class="eye" class="color-main"></svg-icon> </span> </el-input> </el-form-item> <el-form-item style="margin-bottom: 60px"> <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin" >登录</el-button> </el-form-item> </el-form> </el-card> </div></template> <script>export default { name: "login", data() { return { loginForm: { username: "admin", password: "123456" }, loading: false, pwdType: "password", }; }, methods: { showPwd() { if (this.pwdType === "password") { this.pwdType = ""; } else { this.pwdType = "password"; } }, handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true; this.$store .dispatch("Login", this.loginForm) .then(response => { this.loading = false; let code = response.data.code; if (code == 200) { this.$router.push({ path: "/success", query: {data: response.data} }); } else { this.$router.push({ path: "/error", query: { message: response.data.message } }); } }) .catch(() => { this.loading = false; }); } else { // eslint-disable-next-line no-console console.log("参数验证不合法！"); return false; } }); } }};</script> <style scoped>.login-form-layout { position: absolute; left: 0; right: 0; width: 360px; margin: 140px auto; border-top: 10px solid #409eff;} .login-title { text-align: center;} .login-center-layout { background: #409eff; width: auto; height: auto; max-width: 100%; max-height: 100%; margin-top: 200px;}</style>

4.2 登陆成功页面：success.vue

<template> <div> <h1>Welcome!{{msg}}, <br>操作信息: {{mes}},<br>状态码{{cod}}</h1> </div></template><script>export default { data() { return { msg: this.$route.query.data.data, mes: this.$route.query.data.message, cod: this.$route.query.data.code }; },}</script>

4.3 登陆失败页面：error.vue

<template> <div> <h1>登录错误：{{msg}}</h1> </div></template><script>export default { data() { return { msg: null }; }, created() { this.msg = this.$route.query.message; }};</script>

5、设置路由统一管理页面

5.1 创建路由文件

建立的 router文件夹下创建一个 index.js文件，内容如下

import Vue from vue import VueRouter from vue-router Vue.use(VueRouter); export const constantRouterMap = [ { path: /, component: () => import(@/views/login)}, { path: /success, component: () => import(@/views/success)}, { path: /error, component: () => import(@/views/error), hidden: true }] export default new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })

5.2 将创建好的路由引入到项目中

在项目的 src目录根节点下，找到 main.js，修改内容如下：

import Vue from vueimport App from ./App.vueimport ./plugins/element.jsimport router from ./router Vue.config.productionTip = false new Vue({ render: h => h(App), router, }).$mount(#app)

5.3 设置路由的出入口

路由还需要一个出入口，这个出入口用来告诉路由将路由的内容显示在这里。上面 main.js配置的第一个 vue显示页面为 App.vue ，因此我们修改App.vue内容如下：

<template> <div id="app"> <router-view/> </div></template> <script> export default { name: App }</script>

6、配置网络请求

6.1封装请求工具

使用axios 这个网络请求构架进行http的请求，在 utils包下封装一个请求工具类 request.js：

import axios from axios import baseUrl from ../api/baseUrl const service = axios.create({ baseURL: baseUrl, timeout: 15000, })export default service

6.2登录页面接口 API

在 api文件夹下，创建一个登录API文件login.js：

import request from @/utils/request export function login(username, password) { return request({ url: /admin/login, method: post, data: { username, password } })}

6.3封装 axios

使用 Vuex，先封装Vuex 中的module，在 store文件夹下创建一个 modules文件夹，在此文件夹下创建user.js文件：

import { login } from @/api/login const user = { actions: { Login({ commit }, userInfo) { const username = userInfo.username.trim() return new Promise((resolve, reject) => { login(username, userInfo.password).then(response => { commit() resolve(response) }).catch(error => { reject(error) }) }) }, }}export default user

创建 Vuex，在 store文件夹下创建一个 index.js文件：

import Vue from vueimport Vuex from vuex import user from ./modules/user Vue.use(Vuex) export default new Vuex.Store({ state: { }, getters: { }, mutations: { }, actions: { }, modules: { user }})

将Vuex 引入项目，修改之前的 main.js文件如下：

import Vue from vueimport App from ./App.vueimport router from ./routerimport store from ./storeimport ./plugins/element.js Vue.config.productionTip = false new Vue({ router, store, render: h => h(App)}).$mount(#app)

五、实现登录功能

1、启动两端程序，进入locallhost:8080

2、输入账号密码

2.1 正确登录

点击登录，进入后还会显示登陆状态、操作信息和状态码，

　　注意：这里修改了账户名为：test

2.2 错误登录

总结

到此，就通过springboot+vue实现了最基础的登录功能。在这次学习中借鉴了Eli Shaw大神的文章，由于vue版本及其依赖更新换代比较快，springboot也有部分更新不可用的，以前的代码会有报错，这篇文章希望可以提供一些帮助，有很多不足和缺点问题也希望可以提出，十分感谢！

　　在Github上有这个功能完整的项目：mirrors / macrozheng / mall-admin-web · GitCode

　　到此这篇关于springboot+vue实现登录功能的文章就介绍到这了,更多相关springboot+vue登录功能内容请搜索盛行IT以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行IT！

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

目录