zoukankan      html  css  js  c++  java
  • 一个简单的blog系统(六) 实现留言功能

    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');
          });
    });

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

  • 相关阅读:
    上传下载---上传
    分页中的难点
    分页的实现
    c3p0-config连接池
    判断
    客户关系管理增删改
    转发和重定向
    dbUtils结果集处理器
    加载配置文件.properties,及面向接口编程的DaoFactory
    jdbc链接数据库mysql
  • 原文地址:https://www.cnblogs.com/yuity/p/5301953.html
Copyright © 2011-2022 走看看