请关注我的小站: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,有想要一起做的,或者有什么不懂的都可以找我哦。