node-blog/PAGINATION_README.md

分页功能说明

概述

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

• 首页博客文章列表 - 每页显示5篇文章
• 管理员后台文章管理 - 每页显示10篇文章
• 管理员后台用户管理 - 每页显示10个用户
• 管理员后台评论管理 - 每页显示10条评论

功能特性

1. 通用分页组件

• 文件位置: views/components/pagination.ejs
• 功能: 可复用的分页UI组件
• 特性:
  • 响应式设计
  • 智能页码显示（最多显示5个页码）
  • 上一页/下一页导航
  • 首页/末页快速跳转
  • 省略号显示
  • 当前页高亮
  • 分页信息显示

2. 分页工具函数

• 文件位置: utils/pagination.js
• 主要函数:
  • getPaginationInfo() - 计算分页信息
  • paginateQuery() - 执行分页查询
  • addPaginationToQuery() - 为查询添加分页

3. 分页样式

• 设计风格: 现代化Bootstrap风格
• 颜色主题: 蓝色主题（#3498db）
• 交互效果: 悬停动画、过渡效果
• 响应式: 支持移动端适配

使用方法

1. 后端路由中使用分页

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. 前端模板中使用分页组件

<!-- 在模板中引入分页组件 -->
<%- 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来自定义：

.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;
}

测试

运行分页功能测试：

node test_pagination.js

注意事项

1. 数据库性能: 分页查询使用 skip 和 limit，大数据量时建议使用索引优化
2. 内存使用: 分页组件会计算总记录数，确保数据库连接稳定
3. URL参数: 分页参数使用 page 参数，避免与其他参数冲突
4. 错误处理: 分页组件包含完整的错误处理机制

扩展功能

1. 添加搜索功能

// 在查询条件中添加搜索
const searchQuery = req.query.search ? { title: { $regex: req.query.search, $options: 'i' } } : {};
const result = await paginateQuery(Post, searchQuery, options, page, limit);

2. 添加筛选功能

// 添加分类筛选
const categoryFilter = req.query.category ? { category: req.query.category } : {};
const result = await paginateQuery(Post, categoryFilter, options, page, limit);

3. 自定义每页数量

// 允许用户选择每页显示数量
const limit = parseInt(req.query.limit) || 10;
const result = await paginateQuery(Post, {}, options, page, limit);

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