Hello everyone, I am the cabbage that is covered by cabbage.
Technology : SSM framework, ajax
background : When we browse the post bar, there are many comments. When the content of the comments attracts us, we often give him a like.
Specific description: We have created a great list of great, column has greatId, replyId (comment table), personId (like people). There is a likes attribute in the comment table, which is the number of likes. Every time we like, we must first query through the replyId and personId in the likes table. If there is data, it means that the like has been liked. This time, the like is cancelled, that is, delete, likes-1. If no data is found, it means that No likes, add data, likes + 1.
Difficulty: How to ensure the uniqueness of the comment, that is, like once, so the comment does not change, only change him, that is, get the replyId accurately, so when showing the post at the front desk, we give div a data-id = replyId, the value of id is also replyId
Front desk:
jsp page
<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>
The data-id attribute and id attribute are very important here, let us know which post we like
jquery + ajax part
//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 part
/*
* 利用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;
}
The original return value here is of the Map type, but I accept the display as [object] [object] at the front desk, and finally use the return value as String, and then split the string at the front desk. , The other is the number of likes of the post. If the like is successful, the icon is displayed in red, and then all the likes are displayed.
Service layer
/*
* 实现点赞与取消赞
*
* 假如在点赞表能够查询到值，则说明已经点赞，在点就是取消功能
* 此时删去该记录，然后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 layer
It is mainly related to the addition, deletion and modification of the like list, which will not be described in detail here.
