Node.js 博客实例(七)分页功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第七章,由于版本等的原因,在原教程基础上稍加改动即可实现。
给博客的主页和用户页面增加分页功能。设定:主页和用户页面每页最多显示十篇文章。
这里要用到 mongodb 的 skip 和 limit 操作。
打开 post.js ,把 Post.getAll 函数修改如下:
//读取文章及其相关信息 Post.getTen = 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); } var query = {}; if (name) { query.name = name; } //使用count返回特定查询的文档数 collection.count(query,function(err,total){ //根据 query 对象查询,并跳过前 (page-1)*10 个结果,返回之后的 10 个结果 collection.find(query,{ skip:(page-1)*10, limit:10 }).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,total);//成功!以数组形式返回查询的结果 }); }); }); }); };打开 index.js ,修改 app.get(‘/‘, function(req,res){ 如下:
<span style="white-space:pre"> </span>app.get('/', function (req, res) { //判断是否是第一页,并把请求的页数转换成 number 类型 var page=req.query.p?parseInt(req.query.p):1; //查询并返回第 page 页的 10 篇文章 Post.getTen(null,page, function (err, posts,total) { if (err) { posts = []; } res.render('index', { title: '主页', page:page, isFirstPage: (page - 1) == 0, isLastPage: ((page - 1) * 10 + posts.length) == total, user: req.session.user, posts: posts, success: req.flash('success').toString(), error: req.flash('error').toString() }); }); });注意:这里通过 req.query.p 获取的页数为字符串形式,我们需要通过 parseInt() 把它转换成数字以作后用。同时把 Post.getAll 改成了 Post.getTen 。
修改 index.js中的app.get(‘/u/:name‘) 如下:
<span style="white-space:pre"> </span>app.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 页的 10 篇文章 Post.getTen(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) * 10 + posts.length) == total, user : req.session.user, success : req.flash('success').toString(), error : req.flash('error').toString() }); }); }); });在 blog/views/ 文件夹下新建 paging.ejs ,添加如下代码:
<br /> <div> <% if (!isFirstPage) { %> <span class="prepage"><a title="上一页" href="?p=<%= page-1 %>">上一页</a></span> <% } %> <% if (!isLastPage) { %> <span class="nextpage"><a title="下一页" href="?p=<%= page+1 %>">下一页</a></span> <% } %> </div>这里通过 if(!isFirstPage) 判断是否为第一页,不是第一页则显示 “上一页” ;通过 if(!isLastPage) 判断是否为最后一页,不是最后一页则显示 “下一页” 。
接下来在主页和用户页引入分页。修改 index.ejs 和 user.ejs ,在 <%- include footer %> 前添加一行代码:
<%- include paging %>在 style.css 中添加以下样式:
.prepage a{float:left;text-decoration:none;padding:.5em 1em;color:#ff0000;font-weight:bold;} .nextpage a{float:right;text-decoration:none;padding:.5em 1em;color:#ff0000;font-weight:bold;} .prepage a:hover,.nextpage a:hover{text-decoration:none;background-color:#ff0000;color:#f9f9f9;-webkit-transition:color .2s linear;}效果:
上面发布了11篇文章==
点击下一页
撸代码要多活动活动,多喝水。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。