Node.js 博客实例(六)留言功能

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介:

原教程 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目录下的内容清空以避免出现故障






本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5264492.html,如需转载请自行联系原作者

相关文章
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
307 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
6月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
106 13
|
7月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
476 11
|
12月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
|
12月前
|
JavaScript 前端开发 API
|
9月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
135 10
|
9月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
129 8
|
10月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件