15 ~ express ~ 用户数据分页原理和实现

一，在后台路由 /router/admin.js 中

1，限制获取的数据条数 ： User.find().limit(Number)

2，忽略数据的前（Number）条数据 : skip(Number)

3，思路： 如果每页显示两条，忽略条数与每页显示的数据相关 ： （当前页）* limit

（1）第一页： 1-2 skip(0)

（2）第二页： 2-4 skip(2)

4，具体代码：

var page = 1

var limit = 2

var skip = (page-1)*limit

User.find().limit(limit).skip(skip).then((users) => {

 

})

 

5，处理 page =》 使用 http 请求中的 get 方式  =》【 ?page=Number  】=》【   req.query.String 】

　　

此处 req.query.page 为字符串 ，需要转换成 数值 ,如果没有传值，默认为1

var page = Number(req.query.page || 1) 

 

6，怎样知道当前是哪一页？ 通过模板将 page 传送

 

7，按钮切换页面  /views/user.html

<div class="btn-group" role="group" aria-label="...">

<a href="/admin/user?page={{page-1}}" class="btn btn-default">上一页</a>

<a href="/admin/user?page={{page+1}}" class="btn btn-default">下一页</a>

</div>

 

8，优化分页，查询总记录数量

User.count().then((count)=>{

　　console.log(count)　　

})

 

 

9，所有代码   /router/admin.js

 

var express = require('express')

var router = express.Router()

var User = require('../models/User')

/** 验证用户是否为管理员 ，防止其他用户通过 /admin 路径访问 */

router.use((req, res, next) => {

if (!req.userInfo.isAdmin) {

　　res.send('对不起，你不是管理员，不能进入')

　　　　return

　　}

　　next()

})

/** 首页 */

router.get('/', (req, res) => {

　　console.log(('admin ---- req.userInfo 数据 :' + JSON.stringify(req.userInfo)).yellow)

　　res.render('admin/index', {

　　　　userInfo: req.userInfo

　　})

})

/** 用户管理 */

router.get('/user', (req, res) => {

/**通过类或构造函数的方法读取 => 所有用户的信息

*

* 分页：

*

*/

var page = Number(req.query.page || 1) // 如果没有传值，默认为1

var limit = 10

var pages = 1

User.count().then((count)=>{

// 计算总页数，向上取整数,去最大值

pages = Math.ceil(count / limit)

 

// 页数取值不能超过总页数的值

page = Math.min(page,pages)

 

// 取值不能小于1

page = Math.max(page,1)

var skip = (page-1)*limit

User.find().limit(limit).skip(skip).then((users) => {

　　// console.log((' 所有用户 : ' + users).red)

 

/**

* 【 重点 ： 数据到模板的传输 】

* 不要删除 userInfo ， 会影响到cookie .

* 在数据中添加 users 即可

*/

 

res.render('admin/user', {

userInfo: req.userInfo,

users:users,

page:page,

pages:pages,

count:count,

limit:limit

})

 

})

})

 

module.exports = router

 

——————————————————————

封装模板：

1，   /views/admin/page.html

<!-- 被包含即可 -->

<div class="btn-group" role="group" aria-label="...">

<a href="/admin/user?page={{page-1}}" class="btn btn-default">上一页</a>

<a href="/admin/user?page={{page+1}}" class="btn btn-default">下一页</a>

<li>一共有 {{count}} 条数据</li>

<li>每页显示 {{limit}} 条数据</li>

<li>一共有 {{pages}} 页</li>

<li>当前是在 {{page}} 页</li>

</div>

 

2，用户列表页  /views/admin/user.html

 

{% extends 'layout.html' %}

{% block main %}

<ol class="breadcrumb">

<li><a href="/admin">管理首页</a></li>

<li><span href="/user">用户列表</span></li>

</ol>

<h3>用户列表</h3>

<table class="table table-bordered">

<tr>

<th>用户名</th>

<th>id</th>

<th>密码</th>

<th>是否是管理员</th>

</tr>

<!-- 循环输出数组 . id是对象，需要转换成字符串 -->

 

{% for user in users %}

<tr><td> {{user.username}}</td>

<td> {{user._id.toString()}}</td>

<td> {{user.password}}</td>

{% if user.isAdmin %}

<td> 管理员 <td>

{% else %}

<td> 普通用户</td>

{% endif %}

{% endfor %}

</tr>

</table>

{% include 'page.html' %}

{% endblock %}

 

 

______________________________________

 

10, 弊端：当页数达到一定量之后，分页速度会严重下降。

　 

      解决方案： 可以采用这种方式 ： 采用Seek Method加速分页   https://segmentfault.com/a/1190000008306966