一、项目技术栈概述
本项目采用当前主流的前后端分离架构：

前端：Vue.js 2.x + Element UI组件库
后端：Spring Boot + MyBatis
数据库：MySQL
分页插件：PageHelper
RuoYi-Vue是一个成熟的开源后台管理系统，其分页实现方式非常规范，非常适合学习参考。

二、分页功能整体架构

在开始代码实现之前，我们需要先了解分页的整体流程：
用户点击分页 → 前端传递分页参数 → 后端接收参数 → PageHelper拦截SQL → 执行分页查询 → 返回分页数据 → 前端渲染

整个分页流程涉及以下几个关键环节：

1.前端Vue组件的Pagination组件
2.前端查询参数的封装
3.前端API接口调用
4.后端Controller层处理
5.后端Service层业务逻辑
6.MyBatis Mapper层SQL映射
7.PageHelper分页插件

三、前端代码实现
3.1 分页组件的使用
在前端页面中，我们使用Element UI提供的Pagination组件来实现分页功能。以下是字典管理页面的关键代码：

这个组件有几个关键属性：

total：总记录数，控制分页组件的显示
page：当前页码，通过sync修饰符实现双向绑定
limit：每页显示条数，同样支持双向绑定
@pagination：分页事件，当用户切换页码或每页数量时触发
3.2 查询参数的封装
分页查询需要传递页码和每页数量等参数，我们通过queryParams对象进行封装：

其中：

pageNum：当前页码，默认第1页
pageSize：每页记录数，默认10条
dictName、dictType、status：其他查询条件，用于条件查

3.3 数据加载方法
当分页参数发生变化时，我们需要重新加载数据：

这个方法的执行流程如下：

1.设置loading状态，显示加载动画
2.调用API接口，传递查询参数（包含分页参数）
3.接口返回后，将数据赋值给typeList（数据列表）
4.将总记录数赋值给total
5.关闭loading状态

3.4 API接口定义
前端通过封装好的API函数向后端发起请求：

这里使用了GET请求，查询参数通过params传递。当用户切换分页时，URL会变成类似：/system/dict/type/list?pageNum=2&pageSize=10。

四、后端代码实现
4.1 Controller层处理
后端Controller负责接收前端请求，并调用分页服务：

这个方法中有两个关键调用：

startPage()：这是分页的起点，会解析PageHelper的分页参数
getDataTable(list)：将查询结果封装成分页数据格式
4.2 Service层业务逻辑
Service层负责处理业务逻辑，本质上是调用Mapper层：

Service层在这里起到解耦的作用，将Controller和Mapper连接起来。

4.3 Mapper层SQL映射
Mapper层通过MyBatis XML文件定义SQL语句：

这里使用了MyBatis的动态SQL功能，可以根据条件动态拼接SQL语句。

五、分页核心原理
5.1 PageHelper插件原理
PageHelper是MyBatis的分页插件，它的核心原理是拦截SQL，自动在SQL后面添加分页语句：

• MySQL：自动在SQL末尾添加 LIMIT {pageSize} OFFSET {startRow}
• Oracle：自动添加 ROWNUM 条件

当调用startPage()方法后，PageHelper会：

1. 从ThreadLocal中获取分页参数
2. 拦截Executor的query方法
3. 将普通SQL包装成分页SQL
4. 自动查询总记录数

5.2 BaseController核心方法
RuoYi框架将分页逻辑封装在BaseController中：

TableDataInfo包含四个关键字段：

• code：状态码，表示请求是否成功
• msg：提示信息
• rows：当前页的数据列表
• total：总记录数

5.3 前端响应数据解析
前端接收到后端返回的JSON数据后：

{
  "code": 200,
  "msg": "查询成功",
  "rows": [...],      // 当前页数据
  "total": 100        // 总记录数
}

前端根据total计算总页数，rows用于渲染表格数据。

六、运行效果展示
6.1 前端开发者工具分析
打开浏览器开发者工具（F12），切换到Network标签，我们可以观察到分页请求：

请求URL示例：

Query String Parameters：

pageNum: 1（当前页码）
pageSize: 10（每页数量）

响应数据：

6.2 后端日志分析
在后端控制台，我们可以看到PageHelper打印的SQL日志：

7.总结
本文详细介绍了RuoYi-Vue框架中数据分页功能的完整实现过程：

前端：通过Element UI的Pagination组件实现用户交互
后端：使用PageHelper插件简化分页逻辑
核心：BaseController封装了startPage()和getDataTable()两个关键方法
原理：PageHelper通过拦截SQL自动添加分页语句