大家好,我是被白菜拱的白菜。
技术:SSM框架,ajax
背景:在我们浏览贴吧的时候有很多评论,评论内容吸引我们时,往往我们会给他点一个赞。
具体描述: 我们创建了一个点赞表great,column有greatId,replyId(评论表),personId(点赞人)。评论表里面有likes属性,即点赞数。我们每次点赞,先要在点赞表内通过replyId,personId查询,假如有数据,则说明已经点过赞,此次则取消点赞,即delete,likes-1,没有查询到数据则说明没有点赞,添加数据,likes+1.
难点: 如何确保评论的唯一性,即点赞一次,所以的评论不改变,只改变他一个,即准确获得replyId,所以在前台展示帖子时,我们给div一个data-id=replyId,id的值也为replyId
前台:
jsp页面
<span class="jieda-zan" id="${reply.replyId}" data-id="${reply.replyId}" >
<i class="iconfont icon-zan" ></i>
<em >${reply.likes}</em>
</span>
<span type="reply">
<i class="iconfont icon-svgmoban53"></i>
回复
</span>
这里的data-id属性以及id属性很重要,让我们知道是在给哪一个帖子点赞
jquery+ajax部分
//ajax实现点赞功能 Asychronous Javascript And XML
$(document).on("click",".jieda-zan",function(){
var replyId=$(this).attr("data-id");
var personId=$("#personId").val();
$.ajax({
type: "POST",
url: "../reply/great.do",
data: "replyId="+replyId+"&personId="+personId+"",
success: function(msg){
var array=msg.split("-");
//假如已经点赞则为红色
if(array[0]==true){
$("#"+replyId+"").html("<i class='iconfont icon-zan' ></i><em>"+array[1]+"</em>");
$("#"+replyId+"").css("color","red");
}else{
$("#"+replyId+"").html("<i class='iconfont icon-zan' ></i><em>"+array[1]+"</em>");
}
}
});
});
controller部分
/*
* 利用ajax技术实现点赞和取消赞功能
*/
@RequestMapping("great")
@ResponseBody
public String greatReply(int replyId,int personId){
//这里出现了一个问题,返回值为Map<String,Object>前台无法接受成功(待解决)
//于是将返回值改为String,然后在前台将两个值-split
Map<String,Object> map=replyService.greatReply(replyId, personId);
String returnVal=map.get("isGreat")+"-"+map.get("likes");
return returnVal;
}
这里原先返回值是Map类型,但是我这里前台接受显示为[object][object]于是最后改用返回值为String,然后在前台将字符串split,此时返回值为两个,一个是否点赞,另一个是帖子的点赞数,假如点赞成功,则图标显示为红色,然后将所有点赞数进行展示。
Service层
/*
* 实现点赞与取消赞
*
* 假如在点赞表能够查询到值,则说明已经点赞,在点就是取消功能
* 此时删去该记录,然后reply表中likes-1,然后查询likes
* 最后传过去likes的值回显,然后根据状态点赞图标变成灰色
* 所有返回的有两个值,likes数量已经是否本人点赞
* 反之亦然
*/
public synchronized Map<String, Object> greatReply(int replyId,int personId){
int likes=0;
//是否点赞
boolean isGreat=false;
if(greatMapper.queryGreat(replyId, personId)!=null){
//说明已经点过赞了,则取消赞,删除对应的赞
greatMapper.deleteGreat(replyId, personId);
//reply表中likes-1
replyMapper.downLikes(replyId);
}else{
//没有点赞的状态
greatMapper.addGreat(replyId, personId);
replyMapper.upLikes(replyId);
//然后状态改为已点赞
isGreat=true;
}
//最后查询点赞的数量,然后以key-value的形式发送给前台
likes=replyMapper.queryLikes(replyId);
Map<String, Object> map=new HashMap<>();
map.put("likes", Integer.toString(likes));
map.put("isGreat",""+isGreat);
System.out.println(map);
return map;
}
Mapper层
主要涉及对点赞表的增删改查,这里不再详细叙述。