1.在routers文件夹下面的main.js函数中,
var express = require('express');
var router =express.Router();
var Category=require('../models/Category');//引入分类信息
var Content = require('../models/Content');
/*
* 首页
* */
router.get('/',function(req,res,next) {
//一步用来获取分类,第二步用来获取种类和获取条数,以及后面的具体的内容列表
var data= {
userInfo:req.userInfo,
count:[],
categories:[],
page :Number(req.query.page||1),
limit :10,
pages :0,
contents:[]
};
//读取所有的分类信息
Category.find().then(function (categories) {
data.categories=categories;
//读取内容的总记录数
return Content.count();
}).then(function (count) {
data.count=count;
//计算总页数
data.pages=Math.ceil(data.count/data.limit);//向上取整
//取值不能超过pages
data.page=Math.min(data.page,data.pages);
//取值不能小于1
data.page=Math.max(data.page,1);
var skip = (data.page-1)*data.limit;
return Content.find().sort({_id:-1}).limit(data.limit).skip(skip).populate(['category','user']).sort({
addTime:-1
});
}).then(function (contents) {
data.contents=contents;
res.render('main/index',data);//渲染当前views下面的index.html页面
})
});
module.exports = router;
2.在main中的Index.html首页中
{%for content in contents%}
<div class="listBox">
<h1>{{content.title}}</h1>
<p class="colDefault">
作者:<span class="colInfo">{{content.user.username}}</span> -
时间:<span class="colInfo">{{content.addTime|date('Y-m-d H:i:s',-(8*60))}}</span> -
阅读:<span class="colInfo">{{content.views}}</span> -
评论:<span class="colInfo">10</span>
</p>
<dfn><p>{{content.description}}</p></dfn>
<div class="function"><a href="/view/578d0be3fb13ff664906f7fd">阅读全文</a></div>
</div>
{%endfor%}
3.分页的处理
在index.html中
<div class="pager">
<ul class="clear">
<li class="previous">
{%if page<=1%}
<span>没有上一页了</span>
{%else%}
<a href="/?page={{page-1}};">上一页</a>
{%endif%}
</li>
<li>
<strong>{{page}} / {{pages}}</strong>
</li>
<li class="next">
{%if page>=pages%}
<span>没有下一页了</span>
{%else%}
<a href="/?page={{page+1}};">上一页</a>
{%endif%}
</li>
</ul>
</div>
</div>
4.前台内容分类的展示页面
(1)我们在前端,得为分类增加一个链接,在index.html中修改
<nav>
<div class="menu">
<a href="/" class="focus">首页</a>
{%for category in categories%}
<a href="/?category={{category.id}}">{{category.name}}</a>
{%endfor%}
</div>
</nav>
(2)然后在main.js中修改,
/*
* 首页
* */
router.get('/',function(req,res,next) {
//一步用来获取分类,第二步用来获取种类和获取条数,以及后面的具体的内容列表
var data= {
userInfo:req.userInfo,
count:[],
//这里修改开始
category:req.query.category||'',//前台内容分类的展示,获取信息
//这里修改结束
categories:[],
page :Number(req.query.page||1),
limit :10,
pages :0,
contents:[]
};
//这里修改开始
var where ={};
if(data.category){
where.category=data.category
}
//这里修改结束
//读取所有的分类信息
Category.find().then(function (categories) {
data.categories=categories;
//读取内容的总记录数
return Content.count();
}).then(function (count) {
data.count=count;
//计算总页数
data.pages=Math.ceil(data.count/data.limit);//向上取整
//取值不能超过pages
data.page=Math.min(data.page,data.pages);
//取值不能小于1
data.page=Math.max(data.page,1);
var skip = (data.page-1)*data.limit;
//这里修改开始
//增加一个查询条件
return Content.find().where(where).sort({_id:-1}).limit(data.limit).skip(skip).populate(['category','user']).sort({
addTime:-1
});
//这里修改开始
}).then(function (contents) {
data.contents=contents;
res.render('main/index',data);//渲染当前views下面的index.html页面
})
});
5.修改完以后发现现实页面的的page是没有改变的,
(1)这是一个问题,需要修改
//读取所有的分类信息
Category.find().then(function (categories) {
data.categories=categories;
//读取内容的总记录数
return Content.where(where).count();//修改这里,添加一个where条件
(2)在index.html中
{%if pages>0%}
<li>
<strong>{{page}} / {{pages}}</strong>
</li>
{%else%}
{%endif%}
6.问题:在分类页面中,分页时不能传入分类id
解决方法:代码1修改为代码2
<a href="/?page={{page-1}};">上一页</a>
<a href="/?category={{category}}&page={{page-1}};">上一页</a>
7.问题,导航栏点击以后的高亮没有随着分类点击而改变
解决方法:在首页中的分类栏中做一个判断,判断是当前页面的id值与分类栏中的分类id相等,相等的话,高亮就显示下面
<nav>
<div class="menu">
{%if category==''%}
<a href="/" class="focus">首页</a>
{%else%}
<a href="/">首页</a>
{%endif%}
{%for cate in categories%}
{%if category==cate.id%}
<a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a>
{%else%}
<a href="/?category={{cate.id}}">{{cate.name}}</a>
{%endif%}
{%endfor%}
</div>
</nav>