使用SpringBoot+Vue3来实现前后端登录注册功能（新手入门，带你一步一步实现）

记得开心一点嘛

于 2024-08-02 22:21:04 发布

阅读量832

点赞数 18

分类专栏： JavaWeb后端开发技术栈 JavaWeb前端开发技术栈文章标签： vue.js 前端后端 spring boot

本文链接：https://blog.csdn.net/2302_79840586/article/details/140874396

版权

JavaWeb后端开发技术栈同时被 2 个专栏收录

15 篇文章 5 订阅

订阅专栏

JavaWeb前端开发技术栈

3 篇文章 2 订阅

订阅专栏

一.所用技术栈：

二.前端创建工程：

1.使用elementplus展开前端页面格式布局：

②创建user.js来调用后端接口发送请求：

（5）前端登录功能开发：

（6）优化axios响应拦截器：

3.使用elementplus修改浏览器提示框：

（3）创建拦截器interceptor来统一拦截令牌完成登录验证：

本内容相关资料来源黑马Springboot+Vue3课程内的大事件项目，也希望你看完能够有所收获，本文狂码两万多字，话不多说进入正题 =>

一.所用技术栈：

我们在学习这个需要哪些技术栈呢？

Vue3
Java + SpringBoot
Jwt令牌
Md5加密
Element-plus
axios

下面的博客是三层框架的逻辑结构：Java三层框架的解析_java 三层-CSDN博客

二.前端创建工程：

1.使用elementplus展开前端页面格式布局：

下面先展示一下登录注册的前端页面原型：

这里很显然我们只需要根据 elementplus 进行渲染页面就好了。

至于详细步骤我们就不过哆嗦，指详细说明如何使用 Vue3 来添加我们的事件。

下面是前端源代码：（我们在src/views/目录下建Login.vue文件）

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)
</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-if="isRegister">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = false">
                        ← 返回
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-else>
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item class="flex">
                    <div class="flex">
                        <el-checkbox>记住我</el-checkbox>
                        <el-link type="primary" :underline="false">忘记密码？</el-link>
                    </div>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>登录</el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = true">
                        注册 →
                    </el-link>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
            url('@/assets/login_bg.jpg') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>

2.基于Vue3的使用来实现登录与注册：

（1）定义数据模型：

为了方便操作以及数据的双向交互，我们在Login.vue文件<script>内定义数据模型 =>

const registerData = ref({
    username: '',    //用户名
    password: '',    //密码
    rePassword: '',  //重新输入密码
})

（2）:model绑定表单：

既然我们已经定义完数据模型，我们就需要让数据与表单建立联系以此来双向绑定：

我们现在父组件声明 :model=" "，随后给每一个表单项绑定值 v-model=""

~~这里不全部代码展示~~

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" > 
<el-form-item>
    <h1>注册</h1>
</el-form-item>
<el-form-item">
    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
</el-form-item>
<el-form-item">
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
</el-form-item>
<el-form-item>
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
</el-form-item>
</el-form>

（3）表单数据校验：

①定义表单校验规则：

required => true代表必须填值
message => 提示信息
trigger: 'blur' => 离焦时开始校验(也就是鼠标刚点一下然后点另外一处地方开始校验是否满足规则，不满足给出message提示信息)
min,max => 最小最大长度
validator => 执行后面的函数来校验

//校验密码的函数checkRepassword
const checkRepassword = (rule,value,callback) =>{//规则，值，回调函数
    if(value === ''){
        callback(new Error('请再次确认密码'));
    }else if(value !== registerData.value.password){
        callback(new Error('请确保再次输入的密码一样'));
    }else{
        callback();
    }
}
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }, 
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    rePassword: [
        {validator: checkRepassword , trigger: 'blur'}
    ],
}

②给表单绑定校验规则：

先给父组件添加属性:rules="规则"，然后给每个表单项指定对应的校验规则prop=" "

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules"> 
<el-form-item>
    <h1>注册</h1>
</el-form-item>
<el-form-item prop="username">
    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
</el-form-item>
<el-form-item prop="password">
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
</el-form-item>
<el-form-item prop="rePassword">
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
</el-form-item>

这样我们就可以通过前端判断输入格式是否符合标准。

（4）前端注册功能开发：

我们以下面的请求路径以及参数来开发 =>

①创建request.js请求工具：

不理解这部分知识请查看下面的博客：vue基础知识总结（2）--- axios的使用-CSDN博客

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';  //后面会涉及到跨域问题
const instance = axios.create({baseURL})

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)
//暴露
export default instance;

②创建user.js来调用后端接口发送请求：

因为请求参数格式：x-www-form-urlencoded，不可以将参数直接写在 axios.get('url',参数)，因为这样是 json 格式传递，所以我们要借助 UrlSearchParams 来传递，先遍历参数来得到键值对，然后封装到 UrlSearchParams 对象中。

//导入request.js请求工具
import request from '@/utils/request.js';
//提供调用注册接口的函数
export const userRegisterService = (registerData)=>{
    //借助UrlSearchParams完成传递
    const params = new URLSearchParams();
    for(let key in registerData){
        params.append(key,registerData[key]);
    }
    return request.post('/user/register',params);
}

③在Login.vue中<script>标签内编写代码来使用注册函数：

我们后端响应的数据格式是 =>

所以根据后端返回数据的状态码来判断是否注册成功。

//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    if(result.code === 0){
        //成功
        alert(result.msg ? result.msg : '注册成功'); 
    }else{
        //失败
        alert('注册失败');
    }
}

之后在html中创建单击事件来完成注册。

④跨域问题：

由于浏览器的同源策略限制，向不同源（不同协议，不同域名，不同端口）发送ajax请求会失败。

~~也就是前端一个域，后端一个域。~~

所以为了解决跨域问题，我们可以通过配置代理方式来解决，若我们配置完代理，那么浏览器将要向后端服务发送请求的 ip 地址 5173（这个是我的前端地址）就可以发给前端服务，然后由前端服务转发给后端服务。这样就可以避免直接发送导致跨域（跨域是发生在浏览器端，前端服务与后端服务发送ajax请求没事）。

那么如何跨域呢？

其实非常简单，我们只需要两部：

第一部 => 将request.js当中的baseURL修改成'/api'

// const baseURL = 'http://localhost:8080';
const baseURL = '/api';

第二部 => 在vite.config.js中写入相关配置

这里会自动检测请求路径是否含有'/api'，如果含有就会将源自动替换成target内的路径，并且会把'/api'替换成空串。

export default defineConfig({
  server:{
    proxy:{
      '/api':{
        //获取路径中包含了/api的请求
        target: 'http://localhost:8080',//后台服务所在的源
        changeOrigin: true,  //修改源
        rewrite: (path)=>path.replace(/^\/api/,'') // 路径重写，将/api替换成空串
      }
    }
  }
})

所以最后的注册请求路径变为：'http://localhost:8080/user/login'

（5）前端登录功能开发：

登录无非跟注册差不多，两个数据绑定，一个事件绑定和一个校验功能。

<el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
    <el-form-item>
        <h1>登录</h1>
    </el-form-item>
    <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
    </el-form-item>
    <el-form-item class="flex">
        <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>
    </el-form-item>
    <!-- 登录按钮 -->
    <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
    </el-form-item>
    <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="isRegister = true; clearRegisterData()">
            注册 →
        </el-link>
    </el-form-item>
</el-form>

校验功能我们直接复用前面注册功能的rules，之后我们开发登录函数。

在user.js内编写axios代码：（这里跟注册功能一样需要借助 UrlSearchParams 完成传递）

//登录接口
export const userLoginService = (loginData)=>{
    //借助UrlSearchParams完成传递
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key]);
    }
    return request.post('/user/login',params);
}

然后再Login.vue文件内编写使用登录函数：

//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    if(result.code === 0){
        //成功
        alert(result.msg ? result.msg : '登录成功'); 
    }else{
        //失败
        alert('登录失败');
    }
}

因为这里在切换的时候还会保留值，所以我们在返回以及注册按钮绑定 clearRegisterData() 清除事件：

const clearRegisterData = ()=>{
    registerData.value={
        username: '',
        password: '',
        rePassword: '',
    }
}

（6）优化axios响应拦截器：

因为登录以及注册的事件函数内if判断是否成功的代码过于繁琐，所以我们可以添加响应拦截器，将公共代码放入响应拦截器来统一完成 =>

在request.js文件内添加：

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        //判断业务状态码
        if(result.data.code === 0){
            return result.data;
        }
        //操作失败
        alert(result.data.message ? result.data.message : '服务异常')
        //异步操作的状态转换为失败
        return Promise.reject(result.data);
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

而如果我们既然不会被拦截器拦截到错误，那我们就可以在 Login.vue 文件直接向前端响应成功：

//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    alert(result.msg ? result.msg : '注册成功'); 
}
//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    alert(result.msg ? result.msg : '登录成功'); 
}

3.使用elementplus修改浏览器提示框：

原来的浏览器提示框：

我们打开elementplus官网：Message 消息提示 | Element Plus (element-plus.org)

在这里有个不同状态，点击查看源代码，我们就可以使用内部代码修改浏览器提示框。

我们引入ElMessage就可以修改了：

import { ElMessage } from 'element-plus';
//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    // alert(result.msg ? result.msg : '注册成功'); 
    ElMessage.success(result.msg ? result.msg : '注册成功');
}
//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    // alert(result.msg ? result.msg : '登录成功'); 
    ElMessage.success(result.msg ? result.msg : '登录成功');
}

这样成功的框框就变成下面这样：

前端工程就介绍到这里，作品最底下会呈上完整代码，下面我们讲述后端工程创建。

三.后端创建工程：

1.导入数据库big_event：

-- 创建数据库
create database big_event;

-- 使用数据库
use big_event;

-- 用户表
create table user (
                      id int unsigned primary key auto_increment comment 'ID',
                      username varchar(20) not null unique comment '用户名',
                      password varchar(32)  comment '密码',
                      nickname varchar(10)  default '' comment '昵称',
                      email varchar(128) default '' comment '邮箱',
                      user_pic varchar(128) default '' comment '头像',
                      create_time datetime not null comment '创建时间',
                      update_time datetime not null comment '修改时间'
) comment '用户表';

-- 分类表
create table category(
                         id int unsigned primary key auto_increment comment 'ID',
                         category_name varchar(32) not null comment '分类名称',
                         category_alias varchar(32) not null comment '分类别名',
                         create_user int unsigned not null comment '创建人ID',
                         create_time datetime not null comment '创建时间',
                         update_time datetime not null comment '修改时间',
                         constraint fk_category_user foreign key (create_user) references user(id) -- 外键约束
);

-- 文章表
create table article(
                        id int unsigned primary key auto_increment comment 'ID',
                        title varchar(30) not null comment '文章标题',
                        content varchar(10000) not null comment '文章内容',
                        cover_img varchar(128) not null  comment '文章封面',
                        state varchar(3) default '草稿' comment '文章状态: 只能是[已发布] 或者 [草稿]',
                        category_id int unsigned comment '文章分类ID',
                        create_user int unsigned not null comment '创建人ID',
                        create_time datetime not null comment '创建时间',
                        update_time datetime not null comment '修改时间',
                        constraint fk_article_category foreign key (category_id) references category(id),-- 外键约束
                        constraint fk_article_user foreign key (create_user) references user(id) -- 外键约束
)

2.准备一系列包文件以及依赖：

这里我们需要导入web,mybatis,lombok,mysql,jwt,validation等依赖。

下图是我们的项目目录结构：

3.application.yml配置：

这里不懂可以看下面的文章：

Mybatis不明白？就这一篇带你轻松入门_mapper 新建一张表在哪里配置-CSDN博客

spring:
  datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/big_event
      username: root
      password: 1234
mybatis:
  configuration:
    map-underscore-to-camel-case: true #驼峰命名

4.创建实体类pojo：

我们为了方便操作数据库，会创建实体类 =>

eg：这里用lombok注解配置 get,set 方法，不会可以查一下。

@Data
public class User {
    private Integer id;//主键ID
    private String username;//用户名
    private String password;//密码
    private String nickname;//昵称
    private String email;//邮箱
    private String userPic;//用户头像地址
    private LocalDateTime createTime;//创建时间
    private LocalDateTime updateTime;//更新时间
}

这里不一一展示了。

5.注册接口实现：

我们需要传递上面这三个数据，所以一般会封装成Result类来返回响应数据：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result<T> {
    private Integer code;//业务状态码  0-成功  1-失败
    private String message;//提示信息
    private T data;//响应数据

    //快速返回操作成功响应结果(带响应数据)
    public static <E> Result<E> success(E data) {
        return new Result<>(0, "操作成功", data);
    }

    //快速返回操作成功响应结果
    public static Result success() {
        return new Result(0, "操作成功", null);
    }

    public static Result error(String message) {
        return new Result(1, message, null);
    }
}

注册接口是很好写的，注意判断数据格式，然后从数据库访问拿到数据判断是否存在该用户，如果不存在就注册，存在就返回错误msg。

然后我们就编写Controller层：

注意，这里是使用了Spring validation参数校验框架，使用预定义的注解完成后参数校验。

我们使用该框架只需要三步：

引入Spring validation起步依赖
在参数前面添加@Patten（"正则表达式"）
在Controller类上添加@Validated注解

@RestController
@RequestMapping("/user")
@Validated
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 注册用户
     * @param username
     * @param password
     * @return
     */
    @PostMapping("/register")
    public Result register(@Pattern(regexp = "^\\S{5,16}$") String username ,@Pattern(regexp = "^\\S{5,16}$") String password){
        User user = userService.findByUserName(username);
        if(user == null){
            userService.register(username,password);
            return Result.success();
        }else{
            return Result.error("用户名已被占用");
        }
    }
}

然后是Service层：

什么是Md5 => Md5是一种加密方式，我们就需要引入Md5工具类，使用类内方法即可。

不会Md5请看下面博客：使用Md5加密密码-CSDN博客

注意这里不可以直接将密码保存到数据库，需要使用Md5加密一下密码，所以先导入MD5工具类，在编写代码。

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public User findByUserName(String username) {
        return userMapper.findByUserName(username);
    }

    @Override
    public void register(String username, String password) {
        //加密
        String md5String = Md5Util.getMD5String(password);
        userMapper.add(username,md5String);
    }
}
}

最后是Mapper层：

@Mapper
public interface UserMapper {

    @Select("select * from user where username = #{username}")
    User findByUserName(String username);

    @Insert("insert into user(username, password, create_time, update_time) " +
            " values(#{username},#{password},now(),now()) ")
    void add(String username, String password);
}

注意，为了对异常处理我们可以使用全局异常处理器来处理异常：

在exception包下创建 =>

//全局异常处理器
@RestControllerAdvice
public class GlobalExceptionHandler {
    //捕获异常
    @ExceptionHandler(Exception.class)
    public Result handleException(Exception e){
        //向后台输入异常信息
        e.printStackTrace();
        //给浏览器响应信息返回
        return Result.error(StringUtils.hasLength(e.getMessage()) ? e.getMessage() : "操作失败");
    }
}

之后我们可以使用postman调试一下后端项目。使用body下的 x-www-form-urlencoded输入请求参数。

6.登录接口实现：

登录接口实际上是比注册接口难了一些，但无外乎加了jwt令牌的一些相关操作，若不了解jwt可以查看下面的博客：JWT令牌在项目中的实战操作-CSDN博客。

（1）导入jwt依赖以及工具包：

import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;

import java.util.Date;
import java.util.Map;
public class JwtUtil {

    private static final String KEY = "itheima";

	//接收业务数据,生成token并返回
    public static String genToken(Map<String, Object> claims) {
        return JWT.create()
                .withClaim("claims", claims)
                .withExpiresAt(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 12))
                .sign(Algorithm.HMAC256(KEY));
    }

	//接收token,验证token,并返回业务数据
    public static Map<String, Object> parseToken(String token) {
        return JWT.require(Algorithm.HMAC256(KEY))
                .build()
                .verify(token)
                .getClaim("claims")
                .asMap();
    }
}

（2）Controller层：

先在数据库查询用户，判断是否有该用户，然后判断密码是否正确，这里需要将请求参数密码使用MD5加密，再用equals判断是否一致，如果一致就将id以及用户名封装Map集合，并调用jwt工具类，将集合传入得到令牌并return返回给前端，如果不一致就返回错误信息msg。

@RestController
@RequestMapping("/user")
@Validated
public class UserController {

    @Autowired
    private UserService userService;
    /**
     * 用户登录
     * @param username
     * @param password
     * @return
     */
    @PostMapping("/login")
    public Result<String> login(@Pattern(regexp = "^\\S{5,16}$") String username ,@Pattern(regexp = "^\\S{5,16}$") String password){
        //根据username查询用户
        User loginUser = userService.findByUserName(username);
        //判断是否存在
        if(loginUser == null){
            return Result.error("用户名错误");
        }
        //判断密码是否正确
        if(Md5Util.getMD5String(password).equals(loginUser.getPassword())){
            //登录成功，创建JWT令牌
            Map<String,Object> claims = new HashMap<>();
            claims.put("id",loginUser.getId());
            claims.put("username",loginUser.getUsername());
            String token = JwtUtil.genToken(claims);
            return Result.success(token);
        }
        return Result.error("密码错误");
    }
}

（3）创建拦截器interceptor来统一拦截令牌完成登录验证：

重写preHandle()方法，调用request.getHeader()方法查看jwt令牌字符串，执行JwtUtil.parseToken()方法，如果方法没有抛出异常就代表成功，于是返回true代表放行，如果失败就设置响应状态码为401并返回false不放行。

//拦截器
@Component
public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request , HttpServletResponse response , Object handle) throws Exception{
        String token = request.getHeader("Authorization"); //Authorization为请求头的名字
        try {
            //令牌验证
            Map<String,Object> claims = JwtUtil.parseToken(token);
            //放行
            return true;
        }catch (Exception e){
            //http响应状态码为401
            response.setStatus(401);
            //不放行
            return false;
        }
    }
}

（4）注册拦截器WebConfig：

在config包下创建配置类：

为了获取拦截器对象，我们DI（依赖注入）一个拦截器对象，重写addInterceptors()方法，随后调用registry注册器内的addInterceptor()方法，但是此时是拦截所有请求，所以我们在调用excludePathPatterns()方法来放行登录以及注册接口。

//注册拦截器
//当需要对目标对象（target object）执行某种横切关注点（cross-cutting concern）操作，
//比如日志记录、事务处理等，开发者会将相关的拦截器注册到registry里。当匹配的条件触发时，
//registry会按照配置顺序查找并执行相应的拦截器，实现了对业务流程的动态增强。
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Autowired
    private LoginInterceptor loginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) { //registry是注册器，用来管理拦截器
        registry.addInterceptor(loginInterceptor).excludePathPatterns("/user/login","/user/register");
    }
}