技术栈:springboot+mybatisplus+vue+thymeleaf
项目正常启动:
后台AdminApplication服务器启动,前台wnxt_admin服务正常启动。
![](https://i-blog.csdnimg.cn/blog_migrate/d46aeab174ce825ba0c28fd47495e17a.png)
前台进入登录页面。
![](https://i-blog.csdnimg.cn/blog_migrate/1539175ed53c7013f964ef4a573f65a0.png)
跳转路由router文件夹index.js页面,'/'路径。
![](https://i-blog.csdnimg.cn/blog_migrate/ddb540daf20b553029869159f5037319.png)
进入index页面,跳转/路径,重定向(redirect)=>dashboard文件夹,获取{{ name }}参数。
![](https://i-blog.csdnimg.cn/blog_migrate/32c998f8502b897e1ccda95012d62b08.png)
点击二级路由讲师列表,新url页面重定向地址为:/trainer(一级路由)/list(二级路由)。
![](https://i-blog.csdnimg.cn/blog_migrate/59b330b7d31d55acd544f84f6a43b543.png)
当trainer/index.vue页面加载时,自动加载钩子函数。
![](https://i-blog.csdnimg.cn/blog_migrate/46b8dc4f82ccd1e00fc68f9a759c598c.png)
钩子函数this.getData(1,2,);传入两个参数,currentPage:当前页数,一般从1开始 pageSize:记录行数,即每页一共几条数据;
需要导入api内部的trainer文件;
![](https://i-blog.csdnimg.cn/blog_migrate/3ee8d5474836b6f629d6768bba7a893b.png)
restful风格传参,前台api/trainer发送get请求携带数据currentPage, pageSize:去后台Controller层。
![](https://i-blog.csdnimg.cn/blog_migrate/c8372938822334ab786f147e67393864.png)
前后台交互,全局跨域解决方案。
![](https://i-blog.csdnimg.cn/blog_migrate/095bcb3b45fbc49312d0f2ef637ad87f.png)
后台controller模块。
![](https://i-blog.csdnimg.cn/blog_migrate/c887eebfd9e0933737906fc1021c2136.png)
分页查询模块:
/**
* 分页操作的步骤:
* 1、配置分页插件
![](https://i-blog.csdnimg.cn/blog_migrate/a189980aab8b3c621170bf06f413c982.png)
* 2、准备分页条件
* 3、调用pageXXX方法
* 4、拿到分页结果、封装分页数据返回
*/
![](https://i-blog.csdnimg.cn/blog_migrate/2816c296b0f3317da9f5abdf05f2f585.png)
后台返回数据。
![](https://i-blog.csdnimg.cn/blog_migrate/6a5a275a1d5e3fed08fa1614c36111b2.png)
返回前台页面显示后台分页查询讲师列表信息,封装数据模型
![](https://i-blog.csdnimg.cn/blog_migrate/b3f2270db300c08642fa2fbc445e2d80.png)
通过resp.data.data对前台页面赋值。
![](https://i-blog.csdnimg.cn/blog_migrate/5cfd5231b969530f32d3b7b91c2acad6.png)
前台页面显示后台controller层的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/7e913c45c9f1f17d8191c927f5661bcf.png)
前台配置分页参数,并配置页面函数:handleSizeChange,handleCurrentChange ;
![](https://i-blog.csdnimg.cn/blog_migrate/7b3a642778f17384148e23879175b5fd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/294d8e7b849763085f9de4ac65f2f7fb.png)
点击删除讲师====>未完待续