深入解析数据分页：从源码到实战 - 指南

场景：
想象你有一本厚达10,000 页的百科全书（数据库里有 1 万条日志数据）。
材料分页？就是1. 什么
“不要一次性把整本书的内容全摊开在桌子上”就是数据分页就，
而是“一次只读一页”。
在软件里，我们告诉框架：“我要看第1页，每页展示10 条数据”。
系统就会只给你拿第 1 到第 10 条，而不是把 1 万条全扔给你。
2. 为什么要进行数据分页？
性能（后端 & 数据库）：假设数据库里100万条执行日志，若是不分页一次性全查出来，数据库会累死（查询慢），服务器内存会撑爆（OOM），系统直接卡死
体验（前端&用户）：如果你在浏览器里一次性渲染100万行表格，浏览器会直接崩溃白屏。而且用户也不能一次性看完100万条数据，他们也是一页一页看的
流量（网络）：传输10条数据可能只要10KB，传输100万条数据可能要几百MB。分页行节省大量的网络带宽

第二部分：源码分析——以操作日志页面为例

第一步：前端（Vue 页面）

位置：找到操作日志的前端代码档案（index.vue）
目标：用哪个变量来接收后端返回的total的就是看看前端在“发请求”时带了什么参数（Eg：pageNum-页面编号,pageSize-页面大小）, 以及前端

定义前端发给后端的“信使-参数”

这两个变量是核心，他们决定了你要看那一部分数据

后端回信：总条数-total

用户操作：点击上一页或下一页等触发getList（）方法

前端得知总数的唯一途径就是关键：this.total = response.total;——这
思路流程图：

那么用户操作在哪里展示了？——分页组件（`pagination`）

当什么情况发生时触发？
- 用户点击“上一页/下一页”
- 用户修改“每页条数”
- 用户跳转到某一页
触发后做什么？
- 执行 getList() 方法
- 发起新的请求，获取新页面的数据

整个流程：改变参数 → 触发请求 → 更新信息

小结

前端其实很便捷，它只负责“提要求”（我要第2页，10条数据）和“展示结果怎么算出来的，前端完全不知道，全靠后端给。就是”（渲染表格，根据total渲染页码）。至于78条总数
补充：Vue 小技巧：.sync 是一个魔法修饰符。意思是：当你在界面上点击“下一页”时，组件会自动修改 queryParams.pageNum 的值，然后通过 pagination="getList" 再次触发查询。

第二步：网络拦截

第三步：后端分页处理

根据接口找到后端代码——ISysOperlogController.java

第一步：开启 `startPage()` —— 从 HTTP 到 ThreadLocal

疑问：参数pageNum和pageSize去哪里了？没有看到有代码接收他们

解决：（代码追踪）

Controller层（ISysOperlogController.java）
父类BaseController(BaseController.java)——[ctrl+startPage+鼠标]

应用类（PageUtils.java）

行号	代码	作用
①	`TableSupport.buildPageRequest()`	从当前 HTTP 请求中提取 `pageNum` 和 `pageSize` 参数 → 来自前端 URL：`?pageNum=2&pageSize=10`
②	`pageDomain.getPageNum()`	获取当前页码（如 2）
③	`pageDomain.getPageSize()`	获取每页大小（如 10）
④	`isNotNull(pageNum) && isNotNull(pageSize)`	判断参数是否有效，防止空值导致异常
⑤	`SqlUtil.escapeOrderBySql(...)`	安全处理排序字段（防 SQL 注入），比如将 `desc` 转成 `DESC`
⑥	`pageDomain.getReasonable()`	是否开启“合理化分页”（默认 true） → 如果用户输入 `pageNum=999`, `pageSize=10`，但总记录只有 50 条，则自动跳转到第 5 页
⑦	`PageHelper.startPage(...)`	关键！调用 PageHelper 核心方式，开启分页拦截