Node写博客--前台内容分页展示

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>