現(xiàn)在我們給博客的主頁和用戶頁面增加分頁功能。

我們設定：主頁和用戶頁面每頁最多顯示十篇文章。

這里我們要用到 mongodb 的 skip 和 limit 操作，具體可查閱《mongodb權(quán)威指南》。

打開 post.js ，把 Post.getAll 函數(shù)修改如下：

//一次獲取十篇文章
Post.getTen = function(name, page, callback) {
  //打開數(shù)據(jù)庫
  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 返回特定查詢的文檔數(shù) total
      collection.count(query, function (err, total) {
        //根據(jù) query 對象查詢，并跳過前 (page-1)*10 個結(jié)果，返回之后的 10 個結(jié)果
        collection.find(query, {
          skip: (page - 1)*10,
          limit: 10
        }).sort({
          time: -1
        }).toArray(function (err, docs) {
          mongodb.close();
          if (err) {
            return callback(err);
          }
          //解析 markdown 為 html
          docs.forEach(function (doc) {
            doc.post = markdown.toHTML(doc.post);
          });  
          callback(null, docs, total);
        });
      });
    });
  });
};

打開 index.js ，修改 app.get('/', function(req,res){ 如下：

app.get('/', function (req, res) {
  //判斷是否是第一頁，并把請求的頁數(shù)轉(zhuǎn)換成 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: '主頁',
      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()
    });
  });
});

注意：這里通過 req.query.p 獲取的頁數(shù)為字符串形式，我們需要通過 parseInt() 把它轉(zhuǎn)換成數(shù)字以作后用。同時把 Post.getAll 改成了 Post.getTen 。

修改 app.get('/u/:name') 如下：

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()
      });
    });
  }); 
});

接下來在 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;}

現(xiàn)在，我們實現(xiàn)了博客的分頁功能。