一、页面选择
本次选用若依 Vue 后台系统管理 → 用户管理页面，页面地址：http://localhost/system/user属于业务数据列表，不是操作日志，符合作业分页要求；数据量适中，自带标准分页栏：页码、每页条数、总记录数、搜索重置功能，是典型后台分页场景。
二、不分页存在三大问题
- 前端：一次性加载全部数据，页面 DOM 过多，卡顿卡死，渲染慢、占用内存高。
- 网络：一次性传输大量 JSON 数据，带宽占用高，容易超时、加载缓慢。
- 后端：全表查询无限制，数据库压力大、CPU 高并发容易拖垮服务。使用分页可以按需请求、按需加载、按需渲染，大幅提升前后端整体性能。
三、前端代码分析
1. 分页组件 index.vue
若依封装<pagination>分页组件核心逻辑：
total：后端返回总记录数，控制分页栏显示隐藏page.sync：绑定当前页码pageNumlimit.sync：绑定每页条数pageSize@pagination：切换页码自动触发getList重新请求数据
2. 分页请求参数定义
在queryParams中定义分页基础参数：
3. 数据请求方法
getList方法为分页请求的核心逻辑：
4. 接口请求 user.js
前端把pageNum、pageSize自动拼在 URL 参数里，用 GET 请求传给后端：
四、浏览器请求与响应分析
1. 请求详情
- 请求地址：
http://localhost/dev-api/system/user/list?pageNum=1&pageSize=10 - 请求方法：
GET - 请求参数：
pageNum=1（当前页）、pageSize=10（每页条数）
核心说明：请求参数pageNum=1&pageSize=10，表示请求第 1 页、每页 10 条用户管理数据，请求状态码 200，接口响应正常。
2. 响应结果
后端返回标准分页格式数据：
五、后端分页实现核心代码
RuoYi-Vue 后端采用PageHelper 分页插件实现零侵入式分页，核心流程如下：
1. 控制器接口层
在SysUserController.java中，用户列表接口直接通过startPage()开启分页，无需手动拼接 SQL：
2. 分页工具类封装
这是BaseController里的startPage()方法：![]()
它是对分页工具类的封装，让所有继承它的控制器都能直接调用startPage()来开启分页，而不用每次都写PageUtils.startPage()。
PageUtils.java是分页功能的核心工具类，负责解析请求参数并调用 PageHelper：
3. 分页响应数据封装
getDataTable()方法将查询结果封装成前端需要的标准格式：
4. Mapper XML 与 SQL 日志
（1）Mapper XML 配置
用户列表查询的 Mapper XML 中，仅编写普通业务 SQL，不手动添加 LIMIT 分页语句，分页逻辑由 PageHelper 插件自动处理：
（2）后端 SQL 日志输出
PageHelper 插件会自动拦截查询请求，生成两条 SQL：
- 统计总条数：
SELECT count(0) FROM sys_user ... - 分页查询数据：
SELECT ... FROM sys_user ... LIMIT ?, ?
六、分页整体流程总结
- 前端切换页码 / 选择每页条数 → 自动携带 pageNum、pageSize 请求后端
- 后端 startPage 开启 PageHelper 分页
- Mapper 普通查询，插件自动加 LIMIT
- 封装 rows 当前页、total 总条数返回
- 前端接收数据，渲染表格和分页控件
核心：PageHelper 无侵入自动分页，前后端约定 pageNum/pageSize 参数，实现标准业务分页。
本次作业通过用户管理模块，完整实践了前后端协同分页的实现，理解了 PageHelper 无侵入分页插件的工作原理，掌握了从前端交互到数据渲染的完整流程，完成了课程作业目标。
)
