4.9.1 文章模型设计

我们只存储文章的作者 id、标题、正文和点击量这几个字段，对应修改 lib/mongo.js，添加如下代码：

lib/mongo.js

  1. exports.Post = mongolass.model('Post', {
  2.   author: { type: Mongolass.Types.ObjectId, required: true },
  3.   title: { type: 'string', required: true },
  4.   content: { type: 'string', required: true },
  5.   pv: { type: 'number', default: 0 }
  6. })
  7. exports.Post.index({ author: 1, _id: -1 }).exec()// 按创建时间降序查看用户的文章列表

4.9.2 发表文章

现在我们来实现发表文章的功能。首先创建发表文章页，新建 views/create.ejs，添加如下代码：

views/create.ejs

  1. <%- include('header') %>
  3. <div class="ui grid">
  4.   <div class="four wide column">
  5.     <a class="avatar avatar-link"
  6.        href="/posts?author=<%= user._id %>"
  7.        data-title="<%= user.name %> | <%= ({m: '男', f: '女', x: '保密'})[user.gender] %>"
  8.        data-content="<%= user.bio %>">
  9.       <img class="avatar" src="/img/<%= user.avatar %>">
  10.     </a>
  11.   </div>
  13.   <div class="eight wide column">
  14.     <form class="ui form segment" method="post">
  15.       <div class="field required">
  16.         <label>标题</label>
  17.         <input type="text" name="title">
  18.       </div>
  19.       <div class="field required">
  20.         <label>内容</label>
  21.         <textarea name="content" rows="15"></textarea>
  22.       </div>
  23.       <input type="submit" class="ui button" value="发布">
  24.     </form>
  25.   </div>
  26. </div>
  28. <%- include('footer') %>

修改 routes/posts.js，将：

  1. // GET /posts/create 发表文章页
  2. router.get('/create', checkLogin, function (req, res, next) {
  3.   res.send('发表文章页')
  4. })

修改为：

  1. // GET /posts/create 发表文章页
  2. router.get('/create', checkLogin, function (req, res, next) {
  3.   res.render('create')
  4. })

登录成功状态，点击右上角『发表文章』试下吧。

发表文章页已经完成了，接下来新建 models/posts.js 用来存放与文章操作相关的代码：

models/posts.js

  1. const Post = require('../lib/mongo').Post
  3. module.exports = {
  4.   // 创建一篇文章
  5.   create: function create (post) {
  6.     return Post.create(post).exec()
  7.   }
  8. }

修改 routes/posts.js，在文件上方引入 PostModel：

routes/posts.js

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

将：

  1. // POST /posts/create 发表一篇文章
  2. router.post('/create', checkLogin, function (req, res, next) {
  3.   res.send('发表文章')
  4. })

修改为：

  1. // POST /posts/create 发表一篇文章
  2. router.post('/create', checkLogin, function (req, res, next) {
  3.   const author = req.session.user._id
  4.   const title = req.fields.title
  5.   const content = req.fields.content
  7.   // 校验参数
  8.   try {
  9.     if (!title.length) {
  10.       throw new Error('请填写标题')
  11.     }
  12.     if (!content.length) {
  13.       throw new Error('请填写内容')
  14.     }
  15.   } catch (e) {
  16.     req.flash('error', e.message)
  17.     return res.redirect('back')
  18.   }
  20.   let post = {
  21.     author: author,
  22.     title: title,
  23.     content: content
  24.   }
  26.   PostModel.create(post)
  27.     .then(function (result) {
  28.       // 此 post 是插入 mongodb 后的值，包含 _id
  29.       post = result.ops[0]
  30.       req.flash('success', '发表成功')
  31.       // 发表成功后跳转到该文章页
  32.       res.redirect(`/posts/${post._id}`)
  33.     })
  34.     .catch(next)
  35. })

这里校验了上传的表单字段，并将文章信息插入数据库，成功后跳转到该文章页并显示『发表成功』的通知，失败后请求会进入错误处理函数。

现在刷新页面（登录情况下），点击右上角 发表文章 试试吧，发表成功后跳转到了文章页但并没有任何内容，下面我们就来实现文章页及主页。

4.9.3 主页与文章页

现在我们来实现主页及文章页。修改 models/posts.js 如下：

models/posts.js

  1. const marked = require('marked')
  2. const Post = require('../lib/mongo').Post
  4. // 将 post 的 content 从 markdown 转换成 html
  5. Post.plugin('contentToHtml', {
  6.   afterFind: function (posts) {
  7.     return posts.map(function (post) {
  8.       post.content = marked(post.content)
  9.       return post
  10.     })
  11.   },
  12.   afterFindOne: function (post) {
  13.     if (post) {
  14.       post.content = marked(post.content)
  15.     }
  16.     return post
  17.   }
  18. })
  20. module.exports = {
  21.   // 创建一篇文章
  22.   create: function create (post) {
  23.     return Post.create(post).exec()
  24.   },
  26.   // 通过文章 id 获取一篇文章
  27.   getPostById: function getPostById (postId) {
  28.     return Post
  29.       .findOne({ _id: postId })
  30.       .populate({ path: 'author', model: 'User' })
  31.       .addCreatedAt()
  32.       .contentToHtml()
  33.       .exec()
  34.   },
  36.   // 按创建时间降序获取所有用户文章或者某个特定用户的所有文章
  37.   getPosts: function getPosts (author) {
  38.     const query = {}
  39.     if (author) {
  40.       query.author = author
  41.     }
  42.     return Post
  43.       .find(query)
  44.       .populate({ path: 'author', model: 'User' })
  45.       .sort({ _id: -1 })
  46.       .addCreatedAt()
  47.       .contentToHtml()
  48.       .exec()
  49.   },
  51.   // 通过文章 id 给 pv 加 1
  52.   incPv: function incPv (postId) {
  53.     return Post
  54.       .update({ _id: postId }, { $inc: { pv: 1 } })
  55.       .exec()
  56.   }
  57. }

需要讲解两点：

  1. 我们使用了 markdown 解析文章的内容，所以在发表文章的时候可使用 markdown 语法（如插入链接、图片等等），关于 markdown 的使用请参考： Markdown 语法说明。
  2. 我们在 PostModel 上注册了 contentToHtml，而 addCreatedAt 是在 lib/mongo.js 中 mongolass 上注册的。也就是说 contentToHtml 只针对 PostModel 有效，而 addCreatedAt 对所有 Model 都有效。

接下来完成主页的模板，修改 views/posts.ejs 如下：

views/posts.ejs

  1. <%- include('header') %>
  3. <% posts.forEach(function (post) { %>
  4.   <%- include('components/post-content', { post: post }) %>
  5. <% }) %>
  7. <%- include('footer') %>

新建 views/components/post-content.ejs 用来存放单篇文章的模板片段：

views/components/post-content.ejs

  1. <div class="post-content">
  2.   <div class="ui grid">
  3.     <div class="four wide column">
  4.       <a class="avatar avatar-link"
  5.          href="/posts?author=<%= post.author._id %>"
  6.          data-title="<%= post.author.name %> | <%= ({m: '男', f: '女', x: '保密'})[post.author.gender] %>"
  7.          data-content="<%= post.author.bio %>">
  8.         <img class="avatar" src="/img/<%= post.author.avatar %>">
  9.       </a>
  10.     </div>
  12.     <div class="eight wide column">
  13.       <div class="ui segment">
  14.         <h3><a href="/posts/<%= post._id %>"><%= post.title %></a></h3>
  15.         <pre><%- post.content %></pre>
  16.         <div>
  17.           <span class="tag"><%= post.created_at %></span>
  18.           <span class="tag right">
  19.             <span>浏览(<%= post.pv || 0 %>)</span>
  20.             <span>留言(<%= post.commentsCount || 0 %>)</span>
  22.             <% if (user && post.author._id && user._id.toString() === post.author._id.toString()) { %>
  23.               <div class="ui inline dropdown">
  24.                 <div class="text"></div>
  25.                 <i class="dropdown icon"></i>
  26.                 <div class="menu">
  27.                   <div class="item"><a href="/posts/<%= post._id %>/edit">编辑</a></div>
  28.                   <div class="item"><a href="/posts/<%= post._id %>/remove">删除</a></div>
  29.                 </div>
  30.               </div>
  31.             <% } %>
  33.           </span>
  34.         </div>
  35.       </div>
  36.     </div>
  37.   </div>
  38. </div>

注意：我们用了 <%- post.content %>，而不是 <%= post.content %>，因为 post.content 是 markdown 转换后的 html 字符串。

修改 routes/posts.js，将：

routes/posts.js

  1. router.get('/', function (req, res, next) {
  2.   res.render('posts')
  3. })

修改为：

  1. router.get('/', function (req, res, next) {
  2.   const author = req.query.author
  4.   PostModel.getPosts(author)
  5.     .then(function (posts) {
  6.       res.render('posts', {
  7.         posts: posts
  8.       })
  9.     })
  10.     .catch(next)
  11. })

注意：主页与用户页通过 url 中的 author 区分。

现在完成了主页与用户页，访问 http://localhost:3000/posts 试试吧，现在已经将我们之前创建的文章显示出来了，尝试点击用户的头像看看效果。

接下来完成文章详情页。新建 views/post.ejs，添加如下代码：

views/post.ejs

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

打开 routes/posts.js，将：

routes/posts.js

  1. // GET /posts/:postId 单独一篇的文章页
  2. router.get('/:postId', function (req, res, next) {
  3.   res.send('文章详情页')
  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.     PostModel.incPv(postId)// pv 加 1
  8.   ])
  9.     .then(function (result) {
  10.       const post = result[0]
  11.       if (!post) {
  12.         throw new Error('该文章不存在')
  13.       }
  15.       res.render('post', {
  16.         post: post
  17.       })
  18.     })
  19.     .catch(next)
  20. })

现在刷新浏览器，点击文章的标题看看浏览器地址的变化吧。

注意：浏览器地址有变化，但页面看不出区别来（因为页面布局一样），后面我们添加留言功能后就能看出区别来了。

4.9.4 编辑与删除文章

现在我们来完成编辑与删除文章的功能。修改 models/posts.js，在 module.exports 对象上添加如下 3 个方法：

models/posts.js

  1. // 通过文章 id 获取一篇原生文章（编辑文章）
  2. getRawPostById: function getRawPostById (postId) {
  3.   return Post
  4.     .findOne({ _id: postId })
  5.     .populate({ path: 'author', model: 'User' })
  6.     .exec()
  7. },
  9. // 通过文章 id 更新一篇文章
  10. updatePostById: function updatePostById (postId, data) {
  11.   return Post.update({ _id: postId }, { $set: data }).exec()
  12. },
  14. // 通过文章 id 删除一篇文章
  15. delPostById: function delPostById (postId) {
  16.   return Post.deleteOne({ _id: postId }).exec()
  17. }

注意：不要忘了在适当位置添加逗号，如 incPv 的结束大括号后。

注意：我们通过新函数 getRawPostById 用来获取文章原生的内容（编辑页面用），而不是用 getPostById 返回将 markdown 转换成 html 后的内容。

新建编辑文章页 views/edit.ejs，添加如下代码：

views/edit.ejs

  1. <%- include('header') %>
  3. <div class="ui grid">
  4.   <div class="four wide column">
  5.     <a class="avatar"
  6.        href="/posts?author=<%= user._id %>"
  7.        data-title="<%= user.name %> | <%= ({m: '男', f: '女', x: '保密'})[user.gender] %>"
  8.        data-content="<%= user.bio %>">
  9.       <img class="avatar" src="/img/<%= user.avatar %>">
  10.     </a>
  11.   </div>
  13.   <div class="eight wide column">
  14.     <form class="ui form segment" method="post" action="/posts/<%= post._id %>/edit">
  15.       <div class="field required">
  16.         <label>标题</label>
  17.         <input type="text" name="title" value="<%= post.title %>">
  18.       </div>
  19.       <div class="field required">
  20.         <label>内容</label>
  21.         <textarea name="content" rows="15"><%= post.content %></textarea>
  22.       </div>
  23.       <input type="submit" class="ui button" value="发布">
  24.     </form>
  25.   </div>
  26. </div>
  28. <%- include('footer') %>

修改 routes/posts.js，将：

routes/posts.js

  1. // GET /posts/:postId/edit 更新文章页
  2. router.get('/:postId/edit', checkLogin, function (req, res, next) {
  3.   res.send('更新文章页')
  4. })
  6. // POST /posts/:postId/edit 更新一篇文章
  7. router.post('/:postId/edit', checkLogin, function (req, res, next) {
  8.   res.send('更新文章')
  9. })
  11. // GET /posts/:postId/remove 删除一篇文章
  12. router.get('/:postId/remove', checkLogin, function (req, res, next) {
  13.   res.send('删除文章')
  14. })

修改为：

  1. // GET /posts/:postId/edit 更新文章页
  2. router.get('/:postId/edit', checkLogin, function (req, res, next) {
  3.   const postId = req.params.postId
  4.   const author = req.session.user._id
  6.   PostModel.getRawPostById(postId)
  7.     .then(function (post) {
  8.       if (!post) {
  9.         throw new Error('该文章不存在')
  10.       }
  11.       if (author.toString() !== post.author._id.toString()) {
  12.         throw new Error('权限不足')
  13.       }
  14.       res.render('edit', {
  15.         post: post
  16.       })
  17.     })
  18.     .catch(next)
  19. })
  21. // POST /posts/:postId/edit 更新一篇文章
  22. router.post('/:postId/edit', checkLogin, function (req, res, next) {
  23.   const postId = req.params.postId
  24.   const author = req.session.user._id
  25.   const title = req.fields.title
  26.   const content = req.fields.content
  28.   // 校验参数
  29.   try {
  30.     if (!title.length) {
  31.       throw new Error('请填写标题')
  32.     }
  33.     if (!content.length) {
  34.       throw new Error('请填写内容')
  35.     }
  36.   } catch (e) {
  37.     req.flash('error', e.message)
  38.     return res.redirect('back')
  39.   }
  41.   PostModel.getRawPostById(postId)
  42.     .then(function (post) {
  43.       if (!post) {
  44.         throw new Error('文章不存在')
  45.       }
  46.       if (post.author._id.toString() !== author.toString()) {
  47.         throw new Error('没有权限')
  48.       }
  49.       PostModel.updatePostById(postId, { title: title, content: content })
  50.         .then(function () {
  51.           req.flash('success', '编辑文章成功')
  52.           // 编辑成功后跳转到上一页
  53.           res.redirect(`/posts/${postId}`)
  54.         })
  55.         .catch(next)
  56.     })
  57. })
  59. // GET /posts/:postId/remove 删除一篇文章
  60. router.get('/:postId/remove', checkLogin, function (req, res, next) {
  61.   const postId = req.params.postId
  62.   const author = req.session.user._id
  64.   PostModel.getRawPostById(postId)
  65.     .then(function (post) {
  66.       if (!post) {
  67.         throw new Error('文章不存在')
  68.       }
  69.       if (post.author._id.toString() !== author.toString()) {
  70.         throw new Error('没有权限')
  71.       }
  72.       PostModel.delPostById(postId)
  73.         .then(function () {
  74.           req.flash('success', '删除文章成功')
  75.           // 删除成功后跳转到主页
  76.           res.redirect('/posts')
  77.         })
  78.         .catch(next)
  79.     })
  80. })

现在刷新主页，点击文章右下角的小三角，编辑文章和删除文章试试吧。