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>

猜你喜欢

转载自www.cnblogs.com/500m/p/11060624.html