搜索了关于spring boot+vue的前后端分离实践项目很多，但是对于最基础登录功能的博客却是几年前的了。于是学习了好几个大神的文章后，自己通过实践解决了vue改版等众多问题后实现了登录功能。
二、环境工具 vue2.0element-uiaxiosvue-routervuexJavaspring-bootvscodeidea 三、搭建后端spring-boot框架 1、选择Spring Initializr创建新项目展现最终项目结构如下，方便下面步骤实现
2、CommonResult类 3、IErrorCode 接口 4、ResultCode 枚举 5、User类 6、LoginController类 7、修改DemoApplication 8、更改端口号在application.ymlVue前端位于8080端口，后端修改到8088，不要在同一端口：
9、不同端口需要解决跨域问题Vue端口位于8080，需要访问8088端口服务器，需要修改CorsConfig 类，在后端处理即可。
到这里，springboot端的配置已经全部完成，运行可以成功启动。
四、搭建前端Vue框架 1、创建Vue项目创建Vue项目可以使用电脑自带cmd，也可以使用gitbush，这里我通过vscode自带终端里面的gitbush进行创建。
（“code1”为vue项目名，可以自己设置）
（由于vue3对于以前的依赖和一些代码的不兼容，而且目前适用范围不是很广，这里我就继续选择vue2进行操作）
创建完成后，进入项目并运行，检查项目创建是否有误
运行成功图如下：
浏览器进入已经运行的vue项目
上面为vue2的默认界面，可以成功进入代表创建项目成功，接下来便开始添加本次功能的依赖
2、添加项目依赖框架这里可以继续使用gitbash通过代码进行添加，但是由于目前vue版本和依赖版本更新的有些乱，也因为我自己技术水平不够，代码添加的依赖经常不兼容跑错，于是直接使用Vue项目管理器的可视化编辑，大大提高依赖兼容成功性
2.1 使用Vue项目管理器添加依赖进入code1项目后，使用vue ui 命令打开Vue项目管理器
随即会跳转到浏览器，未跳转可以自行输入端口进入
在依赖里面搜索我们所需的四个依赖：
element-ui，一个 element 风格的 UI 框架axios，用于网络请求Vuex，用于管理状态vue-router，用于实现两个 Vue 页面的跳转手动添加后一般都是适应当前vue版本的，不用担心兼容报错问题
2.2 使用命令代码添加依赖进入code1项目后，按照下列命令依次添加依赖（由于本人学艺不精，命令添加始终无法成功运行element框架，有成功的大神希望可以评论或者私信指导一二，谢谢！）
3、测试运行项目添加成功依赖后，输入命令npm run serve运行，出现如下图界面即为成功
这里先贴图一下最后的Vue目录架构：
4、编写view层面代码 4.1 登陆页面：login.vue 4.2 登陆成功页面：success.vue 4.3 登陆失败页面：error.vue 5、设置路由统一管理页面 5.1 创建路由文件建立的 router 文件夹下创建一个 index.js 文件，内容如下
5.2 将创建好的路由引入到项目中在项目的 src 目录根节点下，找到 main.js，修改内容如下：
5.3 设置路由的出入口路由还需要一个出入口，这个出入口用来告诉路由将路由的内容显示在这里。上面 main.js 配置的第一个 vue 显示页面为 App.vue ，因此我们修改 App.vue 内容如下：
6、配置网络请求 6.1 封装请求工具使用axios 这个网络请求构架进行 http 的请求，在 utils 包下封装一个请求工具类 request.js：
6.2 登录页面接口 API在 api 文件夹下，创建一个登录API文件login.js：
6.3 封装 axios使用 Vuex，先封装Vuex 中的module，在 store 文件夹下创建一个 modules 文件夹，在此文件夹下创建 user.js 文件：
创建 Vuex，在 store 文件夹下创建一个 index.js 文件：
将 Vuex 引入项目，修改之前的 main.js 文件如下：
五、实现登录功能 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登录功能内容请搜索七叶笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持七叶笔记！
