vue-cli从零开始实现一个仿豆瓣app（五）

终于写到最后一篇了。


最后讲一下如何展示热门评论和最新评论，原理很简单就是分别用不同的sql语句查询，一个用order by desc limit，一个直接查询就行啦。就是这两句啦。

query_hot_comment:'select user.username,usercomment.* from user,usercomment where user.userid = usercomment.userno and usercomment.filmno = ? order by commentlike desc limit 10',
query_all_comment:'select user.username,usercomment.* from user,usercomment where user.userid = usercomment.userno and usercomment.filmno = ? order by ucno desc',

这里是要联立两个表进行查询。

//获取热门评论方法，在created钩子中调用一次，页面生成的默认显示即热门评论，点击‘热门评论’键时也调用此方法
getHotComment:function(){
var _this = this;
this.$axios.post('/api/film/getHotComment',{'eno':this.$route.query.eno}).then(function(res){
if(res.data){
_this.hotCommentList = res.data;
if(_this.userid){//如果用户已登陆，则判断其对每一条评论是否点赞
//获取用户点赞的评论的列表
_this.showCommentIdOfUserLike(_this.userid,res.data,1);
}else{
_this.isToRenderHot = true;
}

}
}).catch(function(err){
console.log(err);
});
},

这里的 _this.showCommentIdOfUserLike(_this.userid,res.data,1); 就是要去调用查询用户的点赞列表，如果该条评论在用户的点赞列表中就显示点亮。

//获取当前用户点赞的所有评论的id的数组，用于后面判断用户是否点赞,执行的前提是用户已经登陆,resData是当前页面的所有评论
showCommentIdOfUserLike:function(uno,resData,hotOrAll){
var _this = this;
this.$axios.post('/api/film/userLikeList',{uno:uno}).then(function(res1){//res1是返回的用户点赞列表
if(res1.data!=null){              //有点赞记录
for(var i=0;i<resData.length;i++){
var flag = _this.hasLikeThisComment(resData[i].ucno,res1);
if(hotOrAll == 1){
_this.hotCommentList[i].hasComment = flag;
}
else if(hotOrAll == 2){
_this.allCommentList[i].hasComment = flag;
}
}
}else{
console.log('sdajklfajklsjdf');
}
if(hotOrAll == 1){
_this.isToRenderHot = true;
}else if(hotOrAll == 2){
_this.isToRenderAll = true;
}
});
},

hasLikeThisComment:function(ucno1,likelist){
var flag = false;                       //flag定义是否有当前评论的点赞纪录
for(var i=0;i<likelist.data.length;i++){
if(likelist.data[i].ucno == ucno1){
flag = true;
break;
}
}
return flag;
},

最后就是用户点赞时的处理。逻辑是判断是否登陆，如果没有不能点赞，有就将用户的id和他点赞的评论id作为参数传到后台，又后台判断当前用户执行的是点赞还是取消赞。

//用户点击‘有用’，记录用户对该评论的点赞信息，并更新按钮
thisIsUsefulBtn:function(parUcno,changeLikeHotOrAll,indexOfComment){
if(!this.userid){
alert('请登陆后再操作');
return false;
}
var _this = this;
this.$axios.post('/api/film/setCommentLike',{'usno':this.userid,'ucno':parUcno}).then(function(res){
if(res.data == 1){       //点赞操作成功
if(changeLikeHotOrAll == 1){   //点击的是热门评论
_this.hotCommentList[indexOfComment].hasComment = true;
_this.hotCommentList[indexOfComment].commentlike += 1;
}else if(changeLikeHotOrAll == 2){//点击的是所有评论
_this.allCommentList[indexOfComment].hasComment = true;
_this.allCommentList[indexOfComment].commentlike += 1;
}
}
else if(res.data == 2){       //取消点赞操作成功
if(changeLikeHotOrAll == 1){   //点击的是热门评论
_this.hotCommentList[indexOfComment].hasComment = false;
_this.hotCommentList[indexOfComment].commentlike -= 1;
}else if(changeLikeHotOrAll == 2){//点击的是所有评论
_this.allCommentList[indexOfComment].hasComment = false;
_this.allCommentList[indexOfComment].commentlike -= 1;
}
}
}).catch(function(err){
console.log('errhere');
console.log(err);
});
},

点赞的后台逻辑是先查询数据库中有没有该用户对该评论的点赞，如果没有就直接插入一条点赞信息，如果有就根据之前数据库中的字段判断之前是赞还是没赞，然后将该字段设置相反。

//设置有用点赞或取消点赞
router.post('/setCommentLike',function( request , response ){
var queryHasLike = $sql.comment.query_has_like;
var usno = request.body.usno;                      //点赞操作的用户的id
var ucno = request.body.ucno;                      //点赞的评论的id
//先检查点赞数据库中是否有用户的点赞记录
conn.query(queryHasLike,[ucno,usno],function(errHasLike,resHasLike){
if(errHasLike){
console.log(errHasLike);
}
if(resHasLike[0]!==undefined){                  //已存在该用户对该评论的点赞记录，则查询该记录是点赞还是取消赞
var hisLike = resHasLike[0].likeit;
var updateMyLike = $sql.comment.update_my_like;
if(hisLike == 1){                           //用户之前是点赞，则现在是要取消赞
conn.query(updateMyLike,[0,ucno,usno],function(errUpdateToZero,resUpdateToZero){
if(errUpdateToZero){
console.log(errUpdateToZero);
}
else if(resUpdateToZero){           //更新取消赞成功
var subtractCommentLike = $sql.comment.subtract_total_like;
conn.query(subtractCommentLike,ucno,function(errSubtractLike,resSubtractLike){ //把评论对应的总点赞数减一
if(errSubtractLike){
console.log(errSubtractLike);
}
else if(resSubtractLike){
response.send('2');                //'2',取消点赞更新个人对此评论和此评论取消点赞成功
}
})
}
});
}

else if(hisLike == 0){                                 //用户之前是取消点赞，则当前操作是点赞
conn.query(updateMyLike,[1,ucno,usno],function(errUpdateToOne,resUpdateToOne){
if(errUpdateToOne){
console.log(errUpdateToOne);
}
else if(resUpdateToOne){           //更新点赞成功
var addCommentLike = $sql.comment.add_total_like;
conn.query(addCommentLike,ucno,function(errAddLike,resAddLike){ //把评论对应的总点赞数加一
if(errAddLike){
console.log(errAddLike);
}
else if(resAddLike){
response.send('1');                //'1',点赞，更新个人对此评论和此评论点赞成功
}

a56d
});
}
});
}
}

else{      //用户之前没有对该评论进行过操作，则插入一条点赞信息
var addMyLike = $sql.comment.add_my_like;
conn.query(addMyLike,[ucno,usno],function(errInsert,resInsert){
if(errInsert){
console.log(errInsert);
}
else if(resInsert){             //插入我的点赞成功，更新评论表中点赞数
var addUserLike = $sql.comment.add_total_like;
conn.query(addUserLike,ucno,function(errAddAllLike,resAddAllLike){
if(errAddAllLike){
console.log(errAddAllLike);
}
else if(resAddAllLike){
response.send('1');               //‘1’，点赞，成功插入该用户点赞信息并更新评论数据库的总赞数
}
});
}
});
}

});
});

注意这边每执行一次赞或取消赞都要在数据库中对相应的用户评价表中的该评论的总赞数进行更新。

query_thumb_list:'select * from commentlike where userno = ? and likeit = "1"',
query_has_like:'select * from commentlike where ucno = ? and userno = ?',
add_my_like:'insert into commentlike ( ucno, userno , likeit) values( ?, ?, 1)',
update_my_like:'update commentlike set likeit = ? where ucno = ? and userno = ?',
add_total_like:'update usercomment set commentlike = commentlike+1 where ucno = ?',
subtract_total_like:'update usercomment set commentlike = commentlike-1 where ucno = ?'

大致就是这么多了，后面有一些其他的小的点再另外写吧。