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 %>
至此,我们就实现了博客的分页功能。