多人后台博客管理DAY04

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

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'}}
    <!-- 主体内容 -->
    <div class="content">
        {{include './common/aside.art'}}
        <div class="main">
            <!-- 分类标题 -->
           ···
            <!-- /分类标题 -->
            <!-- 内容列表 -->
            <table class="table table-striped table-bordered table-hover custom-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {{each users}}
                    <tr>
                        <td>{{@$value._id}}</td>
                        <td>{{$value.username}}</td>
                        <td>{{$value.email}}</td>
                        <td>{{$value.role == 'admin' ? '超级管理员': '普通用户'}}</td>
                        <td>{{$value.state == 0 ? '启用': '禁用'}}</td>
                        <td>
                            <a href="/admin/user-edit?id={{@$value._id}}" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove delete" data-toggle="modal" data-target=".confirm-modal" data-id="{{@$value._id}}"></i>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
            <!-- /内容列表 -->
            <!-- 分页 -->
            <ul class="pagination">
                <li style="display: <%=page-1 < 1 ? 'none' : 'inline' %>">
                    <a href="/admin/user?page=<%=page-1%>">
                    <span>&laquo;</span>
                  </a>
                </li>
                <% for (var i = 1; i <= total; i++) { %>
                <li><a href="/admin/user?page=<%=i %>">{{i}}</a></li>
                <% } %>
                <li style="display: <%= page-0+1 > total ? 'none' : 'inline' %>">
                    <a href="/admin/user?page=<%=page-0+1%>">
                    <span>&raquo;</span>
                  </a>
                </li>
            </ul>
            <!-- /分页 -->
        </div>
    </div>
    <!-- /主体内容 -->
    <!-- 删除确认弹出框 -->
    ···
{{/block}}

{{block 'script'}}
    ···
    </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;