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

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;