update 留言

jisaz · Nov 21, 2017 · 92158b5 · 92158b5
1 parent ca106dc
commit 92158b5
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 87 deletions.
diff --git a/book/4.10 留言.md b/book/4.10 留言.md
@@ -41,15 +41,16 @@ exports.Comment.index({ postId: 1, _id: 1 }).exec()// 通过文章 id 获取该
 
               <% if (user && comment.author._id && user._id.toString() === comment.author._id.toString()) { %>
                 <div class="actions">
-                  <a class="reply" href="/posts/<%= post._id %>/comment/<%= comment._id %>/remove">删除</a>
+                  <a class="reply" href="/comments/<%= comment._id %>/remove">删除</a>
                 </div>
               <% } %>
             </div>
           </div>
         <% }) %>
 
         <% if (user) { %>
-          <form class="ui reply form" method="post" action="/posts/<%= post._id %>/comment">
+          <form class="ui reply form" method="post" action="/comments">
+            <input name="postId" value="<%= post._id %>" hidden>
             <div class="field">
               <textarea name="content"></textarea>
             </div>
@@ -63,6 +64,8 @@ exports.Comment.index({ postId: 1, _id: 1 }).exec()// 通过文章 id 获取该
 </div>
 ```
 
+> 注意：我们在提交留言表单时带上了文章 id（postId），通过 hidden 隐藏。
+
 在文章页引入留言的模板片段，修改 views/post.ejs 为：
 
 **views/post.ejs**
@@ -259,29 +262,19 @@ router.get('/:postId', function (req, res, next) {
 
 ## 4.10.3 发表与删除留言
 
-现在我们来实现发表与删除留言的功能。修改 routes/posts.js，将：
-
-**routes/posts.js**
+现在我们来实现发表与删除留言的功能。将 routes/comments.js 修改如下：
 
 ```js
-// POST /posts/:postId/comment 创建一条留言
-router.post('/:postId/comment', checkLogin, function (req, res, next) {
-  res.send('创建留言')
-})
-
-// GET /posts/:postId/comment/:commentId/remove 删除一条留言
-router.get('/:postId/comment/:commentId/remove', checkLogin, function (req, res, next) {
-  res.send('删除留言')
-})
-```
+const express = require('express')
+const router = express.Router()
 
-修改为：
+const checkLogin = require('../middlewares/check').checkLogin
+const CommentModel = require('../models/comments')
 
-```js
-// POST /posts/:postId/comment 创建一条留言
-router.post('/:postId/comment', checkLogin, function (req, res, next) {
+// POST /comments 创建一条留言
+router.post('/', checkLogin, function (req, res, next) {
   const author = req.session.user._id
-  const postId = req.params.postId
+  const postId = req.fields.postId
   const content = req.fields.content
 
   // 校验参数
@@ -309,8 +302,8 @@ router.post('/:postId/comment', checkLogin, function (req, res, next) {
     .catch(next)
 })
 
-// GET /posts/:postId/comment/:commentId/remove 删除一条留言
-router.get('/:postId/comment/:commentId/remove', checkLogin, function (req, res, next) {
+// GET /comments/:commentId/remove 删除一条留言
+router.get('/:commentId/remove', checkLogin, function (req, res, next) {
   const commentId = req.params.commentId
   const author = req.session.user._id
 
@@ -331,6 +324,8 @@ router.get('/:postId/comment/:commentId/remove', checkLogin, function (req, res,
         .catch(next)
     })
 })
+
+module.exports = router
 ```
 
 至此，我们完成了创建留言和删除留言的逻辑。刷新页面，尝试留言试试吧。留言成功后，将鼠标悬浮在留言上可以显示出 `删除` 的按钮，点击可以删除留言。

diff --git a/book/4.11 404 页面.md b/book/4.11 404 页面.md
@@ -9,7 +9,7 @@ Cannot GET /haha
 **routes/index.js**
 
 ```js
-app.use('/posts', require('./posts'))
+app.use('/comments', require('./comments'))
 ```
 
 下添加如下代码：
@@ -43,4 +43,4 @@ app.use(function (req, res) {
 
 上一节：[4.10 留言](https://github.com/nswbmw/N-blog/blob/master/book/4.10%20%E7%95%99%E8%A8%80.md)
 
-下一节：[4.12 错误页面](https://github.com/nswbmw/N-blog/blob/master/book/4.12%20%E9%94%99%E8%AF%AF%E9%A1%B5%E9%9D%A2.md)
+下一节：[4.12 错误页面](https://github.com/nswbmw/N-blog/blob/master/book/4.12%20%E9%94%99%E8%AF%AF%E9%A1%B5%E9%9D%A2.md)
diff --git a/book/4.4 功能设计.md b/book/4.4 功能设计.md
@@ -23,8 +23,8 @@
     2. 修改文章：`POST /posts/:postId/edit`
 7. 删除文章：`GET /posts/:postId/remove`
 8. 留言
-    1. 创建留言：`POST /posts/:postId/comment`
-    2. 删除留言：`GET /posts/:postId/comment/:commentId/remove`
+    1. 创建留言：`POST /comments`
+    2. 删除留言：`GET /comments/:commentId/remove`
 
 由于我们博客页面是后端渲染的，所以只通过简单的 `<a>(GET)` 和 `<form>(POST)` 与后端进行交互，如果使用 jQuery 或者其他前端框架（如 Angular、Vue、React 等等）可通过 Ajax 与后端交互，则 api 的设计应尽量遵循 Restful 风格。
 
@@ -41,7 +41,7 @@ GET /posts/:postId/remove
 Restful 风格的设计：
 
 ```
-DELETE /post/:postId
+DELETE /posts/:postId
 ```
 
 可以看出，Restful 风格的 api 更直观且优雅。
@@ -129,6 +129,7 @@ module.exports = function (app) {
   app.use('/signin', require('./signin'))
   app.use('/signout', require('./signout'))
   app.use('/posts', require('./posts'))
+  app.use('/comments', require('./comments'))
 }
 ```
 
@@ -176,13 +177,23 @@ router.get('/:postId/remove', checkLogin, function (req, res, next) {
   res.send('删除文章')
 })
 
-// POST /posts/:postId/comment 创建一条留言
-router.post('/:postId/comment', checkLogin, function (req, res, next) {
+module.exports = router
+```
+
+**routes/comments.js**
+
+```js
+const express = require('express')
+const router = express.Router()
+const checkLogin = require('../middlewares/check').checkLogin
+
+// POST /comments 创建一条留言
+router.post('/', checkLogin, function (req, res, next) {
   res.send('创建留言')
 })
 
-// GET /posts/:postId/comment/:commentId/remove 删除一条留言
-router.get('/:postId/comment/:commentId/remove', checkLogin, function (req, res, next) {
+// GET /comments/:commentId/remove 删除一条留言
+router.get('/:commentId/remove', checkLogin, function (req, res, next) {
   res.send('删除留言')
 })
 

diff --git a/routes/comments.js b/routes/comments.js
@@ -0,0 +1,61 @@
+const express = require('express')
+const router = express.Router()
+
+const checkLogin = require('../middlewares/check').checkLogin
+const CommentModel = require('../models/comments')
+
+// POST /comments 创建一条留言
+router.post('/', checkLogin, function (req, res, next) {
+  const author = req.session.user._id
+  const postId = req.fields.postId
+  const content = req.fields.content
+
+  // 校验参数
+  try {
+    if (!content.length) {
+      throw new Error('请填写留言内容')
+    }
+  } catch (e) {
+    req.flash('error', e.message)
+    return res.redirect('back')
+  }
+
+  const comment = {
+    author: author,
+    postId: postId,
+    content: content
+  }
+
+  CommentModel.create(comment)
+    .then(function () {
+      req.flash('success', '留言成功')
+      // 留言成功后跳转到上一页
+      res.redirect('back')
+    })
+    .catch(next)
+})
+
+// GET /comments/:commentId/remove 删除一条留言
+router.get('/:commentId/remove', checkLogin, function (req, res, next) {
+  const commentId = req.params.commentId
+  const author = req.session.user._id
+
+  CommentModel.getCommentById(commentId)
+    .then(function (comment) {
+      if (!comment) {
+        throw new Error('留言不存在')
+      }
+      if (comment.author.toString() !== author.toString()) {
+        throw new Error('没有权限删除留言')
+      }
+      CommentModel.delCommentById(commentId)
+        .then(function () {
+          req.flash('success', '删除留言成功')
+          // 删除成功后跳转到上一页
+          res.redirect('back')
+        })
+        .catch(next)
+    })
+})
+
+module.exports = router
diff --git a/routes/index.js b/routes/index.js
@@ -6,6 +6,7 @@ module.exports = function (app) {
   app.use('/signin', require('./signin'))
   app.use('/signout', require('./signout'))
   app.use('/posts', require('./posts'))
+  app.use('/comments', require('./comments'))
 
   // 404 page
   app.use(function (req, res) {

diff --git a/routes/posts.js b/routes/posts.js
@@ -167,58 +167,4 @@ router.get('/:postId/remove', checkLogin, function (req, res, next) {
     })
 })
 
-// POST /posts/:postId/comment 创建一条留言
-router.post('/:postId/comment', checkLogin, function (req, res, next) {
-  const author = req.session.user._id
-  const postId = req.params.postId
-  const content = req.fields.content
-
-  // 校验参数
-  try {
-    if (!content.length) {
-      throw new Error('请填写留言内容')
-    }
-  } catch (e) {
-    req.flash('error', e.message)
-    return res.redirect('back')
-  }
-
-  const comment = {
-    author: author,
-    postId: postId,
-    content: content
-  }
-
-  CommentModel.create(comment)
-    .then(function () {
-      req.flash('success', '留言成功')
-      // 留言成功后跳转到上一页
-      res.redirect('back')
-    })
-    .catch(next)
-})
-
-// GET /posts/:postId/comment/:commentId/remove 删除一条留言
-router.get('/:postId/comment/:commentId/remove', checkLogin, function (req, res, next) {
-  const commentId = req.params.commentId
-  const author = req.session.user._id
-
-  CommentModel.getCommentById(commentId)
-    .then(function (comment) {
-      if (!comment) {
-        throw new Error('留言不存在')
-      }
-      if (comment.author.toString() !== author.toString()) {
-        throw new Error('没有权限删除留言')
-      }
-      CommentModel.delCommentById(commentId)
-        .then(function () {
-          req.flash('success', '删除留言成功')
-          // 删除成功后跳转到上一页
-          res.redirect('back')
-        })
-        .catch(next)
-    })
-})
-
 module.exports = router
diff --git a/views/components/comments.ejs b/views/components/comments.ejs
@@ -19,15 +19,16 @@
 
               <% if (user && comment.author._id && user._id.toString() === comment.author._id.toString()) { %>
                 <div class="actions">
-                  <a class="reply" href="/posts/<%= post._id %>/comment/<%= comment._id %>/remove">删除</a>
+                  <a class="reply" href="/comments/<%= comment._id %>/remove">删除</a>
                 </div>
               <% } %>
             </div>
           </div>
         <% }) %>
 
         <% if (user) { %>
-          <form class="ui reply form" method="post" action="/posts/<%= post._id %>/comment">
+          <form class="ui reply form" method="post" action="/comments">
+            <input name="postId" value="<%= post._id %>" hidden>
             <div class="field">
               <textarea name="content"></textarea>
             </div>