【百占百胜】三创比赛-ajax+jquery实现帖子回复点赞功能

大家好，我是被白菜拱的白菜。
技术：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层

主要涉及对点赞表的增删改查，这里不再详细叙述。