# 分页功能说明

## 概述

博客系统已集成完整的分页功能，支持以下页面的分页显示：

- **首页博客文章列表** - 每页显示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);
```

分页功能已完全集成到博客系统中，提供了良好的用户体验和性能优化。