4.10.1 留言模型设计

我们只需要留言的作者 id、留言内容和关联的文章 id 这几个字段，修改 lib/mongo.js，添加如下代码：

lib/mongo.js

  1. exports.Comment = mongolass.model('Comment', {
  2.   author: { type: Mongolass.Types.ObjectId, required: true },
  3.   content: { type: 'string', required: true },
  4.   postId: { type: Mongolass.Types.ObjectId, required: true }
  5. })
  6. exports.Comment.index({ postId: 1, _id: 1 }).exec()// 通过文章 id 获取该文章下所有留言，按留言创建时间升序

4.10.2 显示留言

在实现留言功能之前，我们先让文章页可以显示留言列表。首先创建留言的模板，新建 views/components/comments.ejs，添加如下代码：

views/components/comments.ejs

  1. <div class="ui grid">
  2.   <div class="four wide column"></div>
  3.   <div class="eight wide column">
  4.     <div class="ui segment">
  5.       <div class="ui minimal comments">
  6.         <h3 class="ui dividing header">留言</h3>
  8.         <% comments.forEach(function (comment) { %>
  9.           <div class="comment">
  10.             <span class="avatar">
  11.               <img src="/img/<%= comment.author.avatar %>">
  12.             </span>
  13.             <div class="content">
  14.               <a class="author" href="/posts?author=<%= comment.author._id %>"><%= comment.author.name %></a>
  15.               <div class="metadata">
  16.                 <span class="date"><%= comment.created_at %></span>
  17.               </div>
  18.               <div class="text"><%- comment.content %></div>
  20.               <% if (user && comment.author._id && user._id.toString() === comment.author._id.toString()) { %>
  21.                 <div class="actions">
  22.                   <a class="reply" href="/comments/<%= comment._id %>/remove">删除</a>
  23.                 </div>
  24.               <% } %>
  25.             </div>
  26.           </div>
  27.         <% }) %>
  29.         <% if (user) { %>
  30.           <form class="ui reply form" method="post" action="/comments">
  31.             <input name="postId" value="<%= post._id %>" hidden>
  32.             <div class="field">
  33.               <textarea name="content"></textarea>
  34.             </div>
  35.             <input type="submit" class="ui icon button" value="留言" />
  36.           </form>
  37.         <% } %>
  39.       </div>
  40.     </div>
  41.   </div>
  42. </div>

注意：我们在提交留言表单时带上了文章 id（postId），通过 hidden 隐藏。

在文章页引入留言的模板片段，修改 views/post.ejs 为：

views/post.ejs

  1. <%- include('header') %>
  3. <%- include('components/post-content') %>
  4. <%- include('components/comments') %>
  6. <%- include('footer') %>

新建 models/comments.js，存放留言相关的数据库操作，添加如下代码：

models/comments.js

  1. const marked = require('marked')
  2. const Comment = require('../lib/mongo').Comment
  4. // 将 comment 的 content 从 markdown 转换成 html
  5. Comment.plugin('contentToHtml', {
  6.   afterFind: function (comments) {
  7.     return comments.map(function (comment) {
  8.       comment.content = marked(comment.content)
  9.       return comment
  10.     })
  11.   }
  12. })
  14. module.exports = {
  15.   // 创建一个留言
  16.   create: function create (comment) {
  17.     return Comment.create(comment).exec()
  18.   },
  20.   // 通过留言 id 获取一个留言
  21.   getCommentById: function getCommentById (commentId) {
  22.     return Comment.findOne({ _id: commentId }).exec()
  23.   },
  25.   // 通过留言 id 删除一个留言
  26.   delCommentById: function delCommentById (commentId) {
  27.     return Comment.deleteOne({ _id: commentId }).exec()
  28.   },
  30.   // 通过文章 id 删除该文章下所有留言
  31.   delCommentsByPostId: function delCommentsByPostId (postId) {
  32.     return Comment.deleteMany({ postId: postId }).exec()
  33.   },
  35.   // 通过文章 id 获取该文章下所有留言，按留言创建时间升序
  36.   getComments: function getComments (postId) {
  37.     return Comment
  38.       .find({ postId: postId })
  39.       .populate({ path: 'author', model: 'User' })
  40.       .sort({ _id: 1 })
  41.       .addCreatedAt()
  42.       .contentToHtml()
  43.       .exec()
  44.   },
  46.   // 通过文章 id 获取该文章下留言数
  47.   getCommentsCount: function getCommentsCount (postId) {
  48.     return Comment.count({ postId: postId }).exec()
  49.   }
  50. }

小提示：我们让留言也支持了 markdown。
注意：删除一篇文章成功后也要删除该文章下所有的评论，上面 delCommentsByPostId 就是用来做这件事的。

修改 models/posts.js，在：

models/posts.js

  1. const Post = require('../lib/mongo').Post

下添加如下代码：

  1. const CommentModel = require('./comments')
  3. // 给 post 添加留言数 commentsCount
  4. Post.plugin('addCommentsCount', {
  5.   afterFind: function (posts) {
  6.     return Promise.all(posts.map(function (post) {
  7.       return CommentModel.getCommentsCount(post._id).then(function (commentsCount) {
  8.         post.commentsCount = commentsCount
  9.         return post
  10.       })
  11.     }))
  12.   },
  13.   afterFindOne: function (post) {
  14.     if (post) {
  15.       return CommentModel.getCommentsCount(post._id).then(function (count) {
  16.         post.commentsCount = count
  17.         return post
  18.       })
  19.     }
  20.     return post
  21.   }
  22. })

在 PostModel 上注册了 addCommentsCount 用来给每篇文章添加留言数 commentsCount，在 getPostById 和 getPosts 方法里的：

  1. .addCreatedAt()

下添加：

  1. .addCommentsCount()

这样主页和文章页的文章就可以正常显示留言数了。

然后将 delPostById 修改为：

  1. // 通过用户 id 和文章 id 删除一篇文章
  2. delPostById: function delPostById (postId, author) {
  3.   return Post.deleteOne({ author: author, _id: postId })
  4.     .exec()
  5.     .then(function (res) {
  6.       // 文章删除后，再删除该文章下的所有留言
  7.       if (res.result.ok && res.result.n > 0) {
  8.         return CommentModel.delCommentsByPostId(postId)
  9.       }
  10.     })
  11. }

小提示：虽然目前看起来使用 Mongolass 自定义插件并不能节省代码，反而使代码变多了。Mongolass 插件真正的优势在于：在项目非常庞大时，可通过自定义的插件随意组合（及顺序）实现不同的输出，如上面的 getPostById 需要将取出 markdown 转换成 html，则使用 .contentToHtml()，否则像 getRawPostById 则不必使用。

修改 routes/posts.js，在：

routes/posts.js

  1. const PostModel = require('../models/posts')

下引入 CommentModel:

  1. const CommentModel = require('../models/comments')

在文章页传入留言列表，将：

  1. // GET /posts/:postId 单独一篇的文章页
  2. router.get('/:postId', function (req, res, next) {
  3.   ...
  4. })

修改为：

  1. // GET /posts/:postId 单独一篇的文章页
  2. router.get('/:postId', function (req, res, next) {
  3.   const postId = req.params.postId
  5.   Promise.all([
  6.     PostModel.getPostById(postId), // 获取文章信息
  7.     CommentModel.getComments(postId), // 获取该文章所有留言
  8.     PostModel.incPv(postId)// pv 加 1
  9.   ])
  10.     .then(function (result) {
  11.       const post = result[0]
  12.       const comments = result[1]
  13.       if (!post) {
  14.         throw new Error('该文章不存在')
  15.       }
  17.       res.render('post', {
  18.         post: post,
  19.         comments: comments
  20.       })
  21.     })
  22.     .catch(next)
  23. })

现在刷新文章页试试吧，此时已经显示了留言的输入框。

4.10.3 发表与删除留言

现在我们来实现发表与删除留言的功能。将 routes/comments.js 修改如下：

  1. const express = require('express')
  2. const router = express.Router()
  4. const checkLogin = require('../middlewares/check').checkLogin
  5. const CommentModel = require('../models/comments')
  7. // POST /comments 创建一条留言
  8. router.post('/', checkLogin, function (req, res, next) {
  9.   const author = req.session.user._id
  10.   const postId = req.fields.postId
  11.   const content = req.fields.content
  13.   // 校验参数
  14.   try {
  15.     if (!content.length) {
  16.       throw new Error('请填写留言内容')
  17.     }
  18.   } catch (e) {
  19.     req.flash('error', e.message)
  20.     return res.redirect('back')
  21.   }
  23.   const comment = {
  24.     author: author,
  25.     postId: postId,
  26.     content: content
  27.   }
  29.   CommentModel.create(comment)
  30.     .then(function () {
  31.       req.flash('success', '留言成功')
  32.       // 留言成功后跳转到上一页
  33.       res.redirect('back')
  34.     })
  35.     .catch(next)
  36. })
  38. // GET /comments/:commentId/remove 删除一条留言
  39. router.get('/:commentId/remove', checkLogin, function (req, res, next) {
  40.   const commentId = req.params.commentId
  41.   const author = req.session.user._id
  43.   CommentModel.getCommentById(commentId)
  44.     .then(function (comment) {
  45.       if (!comment) {
  46.         throw new Error('留言不存在')
  47.       }
  48.       if (comment.author.toString() !== author.toString()) {
  49.         throw new Error('没有权限删除留言')
  50.       }
  51.       CommentModel.delCommentById(commentId)
  52.         .then(function () {
  53.           req.flash('success', '删除留言成功')
  54.           // 删除成功后跳转到上一页
  55.           res.redirect('back')
  56.         })
  57.         .catch(next)
  58.     })
  59. })
  61. module.exports = router

至此，我们完成了创建留言和删除留言的逻辑。刷新页面，尝试留言试试吧。留言成功后，将鼠标悬浮在留言上可以显示出 删除 的按钮，点击可以删除留言。