分页查询的实现

目录

前言 

一.问题描述

二.后端实现步骤

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

我们遵循中心思想,经过自己的慢慢调试,必定能完成分页查询这项任务,细枝末节需要自己亲自去品尝。

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33833.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

16003. orin camera 相机驱动源码 imx477分析记录

文章目录 1 背景2 原理图2.1 CAM_MUX_SEL 4 lane 选通2.2 J21 和 J20 原理图3 驱动源码及设备树3.1 子设备树 tegra234-p3768-camera-rbpcv3-imx477.dtsi3.2 顶层设备树 tegra234-camera-rbpcv3-imx477.dtsi3.2.1 tegra-capture-vi 视频输入子系统节点配置.3.2.2 host1x 主机控…

无标签数据增强+高效注意力GAN:基于CARLA的夜间车辆检测精度跃升

目录 一、摘要 二、引言 三、框架 四、方法 生成合成夜间数据 昼夜图像风格转换 针对夜间图像的无标签数据增强技术 五、Coovally AI模型训练与应用平台 六、实验 数据 图像风格转换 夜间车辆检测和分类 结论 论文题目&#xff1a;ENHANCING NIGHTTIME VEHICLE D…

开源工具利器:Mermaid助力知识图谱可视化与分享

在现代 web 开发中&#xff0c;可视化工具对于展示流程、结构和数据关系至关重要。Mermaid 是一款强大的 JavaScript 工具&#xff0c;它使用基于 Markdown 的语法来呈现可定制的图表、图表和可视化。对于展示流程、结构和数据关系至关重要。通过简单的文本描述&#xff0c;你可…

C++算法学习2:二分算法精讲

一、实数二分法回顾 1.1问题背景 在1~2的范围内找到一个x&#xff0c;使得式子5x2 -9x 1 的绝对值<10-9&#xff08;即无限接近0&#xff09; 要求&#xff1a;x精确到小数点后9位。 换句话说也就是求&#xff1a;就是求方程 5x2- 9x 1 0 在1~2内的近似解 1.2怎么找到…

手写一个简易版的tomcat

Tomcat 是一个广泛使用的开源 Servlet 容器&#xff0c;用于运行 Java Web 应用程序。深入理解 Tomcat 的工作原理对于 Java 开发者来说是非常有价值的。本文将带领大家手动实现一个简易版的 Tomcat&#xff0c;通过这个过程&#xff0c;我们可以更清晰地了解 Tomcat 是如何处理…

object.assign和扩展运算法是深拷贝还是浅拷贝,两者区别

object.assign和扩展运算法是深拷贝还是浅拷贝&#xff0c;两者区别 1. 浅拷贝的本质2. Object.assign 和扩展运算符的区别‌3. 具体场景对比‌合并多个对象‌‌复制数组‌‌处理默认值‌ ‌4. 如何实现深拷贝&#xff1f;JSON.parse(JSON.stringify(obj))‌‌递归深拷贝函数第…

X-CLIP和X-FLORENCE论文解读

1.研究背景 尽管已有研究探索了如何将语言-图像模型迁移到其他下游任务&#xff08;如点云理解和密集预测&#xff09;&#xff0c;但视频识别领域的迁移和适应性研究还不够充分。例如&#xff0c;ActionCLIP提出了一种“预训练、提示和微调”的框架用于动作识别&#xff0c;但…

微信小程序刷题逻辑实现:技术揭秘与实践分享

页面展示&#xff1a; 概述 在当今数字化学习的浪潮中&#xff0c;微信小程序以其便捷性和实用性&#xff0c;成为了众多学习者刷题备考的得力工具。今天&#xff0c;我们就来深入剖析一个微信小程序刷题功能的实现逻辑&#xff0c;从代码层面揭开其神秘面纱。 小程序界面布局…

Android UI 组件系列(二):Button 进阶用法

引言 在上一篇博客中&#xff0c;我们介绍了 Button 的基本用法和常见属性&#xff0c;掌握了 Button 的基础知识。然而&#xff0c;在实际开发中&#xff0c;Button 远不止于简单的点击功能&#xff0c;它还可以支持不同的变体、丰富的自定义样式&#xff0c;以及更灵活的状态…

【云馨AI-大模型】RAGFlow功能预览:Dify接入外部知识库RAGFlow指南

介绍 Dify介绍 开源的 LLM 应用开发平台。提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力&#xff0c;轻松构建和运营生成式 AI 原生应用。比 LangChain 更易用。官网&#xff1a;https://dify.ai/zh RAGFlow介绍 RAGFlow 是一款基于深度文档理解构建的…

Redis超高并发分key实现

Redis扛并发的能力是非常强的&#xff0c;所以高并发场景下经常会使用Redis&#xff0c;但是Redis单分片的写入瓶颈在2w左右&#xff0c;读瓶颈在10w左右&#xff0c;如果在超高并发下即使是集群部署Redis&#xff0c;单分片的Redis也是有可能扛不住的&#xff0c;如下图所示&a…

缓存使用的具体场景有哪些?缓存的一致性问题如何解决?缓存使用常见问题有哪些?

缓存使用场景、一致性及常见问题解析 一、缓存的核心使用场景 1. 高频读、低频写场景 典型场景&#xff1a;商品详情页、新闻资讯、用户基本信息。特点&#xff1a;数据更新频率低&#xff0c;但访问量极高。策略&#xff1a; Cache-Aside&#xff08;旁路缓存&#xff09;&a…

HTML5(Web前端开发笔记第一期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例->个人简介列表表格表单input标签单选框radio上传…

ubuntu22.04 关于挂在设备为nfts文件格式无法创建软连接的问题

最近遇到情况&#xff0c;解压工程报错&#xff0c;无法创建软连接 但是盘内还有130G空间&#xff0c;明显不是空间问题&#xff0c;查找之后发现是移动硬盘的文件格式是NTFS&#xff0c;在ubuntu上不好兼容&#xff0c;于是报错。 开贴记录解决方案。 1.确定文件格式 使用命…

深度解读DeepSeek部署使用安全(48页PPT)(文末有下载方式)

深度解读DeepSeek&#xff1a;部署、使用与安全 详细资料请看本解读文章的最后内容。 引言 DeepSeek作为一款先进的人工智能模型&#xff0c;其部署、使用与安全性是用户最为关注的三大核心问题。本文将从本地化部署、使用方法与技巧、以及安全性三个方面&#xff0c;对Deep…

RK3568 Android13 源码编译

提示&#xff1a;RK3568 Android13 源码编译 脚本&#xff0c;源码编译管理方式优化 文章目录 获取源码设置屏幕配置确认屏幕修改源码的设备树 修改线程数整体编译Android固件配置JDK java 环境 source javaenv.sh使能编译 build/envsetup.sh lunch topeet_rk3568-userdebug整体…

【CentOS】搭建Radius服务器

目录 背景简介&#xff1a;Radius是什么&#xff1f;Radius服务器验证原理搭建Radius服务器环境信息yum在线安装配置FreeRADIUS相关文件clients.conf文件users文件重启服务 验证 参考链接 背景 在项目中需要用到Radius服务器作为数据库代理用户的外部验证服务器&#xff0c;做…

ToB公司找客户专用|大数据获客系统

对于ToB公司而言&#xff0c;找到并吸引合适的潜在客户并非易事。传统的获客手段如参加行业展会、电话推销以及直接拜访等&#xff0c;虽然在过去取得了一定成效&#xff0c;但如今却暴露出诸多问题。首先&#xff0c;这些方法往往成本高昂&#xff0c;无论是时间还是金钱上的投…

Linux 文件权限类

目录 文件属性 从左到右的10个字符表示 rwx作用文件和目录的不同解释 图标&#xff1a; 案例实操 chmod 改变权限 基本语法 经验技巧 案例实操 拓展&#xff1a;可以通过一个命令查看用户列表 chown改变所有者 基本语法 选项说明 案例实操 chgrp 改变所属组 基…

DeepSeek技术解析:MoE架构实现与代码实战

以下是一篇结合DeepSeek技术解析与代码示例的技术文章&#xff0c;重点展示其核心算法实现与落地应用&#xff1a; DeepSeek技术解析&#xff1a;MoE架构实现与代码实战 作为中国AI领域的创新代表&#xff0c;DeepSeek在混合专家模型&#xff08;Mixture of Experts, MoE&…