请关注我的小站:http://oideas.herokuapp.com/
上一章实现了用户的登录和注册功能,当然有些同学可能会发现,这两个功能做的很粗,没错,像前端验证,就没有做email的匹配,后台错误返回的时候也没有记录输入的内容,其实,这些小细节都不难实现,难的是你有没有那个心去做,我只是把大体的框架打出来给大家,但是你们同样也许要自己动手自己思考,不然,写着个blog就真的变成了傻瓜教程,遇到问题不要怕,也不要着急,一步一步慢慢解决,总是在刚下手做的时候就被困难吓到,多没意思,不多说了,不用在意。。。
1.首页中的数据加入用户元素
首先,首页中的数据来自那了呢?当然是投稿时候insert的啦,好,打开routes下的index.js找到 app.post('/putup')方法,还记得那段注释吗?if else中登录的用户暂时不做处理,对现在我们可以处理了。将:
//暂时不做处理
这段注释替换成:
User.getById(user._id, function(err, temp) {
if (!temp) {
//如果用户不存在,那user就是null
mind = new Mind({
content : cont,
user : null,
flag : flag
});
}
mind = new Mind({
content : cont,
user : temp,
flag : flag
});
console.log(mind);
mind.save(function(err, mind) {
if (err) {
req.flash('error', err);
return res.redirect('/upminds');
}
//不知到为何,测试的时候session中的user时常clear,所以我基本上在每个方法中加入下面这个段
req.session.user = user;
res.redirect('/');
});
});
为什么不知接用session中的user,还要查一下,其实,你可一试试,而且告诉你sessionn中的user也是可以的,目前也不会有影响,但是当我们用user的id去找一个用户并根据找到的这个用户再去查相关的mind,你发现找不到结果,为什么?我也不清楚,这是我的解决方法。我们直接在mind中存放一个完整的user这虽然显得有些浪费,但是我也是为了方便而已。。
好了投稿的时候用户已经加上去了,现在来做显示,打开views/index.ejs将显示头像的代码:
<img src="/images/tem.jpg" title="OMinds">
<a href="/">OMinds</a>
替换成:
<%if(mind.user){%>
<img src="<%=mind.user.photo%>" title="<%=mind.user.nickname%>">
<a href="/userinfor?uid=<%=mind.user._id%>"><%=mind.user.nickname%></a>
<%}%>
显示也做好了,找个用户登录系统,测试一下吧,点击投稿,随便写点什么,提交后发现,呀~,怎么报错了,还是什么 Error: db object already connecting, open cannot be called multiple times之类的的东西,一看代码行,说是我们的mind.save方法,恩,别担心,看看它的上一级方法是User.getById恩,我们打开models/user.js具体看看这个方法,恩,果然,db没有关闭,好,修改一下这个方法:
// R(查,通过ID)
User.getById = function(id, callback) {
mongodb.open(function(err, db) {
if (err) {
return callback(err);
}
db.collection('users', function(err, collection) {
if (err) {
db.close();
return callback(err);
}
collection.findOne({
_id : new ObjectID(id)
}, function(err, user) {
db.close();
if (err) {
return callback(err);
}
callback(null, user);
});
});
});
};
就是在最后返回的时候加了一句db.close()方法,为什么要跟大家说这个问题,其实这些方法写完之后是没有做过验证的,而且我也是一步一步去做的,遇到问题,也是要去解决的,也是借此告诉大家,有问题,不是问题,我们可以解决它。
好了,再次打开浏览器,投稿一下看看:
另外views/index.ejs中那段作为参考的div可以删除(保留也没问题,如果后面经常做db清除操作的话,建议保留)
2.实现点赞功能
ok先来做点东西,打开index.ejs把点赞和踩的链接修改为:
<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>
在index.ejs最后添加js方法:
<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>
我们要通过mind的id去找到它然后让它的ups或downs增加,那么,我们要天加一个取得数据的方法,打开models/mind.js添加:
//通过id查找
Mind.getById = function(id, callback) {
mongodb.open(function(err, db) {
if (err) {
return callback(err);
}
db.collection('minds', function(err, collection) {
if (err) {
db.close();
return callback(err);
}
collection.findOne({
_id : new ObjectID(id)
}, function(err, mind) {
db.close();
if (err) {
return callback(err);
}
callback(null, mind);
});
});
});
};
好,可以做逻辑处理了,打开routes/index.js,加入:
app.post('/addups', function(req, res) {
var oid=req.body.oid;
Mind.getById(oid, function(err, mind) {
if (!mind) {
req.flash('error', err);
return res.redirect('/');
}
var temp = mind.ups + 1;
Mind.update(oid, temp, mind.downs, mind.comments,function(err) {
if (err) {
req.flash('error', err);
return res.redirect('/');
}
console.log(temp);
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end(temp.toString());
//res.json({success:1});
return;
});
});
});
app.post('/addowns', function(req, res) {
var eid = req.body.oid;
Mind.getById(eid, function(err, mind) {
if (!mind) {
req.flash('error', err);
return res.redirect('/');
}
var temp = mind.downs + 1;
Mind.update(eid, mind.ups, temp, mind.comments, function(err) {
if (err) {
req.flash('error', err);
return res.redirect('/');
}
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end(temp.toString());
return;
});
});
});
简单吗?赶快试试把,注意,'Content-Type': 'text/plain'这句话,这个是一text方式传输数据,你可一设置application/json试试,这样前端可能通过json格式获取了(我没试过,你们可以尝试一下)
看一下效果:
注意到红色框里面了吗?对,我们已经实现了哦。。
以上本章内容。。。。
ideas-ominds交流群:
158325682,有想要一起做的,或者有什么不懂的都可以找我哦。