背景
分页:
- 如果一次性的查询全部数据, 响应时间就太长了, 使得浏览器, java虚拟机都有延迟, 用户使用上就会容易出现卡顿:
- 所以就要降低数据库的压力, 使用分页来显示, 一次显示一部分数据
例子:
假设有五条数据, 每一页都显示两条
实现分页要知道:
- 每页多少条数据
- 当前的页数
- 一共多少页数据(可以通过ElementUI来实现自动计算)
一、SpringBoot的后端
1、手动拼接SQL来实现
可以由前端将当前的页数传到后端
由后端将需要展示的数据返回前端
Controller层
![在这里插入图片描述](https://img-blog.csdnimg.cn/d394895213374a6e9767993733a01fe6.png)
Mapper文件(在不使用Mybatis插件, 使用limit分页)![](https://img-blog.csdnimg.cn/1c2ba1a11be84739b60e7656eb9525d6.png)
2、使用Mybatis插件来实现
使用Mybatis插件:
- 可以自动为我们的SQL添加limit语句
- 还可以再发送一条语句来获取总条数
(前端需要总条数来计算总页数)
- 首先要导入依赖
<!-- pagehelper依赖 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
-
配置spring文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/81aa26d396654b8fb7fdca5ed06abc15.png)
-
使用对应类将总页数, 与数据封装到对象PageInfo里
在Service层里
![在这里插入图片描述](https://img-blog.csdnimg.cn/7d81c953c0a44bc9a365ccaedf943043.png)
二、Vue-cli的前端:
接收后端发来的数据信息
![在这里插入图片描述](https://img-blog.csdnimg.cn/2fb48a4545204d95b5eb9dfc8e52b84b.png)
分页组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/0a11d33eea7f4e5f8ace3b17806a7ef2.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/28ad72f9e17e4279bb97a8bf0811140f.png)
具体说明
![在这里插入图片描述](https://img-blog.csdnimg.cn/89a48002978b4390afdb736164114630.png)
函数说明
![在这里插入图片描述](https://img-blog.csdnimg.cn/80690667e4a747029d2f89c92a7156b8.png)
请求响应跟踪
请求
![在这里插入图片描述](https://img-blog.csdnimg.cn/02e42c93c7974073beb5297056f11801.png)
响应
![在这里插入图片描述](https://img-blog.csdnimg.cn/c85aa8460de6437c9c4b73a85a20aaf1.png)
三、在使用Mybatis插件进行多表查询(表数大于2)出现的问题
在Mybatis插件进行分页时, 如果数据时多张表进行的联表查询, 插件会出错
比如:
说一个领导有两个职位, 他返回的数据将会是两个相同的领导的数据, 不是一条领导数据对应两个职位
![在这里插入图片描述](https://img-blog.csdnimg.cn/ff4fd9d85d3c453ba3f35411bb366312.png)
这里通过mybatis查询出来的total会是两条, id是1与2
而我们希望查询出来是一条, 所以要嵌套查询, 不能一次性联表查询多张表
后端mapper文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/9558cffade2e47d19f443cf059cce517.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/7ab036557e064b04a48b0930a1600326.png)
本来应该是一个人, 对应两个职位, mybatis是封装好了的, 但是用了分页插件之后, 就会出现
![在这里插入图片描述](https://img-blog.csdnimg.cn/274dd7e77810448ab6afffb6a0ee3a42.png)
因为使用mybatis分页插件之后就总会发送一条查询数据总数的SQL语句,
将total放进PageInfo对象发送给前端 , 下面用日志打印出来![在这里插入图片描述](https://img-blog.csdnimg.cn/05658a0ab6dc4b6799a585918d6a563a.png)
这种原因我们可以在sql解决也可以改变查询方式来解决
1. SQL解决
直接给查询语句添加 group_concat(职位),将两条记录直接合成一条记录
![在这里插入图片描述](https://img-blog.csdnimg.cn/50fa3adff2eb439780a531792790f0c9.png)
结果就是种类型: ![在这里插入图片描述](https://img-blog.csdnimg.cn/8c4236f0716945cf94ddc1122ff58527.png)
2.后端查询方式改变成嵌套查询
mapper文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/7bd80fe046314f2c8c02c902b78ed9f0.png)
前端再根据v-for将结果循环出来:
![在这里插入图片描述](https://img-blog.csdnimg.cn/72f00280e36f4c10a8f1a044285aaaa8.png)
效果就会是 :
![在这里插入图片描述](https://img-blog.csdnimg.cn/be876675aff2409cb6904cc6346f1d8b.png)
四、 分页总结
- 实现分页, 需要在查询数据时候就将limit拼接进SQL
- 用Mybatis插件来自动拼接, 并且查询数据的总数给前端
- 前端用ElementUI组件接收展示
- mybatis本来可以自己将数据封装,类似于 group_concat()的的效果, 但是如果是多张表查询(大于2 )就要使用嵌套查询, 不然达不到想要的效果