67、數據訪問-crud實驗-分頁數據展示
分頁數據展示是數據訪問中常見的功能，用于將大量數據分割成多個頁面顯示，提升用戶體驗和系統性能。以下是分頁數據展示的相關介紹：
#### 基本原理
1. **確定每頁顯示數量**：設定每頁顯示的數據條數（`pageSize`），如每頁顯示10條。
2. **計算總頁數**：根據總數據量（`totalCount`）和每頁顯示數量，計算總頁數（`totalPage`）：
? ?$$
? ?totalPage = \lceil \frac{totalCount}{pageSize} \rceil
? ?$$
3. **獲取當前頁數據**：根據當前頁碼（`currentPage`），計算數據起始位置（`offset`），從數據源中獲取對應的數據：
? ?$$
? ?offset = (currentPage - 1) \times pageSize
? ?$$
? ?查詢語句示例（使用MySQL的`LIMIT`和`OFFSET`）：
? ?```sql
? ?SELECT * FROM table LIMIT pageSize OFFSET offset
? ?```
#### 實現步驟
**后端實現：**
1. **接收分頁參數**
? ?- 接收前端傳遞的當前頁碼（`currentPage`）和每頁顯示數量（`pageSize`）。
2. **查詢數據**
? ?- 根據分頁參數，查詢當前頁的數據和總數據量。
? ?- 使用數據庫的分頁功能，如MySQL的`LIMIT`和`OFFSET`，或借助分頁插件（如MyBatis的PageHelper）。
3. **封裝分頁結果**
? ?- 將當前頁數據、總數據量、總頁數等封裝成分頁對象，返回給前端。
**前端實現：**
1. **發送分頁請求**
? ?- 向后端發送包含當前頁碼和每頁顯示數量的請求。
2. **展示數據**
? ?- 接收后端返回的分頁數據，展示當前頁的數據。
3. **分頁導航**
? ?- 根據總頁數生成分頁導航，支持用戶點擊頁碼、上一頁、下一頁等操作。
? ?- 更新當前頁碼，重新發送請求獲取數據。
#### 示例代碼
**后端（Java + Spring Boot）：**
```java
// 分頁查詢方法
@GetMapping("/data")
public PageData fetchData(@RequestParam(defaultValue = "1") int page,
? ? ? ? ? ? ? ? ? ? ? ? ? @RequestParam(defaultValue = "10") int size) {
? ? // 使用PageHelper進行分頁查詢
? ? PageHelper.startPage(page, size);
? ? List<Data> dataList = dataService.getAllData();
? ??
? ? // 封裝分頁結果
? ? PageInfo<Data> pageInfo = new PageInfo<>(dataList);
? ? PageData pageData = new PageData();
? ? pageData.setList(dataList);
? ? pageData.setTotal(pageInfo.getTotal());
? ? pageData.setSize(size);
? ? pageData.setPage(page);
? ? pageData.setPages(pageInfo.getPages());
? ??
? ? return pageData;
}
// 分頁數據對象
public class PageData {
? ? private List<?> list;
? ? private long total;
? ? private int size;
? ? private int page;
? ? private int pages;
? ? // 省略getter和setter方法
}
```
**前端（Vue.js）：**
```html
<template>
? <div>
? ? <!-- 數據列表 -->
? ? <ul>
? ? ? <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
? ? </ul>
? ??
? ? <!-- 分頁導航 -->
? ? <div class="pagination">
? ? ? <button @click="prevPage" :disabled="page === 1">上一頁</button>
? ? ? <span v-for="pageNum in pages" :key="pageNum" @click="gotoPage(pageNum)">
? ? ? ? {{ pageNum }}
? ? ? </span>
? ? ? <button @click="nextPage" :disabled="page === pages">下一頁</button>
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? dataList: [], // 當前頁數據
? ? ? total: 0, // 總數據量
? ? ? size: 10, // 每頁顯示數量
? ? ? page: 1, // 當前頁碼
? ? ? pages: 0, // 總頁數
? ? };
? },
??
? methods: {
? ? fetchData() {
? ? ? // 發送分頁請求
? ? ? axios.get('/data', {
? ? ? ? params: {
? ? ? ? ? page: this.page,
? ? ? ? ? size: this.size,
? ? ? ? },
? ? ? }).then((res) => {
? ? ? ? // 處理返回的分頁數據
? ? ? ? this.dataList = res.data.list;
? ? ? ? this.total = res.data.total;
? ? ? ? this.pages = res.data.pages;
? ? ? });
? ? },
? ??
? ? prevPage() {
? ? ? if (this.page > 1) {
? ? ? ? this.page--;
? ? ? }
? ? ? this.fetchData();
? ? },
? ??
? ? nextPage() {
? ? ? if (this.page < this.pages) {
? ? ? ? this.page++;
? ? ? }
? ? ? this.fetchData();
? ? },
? ??
? ? gotoPage(pageNum) {
? ? ? this.page = pageNum;
? ? ? this.fetchData();
? ? },
? },
??
? mounted() {
? ? this.fetchData();
? },
};
</script>
```
#### 優化與注意事項
- **性能優化**
? - 避免一次性查詢所有數據，僅查詢當前頁所需數據。
? - 對于大數據量，考慮使用延遲加載或無限滾動等技術。
- **用戶體驗**
? - 提供清晰的分頁導航，顯示當前頁碼和總頁數。
? - 支持跳轉到指定頁碼和快捷鍵操作。
- **安全性**
? - 對分頁參數進行校驗，防止惡意請求。
? - 避免暴露敏感數據，如總數據量等。
通過以上步驟，可以實現分頁數據展示功能，提升系統的可用性和性能。
