若依框架---分页功能

以你之姓@ 2023-09-27 14:11 174阅读 0赞

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

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

### 前端 ###

若依前端的分页没有什么好说的，请求时分为`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`的呢？