您的位置:首页 > 教育 > 培训 > 农村办厂暴利项目_赣州市网络科技有限公司_seo常见的优化技术_北京seo排名方法

农村办厂暴利项目_赣州市网络科技有限公司_seo常见的优化技术_北京seo排名方法

2025/3/16 5:06:24 来源:https://blog.csdn.net/qq_63981644/article/details/146253221  浏览:    关键词:农村办厂暴利项目_赣州市网络科技有限公司_seo常见的优化技术_北京seo排名方法
农村办厂暴利项目_赣州市网络科技有限公司_seo常见的优化技术_北京seo排名方法

目录

前言 

一.问题描述

二.后端实现步骤

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

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

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

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com