在前端框架vue-element-admin这个项目中，有一个简洁轻量型的项目vue-admin-template，这里面初始化的内容少，适合初学者，防止一上来就被那么多的代码弄晕。
快速安装2 个npm install的任意选择一个即可，下面的使用的是国内的淘宝镜像，速度会更快些。
启动之后就会看到登录页，说明安装成功。
点击登录进去，就可以看到首页了。
但是我们还没实现后端，怎么就登录了？这是因为前端框架里目前的请求都是走的它内置的 mock，所以等会要去开发后端接口替换掉这些 mock。
二、后端环境搭建 创建应用直接使用 idea 创建一个 springboot 应用即可，可以使用Spring Initializr来快速创建。
完事之后就要在pom.xml里添加响应依赖即可。
我这里是创建的时候勾选了一些项目，自动会生成出来依赖。
重点是mybatis-plus-core这个依赖要添加好，后面要用它进行数据库交互。
配置 application.properties这里目前主要配置数据库的连接信息。我的mysql安装在华为云上，系统是 centos8。
spring.datasource.hikari.max-lifetime：默认数据源连接池，连接最大存活时间，设置长一些，防止长时间不操作断开连接，不方便调试。
server.servlet.context-path：配置上下文路径，比如我的登录接口路径为/user/login，请访问的时候就是localhost:8080/bloomtest/user/login。
三、实现登录登录就涉及到用户，还会涉及到权限管理之类，但是这个不作为当前的重点，目前只是需要可以正常登录即可。
F12 可以查看 mock 登录时候的请求，共有 2 个接口，所以就参照 mock 返回的数据来返回对应真实的数据。
代码目前大致有如下的结构，先眼熟即可。
1. mysql 建表登录的话，就是拿前端传参过来的用户名和密码，看下是否存在数据库用户表里，存在就可以登录，不存在就返回失败。
所以，在此之前还需要建张 user 表：
然后手动新增了 3 个用户：
2. 后端-实现 /login 接口(1)创建实体类 User
注解神马的在之前 spring 相关技术栈里已经有过介绍，有需要的可以去翻看或者直接百度即可。
(2)创建接口 UserDAO
这里使用 mybatis-plus 框架，在文末会附上之前学习此框架的内容供学习参考。
(3)创建Service层 UserService
这里就是真正处理业务逻辑的地方，这里提供方法直接给后面的 controller 层调用。
这里就与 mysql 进行交互了，用到的就是 mybatis-plus 的语法，详见文末附上的文章链接。
这里方法返回 true 表示库里存在该用户，即可以登录。否则返回 false。
(4)创建Controller层 UserController
这里就是接收前端请求的地方了。
Controller 层调用 Service层，Service层 再调用 dao 层与 DB进行交互。
这里返回了是一个Result类型的结果，这里是为了更好的返回数据，进行了一个类的封装。
在 common 包下新建了一个类Result：
另外，这里的传参UserRequest user，也是为了便于获取请求参数，而创建的类。
(5)启动应用，测试 /login 接口
直接使用 postman 进行调用。
换个不存在的传参。
接口正常。
3. 前端-修改代码实现登录(1)修改 .env.development
这样前端请求访问的就是后端的http://127.0.0.1:8080地址和端口。
(2)修改 srcapiuser.js
这里就是前端请求的接口路径，替换成我们实现的 /login，
(3)srcutils equest.js
至于我后端接口返回成功code 为什么是 20000呢？是因为前端框架里做了统一的封装，这里喜欢的话你自己也可以改成别的。
(4)srcviewsloginindex.vue
这里就是存放页面的地方了，是后面前端代码的主要阵地。
从Login按钮的绑定的事件知道handleLogin就是用来处理登录的方法，不过这里暂时不需要进行改动。
重新构建后点击登录，可以看到请求了真正的后端接口。
可是报错了。
4. 解决跨域报错是跨域问题，解决跨域，可以在后端进行处理，增加一个配置类。
重试一下，登录请求成功了，但是不能跳转，因为还有个接口没实现，那就是/useInfo。
5. 后端-实现 /useInfo 接口套路跟上面一样，但是这里因为直接写一个与 mock 返回的一样的数据，所以直接在 controller 类下新增一个控制器方法直接处理返回。
重启应用，可以正常登录。
6. 后端-实现 /logout 接口最后再补充一个退出登录的接口。
重启测试，点击头像悬浮展示的logout，成功退出到登录页。
四、小结本篇内容主要是前后环境调通，以及基础登录的实现，后续就可以正常先进行重要功能的开发了。
附上之前整理的 mybatis-plus 的学习笔记，简单明了易上手，仅供参考。
【mybatis-plus】CRUD必备良药，mybatis的好搭档
【mybatis-plus】主键id生成、字段自动填充
【mybatis-plus】什么是乐观锁？如何实现“乐观锁”
【mybatis-plus】分页、逻辑删除
【mybatis-plus】条件查询
希望大家以后多多支持七叶笔记！
