目录
前言
一.问题描述
二.后端实现步骤
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 ⑤当前页的对象集合。
我们遵循中心思想,经过自己的慢慢调试,必定能完成分页查询这项任务,细枝末节需要自己亲自去品尝。
喜欢本篇文章的话,可以留个免费的关注~~