数据分页功能分析（用户管理）

一、页面选择

本次选用若依 Vue 后台 系统管理 → 用户管理 页面，页面地址：http://localhost/system/user属于业务数据列表，不是操作日志，符合作业分页要求；数据量适中，自带标准分页栏：页码、每页条数、总记录数、搜索重置功能，是典型后台分页场景。

二、不分页存在三大问题

1. 前端：一次性加载全部数据，页面 DOM 过多，卡顿卡死，渲染慢、占用内存高。
2. 网络：一次性传输大量 JSON 数据，带宽占用高，容易超时、加载缓慢。
3. 后端：全表查询无限制，数据库压力大、CPU 高并发容易拖垮服务。使用分页可以按需请求、按需加载、按需渲染，大幅提升前后端整体性能。

三、前端代码分析

1. 分页组件 index.vue

若依封装 <pagination> 分页组件核心逻辑：

• total：后端返回总记录数，控制分页栏显示隐藏
• page.sync：绑定当前页码 pageNum
• limit.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：

1. 统计总条数：SELECT count(0) FROM sys_user ...
2. 分页查询数据：SELECT ... FROM sys_user ... LIMIT ?, ?

六、分页整体流程总结

1. 前端切换页码 / 选择每页条数 → 自动携带 pageNum、pageSize 请求后端
2. 后端 startPage 开启 PageHelper 分页
3. Mapper 普通查询，插件自动加 LIMIT
4. 封装 rows 当前页、total 总条数返回
5. 前端接收数据，渲染表格和分页控件

核心：PageHelper 无侵入自动分页，前后端约定 pageNum/pageSize 参数，实现标准业务分页。

本次作业通过用户管理模块，完整实践了前后端协同分页的实现，理解了 PageHelper 无侵入分页插件的工作原理，掌握了从前端交互到数据渲染的完整流程，完成了课程作业目标。