【全栈】SprintBoot+vue3迷你商城-细节解析（2）：分页

【全栈】SprintBoot+vue3迷你商城-细节解析（2）：分页

往期的文章都在这里啦，大家有兴趣可以看一下

后端部分：

【全栈】SprintBoot+vue3迷你商城（1）
【全栈】SprintBoot+vue3迷你商城（2）
【全栈】SprintBoot+vue3迷你商城-扩展：利用python爬虫爬取商品数据
【全栈】SprintBoot+vue3迷你商城（3）
【全栈】SprintBoot+vue3迷你商城（4）
【全栈】SprintBoot+vue3迷你商城（5）
【全栈】SprintBoot+vue3迷你商城（6）

前端部分：

【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

【全栈】SprintBoot+vue3迷你商城-扩展：vue3项目创建及目录介绍

【全栈】SprintBoot+vue3迷你商城（7）

【全栈】SprintBoot+vue3迷你商城（8）

【全栈】SprintBoot+vue3迷你商城（9）

【全栈】SprintBoot+vue3迷你商城（10）

细节解析部分：

【全栈】SprintBoot+vue3迷你商城-细节解析（1）：Token、Jwt令牌、Redis、ThreadLocal变量

补充部分：

【全栈】SprintBoot+vue3迷你商城（11）

1.什么是PageHelper

PageHelper 是一个用于简化分页操作的插件，主要用于 MyBatis 框架中。它可以帮助开发者非常方便地实现数据库查询结果的分页功能，而无需手动编写 SQL 语句中的 LIMIT 或者其他数据库特定的分页语法。PageHelper 支持多种数据库，包括 MySQL、Oracle、SQL Server 等，并且提供了简单的 API 来实现分页。

主要特点

1. 简单易用：只需在执行查询之前调用 PageHelper 的静态方法设置分页参数，即可自动完成分页操作。
2. 支持多数据库：PageHelper 支持多种数据库，能够根据不同的数据库生成相应的分页语句。
3. 灵活配置：可以通过多种方式进行配置，如通过代码动态配置或通过配置文件进行全局配置。
4. 丰富的功能：除了基本的分页功能外，还提供了一些额外的功能，比如排序等。

使用示例

下面是一个使用 PageHelper 进行分页查询的基本示例：

Maven 依赖

首先，在你的项目中添加 PageHelper 的 Maven 依赖（如果你使用的是 Maven 构建工具）：

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>版本号</version>
</dependency>

代码示例

假设你有一个 MyBatis Mapper 接口和对应的 XML 映射文件，你可以这样使用 PageHelper：

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import java.util.List;

public List<User> getUsersByPage(int pageNum, int pageSize) {
    // 设置分页参数 - 当前页码，每页显示的数量
    PageHelper.startPage(pageNum, pageSize);
    
    // 执行查询 - 注意这里的查询不需要自己写分页逻辑
    List<User> users = userMapper.selectAllUsers();
    
    // PageInfo 是 PageHelper 提供的一个封装类，包含了分页信息
    PageInfo<User> pageInfo = new PageInfo<>(users);
    return pageInfo.getList(); // 返回当前页的数据列表
}

在这个例子中，PageHelper.startPage(pageNum, pageSize); 会拦截后续的第一个查询请求，并自动为其添加分页功能。然后，你就可以像平常一样执行查询操作，PageHelper 会在后台为你处理所有与分页相关的细节。

所以说，PageHelper 是一个强大的工具，它可以极大地简化 MyBatis 中的分页操作，使得开发者可以更专注于业务逻辑的实现，而不是被繁琐的分页逻辑所困扰。通过简单的 API 调用，就能轻松实现对不同数据库的支持以及高效的分页查询。

2.PageBean有什么用

1. 数据封装：PageBean 可以将查询结果和分页信息一起封装，便于返回给前端进行展示。
2. 前后端分离：在前后端分离架构中，PageBean 作为 API 响应的一部分，提供给前端所需的所有分页信息，使得前端可以轻松实现分页逻辑。
3. 统一处理分页逻辑：通过定义一个通用的 PageBean 类，可以在整个项目中统一处理分页相关的逻辑，减少重复代码。
4. 增强可读性和维护性：将分页相关的属性集中在一个类中，有助于提高代码的可读性和可维护性。

3.PageHelper.startPage(pageNum, pageSize);

这行代码有什么用？应该放在何处？

PageHelper.startPage(pageNum, pageSize); 这行代码是用于在 MyBatis 查询中启用分页功能的。具体来说，它会在你执行查询操作之前设置分页参数，并拦截后续的第一个查询请求，自动为这个查询添加分页逻辑（例如，在 SQL 语句中添加 LIMIT 子句）。这意味着你不需要手动修改你的 SQL 查询来实现分页。

主要用途

• 启用分页：通过调用 PageHelper.startPage(pageNum, pageSize); 来指定当前页码 (pageNum) 和每页显示的记录数 (pageSize)。
• 自动处理分页逻辑：之后执行的任何 MyBatis 查询都会被自动加上分页条件，而不需要你在 SQL 中手动添加这些条件。

应该放在何处

通常，你应该将 PageHelper.startPage(pageNum, pageSize); 放在你要进行分页查询的操作之前，紧挨着你的查询方法调用。这是因为 PageHelper 使用了 MyBatis 的插件机制来拦截查询请求，并在实际执行查询前对其进行修改以添加分页支持。

例如在上一期的代码中：

PageHelper.startPage(pageNum, pageSize);

List<Goods> goodsList = goodsService.getGoodsList(searchKey);

在这段代码中，PageHelper.startPage(pageNum, pageSize); 的作用是为接下来的 MyBatis 查询设置分页参数。这意味着，在调用 PageHelper.startPage(pageNum, pageSize); 之后的第一个查询操作将会被自动加上分页逻辑（例如添加 LIMIT 子句）。因此，将 PageHelper.startPage(pageNum, pageSize); 紧接在实际执行数据库查询之前是非常重要的。

4.Element Plus分页组件

Element Plus 是一个流行的 Vue 3 UI 库，提供了丰富的组件来帮助开发者快速构建美观且功能强大的用户界面。其中，el-pagination 组件用于实现分页功能，支持多种布局和事件处理，可以方便地集成到你的项目中。

组件源码：

<template>
  <el-pagination background layout="prev, pager, next" :total="1000" />
</template>

我们结合上期代码，便可理解其用法

<template>
<div style="display: flex; justify-content: center;">
          <el-pagination background layout="prev, pager, next" :total="goodsCount" :page-size="pageSize"
          :current-page="currentPage"  @current-change="handlePageChange" />
        </div>
</template>

<script>
    
  const goodsList = async () => {
      let result = await getGoodsListService(currentPage.value,pageSize.value,searchKey.value);
      goodsListModel.value = result.data['items'];
      goodsCount.value = result.data['total']
      console.log(result.data['total'])
}
goodsList();
    
    const searchKey = ref('')
    const currentPage = ref(1);
    const pageSize = ref(12);
    const handlePageChange = (newPage) => {
  console.log(newPage)
  currentPage.value = newPage;
  goodsList();
};
</script>

5.总结

本期对分页的一些细节进行了总结，下期将继续补充开发中的一些细节问题。