参考资料：

SpringBoot搭建教程

SpringCloud搭建教程

JWT视频教程

JWT官网

Vue视频教程

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

• 搭配的实体为：

import lombok.Data;@Data
public