这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战
继前几天我们学习若依管理系统中的代码生成工具，我们发现若依系统中还要很多值得学习的地方。今天我们来学习若依管理系统中的分页工具。
若依管理系统是前后端分离的（准确的说，若依有前后端分离版本）。
前端
若依前端的分页没有什么好说的，请求时分为pageNum与pageSize，使用前端分页组件Pagination（这个组件我们之前在花裤衩的vue-element-admin中也遇到过），代码如下所示：
<!-- 分页组件-->
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="fetchData"
/>
query: {
keyword: undefined,
// otherquery.....
pageNum: 1,
pageSize: 10
},
result: { // 请求结果
total: 0,
rows: []
}
// 后台方法，传入参数 获取结果
api(this.queryParams).then(response => {
this.result = response;
}
);
后端分页
后端的分页很有意思，我们先来看看后端接口中的分页代码。
我们抓取若依前端：系统管理->日志管理->操作日志接口，经过浏览器F12调试，我们可以发现其接口地址为：
/monitor/operlog/list?pageNum=1&pageSize=10
我们在后台查找对应接口发现其位于com.ruoyi.web.controller.monitor.SysOperlogController下的list方法。方法代码如下所示：
@PreAuthorize("@ss.hasPermi('monitor:operlog:list')")
@GetMapping("/list")
public TableDataInfo list(SysOperLog operLog)
{
startPage();
List<SysOperLog> list = operLogService.selectOperLogList(operLog);
return getDataTable(list);
}
奇怪的是，我们并没有发现分页参数的获取与解析，那么后端到底是如何实现分页的呢？
这个接口有三个特点，一是返回值类型为TableDataInfo，二是接口第一行代码startPage()，三是接口最后一句:getDataTable(list)。
首先，我们先来看看TableDataInfo的数据结构。
/**
* 表格分页数据对象
*
* @author ruoyi
*/
public class TableDataInfo implements Serializable
{
private static final long serialVersionUID = 1L;
/** 总记录数 */
private long total;
/** 列表数据 */
private List<?> rows;
/** 消息状态码 */
private int code;
/** 消息内容 */
private String msg;
// 剩余的构造器与setter，getter方法不贴了
}
我们可以看到，数据的类型与前端是匹配的，那么这个数据又是如何在接口中构造的呢？
关键代码startPage()时发生了什么？接口最后一句genDataTable(list)又是如何将一个list转换为TableDataInfo的呢？
