zoukankan      html  css  js  c++  java
  • Node.js 博客实例(六)留言功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现。

         实现用户给文章留言的功能,留言保存在数据库中。

    post.js 。改动 Post.prototype.save 中要存入的文档为:

    //要存入数据库的文档
      var post = {
          name: this.name,
          time: time,
          title: this.title,
          post: this.post,
    	  comments:[]
      };
         我们在文档里添加了 comments 键(数组)。用来存储此文章上的留言(一个个对象)。

    为了也让留言支持 markdown 语法,我们将 Post.getOne 函数里的:
    doc.post = markdown.toHTML(doc.post);     改动为:

    //解析 markdown 为 html
    if (doc) {
    	doc.comments.forEach(function (comment) {
    		comment.content = markdown.toHTML(comment.content);
    	});
    }
     blog/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);
    			}
    			//通过username、时间及标题查找文档,并把一条留言对象加入到该文档的 comments 数组里
    			collection.update({
    				"name": name,
    				"time.day": day,
    				"title": title
    			}, {
    					$push: {"comments": comment}
    				} ,	function (err) {
    						mongodb.close();
    						if (err) {
    							return callback(err);
    						}
    						callback(null);
    					});   
    		});
      });
    };
    改动 index.js 。在 Post = require('../models/post.js') 后加入一行代码:

     Post=require('../models/post.js'),
     Comment=require('../models/comment.js');
    创建 comment 的视图文件,在 blog/views/ 目录下新建 comment.ejs 。加入例如以下代码:
    <br />
    <% post.comments.forEach(function (comment, index) { %>
      <p><a href="<%= comment.website %>"><%= comment.name %></a>
      <span class="info"> 回复于 <%= comment.time %></span></p>
      <p><%- comment.content %></p>
    <% }) %>
    
    <form method="post">
    <% if (user) { %>
      姓名:<input type="text" name="name" value="<%= user.name %>" /><br />
      邮箱:<input type="text" name="email" value="<%= user.email %>" /><br />
      网址:<input type="text" name="website" value="/u/<%= user.name %>" /><br />
    <% } else { %>
      姓名:<input type="text" name="name" /><br />
      邮箱:<input type="text" name="email" /><br />
      网址:<input type="text" name="website" value="http://" /><br />
    <% } %>
      <textarea name="content" rows="5" cols="80"></textarea><br />
      <input type="submit" value="留言" />
    </form>
         注意:这里依据用户登录状态的不同,显示不同的提示信息。还需注意的一点是,未登录的用户在留言的时候, 网址 这一项须要加上 http:// 前缀。否则在生成连接的时候会基于当前 url (本地是 localhost:3000)。
    打开article.ejs ,在 <%- include footer %> 前加入一行代码:
    <%- include comment %>
    这样我们就在文章页面引入了留言模块。
    index.js加入代码:

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

         使用 res.redirect('back'); ,即留言成功后返回到该文章页。
         看看效果:

    进入博客并登录。先发表一篇文章用来測试:


    点击进入文章可看到留言板块,来留个言:


    留言成功,再次点击进入文章查看留言:


         注意:改动代码之后測试之前能够mongodb/blog目录下的内容清空以避免出现故障

  • 相关阅读:
    #Leetcode# 451. Sort Characters By Frequency
    #Leetcode# 148. Sort List
    PAT 甲级 1138 Postorder Traversal
    PAT 甲级 1141 PAT Ranking of Institutions
    PAT 甲级 1142 Maximal Clique
    PAT 甲级 1146 Topological Order
    PAT 甲级 1143 Lowest Common Ancestor
    #Leetcode# 347. Top K Frequent Elements
    牛客寒假算法基础集训营4
    PAT 1147 Heaps
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5264492.html
Copyright © 2011-2022 走看看