数据分页实例

目录

1.简介

2.源码分析

2.1 前端代码

2.2后端代码

3.分页实现原理分析

4.总结

---

1.简介

进入方式：系统管理 -> 岗位管理 

2.源码分析

2.1 前端代码

打开岗位管理页面源码文件，如下图所示，其中<pagination> 组件为分页组件

函数调用链：getList -> list -> request[axios]

开发者工具查看前端访问后端信息

开发者工具查看前端接收到后端的回应信息

上图的total在下图红框里被赋值，页面才会通过组件pagination 显示数据

2.2后端代码

后端响应代码如下图，要实现分页需要使用如下两个函数：

1. startPage [使用前端分页参数第几页pageNum 和每页的数量pageSize ]

2. getDataTable

函数startPage 和getDataTable

疑问：由于我们前面看到total 值可以大于list 长度，那如何通过list 做到的？ new PageInfo(list).getTotal()；

分析：构造PageInfo 对象 + 调用函数

子疑问1：谁的函数？函数里面做了什么事？

调查：经过跳转，发现是类PageInfo 继承类PageSerializable，类PageInfo 调用getTotal 为父类PageSerializable 函数，函数代码如下图。

子疑问2：这个成员变量total 怎么被赋值的呢？

调查：查找this.total = 的地方，找到如下图。说明在构造父类PageSerializable 时，初始化了total。刚好PageInfo(list) 就是在构造PageInfo 对象。构造流程为new PageInfo(list) -> this(list, DEFAULT_NAVIGATE_PAGES) -> super(list);  其中super 为类PageSerializable

子疑问3：((Page)list).getTotal(); 又是什么？从这句代码，又能看出什么？

分析：List 强转Page 类，调用其函数。由于使用强转，说明Page 是List 的子类。[Page 是MyBatis 库里的一个类型，表示页对象，存储了页相关的属性。由于进去库里的源码，我们暂时就不再深究。]

我们猜测：MyBatis 在处理的时候，把total 的值存储在子类Page 对象中，然后返回出来是父类List 类型对象。现在又通过对父类List 对象list 进行强转回子类Page 对象，就能通过它的成员函数访问回它自己的total 值了。

total 的值为什么能比List 里的元素个数还大？如何实现的？[此处代码非常隐蔽]

类Page 继承类List

selectOperLogList 语句返回的list 实际类型为Page [经过MyBatis 框架处理返回]

类Page 含有属性total 保存数据总条数

3.分页实现原理分析

获取分页数据所需函数： 

startPage

selectOperLogList

selectOperLogList 对应xml，没有使用pageNum 和pageSize 删选数据，那么它返回的应该是所有数据

Log 输出如下

SQL 被MyBatis 拦截改变了，selectOperLogList 函数对应两句SQL：

     一句查询表的总行数[count(0)]

     一句对查询数据做了行数输出限制[LIMIT 10]

对应前端参数pageNum=1&pageSize=10

     count(0)：表数据的总行数

     LIMIT 有两种形式：

           LIMIT num：数据的前num 个

           LIMIT offset,num：从offset 偏移位置开始的num 个数据

new PageInfo(list).getTotal()；的total 到底是多少呢？怎么得到的呢？

       是表格所有数据的总行数

       MyBatis 通过修改SQL 语句，多请求了一句SQL 语句：SELECT count(0) FROM sys_oper_log 返回了总行数给到Page 对象的total 成员。然后通过子类Page 强转父类List 对象，访问其成员total 值，赋值给PageInfo 父类成员total，即this.total = ((Page)list).getTotal();

4.总结

前端的分页效果

为什么要分页？

   性能

   内存

   数据的及时更新

前后端代码

   前端：参数pageNum 和pageSize

   后端：函数startPage 和getDataTable

后端分页原理的简单分析

   先count(0) 查询总数

   再查询语句后加LIMIT