21 ~ express ~ 内容详情展示 和 阅读数处理

1,前台 ,/views/main/index.html ,将文章 id 通过url 传送给后台

{% 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;
评论 : {{content}} &nbsp;
</p>
<p>简介 : {{content.description}}</p>
<p>
<a class="btn btn-info" href="/views?contentid={{content.id}}" role="button">内容详情</a>
</p>
</div>
</div>
</div>
{% endfor %}
 
2,后台 , /router/main.js ,增加  view 路由 ,读取文章的内容 ,渲染文章的页面 。 读取导航栏 。增加访问量。
 
/**
* 因为导航栏是前台每个栏目显示都需要的,所以不应该写在【/】 路由中,所以使用中间件的方法处理【 通用的数据 】
*/
router.use((req,res,next)=>{
/**
* !!!【data必须是全局对象,否则中间件的下一个接收不到】
*/
data = {
 
userInfo:req.userInfo,
categories:[], //所有分类的信息
}
Category.find().then((categories)=>{
data.categories = categories
// console.log(data)
/**注意 next 的出口 */
next()
})
})


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

// data 不能重新等于新的对象
data.category =req.query.category || ''
data.page = Number(req.query.page || 1)
data.limit = 2
data.pages = 1
data.count= 0
 
var where = {}

if(data.category){
where.category = data.category
}

// console.log('where => '+where)

/**获取所有分类信息 */
Content.where(where).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.where(where).find().sort({_id:-1}).limit(data.limit).skip(skip).populate(['category','user'])
// 不 return 下面的参数将没有数据
}).then((contents)=>{
data.contents = contents

// console.log(data)
/**最后渲染 */
res.render('main/index',data)
})
 
})

router.get('/view',(req,res)=>{
contentid = req.query.contentid || ''
Content.findOne({
_id:contentid
}).then(content=>{
data.content = content

/** 增加阅读数 */
content.views++
content.save()

res.render('main/view',data)
})
})
 
3,前台展示 /views/main/view.html
 
<div class="panel-heading">文 章</div>
 
<h4>【 {{data.content.title}} 】</h4>
<p>
作者 : {{data.content.user.username}} &nbsp;
发布时间 : {{data.content.addTime|date('Y-m-d')}} &nbsp;
阅读数量 : {{data.content.views}} &nbsp;
评论 : {{data.content}} &nbsp;
</p>
<p>简介 : {{data.content.description}}</p>
<p>
内容 : {{data.content.content}}
</p>
 
 
posted @ 2019-06-20 21:51  武卡卡  阅读(186)  评论(0编辑  收藏  举报