第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，有想要一起做的，或者有什么不懂的都可以找我哦。