若依框架---分页功能

继前几天我们学习若依管理系统中的代码生成工具，我们发现若依系统中还要很多值得学习的地方。今天我们来学习若依管理系统中的分页工具。

若依管理系统是前后端分离的（准确的说，若依有前后端分离版本）。

前端

若依前端的分页没有什么好说的，请求时分为pageNum与pageSize，使用前端分页组件Pagination（这个组件我们之前在花裤衩的vue-element-admin中也遇到过），代码如下所示：

1.  
   <!-- 分页组件-->
2.  
   <pagination
3.  
   :total="total"
4.  
   :page.sync="queryParams.pageNum"
5.  
   :limit.sync="queryParams.pageSize"
6.  
   @pagination="fetchData"
7.  
   />
8.  
    
9.  
   query: {
10.  
    keyword: undefined,
11.  
    // otherquery.....
12.  
    pageNum: 1,
13.  
    pageSize: 10
14.  
    },
15.  
    result: { // 请求结果
16.  
    total: 0,
17.  
    rows: []
18.  
    }
19.  
     
20.  
    // 后台方法，传入参数 获取结果
21.  
    api(this.queryParams).then(response => {
22.  
    this.result = response;
23.  
    }
24.  
    );

后端分页

后端的分页很有意思，我们先来看看后端接口中的分页代码。

我们抓取若依前端：系统管理->日志管理->操作日志接口，经过浏览器F12调试，我们可以发现其接口地址为：

/monitor/operlog/list?pageNum=1&pageSize=10

我们在后台查找对应接口发现其位于com.ruoyi.web.controller.monitor.SysOperlogController下的list方法。方法代码如下所示：

1.  
   @PreAuthorize("@ss.hasPermi('monitor:operlog:list')")
2.  
   @GetMapping("/list")
3.  
   public TableDataInfo list(SysOperLog operLog)
4.  
   {
5.  
   startPage();
6.  
   List<SysOperLog> list = operLogService.selectOperLogList(operLog);
7.  
   return getDataTable(list);
8.  
   }

奇怪的是，我们并没有发现分页参数的获取与解析，那么后端到底是如何实现分页的呢？

这个接口有三个特点，

一是返回值类型为TableDataInfo

二是接口第一行代码startPage()

三是接口最后一句:getDataTable(list)。

 首先，我们先来看看 TableDataInfo 的数据结构。

1.  
   /**
2.  
   * 表格分页数据对象
3.  
   *
4.  
   * @author ruoyi
5.  
   */
6.  
   public class TableDataInfo implements Serializable
7.  
   {
8.  
   private static final long serialVersionUID = 1L;
9.  
    
10.  
    /** 总记录数 */
11.  
    private long total;
12.  
     
13.  
    /** 列表数据 */
14.  
    private List<?> rows;
15.  
     
16.  
    /** 消息状态码 */
17.  
    private int code;
18.  
     
19.  
    /** 消息内容 */
20.  
    private String msg;
21.  
     
22.  
    // 剩余的构造器与setter，getter方法不贴了
23.  
     
24.  
    }

我们可以看到，数据的类型与前端是匹配的，那么这个数据又是如何在接口中构造的呢？

关键代码 startPage() 时发生了什么？接口最后一句 genDataTable(list) 又是如何将一个list转换为 TableDataInfo 的呢？

这篇好文章是转载于：学新通技术网