【全棧】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.總結

本期對分頁的一些細節進行了總結，下期將繼續補充開發中的一些細節問題。