背景
分页:
- 如果一次性的查询全部数据, 响应时间就太长了, 使得浏览器, java虚拟机都有延迟, 用户使用上就会容易出现卡顿:
- 所以就要降低数据库的压力, 使用分页来显示, 一次显示一部分数据
例子:
假设有五条数据, 每一页都显示两条
实现分页要知道:
- 每页多少条数据
- 当前的页数
- 一共多少页数据(可以通过ElementUI来实现自动计算)
一、SpringBoot的后端
1、手动拼接SQL来实现
可以由前端将当前的页数传到后端由后端将需要展示的数据返回前端
Controller层
Mapper文件(在不使用Mybatis插件, 使用limit分页)
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文件
- 使用对应类将总页数, 与数据封装到对象PageInfo里
在Service层里
二、Vue-cli的前端:
接收后端发来的数据信息
分页组件
具体说明
函数说明
_
请求响应跟踪
请求
响应
三、在使用Mybatis插件进行多表查询(表数大于2)出现的问题
在Mybatis插件进行分页时, 如果数据时多张表进行的联表查询, 插件会出错比如:
说一个领导有两个职位, 他返回的数据将会是两个相同的领导的数据, 不是一条领导数据对应两个职位
这里通过mybatis查询出来的total会是两条, id是1与2
而我们希望查询出来是一条, 所以要嵌套查询, 不能一次性联表查询多张表
后端mapper文件
本来应该是一个人, 对应两个职位, mybatis是封装好了的, 但是用了分页插件之后, 就会出现
**因为使用mybatis分页插件之后就总会发送一条查询数据总数的SQL语句,
将total放进PageInfo对象发送给前端 , 下面用日志打印出来**这种原因我们可以在sql解决也可以改变查询方式来解决
1. SQL解决
直接给查询语句添加 group_concat(职位),将两条记录直接合成一条记录
结果就是种类型: 
2.后端查询方式改变成嵌套查询
mapper文件
前端再根据v-for将结果循环出来: 
效果就会是 : 
四、 分页总结
- 实现分页, 需要在查询数据时候就将limit拼接进SQL
- 用Mybatis插件来自动拼接, 并且查询数据的总数给前端
- 前端用ElementUI组件接收展示
- mybatis本来可以自己将数据封装,类似于 group_concat()的的效果, 但是如果是多张表查询(大于2 )就要使用嵌套查询, 不然达不到想要的效果
