关于前端:多人后台博客管理

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

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;