湛江网站建设,做动漫网站,seo怎么做网站的tdk,搬瓦工做网站稳定吗继前几天我们学习若依管理系统中的代码生成工具#xff0c;我们发现若依系统中还要很多值得学习的地方。今天我们来学习若依管理系统中的分页工具。
若依管理系统是前后端分离的#xff08;准确的说#xff0c;若依有前后端分离版本#xff09;。
前端
若依前端的分页没…继前几天我们学习若依管理系统中的代码生成工具我们发现若依系统中还要很多值得学习的地方。今天我们来学习若依管理系统中的分页工具。
若依管理系统是前后端分离的准确的说若依有前后端分离版本。
前端
若依前端的分页没有什么好说的请求时分为pageNum与pageSize使用前端分页组件Pagination这个组件我们之前在花裤衩的vue-element-admin中也遇到过代码如下所示
!-- 分页组件--
pagination:totaltotal:page.syncqueryParams.pageNum:limit.syncqueryParams.pageSizepaginationfetchData
/query: {keyword: undefined,// otherquery.....pageNum: 1,pageSize: 10
},
result: { // 请求结果total: 0,rows: []
}// 后台方法传入参数 获取结果
api(this.queryParams).then(response {this.result response;}
);
后端分页
后端的分页很有意思我们先来看看后端接口中的分页代码。
我们抓取若依前端系统管理-日志管理-操作日志接口经过浏览器F12调试我们可以发现其接口地址为
/monitor/operlog/list?pageNum1pageSize10 我们在后台查找对应接口发现其位于com.ruoyi.web.controller.monitor.SysOperlogController下的list方法。方法代码如下所示 PreAuthorize(ss.hasPermi(monitor:operlog:list))GetMapping(/list)public TableDataInfo list(SysOperLog operLog){startPage();ListSysOperLog 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;// 剩余的构造器与settergetter方法不贴了} 我们可以看到数据的类型与前端是匹配的那么这个数据又是如何在接口中构造的呢 关键代码 startPage() 时发生了什么接口最后一句 genDataTable(list) 又是如何将一个list转换为 TableDataInfo 的呢
