VUE之JWT前后端分离认证，学生管理系统

PH = 7

已于 2023-08-06 02:03:04 修改

阅读量954

点赞数

于 2023-08-05 19:16:18 首次发布

本文链接：https://blog.csdn.net/qq_23095607/article/details/132013047

版权

本文提供了一种使用SpringBoot+JWT+Mybatis-Plus+Mysql+Vue2搭建前后端分离的学生管理系统的教程。内容包括后端数据库创建、SpringBoot项目配置、JWT登录接口与过滤器设置，以及前端Vue项目创建、Element-UI和Vue-Router的集成、登录与数据展示。同时，介绍了如何使用拦截器处理JWT token的自动携带和验证。

摘要由CSDN通过智能技术生成

参考资料：

JWT视频参考资料、VUE视频资料，及前后端demo

特别有参考价值的JWT博客1

特别有参考价值的JWT博客2

cookie、localstorage和sessionStorage的区别1

cookie、localstorage和sessionStorage的区别2

cookie、localstorage和sessionStorage的区别3

VUE之基本部署及VScode常用插件

VUE之基本组成和使用

VUE之Bootstrap和Element-UI的使用

VUE之axios使用，跨域问题，拦截器添加Token

VUE之VueRouter页面跳转

说明：

本文只做搭建教程，相关的概念及使用方法见其他博客

项目的骨架为：Springboot + JWT + Mybatis-Plus + Mysql + VUE2

后端搭建教程：

后端项目的结构如下：

1. 数据库的创建

CREATE TABLE `student` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `number` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `age` int NOT NULL,
  `chi` int NOT NULL,
  `math` int NOT NULL,
  `eng` int NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=146 DEFAULT CHARSET=utf8mb3

CREATE TABLE `vue_user` (
  `id` varchar(32) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `username` varchar(20) DEFAULT NULL,
  `password` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3

添加一些初始化语句

insert into `vue_user` (`id`, `username`, `password`) values('0DCD991FD489470E8A078F24F8C45B12','admin','123');
insert into `vue_user` (`id`, `username`, `password`) values('1B28EEC2ED4C4401ACE2D3CDE77F9E2D','try','123');
insert into `vue_user` (`id`, `username`, `password`) values('30F0B5A0DABB4CE4AF5158879F2956B7','peter','123');
insert into `vue_user` (`id`, `username`, `password`) values('3CA842FC12644A6ABED6B7CE3766C9D8','alise','123');

insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('10','110','白','17','73','72','71');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('11','111','小花','20','73','73','88');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('12','112','小新','7','59','59','59');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('13','113','小黄','14','78','99','93');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('138','2222','dsada','232323','23232','2323','2323');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('139','333','佩特瑞','22','2','2','2');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('140','2323','wwww','232','23','23','23');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('141','888','eee','33','3','3','3');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('142','666','ww','5','5','5','5');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('143','666','ww','5','5','5','5');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('144','99','qq','55','55','55','55');
insert into `student` (`id`, `number`, `name`, `age`, `chi`, `math`, `eng`) values('145','666','oo','66','66','2','6');

2.创建SpringBoot项目或者SpringCloud项目

这里不做详细阐述，具体参照SpringBoot项目搭建或者SpringCloud项目搭建

3.使用Mybatis-Plus进行项目连接

这里不做详细阐述，具体参照SpringBoot整合Mybatis-Plus
依赖：

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </depen