多人后台博客管理

(四)项目功能的实现之数据分页

BLOG -- 源码目录
  └── model -- 数据库操作
   ├──  public -- 静态资源
   └──  route -- 路由
        └──  admin --博客管理              
               └── userPage.js --用户分页功能路由
        └── admin.js --博客管理页面路由
 └── views -- 模板
      └── admin --博客管理页面art模板
          └── user.art --用户列表页
 └── app.js -- 创建网站服务

userPage.js

• 导入用户集合函数
• 总页数 = Math.ceil(count / pagesize)总用户数除以限制一页的数量
• limit()限制查询数量，传入每页显示的数据数量，skip（）跳过多少条数据，传入显示数据的开始位置
• 数据开始查询位置=（当前页-1）*每页显示的数据条数
• 用户没有传入页码则默认显示第一页的数据

// 导入用户集合构造函数
const { User } = require('../../model/user');

module.exports = async (req, res) => {

    // 标识 标识当前访问的是用户管理页面
    req.app.locals.currentLink = 'user';

    // 接收客户端传递过来的当前页参数
    let page = req.query.page || 1;
    // 每一页显示的数据条数
    let pagesize = 10;
    // 查询用户数据的总数
    let count = await User.countDocuments({});
    // 总页数
    let total = Math.ceil(count / pagesize);

    // 页码对应的数据查询开始位置
    let start = (page - 1) * pagesize; 

    // 将用户信息从数据库中查询出来
    let users = await User.find({}).limit(pagesize).skip(start)
    // 渲染用户列表模块
    res.render('admin/user', {
        users: users,
        page: page,
        total: total
    });
}

user.art

• 对数据进行一个循环的显示 {{each users}}，用$value_来显示
• {{@$value._id}}其中@可以原文展示，去掉引号
• page-0+1加法有隐式转换，为了防止变成字符串拼接，所以-0
• 如果当前页大于所需总页数则隐藏掉向后翻页的按钮，向前翻页同理

{{extend './common/layout.art'}}

{{block 'main'}}
    
    {{include './common/header.art'}}
    
    

        {{include './common/aside.art'}}
        

            
           ···
            
            
            
                    {{each users}}
                    
                    {{/each}}
                

                

                    

                        
ID
                        
用户名
                        
邮箱
                        
角色
                        
状态
                        
操作
                    
                
                

                        
{{@$value._id}}
                        
{{$value.username}}
                        
{{$value.email}}
                        
{{$value.role == 'admin' ? '超级管理员': '普通用户'}}
                        
{{$value.state == 0 ? '启用': '禁用'}}
                        

                            
                            
                        
                    
            
            
            
            

                

                    
                    «
                  
                
                <% for (var i = 1; i <= total; i++) { %>
                
{{i}}
                <% } %>
                

                    
                    »
                  
                
            
            
        
    
    
    
    ···
{{/block}}

{{block 'script'}}
    ···
    
{{/block}}

admin.js

• 创建用户列表路由

// 引用expess框架
const express = require('express');
// 创建博客展示页面路由
const admin = express.Router();

// 渲染登录页面
admin.get('/login', require('./admin/loginPage'));

// 实现登录功能
admin.post('/login', require('./admin/login'));

// 创建用户列表路由
admin.get('/user', require('./admin/userPage'));

// 实现退出功能
admin.get('/logout', require('./admin/logout'));

// 创建用户编辑页面路由
admin.get('/user-edit', require('./admin/user-edit'));

// 创建实现用户添加功能路由
admin.post('/user-edit', require('./admin/user-edit-fn'));
// 将路由对象做为模块成员进行导出
module.exports = admin;