Yuity

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

1.一个完整的博客怎么能没有留言功能,我们把留言功能保存到自己的数据库中:

  我们假定,只有在文章页面才会显示留言板:

 

  1.1 首先,打开post.js,修改Post.prototype.save中药存储的文档为:

//要存入数据库的文档
var post = {
    name: this.name,
    time: time,
    title: this.title,
    post: this.post,
    comments: []
};

  1.2 我们在文档里面增加了comments键,这是一个数组集合,用来存储该文章的留言(一个个的对象)。为了也让留言支持markdown格式的语法,我们修改Post.getOne函数里的 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);
                    });
                }

  1.3 接下来,我们在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;

//存储一条留言信息
Comment.prototype.save = function(callback) {
      var name = this.name,
          day = this.day,
          title = this.title,
          comment = this.comment;

      //打开数据库
      mongodb.open(function (err, db) {
        if (err) {
              return callback(err);
        }
        //读取 posts 集合
        db.collection('posts', function (err, collection) {
              if (err) {
                mongodb.close();
                return callback(err);
              }
              //通过用户名、时间及标题查找文档,并把一条留言对象添加到该文档的 comments 数组里
              collection.update({
                "name": name,
                "time.day": day,
                "title": title
              }, {
                $push: {"comments": comment}
              } , function (err) {
                 mongodb.close();
                  if (err) {
                    return callback(err);
                  }
                  callback(null);
              });   
        });
      });
};

  1.4 然后,我们修改index.js,添加一行代码:

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

  1.5 接下来我们创建comment视图文件,在views文件夹下面新建comment.ejs,添加如下代码:

<div class="container">
    <% post.comments.forEach(function (comment, index) { %>
          <p><a href="<%= comment.website %>"><%= comment.name %></a>
          <span> 回复于 <%= comment.time %></span></p>
          <p><%- comment.content %></p>
    <% }) %>

    <form method="post" style="padding: 20px 0px;">
        <% if (user) { %>
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">姓名:</span>
                  <input type="text" name="name" class="form-control" value="<%= user.name %>" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">邮箱:</span>
                  <input type="text" name="email" class="form-control" value="<%= user.email %>" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">网址:</span>
                  <input type="text" name="website" class="form-control" value="/u/<%= user.name %>" aria-describedby="basic-addon1">
            </div>
            <% } else { %>
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">姓名:</span>
                  <input type="text" name="name" class="form-control" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">邮箱:</span>
                  <input type="text" name="email" class="form-control" aria-describedby="basic-addon1">
            </div>
            <div class="input-group">
                  <span class="input-group-addon" id="basic-addon1">网址:</span>
                  <input type="text" name="website" class="form-control" value="http://" aria-describedby="basic-addon1">
            </div>
        <% } %>
        <br/>
        <div class="form-group">
              <label for="name" class="control-label">正文:</label>
              <textarea class="form-control" name="content" rows="3" cols="3"></textarea>
        </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">留言</button>
           </div> 
    </form>
</div>

  1.6 然后,我们打开article.ejs,添加一行代码:

<%- include comment %>

  1.7 最后,我们修改index.js注册相应留言的post响应,添加如下代码:

//留言相应页面
router.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');
      });
});

至此,我们就给博客增加了留言的功能。

 

posted on 2016-03-21 21:08  Yuity  阅读(1108)  评论(0编辑  收藏  举报