【RuoYi】数据分页功能分析 —— 以登录日志页面为例

本文基于 RuoYi-Vue v3.8.2以监控 → 登录日志页面为例从前端代码、前端开发者工具、后端代码到后端 Log 输出完整分析 RuoYi 框架中数据分页的实现原理。一、实例简介本次分析选取的含数据分页功能的页面为系统管理-日志管理-登录日志。如图所示页面底部有分页组件显示共 139 条记录每页显示 10 条共 14 页。用户可以通过点击页码按钮来翻页查看数据而非一次性加载全部 139 条记录。二、为什么要数据分页以登录日志为例假设系统运行多年日志记录达到几十万条。若不分页会带来以下问题层面问题前端显示需渲染几十万行 DOM页面严重卡顿甚至崩溃前端内存几十万条 JSON 数据全部存入内存内存开销极大传输速度数据量过大网络传输时间长用户等待时间久带宽每次请求消耗大量带宽资源后端内存后端一次性从数据库查询全部数据内存压力大数据及时性数据量大时查询慢返回的数据可能已经过时所以分页是性能优化的必要手段每次只查询当前页所需的少量数据极大降低了前后端的资源消耗。三、源码分析3.1 前端代码1pagination 分页组件打开前端源码文件ruoyi-ui/src/views/monitor/logininfor/index.vue如图所示在template末尾使用了pagination组件关键属性如下pagination v-showtotal0 //只有当后端返回的总条数大于 0 时才显示分页组件 :totaltotal //将后端返回的总条数传入组件组件据此计算总页数 :page.syncqueryParams.pageNum //双向绑定当前页码用户点击翻页时自动更新 :limit.syncqueryParams.pageSize //双向绑定每页条数默认为 10 paginationgetList //每次翻页时触发getList方法重新请求数据 /同一文件中queryParams的初始值定义如下queryParams: { pageNum: 1, // 默认第1页 pageSize: 10, // 默认每页10条 ipaddr: undefined, userName: undefined, status: undefined }total初始值为 0需要等后端返回数据的总条数后才会赋值分页组件才会显示出来。2getList 函数调用链getList方法是获取数据的核心函数其调用链为getList→list()→request[axios]→ 后端接口getList() { this.loading true; list(this.addDateRange(this.queryParams, this.dateRange)).then(response { this.list response.rows; // 当前页的数据列表赋值给表格展示 this.total response.total; // 总条数赋值给 total 后分页组件随即显示正确的总页数 this.loading false; }); },打开 API 文件ruoyi-ui/src/api/monitor/logininfor.js其中list函数的完整代码如下// 查询登录日志列表 export function list(query) { return request({ url: /monitor/logininfor/list, method: get, params: query // pageNum、pageSize 等参数作为 URL 查询参数发送 }) }list()函数通过 axios 发起 GET 请求将pageNum、pageSize等参数拼接在 URL 后面发送给后端。3前端开发者工具 —— 请求与响应请求参数Headers打开浏览器 F12 开发者工具切换到 Network → Fetch/XHR点击页面的第 2 页后可以看到名为list?pageNum2pageSize10...的请求Request URLhttp://localhost/dev-api/monitor/logininfor/list?pageNum2pageSize10Request MethodGETStatus Code200 OK前端将pageNum2、pageSize10作为查询参数传递给了后端。后端响应数据Preview切换到 Preview 标签可以看到后端返回的数据结构{total: 139, // 总条数告诉前端共有多少条记录rows: [...], // 当前页的 10 条数据code: 200,msg: 查询成功}total: 139被赋值给前端的this.total分页组件据此显示共 139 条并计算出共 14 页rows数组包含当前第 2 页的 10 条登录日志数据。3.2 后端代码打开后端 Controller 文件ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/SysLogininforController.java其中负责分页查询的list方法如下PreAuthorize(ss.hasPermi(monitor:logininfor:list)) GetMapping(/list) public TableDataInfo list(SysLogininfor logininfor) { startPage(); // ① 读取分页参数 ListSysLogininfor list logininforService.selectLogininforList(logininfor); // ② 查询数据 return getDataTable(list); // ③ 封装返回结果 }后端实现分页只需两个关键函数函数作用startPage()从请求中读取前端传来的pageNum和pageSize初始化 PageHelper 分页拦截器getDataTable(list)将查询结果封装成包含total总条数和rows当前页数据的响应对象四、分页实现原理分析4.1 分页逻辑不在 Mapper 中实现打开 Mapper 文件ruoyi-system/src/main/resources/mapper/system/SysLogininforMapper.xmlselectLogininforList对应的 SQL 语句如下select idselectLogininforList parameterTypeSysLogininfor resultMapSysLogininforResult select info_id, user_name, ipaddr, login_location, browser, os, status, msg, login_time from sys_logininfor where !-- 条件筛选 -- /where order by info_id desc /select可以看到selectLogininforList对应的 SQL 语句中完全没有LIMIT关键字分页逻辑并不在 Mapper 中实现。原因在于startPage()内部调用了PageHelper.startPage(pageNum, pageSize)PageHelper 作为 MyBatis 的拦截器会在 SQL 执行前自动拦截并改写 SQL 语句追加LIMIT子句从而实现对查询结果的分页截取。4.2 后端 Log 关键输出分析点击登录日志第 2 页pageNum2pageSize10查看 IDEA 控制台输出完整的 Log 内容如下# 第一条PageHelper 自动生成的 count 查询用于统计总条数返回给前端 21:01:43.064 [http-nio-8080-exec-41] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - Preparing: SELECT count(0) FROM sys_logininfor 21:01:43.065 [http-nio-8080-exec-41] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - Parameters: 21:01:43.067 [http-nio-8080-exec-41] DEBUG c.r.s.m.S.selectLogininforList_COUNT - [debug,137] - Total: 1 # 第二条原查询被 PageHelper 拦截后自动加上 LIMIT只取当前页数据 21:01:43.067 [http-nio-8080-exec-41] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - Preparing: select info_id, user_name, ipaddr, login_location, browser, os, status, msg, login_time from sys_logininfor order by info_id desc LIMIT ?, ? 21:01:43.068 [http-nio-8080-exec-41] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - Parameters: 10(Long), 10(Integer) # offset10跳过前10条num10取10条 21:01:43.069 [http-nio-8080-exec-41] DEBUG c.r.s.m.S.selectLogininforList - [debug,137] - Total: 10两条 SQL 的作用PageHelper 将原本一条的查询语句自动拆分成了两条 SQL 执行第一条是selectLogininforList_COUNT对应SELECT count(0) FROM sys_logininfor用于统计表中所有符合条件的记录总数结果即为返回给前端的total字段分页组件据此计算总页数。第二条是selectLogininforList即原始查询语句被追加了LIMIT ?, ?后执行只返回当前页的数据。LIMIT 参数含义两个占位符对应的参数为10(Long), 10(Integer)含义如下参数值含义第一个?10Longoffset偏移量跳过前 10 条记录第二个?10Integernum查询数量取 10 条记录LIMIT 值的计算公式LIMIT offset, num offset (pageNum - 1) × pageSize (2 - 1) × 10 10 num pageSize 10即从第 11 条记录开始取 10 条数据恰好是第 2 页的内容。推广验证若前端请求pageNum3pageSize10则offset (3 - 1) × 10 20 num 10 SQL: LIMIT 20, 10 → 跳过前 20 条取第 21~30 条第3页五、总结层面关键点前端分页效果pagination组件负责显示分页条绑定pageNum、pageSize、total前端请求getList→list()→ axios GET将pageNum、pageSize作为参数传给后端后端分页startPage()初始化 PageHelpergetDataTable()封装total和rows返回分页原理PageHelper 拦截 SQL自动执行两条语句count(0)查总数 原查询加LIMITLIMIT 计算LIMIT (pageNum-1)*pageSize, pageSizeoffset 控制起始位置num 控制条数RuoYi 框架通过 PageHelper 插件让开发者无需手动写分页 SQL只需在 Controller 中调用startPage()和getDataTable()即可实现完整的分页功能极大简化了开发工作。