zoukankan      html  css  js  c++  java
  • 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
     
  • 相关阅读:
    【读书笔记-数据挖掘概念与技术】数据预处理
    【读书笔记-数据挖掘概念与技术】认识数据
    数据挖掘中的基本概念
    【cs229-Lecture10】特征选择
    【cs229-Lecture8】顺序最小优化算法
    支持向量机SVM进阶
    【SPMF开源数据挖掘平台入门】MaxSP算法使用说明
    【cs229-Lecture9】经验风险最小化
    【数据清洗】2013-数据质量及数据清洗方法
    【数据清洗】2012-数据清洗及其一般性系统框架
  • 原文地址:https://www.cnblogs.com/500m/p/11019868.html
Copyright © 2011-2022 走看看