分页查询的实现

目录

前言

一.问题描述

二.后端实现步骤

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插件)

XML 复制代码
<!--分页查询插件pagehelper-->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.6</version>
</dependency>

②在application.yml配置文件中添加相关配置

XML 复制代码
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

解读上述配置项:

经过以上两步,我们就成功配置好了PageHelper插件。

2.2编写一个入门的程序,体验分页过程

java 复制代码
    //查询所有挂号记录
    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,用来收集分页后的所有信息

java 复制代码
@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

html 复制代码
<!-- 分页组件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函数

javascript 复制代码
/* 当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 ⑤当前页的对象集合。
我们遵循中心思想,经过自己的慢慢调试,必定能完成分页查询这项任务,细枝末节需要自己亲自去品尝。

喜欢本篇文章的话,可以留个免费的关注~~

相关推荐
坚持不懈的大白2 个月前
后端:MyBatis
mybatis·pagehelper
我叫白小猿3 个月前
【日常记录-Mybatis】PageHelper导致语句截断
java·sql·mybatis·分页·pagehelper
岁岁岁平安4 个月前
JavaWeb实战(1)(重点:分页查询、jstl标签与jsp、EL表达式、Bootstrap组件搭建页面、jdbc)
java·servlet·javaweb·jsp·el·分页查询·jstl
岁岁岁平安4 个月前
springboot实战(19)(条件分页查询、PageHelper、MYBATIS动态SQL、mapper映射配置文件、自定义类封装分页查询数据集)
java·spring boot·后端·mybatis·动态sql·pagehelper·条件分页查询
cooldream20094 个月前
使用 PageHelper 在 Spring Boot 项目中实现分页查询
java·spring boot·后端·分页·pagehelper
zzzzzzzz'6 个月前
个人旅游网(3)——功能详解——旅游路线功能
web·旅游·分页查询·模糊搜索
S-X-S7 个月前
分页查询面试记录和面试详情
分页查询
码农研究僧10 个月前
详细分析Mybatis与MybatisPlus中分页查询的差异(附Demo)
xml·java·mybatis·mybatisplus·分页查询
失舵之舟-1 年前
【Mysql数据库基础05】子查询 where、from、exists子查询、分页查询
数据库·mysql·子查询·数据库系统·分页查询·where子查询·from子查询