大家好，我是被白菜拱的白菜。
技术：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")@ResponseBodypublic String greatReply(int replyId,int personId){//这里出现了一个问题，返回值为Map<String,Object>前台无法接受成功（待解决）//于是将返回值改为String,然后在前台将两个值-splitMap<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-1replyMapper.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层
主要涉及对点赞表的增删改查，这里不再详细叙述。
