67、数据访问-crud实验-分页数据展示
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>
```
#### 优化与注意事项
- **性能优化**
- 避免一次性查询所有数据，仅查询当前页所需数据。
- 对于大数据量，考虑使用延迟加载或无限滚动等技术。
- **用户体验**
- 提供清晰的分页导航，显示当前页码和总页数。
- 支持跳转到指定页码和快捷键操作。
- **安全性**
- 对分页参数进行校验，防止恶意请求。
- 避免暴露敏感数据，如总数据量等。
通过以上步骤，可以实现分页数据展示功能，提升系统的可用性和性能。