183 lines
4.6 KiB
Markdown
183 lines
4.6 KiB
Markdown
# 分页功能说明
|
||
|
||
## 概述
|
||
|
||
博客系统已集成完整的分页功能，支持以下页面的分页显示：
|
||
|
||
- **首页博客文章列表** - 每页显示5篇文章
|
||
- **管理员后台文章管理** - 每页显示10篇文章
|
||
- **管理员后台用户管理** - 每页显示10个用户
|
||
- **管理员后台评论管理** - 每页显示10条评论
|
||
|
||
## 功能特性
|
||
|
||
### 1. 通用分页组件
|
||
- **文件位置**: `views/components/pagination.ejs`
|
||
- **功能**: 可复用的分页UI组件
|
||
- **特性**:
|
||
- 响应式设计
|
||
- 智能页码显示（最多显示5个页码）
|
||
- 上一页/下一页导航
|
||
- 首页/末页快速跳转
|
||
- 省略号显示
|
||
- 当前页高亮
|
||
- 分页信息显示
|
||
|
||
### 2. 分页工具函数
|
||
- **文件位置**: `utils/pagination.js`
|
||
- **主要函数**:
|
||
- `getPaginationInfo()` - 计算分页信息
|
||
- `paginateQuery()` - 执行分页查询
|
||
- `addPaginationToQuery()` - 为查询添加分页
|
||
|
||
### 3. 分页样式
|
||
- **设计风格**: 现代化Bootstrap风格
|
||
- **颜色主题**: 蓝色主题（#3498db）
|
||
- **交互效果**: 悬停动画、过渡效果
|
||
- **响应式**: 支持移动端适配
|
||
|
||
## 使用方法
|
||
|
||
### 1. 后端路由中使用分页
|
||
|
||
```javascript
|
||
const { paginateQuery } = require('./utils/pagination');
|
||
|
||
// 在路由中使用
|
||
router.get('/posts', async (req, res) => {
|
||
const page = parseInt(req.query.page) || 1;
|
||
const limit = 10;
|
||
|
||
const result = await paginateQuery(
|
||
Post, // Mongoose模型
|
||
{}, // 查询条件
|
||
{ sort: { createdAt: -1 } }, // 查询选项
|
||
page, // 当前页码
|
||
limit // 每页数量
|
||
);
|
||
|
||
res.render('template', {
|
||
posts: result.data,
|
||
pagination: result.pagination,
|
||
baseUrl: '/posts',
|
||
query: {}
|
||
});
|
||
});
|
||
```
|
||
|
||
### 2. 前端模板中使用分页组件
|
||
|
||
```ejs
|
||
<!-- 在模板中引入分页组件 -->
|
||
<%- include('components/pagination', {
|
||
currentPage: pagination.currentPage,
|
||
totalPages: pagination.totalPages,
|
||
baseUrl: baseUrl,
|
||
query: query
|
||
}) %>
|
||
```
|
||
|
||
### 3. 分页参数说明
|
||
|
||
- `currentPage`: 当前页码
|
||
- `totalPages`: 总页数
|
||
- `baseUrl`: 基础URL（用于生成分页链接）
|
||
- `query`: 查询参数对象（用于保持其他查询参数）
|
||
|
||
## 分页配置
|
||
|
||
### 首页文章列表
|
||
- **每页数量**: 5篇文章
|
||
- **排序**: 按创建时间倒序
|
||
- **URL**: `/`
|
||
|
||
### 管理员后台
|
||
- **文章管理**: 每页10篇文章
|
||
- **用户管理**: 每页10个用户
|
||
- **评论管理**: 每页10条评论
|
||
|
||
## 分页组件特性
|
||
|
||
### 1. 智能页码显示
|
||
- 当前页前后各显示2页
|
||
- 最多显示5个页码
|
||
- 自动显示首页和末页
|
||
- 使用省略号表示跳过的页码
|
||
|
||
### 2. 导航功能
|
||
- 上一页/下一页按钮
|
||
- 首页/末页快速跳转
|
||
- 页码直接跳转
|
||
- 禁用状态处理
|
||
|
||
### 3. 查询参数保持
|
||
- 自动保持URL中的查询参数
|
||
- 支持搜索、筛选等功能
|
||
- 分页不影响其他查询条件
|
||
|
||
### 4. 响应式设计
|
||
- 移动端适配
|
||
- 触摸友好的按钮大小
|
||
- 清晰的视觉层次
|
||
|
||
## 样式定制
|
||
|
||
分页组件的样式可以通过修改 `views/components/pagination.ejs` 中的CSS来自定义：
|
||
|
||
```css
|
||
.pagination-wrapper {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.page-link {
|
||
color: #3498db;
|
||
border-color: #dee2e6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.page-item.active .page-link {
|
||
background-color: #3498db;
|
||
border-color: #3498db;
|
||
color: white;
|
||
}
|
||
```
|
||
|
||
## 测试
|
||
|
||
运行分页功能测试：
|
||
|
||
```bash
|
||
node test_pagination.js
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **数据库性能**: 分页查询使用 `skip` 和 `limit`，大数据量时建议使用索引优化
|
||
2. **内存使用**: 分页组件会计算总记录数，确保数据库连接稳定
|
||
3. **URL参数**: 分页参数使用 `page` 参数，避免与其他参数冲突
|
||
4. **错误处理**: 分页组件包含完整的错误处理机制
|
||
|
||
## 扩展功能
|
||
|
||
### 1. 添加搜索功能
|
||
```javascript
|
||
// 在查询条件中添加搜索
|
||
const searchQuery = req.query.search ? { title: { $regex: req.query.search, $options: 'i' } } : {};
|
||
const result = await paginateQuery(Post, searchQuery, options, page, limit);
|
||
```
|
||
|
||
### 2. 添加筛选功能
|
||
```javascript
|
||
// 添加分类筛选
|
||
const categoryFilter = req.query.category ? { category: req.query.category } : {};
|
||
const result = await paginateQuery(Post, categoryFilter, options, page, limit);
|
||
```
|
||
|
||
### 3. 自定义每页数量
|
||
```javascript
|
||
// 允许用户选择每页显示数量
|
||
const limit = parseInt(req.query.limit) || 10;
|
||
const result = await paginateQuery(Post, {}, options, page, limit);
|
||
```
|
||
|
||
分页功能已完全集成到博客系统中，提供了良好的用户体验和性能优化。 |