目录
前言
一.问题描述
二.后端实现步骤
2.1配置PageHelper插件
①导入依赖
②在application.yml配置文件中添加相关配置
2.2编写一个入门的程序，体验分页过程
2.3定义一个vo，用来收集分页后的所有信息
2.4修改serviceImpl层的代码
2.5动态设置当前页码pageNum、每页行数pageSize
2.6总结
三.前端实现步骤
3.1定义数据pageInfo
3.2编写分页组件Pagination
3.3编写@change函数
3.4展示效果
结语
前言
前言：在vue项目开发时，分页查询是绕不开的一个环节。试想，假设我们的某张表有1000条数据，我们总不能一次性全部查询出来吧，那样页面就展示不开。正确的做法应该是将这1000条数据分好几个页面，我们查询时，就查询其中一页的数据。
举例：我们将这1000条数据，分成100页，每页只显示10行数据，因此我们查询某一页时，只用展示10行数据即可。这样就解决了表格数据展示不开的问题。
一.问题描述
我们为什么需要分页查询呢？原因如下：如下图，我们要展示一张表的全部记录时，如果不分页展示，直接就是一大篇，显得很臃肿，所以我们想做一个分页查询，选择不同的页码，来展示对应页码的数据。
二.后端实现步骤
2.1配置PageHelper插件
①导入依赖
(注意：springboot 3.x的项目，至少要用1.4.6版本的PageHelper插件)
<!--分页查询插件pagehelper-->
<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version>
</dependency>②在application.yml配置文件中添加相关配置
pagehelper:helper-dialect: mysqlreasonable: truesupport-methods-arguments: trueparams: count=countSql解读上述配置项：
经过以上两步，我们就成功配置好了PageHelper插件。
2.2编写一个入门的程序，体验分页过程
//查询所有挂号记录public List<Register> queryAllRegister(String registerName) {/*return registerMapper.queryAllRegister(registerName);*///1、必须在第一行开启分页查询PageHelper.startPage(1,3);//查询第1页，每页3条数据//2、获取原始查询结果List<Register> registers = registerMapper.queryAllRegister(registerName);//3、将原始查询结果进行分页PageInfo<Register> registerPageInfo = new PageInfo<>(registers);//3.1 获取分页后的对象集合List<Register> list = registerPageInfo.getList();//3.2 获取总行数long total = registerPageInfo.getTotal();//3.3 获取当前页码int pageNum = registerPageInfo.getPageNum();//3.4 获取总页数int pages = registerPageInfo.getPages();//3.5 获取每页的行数int pageSize = registerPageInfo.getPageSize();System.out.println("总行数" + total);System.out.println("获取当前页码" + pageNum);System.out.println("获取总页数" + pages);System.out.println("pageSize" + pageSize);//返回分页后的信息return list;}注意：我们在该代码中，已经定死了就查询第1页数据，每页3条数据。
运行效果：使用apifox发送请求，后端接口返回的数据如下。可见此时返回的结果就3条数据。
{
"code": 200,
"message": "ok",
"data": [
{
"id": 1,
"number": "HIS-SJWK-0001",
"registerName": "李秀英",
"gender": 2,
"idNumber": "131081197809232510",
"birthday": "1978-09-23",
"age": 47,
"ageType": "岁",
"homeAddress": "北京市朝阳区",
"visitDate": "2025-03-12",
"noon": "上午",
"deptCategoryId": 1,
"deptId": 1,
"regisLeId": 1,
"clinicId": 3,
"settleId": 1,
"isBook": "0",
"registTime": "2025-03-09 12:37:09",
"registerId": 2,
"visitState": 1,
"deptCategoryName": "外科",
"deptName": "神经外科",
"registName": "专家号",
"clinicNickname": "孙明",
"settleName": "自费",
"registerNickname": "张敏",
"deptCode": null
},
{
"id": 53,
"number": "HIS-SJWK-0002",
"registerName": "缴鸿剑",
"gender": 1,
"idNumber": "131081200209232510",
"birthday": "2002-09-23",
"age": 23,
"ageType": "岁",
"homeAddress": "河北省廊坊市霸州市胜芳镇",
"visitDate": "2025-03-12",
"noon": "上午",
"deptCategoryId": 1,
"deptId": 1,
"regisLeId": 1,
"clinicId": 3,
"settleId": 1,
"isBook": "0",
"registTime": "2025-03-11 21:10:27",
"registerId": 2,
"visitState": 1,
"deptCategoryName": "外科",
"deptName": "神经外科",
"registName": "专家号",
"clinicNickname": "孙明",
"settleName": "自费",
"registerNickname": "张敏",
"deptCode": null
},
{
"id": 54,
"number": "HIS-SJWK-003",
"registerName": "温霜降",
"gender": 2,
"idNumber": "131081199808262480",
"birthday": "1998-08-26",
"age": 27,
"ageType": "岁",
"homeAddress": "北京市朝阳区",
"visitDate": "2025-03-13",
"noon": "下午",
"deptCategoryId": 1,
"deptId": 1,
"regisLeId": 2,
"clinicId": 10,
"settleId": 2,
"isBook": "0",
"registTime": "2025-03-11 23:18:52",
"registerId": 2,
"visitState": 1,
"deptCategoryName": "外科",
"deptName": "神经外科",
"registName": "普通号",
"clinicNickname": "赵小川",
"settleName": "医保",
"registerNickname": "张敏",
"deptCode": null
}
]
}
可见此时数据库的表中，一共12行数据，每页3行数据，所以一共分了4页，我们查询的是第一页的数据。
2.3定义一个vo，用来收集分页后的所有信息
@Data
public class PageVo<T> {/* 分页相关的数据 */private long total;//总行数。举例：该表总共20行private int pageNum;//当前页码。举例：当前处于第3页private int pages;//总页数。举例：总共4页private int pageSize;//每页的行数。举例：每页5行/* 某一页的数据 */private List<T> data;//举例：第4页的全部数据}
2.4修改serviceImpl层的代码
修改完了serviceImpl以后，别忘了修改service 接口的对应返回值。
controller层也要修改下。
使用apifox发送请求，查看后端响应的数据：
2.5动态设置当前页码pageNum、每页行数pageSize
也要修改controller层：
使用apifox请求该接口，查看响应结果：
此时就实现了动态设置当前页码、每页行数的目标。
2.6总结
后端实现分页，说白了就两步：
1、给后端接口，传入两个参数：①当前页码pageNum + ②每页行数 pageSize
2、后端响应回一个分页pageVo，里面包含五个部分：①总行数total ②当前页码pageNum ③总页数pages ④每页行数pageSize ⑤当前页的对象集合。
三.前端实现步骤
前端使用element-plus的分页组件Pagination来实现。
3.1定义数据pageInfo
3.2编写分页组件Pagination
<!-- 分页组件todo -->
<el-pagination style="margin-top: 10px;" background :page-size="pageInfo.pageSize" layout="prev, pager, next, total" :total="pageInfo.total" @change="changePageNumOrPageSize"/> 解读：
①background表示要显示按钮背景颜色。
②:page-size用来动态绑定每页行数
③layout="prev, pager, next, total"表示分页组件要显示上一页按钮、每页按钮、下一页按钮、总行数。
④:total表示动态绑定总行数。
⑤@change函数，是element-plus官方定的，表示当前页码pageNum、每页行数pageSize发生变化时，触发的函数，该函数内，自带两个参数newPageNum、newPageSize，即最新页码、最新每页行数，我们可以根据这两个值，进行后端查询，获取最新页的数据。
3.3编写@change函数
/* 当pageNum或者pageSize发生改变时，触发changePageNumOrPageSize */
const changePageNumOrPageSize = (newPageNum, newPageSize) => {//alert("当前页码：" + newPageNum + "当前每页面行数：" + newPageSize);//给当前页pageNum 和 每页行数pageSize赋值pageInfo.value.pageNum = newPageNum;pageInfo.value.pageSize = newPageSize;//重新进行分页查询doQueryAllRegister();
}3.4展示效果
结语
以上就是分页查询的前、后端详解。
无论多么复杂，始终中心思想就是：
第一步：在前端，往后端分页查询接口传入两个参数，①当前页码pageNum ②每页行数pageSize
第二步：后端会返回给前端一个分页响应体，里面包含了五部分，①总行数total ②当前页码pageNum ③总页数pages ④每页的行数pageSize ⑤当前页的对象集合。
我们遵循中心思想，经过自己的慢慢调试，必定能完成分页查询这项任务，细枝末节需要自己亲自去品尝。
喜欢本篇文章的话，可以留个免费的关注~~