参考资料:
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>
- 搭配的实体为