一个简单的blog系统（七） 实现分页功能

1.现在我们给博客的主页和用户界面增加分页功能。设定主页和用户界面最多显示10篇文章。

　　这里我们采用mongodb的 limit 和 skip 操作

　　1.1 首先打开post.js， 修改Post.getAll函数如下所示：

Post.getThree = function(name, page, callback) {
    //打开数据库
    mongodb.open(function(err, db) {
        if(err) {
            return callback(err);
        }
        //读取posts集合
        db.collection("posts", function(err, collection) {
            if(err) {
                mongodb.close();
                return callback(err);
            }
            //查找name属性为name的文章记录，如果name为null则查找全部记录
            var query = {};
            if(name) {
                query.name = name;
            }
            // //根据query对象来查询文章,并按照时间排序
            // collection.find(query).sort({time: -1}).toArray(function(err, docs) {
            //     mongodb.close();
            //     if(err) {
            //         return callback(err);    //失败，返回err信息
            //     }
            //     //解析markdown为html
            //     docs.forEach(function(doc) {
            //         doc.post = markdown.toHTML(doc.post);
            //     });
            //     callback(null, docs);    //成功，以数组的形式返回查询的结果
            // });
            
            //使用count返回特定查询的文档数total
            collection.count(query, function(err, total) {
                //根据query对象查询，并跳过前（page-1）*10个结果，返回之后的10个结果
                collection.find(query, {
                    skip: (page - 1) * 3,
                    limit: 3
                }).sort({time: -1}).toArray(function(err, docs) {
                    mongodb.close();
                    if(err) {
                        return callback(err);    //失败，返回err信息
                    }
                    //解析markdown为html
                    docs.forEach(function(doc) {
                        doc.post = markdown.toHTML(doc.post);
                    });
                    callback(null, docs);    //成功，以数组的形式返回查询的结果
                });
            })
        });
    });
};

　　1.2  然后打开index.js，修改router.get('/')如下所示，这里通过req.query.p获取的页数为字符串形式，我们把他parseInt() 把它转换成数字以作后用：

router.get('/', function(req, res) {
    //判断是否是第一页，并把请求的页数转换成number类型
    var page = req.query.p ? parseInt(req.query.p) : 1;
    //查询并返回第page页的六篇文章
    Post.getThree(null, page, function(err, posts, total) {
        if(err) {
            posts = [];
        }
        res.render('index', { 
            title: '主页',
            posts: posts,
            page: page,
            isFirstPage: (page - 1) == 0,
            isLastPage: ((page - 1) * 3 + posts.length) == total,
            user: req.session.user,
            success: req.flash('success').toString(),
            error: req.flash('error').toString()
        });
    });
});

　　1.3 修改router.get('u/name')如下所示：

//用户页面路由
router.get('/u/:name', function(req, res) {
    var page = req.query.p ? parseInt(req.query.p) : 1;
    //检查用户是否存在
    User.get(req.params.name, function(err, user) {
        if(!user) {
            req.flash('error', '用户不存在！');
            return res.redirect('/');    //用户不存在则跳转到主页
        }
        //查询并返回该用户第page页的3篇文章文章
        Post.getThree(user.name, page, function(err, posts, total) {
            if(err) {
                req.flash('error', err);
                return res.redirect('/');
            }
            res.render('user', {
                title: user.name,
                posts: posts,
                page: page,
                isFirstPage: (page - 1) == 0,
                isLastPage: ((page - 1) * 3 + posts.length) == total,                
                user: req.session.user,
                success: req.flash('success').toString(),
                error: req.flash('error').toString()
            });
        });
    });
});

　　1.4 接下来在views文件夹下面新建page.ejs ，添加如下代码：

<div class='container'>
    <nav>
          <ul class="pagination">
            <% if (!isFirstPage) { %>
                <li>
                    <a href="?p=<%= page-1 %>" aria-label="Previous" title="上一页">
                      <span aria-hidden="true">上一页</span>
                    </a>
                </li>
            <% } %>

            <% if (!isLastPage) { %>
                <li>
                    <a href="?p=<%= page+1 %>" aria-label="Next" title="下一页">
                      <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            <% } %>
        </ul>
    </nav>
</div>

　　1.5 最后，我们在index.ejs 和user.ejs 的添加一行代码：

<%- include page %>

至此，我们就实现了博客的分页功能。