前后端分离开发模式越来越受开发人员的喜爱，开源项目vue-admin-template 是一个后台前端解决方案，它基于 vue 和 element-ui实现。更多详情请阅读vue-template-admin官网，vue-admin-template项目是其基础模板，本文基于vue-admin-template实现与SpringBoot的整合
从github上下载源码，github地址
将源码导入Visual Studio Code开发工具，在终端执行npm install安装依赖，前提是本机已安装了vue和node.js，需要参考如何安装Visual Studio Code的小伙伴，可以阅读Win10安装VSCode详细步骤，需要了解如何安装node.js和vue的小伙伴，可以参考win10安装node.js和vue并配置环境变量。依赖安装完成后，执行npm run dev命令启动项目，项目启动成功后，会直接弹出登录界面
也可以看VSCode终端的启动日志
直接点击登录，进入首页
以上是vue-admin-template自带的登录功能，点击登录时，F12打开浏览器调试界面，在network下面可以看到登录的请求地址和请求参数以及需要返回的数据。
也就是说要实现数据库登录，我们需要在后端提供一个登录接口，并接收username和password请求字段。后台需要给前端返回一个状态码2000和一个token值。
登录时还访问了一个info接口，获取登录用户的信息
info接口前端会传登录接口返回的token作为信息查询的请求参数，需要返回一个状态码和data数据集，其中有角色roles、介绍introduction、头像地址avatar和名称name四个字段。下面介绍如何使用SpringBoot搭建后台管理系统实现与vue-admin-template的整合
在IDEA中新建一个SpringBoot项目，创建过程这里不作介绍
SpringBoot2.3.4
jjwt0.9.1
Mybatis-Plus3.4.0
Maven3.6.1
MySql5.7
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatis-plus.version}</version>
</dependency>
<!--token生成和解析-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>${jjwt.version}</version>
</dependency>
server:
port: 8080
servlet:
context-path: /
spring:
devtools:
restart:
enabled: true #开启热部署
datasource:
type: com.zaxxer.hikari.HikariDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.108.11:3306/baojia?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: root
hikari:
minimum-idle: 5 #最小空闲连接数
maximum-pool-size: 15 #最大连接数，默认10
auto-commit: true #自动提交，默认true
idle-timeout: 30000 #空闲连接存活最大时间，默认600000(10分钟)
pool-name: BaojiaHikariCP #连接池名称
max-lifetime: 1800000 #最长生命周期，默认1800000(30分钟)，0表示无限生命周期
connection-timeout: 30000 #连接超时时间，默认30秒
connection-test-query: SELECT 1 #连接测试查询
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
mybatis-plus:
mapper-locations: classpath:mapper/**/*Mapper.xml
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
type-aliases-package: com.xlhj.baojia.entity
logging:
config: classpath:logback-spring.xml
level:
com.xlhj.baojia: debug
jwt:
header: Authorization
tokenSecret: qazxswedcvfrtgbnhyujmkiolp #密钥
tokenExpired: 3600000 #token过期时间(30分钟)
/**
* 登录
* @return
*/
@PostMapping("/login")
public ResultData login(@RequestBody LoginBody loginBody) {
try {
SysUser currentUser = userService.validateUser(loginBody);
if (currentUser != null) {
String token = jwtToken.generateToken(currentUser);
return ResultData.ok(ResultCode.SUCCESS, "登录成功!").data("token", token);
} else {
return ResultData.error(ResultCode.ERROR, "用户名或密码不正确!");
}
} catch (Exception e) {
return ResultData.error(ResultCode.ERROR, e.getMessage());
}
}
/**
* 获取用户信息
* @return
*/
@GetMapping("info")
public ResultData getInfo(@RequestParam String token) {
String username = jwtToken.getUsernameFromToken(token);
SysUser currentUser = userService.selectUserByUsername(username);
Set<String> roleSet = new HashSet<>();
if (currentUser != null) {
roleSet = roleService.selectRoleCodeByUserId(currentUser.getId());
Boolean flag = jwtToken.validateToken(token, currentUser.getUserName());
if (flag && !roleSet.isEmpty()) {
return ResultData.ok().data("roles", roleSet).data("name", currentUser.getUserName()).data("avatar", currentUser.getAvatar());
} else {
return ResultData.error();
}
} else {
return ResultData.error();
}
}
将src/api/下的user.js文件中url统一修改为/user开头
将默认的密码修改为数据库已有的密码或者去掉默认密码
启动后台系统和前端项目，浏览器输入访问地址http://localhost:9528/
点击登录按钮时，页面报错，这是因为前后端不同的端口，存在跨域问题，在登录控制器上加上@CrossOrigin注解即可，再次启动项目，访问http://localhost:9528/
至此，SpringBoot整合vue-admin-template实现登录功能完成，完整代码详见码云地址
需要了解SpringBoot整合vue-admin-template实现菜单动态加载的详细步骤，请参阅SpringBoot2.3整合vue-admin-template实现动态路由