SpringBoot整合vue-admin-template实现登录

vue-admin-template简介

前后端分离开发模式越来越受开发人员的喜爱，开源项目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的整合

SpringBoot整合vue-admin-template

在IDEA中新建一个SpringBoot项目，创建过程这里不作介绍

技术栈

SpringBoot2.3.4
jjwt0.9.1
Mybatis-Plus3.4.0
Maven3.6.1
MySql5.7

pom.xml中引入依赖

<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>

application.yml中添加配置

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开头

修改.env.development文件中的请求地址

修改vue.config.js文件

修改用户登录页面

将默认的密码修改为数据库已有的密码或者去掉默认密码

测试

启动后台系统和前端项目，浏览器输入访问地址http://localhost:9528/

点击登录按钮时，页面报错，这是因为前后端不同的端口，存在跨域问题，在登录控制器上加上@CrossOrigin注解即可，再次启动项目，访问http://localhost:9528/

至此，SpringBoot整合vue-admin-template实现登录功能完成，完整代码详见码云地址
需要了解SpringBoot整合vue-admin-template实现菜单动态加载的详细步骤，请参阅SpringBoot2.3整合vue-admin-template实现动态路由