• 20 ~ express ~ 前台内容分页展示


    一,后台路由文件 /router/main.js

    var express = require('express')
    var router = express.Router()
    var Category = require('../models/Category')
    var Content = require('../models/Content')


    /**
    * 首页
    */

    router.get('/',(req,res,next)=>{
    /**
    * 从数据库中读取分类信息
    * rs是一个数组类型的记录
    */

    var data = {
    userInfo:req.userInfo,
    categories:[], //所有分类的信息
    page : Number(req.query.page || 1),
    limit : 2,
    pages : 1,
    count: 0
    }
    /**获取所有分类信息 */
    Category.find().then((categories)=>{
    data.categories = categories
     
    /**读取内容的总记录数 */
    return Content.countDocuments()
    }).then((count)=>{

    //为了方便,存入data
    data.count = count

    // 计算总页数,向上取整数,去最大值
    data.pages = Math.ceil(data.count / data.limit)
     
    // 页数取值不能超过总页数的值
    data.page = Math.min(data.page,data.pages)
     
    // 取值不能小于1
    data.page = Math.max(data.page,1)

    // 不需要被分配到模板 data 中 ,直接存入变量
    var skip = (data.page-1)*data.limit

    /**
    * 读取文章并返回
    */
    return Content.find().sort({_id:-1}).limit(data.limit).skip(skip).populate(['category','user'])
    // console.log(123) 【调试】
    // 不 return 下面的参数将没有数据
    }).then((contents)=>{
    data.contents = contents

    console.log(data)
    /**最后渲染 */
    res.render('main/index',data)
    })
     
    })
     
    module.exports = router
     
     
    二,前台展示文件  /views/index.html
     
    <div class="panel panel-primary">
    <div class="panel-heading">文 章</div>

    {% for content in contents %}
    <div class="panel-body">
    <div class="panel panel-info">
    <div class="panel-body">
    <h4>【 {{content.title}} 】</h4>
    <p>
    作者 : {{content.user.username}} &nbsp;
    发布时间 : {{content.addTime|date('Y-m-d')}} &nbsp;
    阅读数量 : {{content.views}} &nbsp;
    </p>
    <p>{{content.content}}</p>
    <p>
    <h5>评论 :</h5>
    </p>
    </div>
    </div>
    </div>
    {% endfor %}
    <nav aria-label="...">
    <ul class="pager">
    ( <li>共 {{count}} 条数据</li> ,
    <li>共 {{pages}} 页</li> ,
    <li>当前是在 {{page}} 页</li> ) &nbsp;&nbsp;&nbsp;
    <li><a href="/?page=1">首页</a></li>
    {% if page<=1 %}
    <li><a href="/?page={{page+1}}">下一页</a></li>
     
    {% else %}
    {% if page>=pages %}
    <li><a href="/?page={{page-1}}">上一页</a></li>&nbsp;&nbsp;
    {% else %}
    <li><a href="/?page={{page-1}}">上一页</a></li>
    <li><a href="/?page={{page+1}}">下一页</a></li>
    {% endif %}
    {% endif %}
    <li><a href="/?page={{pages}}">尾页</a></li>
    </ul>
    </nav>
    </div>
  • 相关阅读:
    vue3.0+vite+ts项目搭建axios封装(六)
    vue3.0+vite+ts项目搭建分环境打包(四)
    vue3.0+vite+ts项目搭建初始化项目(一)
    MFC数值型关联变量和控件型关联变量
    SVN服务端、客服端安装与配置
    (转)ev4加密视频破解 ev4破解工具 ev4转mp4转换器 【无视授权密码即可转换】
    C#中的记录(record)
    C#自定义转换(implicit 或 explicit)
    C#中的隐式转换
    C#中的显式转换
  • 原文地址:https://www.cnblogs.com/500m/p/11060624.html
Copyright © 2020-2023  润新知