@TOC

背景

分页:

1. 如果一次性的查询全部数据, 响应时间就太长了, 使得浏览器, java虚拟机都有延迟, 用户使用上就会容易出现卡顿:
2. 所以就要降低数据库的压力, 使用分页来显示, 一次显示一部分数据

例子:

假设有五条数据, 每一页都显示两条

实现分页要知道:

1. 每页多少条数据
2. 当前的页数
3. 一共多少页数据(可以通过ElementUI来实现自动计算)

一、SpringBoot的后端

1、手动拼接SQL来实现

可以由前端将当前的页数传到后端

由后端将需要展示的数据返回前端

Controller层

Mapper文件(在不使用Mybatis插件, 使用limit分页)

2、使用Mybatis插件来实现

使用Mybatis插件:

1. 可以自动为我们的SQL添加limit语句
2. 还可以再发送一条语句来获取总条数
   (前端需要总条数来计算总页数)

1. 首先要导入依赖

        <!-- pagehelper依赖 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

1. 配置spring文件
   

2. 使用对应类将总页数, 与数据封装到对象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将结果循环出来:

效果就会是 :

四、 分页总结

1. 实现分页, 需要在查询数据时候就将limit拼接进SQL
2. 用Mybatis插件来自动拼接, 并且查询数据的总数给前端
3. 前端用ElementUI组件接收展示
4. mybatis本来可以自己将数据封装,类似于 group_concat()的的效果, 但是如果是多张表查询(大于2 )就要使用嵌套查询, 不然达不到想要的效果