第6章 实现评论功能

请关注我的小站：http://oideas.herokuapp.com/

在本章开始之前，让我们先来说说上一章，上一章节实现了主要点赞功能，但是，如果你思考一下就能发现，其实这个方法是有缺陷的，什么呢？那就是，用户可以无限的点击赞功能，而我们没有限制，那么该怎么实现呢？有以下几点思路共大家参考：

1.在前端js的方法中加入点击之后让页面上的标签不可用的处理。

2.在前端js的方法中加如全局的flag，判断flag，如果已经点击了就不再去发送请求。

3.在server端做处理，获取用户的ip，加入一个session列表中，每次去列表中查询，如果存在了就不做处理。

以上3种思路中，1、2都是表面控制，不彻底，用户刷新页面后又可以点击了，只有第3种可以。以上这个缺陷希望大家自己去实现，如果遇到问题可以联系我，或者你做出来了，拿来给大家分享一下，感谢。

实现评论功能

首先，让我们来修改一下首页的评论链接，打开views/index.ejs，修改评论的链接为：

<li><a href="/comment?oid=<%=mind._id%>" title="<%=mind.comments%>条评论" >评[<%=mind.comments%>]</a></li>

好了，下面是评论页面，在views下新建comments.ejs，代码：

<%- include header %>
  	<div class="content">
  		<div class="cell">
  			<% if(mind.user){ %>
  			<div class="cell_author">
  				<img src="<%=mind.user.photo%>" title="<%=mind.user.nickname%>">
  				<a href="/userinfor?uid=<%=mind.user._id%>"><%=mind.user.nickname%></a>
  			</div>
  			<%}%>
  			<div class="cell_text" title='<%= mind.cdate.minute %>' >
				<%= mind.content %>  				
  			</div>
  			<div class="cell_bar">
  				<ul style="padding:0">
  					<li><a id="putups<%= mind._id %>" name="putups" href="javascript:putUps('<%= mind._id %>');" title="<%=mind.ups%>个赞" >赞[<%=mind.ups%>]</a></li>
  					<li><a id="putdowns<%= mind._id %>" name="putdowns" href="javascript:putDowns('<%= mind._id %>')" title="<%=mind.downs%>个踩">踩[<%=mind.downs%>]</a></li>
  				</ul>
  				<ul class="cell_bar_comm">
  					<div class="bshare-custom" style="float:right;height:28px;margin-top: 4px;"><a title="分享到QQ空间" class="bshare-qzone"></a>
  					<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
  					<a title="分享到人人网" class="bshare-renren"></a>
  					<a title="分享到腾讯微博" class="bshare-qqmb"></a>
  					<a title="分享到网易微博" class="bshare-neteasemb"></a>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  					<script type="text/javascript" charset="utf-8">
						bShare.addEntry({
					        title:"OMind分享",
					        summary:'<%= mind.content %>' ,
							vUid:'' , vEmail:'', vTag:'OMinds'});
					</script>
  				</ul>
  			</div>
  		</div>
  	</div>
  	
  	<div class="content">
  		<% comments.forEach(function (comment, index) { %>
  		<div class="cell" style="padding:14px 16px;margin-bottom:8px;">
  			<div class="cell_text" title='<%= comment.cdate.second %>' style="min-height:40px;_height:40px;">
  				<% if(comment.user){ %><div class="comm imgmid"><% if(comment.user){ %><a href="/more?uid=<%=comment.user._id%>"><img src="<%=comment.user.photo%>" title="<%=comment.user.nickname%>" class="commphoto"></a><%}%><span class="imgmid"></span></div><%}%>
  				<div style="margin:0 auto;vertical-align: middle;min-height:40px;_height:40px;">
  				<%= comment.content %>
  				</div>
  			</div>
  		</div>
  		<% }) %>
  	</div>
  	<div class="main">
  		<div class="upideas_content clear_fix">
  			<div class="up_content clear_fix">
  				<div class="up_content_text" style="width:644px;">
  					<form method="post" action="/docomment" >
  						<input type="hidden" id="oid" name="oid" value="<%=mind._id%>">
  						<textarea id="idea_text" name="comm_text" class="up_idea_text" style="width:620px;" rows="4" required placeholder="无需登录，快速回复..." ></textarea>
  						<span class="up_idea_err"><%= error %></span><button type="submit" class="up_idea_btn" id="idea_btn" >回复</button>
  					</form>
  				</div>
  			</div>
  		</div>
  	</div>
  	<script type="text/javascript">
  	function putUps(oid){
			var params ={
                oid:oid
            };
            $.ajax({
                data: params,
                url: '/addups',
                type:'post',
                jsonpCallback: 'callback',
                success: function(data){
                	console.log(data);
                  $('#putups'+oid).attr("title",data+'个赞');
                  $('#putups'+oid).html("赞["+data+"]");
                  
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert('error ' + textStatus + " " + errorThrown);  
                }
            });
		}
		function putDowns(oid){
			var params ={
                oid:oid
            };
            $.ajax({
                data: params,
                url: '/addowns',
                type:'post',
                jsonpCallback: 'callback',
                success: function(data){
                  $('#putdowns'+oid).attr("title",data+'个踩');
                  $('#putdowns'+oid).html("踩["+data+"]");
                  
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert('error ' + textStatus + " " + errorThrown);  
                }
            });
		}
	</script>
<%- include footer %>

这其中还缺少一些css，打开style.css，添加：

.commphoto{
	border-radius: 20px;
	box-shadow: 0 0 6px hsla(0, 27%, 42%, .5);
	width: 40px;
	height: 40px;
	max-width: 100%;
	vertical-align: middle;
	border: 0;
	margin: 0 auto;
}
img.commphoto:hover{
	box-shadow: 0 0 8px hsla(350, 89%, 48%, 0.69);
	cursor:pointer;
}
.imgmid{display:inline-block;*display:inline;*zoom:1;height:100%;width:1px;margin-left:-1px;vertical-align:middle}
.comm{
	float:right;
	margin:0 -38px 0 10px;
	background: url(../images/bgnoise_lg.png);
	width:50px;
	height:50px;
	text-align:center;
	border-radius: 25px;
}
button.up_idea_btn:hover{
	cursor:pointer;
}

ok，页面已经布置好了（现在不再像之前一样，把布局先做出来，因为现有的很多模板都可一拿来用）

好了,让我们来设计表结构，在models目录下，新建comment.js，内容：

var mongodb = require('./db');
var ObjectID = require('mongodb').ObjectID;
function Comment(comment) {
	this.content = comment.content;
	this.cdate = comment.cdate;
	this.user =comment.user;
	this.oid = comment.oid;
	this._id =comment._id;
} ;
module.exports = Comment;
// 增
Comment.prototype.save = function(callback) {
	var date = new Date();
	var time = {
		second : date.getFullYear()+ "-"+ (date.getMonth() + 1)+ "-"+ date.getDate()+ " "+ date.getHours()+ ":"+ (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())+ ":"+ (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
	};
	var comment = {
		content : this.content,
		cdate : time,
		oid : this.oid,
		user :this.user
	};
	mongodb.open(function(err, db) {
		if (err) {
			return callback(err);
		}
		db.collection('comments', function(err, collection) {
			if (err) {
				db.close();
				return callback(err);
			}
			collection.insert(comment, {
				safe : true
			}, function(err, comment) {
				db.close();
				if (err) {
					return callback(err);
				}
				callback(null, comment[0]);
			});
		});
	});
};

// 查(通过mind的id查找comments)
Comment.get = function(oid,callback) {
	mongodb.open(function(err, db) {
		if (err) {
			return callback(err);
		}
		db.collection('comments', function(err, collection) {
			if (err) {
				db.close();
				return callback(err);
			}
			collection.find({oid : oid.toString()}).toArray(function(err, comments) {
				db.close();
				if (err) {
					return callback(err);
				}
				callback(null, comments);
			});
		});
	});
};

ok,表已经完成，

好，打开routes/index.js添加跳转到评论的方法：

app.get('/comment', function (req, res) {
		var oid=req.query.oid;
		if(!oid){
			return res.redirect('/');
		}
		
		Mind.getById(oid, function(err, mind) {
			if (err||!mind) {
				req.flash('error', err);
				return res.redirect('/');
			}
			Comment.get(mind._id,function(err,comments){
				if (err) {
					req.flash('error', err);
					return res.redirect('/');
				}
				res.render('comments', {
					title : 'OMinds - 评论',
					user : req.session.user,
					mind : mind,
					comments: comments,
					error : req.flash('error').toString()
				});
			});
			
		});
	  });

和用户户评论的方法：

app.post('/docomment', function(req, res) {
		var user = req.session.user;
		var cont = trimStr(req.body.comm_text);
		var oid = req.body.oid;
		if(!oid){
			return res.redirect('/');
		}
		Mind.getById(oid, function(err, mind) {
			if (err||!mind) {
				req.flash('error', err);
				return res.redirect('/');
			}
			if(cont==null||cont.length<1||cont.length>159){
				req.flash('error', '您的回复内容过多或太少，请修正后提交。');
				return res.redirect('back');
			}
			var comment;
			if (!user) {
				comment = new Comment({
					content : cont,
					user : null,
					oid : oid
				});
				comment.save(function(err, comment) {
					if (err) {
						req.flash('error', err);
						return res.redirect('back');
					}
					var coms = mind.comments+1;
					Mind.update(oid,mind.ups,mind.downs,coms, function(err) {
						if (err) {
							req.flash('error', err);
							return res.redirect('back');
						}
						return res.redirect('back');
					});
				});
			} else {
				User.getById(user._id, function(err, temp) {
					if (!temp) {
						comment = new Comment({
							content : cont,
							user : null,
							oid : oid
						});
					}else{
						comment = new Comment({
							content : cont,
							user : temp,
							oid : oid
						});
					}
					comment.save(function(err, comment) {
						if (err) {
							req.flash('error', err);
							return res.redirect('back');
						}
						var coms = mind.comments+1;
						Mind.update(oid,mind.ups,mind.downs,coms, function(err) {
							if (err) {
								req.flash('error', err);
								return res.redirect('back');
							}
							req.session.user = user;
							return res.redirect('back');
						});
					});
				});
			}
			
		});
	});

以上评论做好了，接下来然我们看看效果如何：

好把，这章就到这里把，那么，每一章都或多或少的有缺陷，留给大家去思考，到底该怎么布局，到底怎么做更完美，期待大家的作品哦。。。

ideas-ominds交流群： 158325682，有想要一起做的，或者有什么不懂的都可以找我哦。