(四)我的项目性能的实现之数据分页
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>«</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>»</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;