第5章 首页数据中加入用户并实现点赞功能

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