分页展示原理

已于 2023-08-21 21:20:46 修改
阅读量445 收藏 5
点赞数
分类专栏： Javaweb 文章标签： java
于 2023-08-16 11:46:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61123567/article/details/132316346
版权

分页展示原理

分页查询的语法：

select * from emp limit 0,5

  • 参数1：起始索引 = (页码 - 1) * 每页展示数

  • 参数2：查询返回记录数 = 每页展示数

前后端数据

在这里插入图片描述

我们继续基于页面原型，继续分析，得出以下结论：

  1. 前端在请求服务端时，传递的参数
    • 当前页码 page
    • 每页显示条数 pageSize
  2. 后端需要响应什么数据给前端
    • 所查询到的数据列表（存储到List 集合中）
    • 数据库中的总记录条数

后台给前端返回的数据包含：List集合(数据列表)、total(总记录数)

而这两部分我们通常封装到PageBean对象中，并将该对象转换为json格式的数据响应回给浏览器。

package com.package1.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

/**
 * 分页查询结果封装类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {
    private Long total; //总记录数
    private List rows; //当前页数据列表
}

总体架构如下：

在这里插入图片描述

分页查询需要的数据，封装在PageBean对象中：

在这里插入图片描述

接口文档

员工列表查询

基本信息

  请求路径：/emps
  
  请求方式：GET
  
  接口描述：该接口用于员工列表数据的条件分页查询

请求参数

参数格式：queryString

参数说明：

参数名称是否必须示例备注
name否张姓名
gender否1性别 , 1 男 , 2 女
begin否2010-01-01范围匹配的开始时间(入职日期)
end否2020-01-01范围匹配的结束时间(入职日期)
page是1分页查询的页码，如果未指定，默认为1
pageSize是10分页查询的每页记录数，如果未指定，默认为10

请求数据样例：

  /emps?name=张&gender=1&begin=2007-09-01&end=2022-09-01&page=1&pageSize=10

响应数据

参数格式：application/json

参数说明：

名称类型是否必须默认值备注其他信息
codenumber必须响应码, 1 成功 , 0 失败
msgstring非必须提示信息
dataobject必须返回的数据
|- totalnumber必须总记录数
|- rowsobject []必须数据列表item 类型: object
|- idnumber非必须id
|- usernamestring非必须用户名
|- namestring非必须姓名
|- passwordstring非必须密码
|- entrydatestring非必须入职日期
|- gendernumber非必须性别 , 1 男 ; 2 女
|- imagestring非必须图像
|- jobnumber非必须职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师
|- deptIdnumber非必须部门id
|- createTimestring非必须创建时间
|- updateTimestring非必须更新时间

响应数据样例：

{
  "code": 1,
  "msg": "success",
  "data": {
    "total": 2,
    "rows": [
       {
        "id": 1,
        "username": "jinyong",
        "password": "123456",
        "name": "金庸",
        "gender": 1,
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
        "job": 2,
        "entrydate": "2015-01-01",
        "deptId": 2,
        "createTime": "2022-09-01T23:06:30",
        "updateTime": "2022-09-02T00:29:04"
      },
      {
        "id": 2,
        "username": "zhangwuji",
        "password": "123456",
        "name": "张无忌",
        "gender": 1,
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
        "job": 2,
        "entrydate": "2015-01-01",
        "deptId": 2,
        "createTime": "2022-09-01T23:06:30",
        "updateTime": "2022-09-02T00:29:04"
      }
    ]
  }
}

代码实现

首先完成实体类PageBean：

package com.package1.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

/**
 * 分页查询结果封装类
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean {
    private Long total; //总记录数
    private List rows; //当前页数据列表
}

注意：实体类的属性名和接口文档中的响应数据的key是一样的：

在这里插入图片描述

先仅实现分页功能，没有实现条件查询：

通过查看接口文档：员工列表查询

请求路径：/emps

请求方式：GET

请求参数：跟随在请求路径后的参数字符串。 例：/emps?page=1&pageSize=10

响应数据：json格式

EmpController

import com.itheima.pojo.PageBean;
import com.itheima.pojo.Result;
import com.itheima.service.EmpService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@Slf4j
@RestController
@RequestMapping("/emps")
public class EmpController {

    @Autowired
    private EmpService empService;

    //条件分页查询
    @GetMapping
    public Result page(@RequestParam(defaultValue = "1") Integer page,
                       @RequestParam(defaultValue = "10") Integer pageSize) {
        //记录日志
        log.info("分页查询，参数：{},{}", page, pageSize);
        //调用业务层分页查询功能
        PageBean pageBean = empService.page(page, pageSize);
        //响应
        return Result.success(pageBean);
    }
}

@RequestParam(defaultValue=“默认值”) //设置请求参数默认值

EmpService

public interface EmpService {
    /**
     * 条件分页查询
     * @param page 页码
     * @param pageSize 每页展示记录数
     * @return
     */
    PageBean page(Integer page, Integer pageSize);
}

EmpServiceImpl

import com.itheima.mapper.EmpMapper;
import com.itheima.pojo.Emp;
import com.itheima.pojo.PageBean;
import com.itheima.service.EmpService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.time.LocalDate;
import java.util.List;

@Slf4j
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;

    @Override
    public PageBean page(Integer page, Integer pageSize) {
        //1、获取总记录数
        Long count = empMapper.count();

        //2、获取分页查询结果列表
        Integer start = (page - 1) * pageSize; //计算起始索引 , 公式: (页码-1)*页大小
        List<Emp> empList = empMapper.list(start, pageSize);

        //3、封装PageBean对象
        PageBean pageBean = new PageBean(count , empList);
        return pageBean;
    }
}

EmpMapper

@Mapper
public interface EmpMapper {
    //获取总记录数
    @Select("select count(*) from emp")
    public Long count();

    //获取当前页的结果列表
    @Select("select * from emp limit #{start}, #{pageSize}")
    public List<Emp> list(Integer start, Integer pageSize);
}

功能开发完成后，重新启动项目，使用postman，发起POST请求：

在这里插入图片描述

前后端联调，打开浏览器，测试后端功能接口：

在这里插入图片描述

分页插件

介绍

前面我们已经完了基础的分页查询，大家会发现：分页查询功能编写起来比较繁琐。

在这里插入图片描述

在Mapper接口中定义两个方法执行两条不同的SQL语句：

  1. 查询总记录数
  2. 指定页码的数据列表

在Service当中，调用Mapper接口的两个方法，分别获取：总记录数、查询结果列表，然后在将获取的数据结果封装到PageBean对象中。

大家思考下：在未来开发其他项目，只要涉及到分页查询功能(例：订单、用户、支付、商品)，都必须按照以上操作完成功能开发

结论：原始方式的分页查询，存在着"步骤固定"、"代码频繁"的问题

解决方案：可以使用一些现成的分页插件完成。对于Mybatis来讲现在最主流的就是PageHelper。

PageHelper是Mybatis的一款功能强大、方便易用的分页插件，支持任何形式的单标、多表的分页查询。

官网：https://pagehelper.github.io/

在这里插入图片描述

在执行empMapper.list()方法时，就是执行：select * from emp 语句，怎么能够实现分页操作呢？

分页插件帮我们完成了以下操作：

  1. 先获取到要执行的SQL语句：select * from emp
  2. 把SQL语句中的字段列表，变为：count(*)
  3. 执行SQL语句：select count(*) from emp //获取到总记录数
  4. 再对要执行的SQL语句：select * from emp 进行改造，在末尾添加 limit ? , ?
  5. 执行改造后的SQL语句：select * from emp limit ? , ?

代码实现

当使用了PageHelper分页插件进行分页，就无需再Mapper中进行手动分页了。 在Mapper中我们只需要进行正常的列表查询即可。在Service层中，调用Mapper的方法之前设置分页参数，在调用Mapper方法执行查询之后，解析分页结果，并将结果封装到PageBean对象中返回。

1、在pom.xml引入依赖

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.2</version>
</dependency>

2、EmpMapper

@Mapper
public interface EmpMapper {
    //获取当前页的结果列表
    @Select("select * from emp")
    public List<Emp> list(Integer start, Integer pageSize);
}

3、EmpServiceImpl

@Override
public PageBean page(Integer page, Integer pageSize) {
    //1、获取总记录数
    Long count = empMapper.count();

    //2、获取分页查询结果列表
    Integer start = (page - 1) * pageSize; //计算起始索引 , 公式: (页码-1)*页大小
    List<Emp> empList = empMapper.list(start, pageSize);

    //3、封装PageBean对象
    PageBean pageBean = new PageBean(count , empList);
    return pageBean;
}

测试

功能开发完成后，我们重启项目工程，打开postman，发起GET请求，访问 ：http://localhost:8080/emps?page=1&pageSize=5

在这里插入图片描述

分页查询(带条件)

完了分页查询后，下面我们需要在分页查询的基础上，添加条件。

在这里插入图片描述

通过员工管理的页面原型我们可以看到，员工列表页面的查询，不仅仅需要考虑分页，还需要考虑查询条件。 分页查询我们已经实现了，接下来，我们需要考虑在分页查询的基础上，再加上查询条件。

我们看到页面原型及需求中描述，搜索栏的搜索条件有三个，分别是：

  • 姓名：模糊匹配
  • 性别：精确匹配
  • 入职日期：范围匹配
select * 
from emp
where 
  name like concat('%','张','%')   -- 条件1：根据姓名模糊匹配
  and gender = 1                   -- 条件2：根据性别精确匹配
  and entrydate = between '2000-01-01' and '2010-01-01'  -- 条件3：根据入职日期范围匹配
order by update_time desc;

而且上述的三个条件，都是可以传递，也可以不传递的，也就是动态的。 我们需要使用前面学习的Mybatis中的动态SQL 。

通过查看接口文档：

员工列表查询

请求路径：/emps

请求方式：GET

请求参数：

参数名称是否必须示例备注
name否张姓名
gender否1性别 , 1 男 , 2 女
begin否2010-01-01范围匹配的开始时间(入职日期)
end否2020-01-01范围匹配的结束时间(入职日期)
page是1分页查询的页码，如果未指定，默认为1
pageSize是10分页查询的每页记录数，如果未指定，默认为10

在原有分页查询的代码基础上进行改造：

EmpController

@Slf4j
@RestController
@RequestMapping("/emps")
public class EmpController {

    @Autowired
    private EmpService empService;

    /**
     * 员工数据条件分页查询
     * @param page 当前页
     * @param pageSize 每页大小
     * @param name 员工姓名
     * @param gender 性别
     * @param begin 入职时间
     * @param end 离职时间
     * @return PageBean对象
     */
    @GetMapping
    public Result page(@RequestParam(defaultValue = "1") Integer page,
                       @RequestParam(defaultValue = "10") Integer pageSize,
                       String name, Short gender,
                       @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate begin,
                       @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate end) {
        //记录日志
        log.info("分页查询，参数：{},{},{},{},{},{}", page, pageSize,name, gender, begin, end);
        //调用业务层分页查询功能
        PageBean pageBean = empService.page(page, pageSize, name, gender, begin, end);
        //响应
        return Result.success(pageBean);
    }
}

EmpService

public interface EmpService {
    /**
     * 条件分页查询
     * @param page     页码
     * @param pageSize 每页展示记录数
     * @param name     姓名
     * @param gender   性别
     * @param begin   开始时间
     * @param end     结束时间
     * @return
     */
    PageBean page(Integer page, Integer pageSize, String name, Short gender, LocalDate begin, LocalDate end);
}

EmpServiceImpl

@Slf4j
@Service
public class EmpServiceImpl implements EmpService {
    @Autowired
    private EmpMapper empMapper;

    @Override
    public PageBean page(Integer page, Integer pageSize, String name, Short gender, LocalDate begin, LocalDate end) {
        //设置分页参数
        PageHelper.startPage(page, pageSize);
        //执行条件分页查询
        List<Emp> empList = empMapper.list(name, gender, begin, end);
        //获取查询结果
        Page<Emp> p = (Page<Emp>) empList;
        //封装PageBean
        PageBean pageBean = new PageBean(p.getTotal(), p.getResult());
        return pageBean;
    }
}

EmpMapper

/**
 * 获取当前页的结果列表，基于动态sql（Alt+Shift+Enter生成xml文件）
 * @return
 */
public List<Emp> list(String name, Short gender, LocalDate begin, LocalDate end);

EmpMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.mapper.EmpMapper">

    <!-- 条件分页查询 -->
    <select id="list" resultType="com.package1.pojo.Emp">
        select * from emp
        <where>
            <if test="name != null and name != ''">
                name like concat('%',#{name},'%')
            </if>
            <if test="gender != null">
                and gender = #{gender}
            </if>
            <if test="begin != null and end != null">
                and entrydate between #{begin} and #{end}
            </if>
        </where>
        order by update_time desc
    </select>
</mapper>

功能测试

功能开发完成后，重启项目工程，打开postman，发起GET请求：

在这里插入图片描述

前后端联调

在这里插入图片描述

分页查询
学会改变自己——才能突破
02-22 7万+
分页查询，就是将将过多的结果在有限的界面上分好多页来显示，这个是很多网站常用的功能，也是最基本的功能，今天简单总结一下。           分页以前听人们说都是一项技术，但是我觉的不尽然。我认为分页是将数据库的数据，利用一些特殊的sql语句来进行查询，显示理所应当显示的内容，更恰当的说可以是对SQL语句的灵活运用，对逻辑思维的简单使用。           一，一般人们将分
分页技术原理与实现之分页的意义及方法（一）
01-19
 分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不是全部数据,而是其中的一部分,如果在其中没有找到自习自己想要的内容,用户可以通过制定页码或是翻页的方式转换可见内容,直到找到自己想要的内容为止....
Java实现分页查询
12-30
java编写的jdbc+servlet+jstl+el写的分页代码（附带数据库oracle）
java实现分页查询
老隋的播客
01-30 6680
一.抽取页面模型和页码部分jsp ①按照下图红色选框中的内容抽取页面实体类 public class Page&lt;T&gt; { //基本属性 private int currentPage;//当前页数，由用户指定 private int pageSize = 5 ;//每页显示的条数，固定的 private int totalRecords;//总记录条数...
掌握分页显示技术：原理、实现与优化
最新发布
weixin_42527589的博客
03-13 737
在数字化信息爆炸的今天，分页显示技术成为解决大量数据展示难题的关键。它通过将数据分割成小的“页面”，让用户能够逐步浏览，提高了信息检索的效率和用户体验。本章将介绍分页技术的基本概念，包括其起源、目的以及与用户交互的基本方式。后端分页逻辑需要处理数据的查询、排序、限制返回的数据量等，确保在有限的资源下，能够高效地响应前端的分页请求。
Java 分页查询实现
博客主要分享技术教程、工具教程、bug解决、前沿技术动态、编程经验、心得感悟等。 内容同步、干货获取、推广宣发请看侧栏推广信息
04-17 1571
每个人都有惰性，但不断学习是好好生活的根本，共勉！
java中实现分页查询的page类
06-28
可用于项目开发的分页查询，简单使用，步骤固定，可方便使用
Vue分页器实现原理详解
10-16
在本文中，我们将深入了解Vue分页器的实现原理，并通过编写一个Vue分页器组件来进行实践说明。首先，我们从编写分页器组件的动机开始谈起。在早期，分页器的实现多依赖于jQuery库，而且很多示例代码并不完善。因此，...
高效的mysql分页方法及原理
09-10
MySQL分页是数据库查询中常见的操作，特别是在网页展示大量数据时，为了提高用户体验，通常会采用分页的方式加载数据。然而，传统的`LIMIT m, n`分页方法在处理大量数据时，随着页码增大，性能会显著下降，因为需要...
javaweb分页原理详解
08-30
本篇文章将深入讲解Java Web分页的原理，并通过实例代码展示如何实现。 分页的基本原理是将数据库中的数据按页进行分割，每次只加载一部分数据到前端展示。这通常涉及到以下几个关键步骤： 1. **获取当前页数**：...
MySQL 的 limit 分页查询及性能问题
m0_54853503的博客
07-30 4652
通过limit实现分页查询。limit接收一个或两个整数型参数。如果是两个参数，第一个指定返回记录行的偏移量，第二个指定返回记录行的最大数目。。为了与PostgreSQL兼容，limit也支持【a取的记录数；b索引】。...
java分页查询
qq_45019814的博客
05-19 243
实体类： package com.zbkj.entity; import com.fasterxml.jackson.annotation.JsonFormat; import lombok.Data; @Data public class DeviceSelfCheckData { private Integer id; private String name; private String detectionValue; private Integer state
Java分页查询
lastingboy的博客
01-13 1252
概念 分页是Web应用程序非常重要的一个技术。数据库中的数据可能是成千上万的，不可能把这么多的数 据一次显示在浏览器上面。一般根据每行数据在页面上所占的空间设置每页显示若干行，比如一般20 行是一个比较理想的显示状态。 分页实现思路 对于海量的数据查询，需要多少就取多少，显然是最佳的解决方法，假如某个表中有200万条记录， 第一页取前20条，第二页取21~40条记录。 select * from 表名 limit 0,10;//第一页 select * from 表名 limit 10,10;//第二页 s
java分页查询_Java分页查询(示例代码)
weixin_32239819的博客
02-19 503
/***分页查询*@parampageNo第几页*@parampageSize每页多少条数据*@returnpageModel*/publicPageModelfindUserList(intpageNo,intpageSize){StringBuffersbSql=newStringBuffer();sbSql.append("selectuser_id,...
JAVA分页查询实现
xlsj雪松的博客
10-13 6251
分页实现的思路
java 分页查询
m0_38068812的博客
08-12 876
一.概述       在上一篇高级查询中,已经对查询对象进行了封装,在本篇文章中,主要来分析分页的封装和分页和高级查询的合并.      1. 真分页:           物理分页:每次翻页都从数据库中查询              优点:不会造成内存溢出     缺点:翻页的速度比较慢     2.假分页:         逻辑分页:一次性将所有的数据查询出来,放在内存中      ...
JAVA的分页查询操作
Gabriel
03-26 387
Servlet版性能测试 　　主要考虑的Servlet版运行方式有： 　　一：Servlet在Web容器中的运行机制 　　1. 单独一个无状态的Servlet实例运行 　　即Web容器里的多个线程调用一个Servlet实例的运行方式 　　2. 多个Servlet实例 　　在Web容器中有多个Servlet实例的对象池，并有多个Web容器线程来分别调用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值