分页查询的实现

前言

一.问题描述

二.后端实现步骤

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 ⑤当前页的对象集合。