一步步使用SpringBoot实现登录和用户管理功能源码分享

　　前后端分离开发是当今开发的主流。本篇文章从零开始，一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能，以及登录之后对用户的管理功能。通过这个例子，可以快速入门SpringBoot+Vue前后端分离的开发。
　　有需要SpringBoot和Vue实现登录和用户管理功能的转发+关注之后私信我关键字【源码】即可免费获取哦
　　1、前后端分离简介
　　在这里首先简单说明一下什么是 前后端分离 和 单页式应用 ： 前后端分离  的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而  单页面应用 （single page web application，SPA），就是只有一个页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
　　2、示例所用技术简介
　　简单说明以下本示例中所用到的技术，如图所示：
　　后端 SpringBoot：SpringBoot是当前最流行的Java后端框架。可以简单地看成简化了的、按照约定开发的SSM(H)， 大大提升了开发速度。官网地址：https://spring.io/projects/spring-boot MybatisPlus: MyBatis-Plus（简称 MP）是一个 MyBatis的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。官网地址：https://mybatis.plus/
　　前端： Vue :Vue 是一套用于构建用户界面的 渐进式框架 。尽管Vue3已经发布，但是至少一段时间内主流应用还是vue2.x，所以示例里还是采用Vue2.x版本。官网地址：https://cn.vuejs.org/ ElementUI: ElementUI 是目前国内最流行的Vue UI框架。组件丰富，样式众多，也比较符合大众审美。虽然一度传出停止维护更新的传闻，但是随着Vue3的发布，官方也Beta了适配Vue3的ElementPlus。官网地址：https://element.eleme.cn/#/zh-CN
　　数据库： MySQL：MySQL是一个流行的开源关系型数据库。官网地址：https://www.mysql.com/
　　上面已经简单介绍了本实例用到的技术，在开始本实例之前，最好能对以上技术具备一定程度的掌握。 一、环境准备1.1、安装Node.js
　　前端项目使用  veu-cli 脚手架， vue-cli 需要通过 npm 安装，是而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。
　　下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入  node -v ，检查是否安装成功。
　　如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入  npm -v  查看版本号
　　1.2、配置NPM源
　　NPM原始的源是在国外的服务器上，下载东西比较慢。
　　可以通过两种方式来提升下载速度。 下载时指定源 //本次从淘宝仓库源下载 npm --registry=https://registry.npm.taobao.org install  配置源为淘宝仓库 //设置淘宝源 npm config   set   registry https://registry.npm.taobao.org
　　也可以安装 cnpm ，但是使用中可能会遇到一些问题。 1.3、安装vue-cli脚手架
　　使用如下命令安装  vue-cli  脚手架: npm install -g vue-cli
　　注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过  npm install -g @vue/cli  安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控等内容。 1.4、VS Code
　　前端的开发工具采用的当下最流行的前端开发工具 VS code。
　　下载对应的版本，一步步安装即可。安装之后，初始界面如下：
　　VS Code安装后，我们一般还需要搜索安装一些所需要的插件辅助开发。安装插件很简单，在搜索面板中查找到后，直接安装即可。 二、项目搭建2、后端项目搭建2.1、后端项目创建
　　后端项目创建如下： 打开Idea,  New Project  ，选择  Spring Intializr
　　填入项目的相关信息
　　SpringBoot版本选择了 2.3.8 , 选择了web 和 MySQL驱动依赖
　　创建完成的项目
　　2.3.2、数据库创建
　　数据库设计非常简单，只有一张表。
　　2.3.3、相关代码
　　MP提供了代码生成器的功能，可以按模块生成Controller、Service、Mapper、实体类的代码。在数据库表比较多的情况下，能提升开发效率。官网给出了一个Demo，有兴趣的可以自行查看。 实体类 /**  * @Author: 三分恶  * @Date: 2021/1/17  * @Description: 用户实体类  **/ @TableName(value = ＂user＂) public class User {     @TableId(type = IdType.AUTO)     private Integer id;     private String loginName;     private String userName;     private String password;     private String sex;     private String email;     private String address;     //省略getter、setter等 } Mapper接口：继承BaseMapper即可 /**  * @Author: 三分恶  * @Date: 2021/1/17  * @Description: TODO  **/  public interface UserMapper extends BaseMapper { }
　　OK，到此单表的增删改查功能已经完成了，是不是很简单。 2、后端开发2.1、统一结果封装
　　这里我们创建了一个 Result 类，用于异步统一返回的结果封装。一般来说，结果里面有几个要素必要的 是否成功，可用 code 表示（如 200 表示成功，400 表示异常） 结果消息 结果数据 /**  * @Author: 三分恶  * @Date: 2021/1/17  * @Description: 统一结果封装  **/  public class Result {     //相应码     private Integer code;     //信息     private String message;     //返回数据     private Object data;     //省略getter、setter、构造方法 }
　　实际上由于响应码是固定的， code  属性应该是一个枚举值，这里作了一些简化。 2.2、登录业务实体类
　　为了接收前端登录的数据，我们这里创建了一个登录用的业务实体类： public class LoginDTO {     private String loginName;     private String password;     //省略getter、setter }
　　启动后端项目：
　　访问登录界面，效果如下：
　　这样一个简答的登录就完成了，接下来，我们会对这个登录进一步完善。 四、登录功能完善
　　前面虽然实现了登录，但只是一个简单的登录跳转，实际上并不能对用户的登录状态进行判别，接下来我们进一步完善登录功能。
　　在最后一页可以看到我们添加的用户：
　　效果：
　　六、总结
　　通过这个示例，相信大家已经对  SpringBoot+Vue  前后端分离开发有了一个初步的掌握。
　　当然，由于这个示例并不是一个完整的项目，所以技术上和功能上都非常潦草
　　有兴趣的同学可以进一步地去扩展和完善这个示例。
　　有需要SpringBoot和Vue实现登录和用户管理功能的转发+关注之后私信我关键字【源码】即可免费获取哦！