若依系统中的分页实现方式 |
您所在的位置:网站首页 › vue如何分页 › 若依系统中的分页实现方式 |
这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战 继前几天我们学习若依管理系统中的代码生成工具,我们发现若依系统中还要很多值得学习的地方。今天我们来学习若依管理系统中的分页工具。 若依管理系统是前后端分离的(准确的说,若依有前后端分离版本)。 前端若依前端的分页没有什么好说的,请求时分为pageNum与pageSize,使用前端分页组件Pagination(这个组件我们之前在花裤衩的vue-element-admin中也遇到过),代码如下所示: 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 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的呢? |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |