第6章 實(shí)現(xiàn)留言功能

一個(gè)完整的博客怎么能缺少留言功能呢，當(dāng)然我們可以用第三方社會(huì)化評(píng)論插件，既然我們有了數(shù)據(jù)庫(kù)，我們不妨把留言保存到自己的數(shù)據(jù)庫(kù)里。

我們?cè)O(shè)定：只有在文章頁面才會(huì)顯示留言板。

打開 post.js ，修改 Post.prototype.save 中要存入的文檔為：

var post = {
    name: this.name,
    time: time,
    title:this.title,
    post: this.post,
    comments: []
};

我們?cè)谖臋n里增加了 comments 鍵（數(shù)組），用來存儲(chǔ)此文章上的留言（一個(gè)個(gè)對(duì)象）。為了也讓留言支持 markdown 語法，我們將 Post.getOne 函數(shù)里的：

doc.post = markdown.toHTML(doc.post);

修改為：

if (doc) {
  doc.post = markdown.toHTML(doc.post);
  doc.comments.forEach(function (comment) {
    comment.content = markdown.toHTML(comment.content);
  });
}

接下來我們?cè)?models 下新建 comment.js 文件，添加如下代碼：

var mongodb = require('./db');

function Comment(name, day, title, comment) {
  this.name = name;
  this.day = day;
  this.title = title;
  this.comment = comment;
}

module.exports = Comment;

//存儲(chǔ)一條留言信息
Comment.prototype.save = function(callback) {
  var name = this.name,
      day = this.day,
      title = this.title,
      comment = this.comment;
  //打開數(shù)據(jù)庫(kù)
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //讀取 posts 集合
    db.collection('posts', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      //通過用戶名、時(shí)間及標(biāo)題查找文檔，并把一條留言對(duì)象添加到該文檔的 comments 數(shù)組里
      collection.update({
        "name": name,
        "time.day": day,
        "title": title
      }, {
        $push: {"comments": comment}
      } , function (err) {
          mongodb.close();
          if (err) {
            return callback(err);
          }
          callback(null);
      });   
    });
  });
};

修改 index.js ，在 Post = require('../models/post.js') 后添加一行代碼：

Comment = require('../models/comment.js');

這里我們創(chuàng)建了 comment 的模型文件，用于存儲(chǔ)新的留言到數(shù)據(jù)庫(kù)，并在 index.js 中引入以作后用。

接下來我們創(chuàng)建 comment 的視圖文件，在 views 文件夾下新建 comment.ejs ，添加如下代碼：

<br />
<% post.comments.forEach(function (comment, index) { %>
  <p><a href="<%= comment.website %>"><%= comment.name %></a>
  <span class="info"> 回復(fù)于 <%= comment.time %></span></p>
  <p><%- comment.content %></p>
<% }) %>

<form method="post">
<% if (user) { %>
  姓名：<input type="text" name="name" value="<%= user.name %>" /><br />
  郵箱：<input type="text" name="email" value="<%= user.email %>" /><br />
  網(wǎng)址：<input type="text" name="website" value="/u/<%= user.name %>" /><br />
<% } else { %>
  姓名：<input type="text" name="name" /><br />
  郵箱：<input type="text" name="email" /><br />
  網(wǎng)址：<input type="text" name="website" value="http://" /><br />
<% } %>
  <textarea name="content" rows="5" cols="80"></textarea><br />
  <input type="submit" value="留言" />
</form>

注意：這里根據(jù)用戶登錄狀態(tài)的不同，顯示不同的提示信息。還需注意的一點(diǎn)是，未登錄的用戶在留言的時(shí)候， 網(wǎng)址 這一項(xiàng)需要加上 http:// 前綴，否則在生成連接的時(shí)候會(huì)基于當(dāng)前 url （本地是 localhost:3000）。

打開 article.ejs ，在 <%- include footer %> 前添加一行代碼：

<%- include comment %>

這樣我們就在文章頁面引入了留言模塊。

最后，修改 index.js ，注冊(cè)留言的 POST 響應(yīng)，在 app.get('/u/:name/:day/:title') 后添加如下代碼：

app.post('/u/:name/:day/:title', function (req, res) {
  var date = new Date(),
      time = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + 
             date.getHours() + ":" + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
  var comment = {
      name: req.body.name,
      email: req.body.email,
      website: req.body.website,
      time: time,
      content: req.body.content
  };
  var newComment = new Comment(req.params.name, req.params.day, req.params.title, comment);
  newComment.save(function (err) {
    if (err) {
      req.flash('error', err); 
      return res.redirect('back');
    }
    req.flash('success', '留言成功!');
    res.redirect('back');
  });
});

注意：這里我們使用 res.redirect('back'); ，即留言成功后返回到該文章頁。

現(xiàn)在，我們就給博客添加了留言的功能。