不完全node实践教程-第五发

几天我们来实现博客详情页的评论功能.

进过前两发的讲解, 我们已经对新增feature的实现流程轻车熟路了.首先我们在momdel文件夹新建comment.js. 然后我们分析一下comment字段的组成, 很明显, 一个评论需要有评论内容, 发布评论的用户名(也就是当前登陆的用户). 然后,不要忘了在模型post里面添加comment字段, 储存该片文章的所有评论.

等等..

我们还有一个问题没解决, 那就是用户在发起comment的post请求的时候, 我们还要知道插入倒哪篇文章的comment字段数组里面啊.所以, 在post请求中还要传递评论的博客的名字, 作者, 时间, 以此来查找相应的博客.

基于以上分析, 我们不难写出下面的代码.

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

function Comment(postAuthor, postTitle, postTime, userName, commentContent, replyUserName) {
  this.postAuthor = postAuthor;
  this.postTitle  = postTitle;
  this.postTime = postTime;
  this.userName = userName;
  this.commentContent = commentContent;
  this.replyUserName = replyUserName;
}

module.exports = Comment;

Comment.prototype.save = function(callback) {
  var date = new Date();
  var postDoc = {
    'author': this.postAuthor,
    'title': this.postTitle,
    'time.till_minute': this.postTime
  },
  time = {
    date:  date,
    till_year: date.getFullYear(),
    till_month: date.getFullYear() + '-' + (date.getMonth() + 1),
    till_day:  date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
    till_minute: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getHours() + ':'
    + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() )
  },
  comment = {
    userName: this.userName,
    commentTime: time.till_day,
    commentContent: this.commentContent,
    replyUserName: this.replyUserName
  };
  console.dir(comment);

    mongodb.get().collection('posts', function(err, collection) {
      if (err) {
        mongodb.close();
        callback(err);
      }
      collection.update(postDoc, {$push: {'comments': comment}}, function(err, post) {
        // console.log(post);
        mongodb.close();
        if (err) {
          return callback(err);
        }
        callback(null);
      });
    });

};

然后打开post.js更改成下面的样子:

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

记下来我们打开index.js添加发布comment的路由.

app.use('/comment', comment);

同理在routes文件夹新建一个comment.js文件, 写入一下代码:

var Comment = require('comment');
var express = require('express');
var router = express.Router();

router.post('/', function(req, res) {
  var crtUser = req.session.user;
  var comment =  new Comment(req.body.postAuthor, req.body.postTitle, req.body.postTime, crtUser.name, req.body.commentContent, req.body.replyUserName);
  (req.body.replyUserName);
  comment.save(function(err) {
    if (err) {
      req.flash('error', err);
      res.redirect('back');
    }
    req.flash('success', '发表评论成功');
    res.redirect('back');
  });
})

module.exports = router;

最后一步, 打开/views/article.ejs, 在article.article-wrapper下面添加一下代码

<div class="comment-wrapper">
  <div class="comment-list">
    <% if (post.comments != null ) { post.comments.forEach(function(comment, index){ %>
        <div class="comment-item">
          <a class="user-img">
            <img src="/images/hacker.png" alt="" />
          </a>
          <div class="comment-right">
            <a href="/u/<%= user.name%>" class="link comment-post-user"><%= comment.userName%></a>
            <p class="comment-content">
              <span><%= comment.replyUserName%></span>
              <%= comment.commentContent%>
            </p>
          <div class="commentTime">
            <span class="comment-post-time"><%= comment.commentTime%></span>
            <span class="reply link" data-user-name="<%= comment.userName%>" data-comment-id="<%= index%>">reply</span>
          </div>
          </div>
        </div>
        <% })}%>
  </div>
</div>

<% if(user) {%>
  <div class="comment-input-wrapper">
      <form class="comment-input" action="/comment" method="post">
        <div class="form-wrapper">
          <input type="hidden" name="postAuthor" value="<%= post.author %>">
          <input type="hidden" name="postTitle" value="<%= post.title %>">
          <input type="hidden" name="postTime" value="<%= post.time.till_minute %>">
          <textarea name="commentContent" rows="8" cols="40" placeholder="牛逼的你， 来评论一发吧" class="textarea"></textarea>
        </div>
        <input type="submit" name="submit" value="submit" class="button-big">
      </form>
  </div>
<% }%>
<% if(!user) {%>
<div class="hint-message">  你要先<a href="/login" class="link">登陆</a>才能评论，或者<a href="/reg" class="link">注册</a>一个账号

</div>
<% }%>

大家可以看到, 我们看到, 我们还对发布评论的权限做了限制, 只有登陆的用户才可以发布评论. 好啦, 到了见证奇迹的时候了.如果一切没错的话, 运行app, 打开浏览器. 应该是这个样子滴.

但是…..我试着评论了几个之后, 就感觉到有一丝丝奇怪…不能@! 这虽然不是一个那么让人不能接受的事情, 起码是能用的. 但是我还是试着实现了这个功能..
好, 我们在article.ejs添加一个回复的选项

<div class="commentTime">
  <span class="comment-post-time"><%= comment.commentTime%></span>
  <span class="reply link" data-user-name="<%= comment.userName%>" data-comment-id="<%= index%>">reply</span>
</div>

然后写一段js, js不难, 相信大家能看懂.

<script type="text/javascript">
  var replyButton = document.getElementsByClassName('reply'),
  textArea = document.getElementsByClassName('textArea')[0],
  formWrapper = document.getElementsByClassName('form-wrapper')[0];
  for (var i = 0; i < replyButton.length; i++) {
        replyButton[i].onclick = function(e) {
          var replyUserName = this.getAttribute('data-user-name'),
          commentId = parseInt(this.getAttribute('data-comment-id')) + 1,
          replyTo = document.createElement('input'),
          replyUserNameInput = document.createElement('input');
          replyUserNameInput.type = "hidden";
          replyUserNameInput.name = "replyUserName";
          replyUserNameInput.value = "#" + commentId + "@" + replyUserName + "\n";
          replyTo.setAttribute('disabled', "disabled");
          replyTo.className = "replyTo";
          replyTo.value = "#" + commentId + "@" + replyUserName + "\n";
          formWrapper.insertBefore(replyTo, textArea);
          formWrapper.insertBefore(replyUserNameInput, replyTo);
          textArea.focus();
    }

  }

  textArea.onfocus =  function(e) {
    formWrapper.style.cssText = "border-color: #3d8fbd";
  }
  textArea.onblur = function(e) {
    formWrapper.style.cssText = "border-color: #dedede";
  }
</script>

然后我们再一次运行app. 切换一个用户, 然后…嘻嘻嘻.你就可以这样了.

是不是有点@的意思了. 这样, 我们就实现了评论的功能. 今天的代码在分支day05 github. css文件我没有给出, 大家可以随意发挥, 如果觉得我写的还看得过去, 欢迎copy.

(今天的逼就装到这里, 谢谢大家)