对文章评论的点赞功能
需求:实现对文章评论的点赞功能，第一次点赞点赞数加1，再次点赞取消，点赞数减1。
1、数据库的设计
建立一张user_content_aricle表，主要包含
| id | a_id | u_id | c_id | status |
a_id：文章的ID
u_id：点赞用户的ID
c_id：点赞评论的ID
status：记录该用户对该评论的点赞状态。
2、前端页面的设计
1 <table class="comment_tb">
2 <tr class="tr_border">
3 <td id="first_td">
4 <img id="userImage" class="userImage" name=""
5 src="${pageContext.request.contextPath}/demo/queryImage?username=${record.username}">
6 </td>
7 <td>
8 <span class="username">${record.username}</span>
9 </td>
10 <td>
11 <span id="creatime">${record.creatime}</span>
12 </td>
13 <td></td>
14 <td></td>
15 <td></td>
16 </tr>
17 <tr >
18 <td colspan="6">
19 <p style="text-indent: 1cm">
20 ${record.content}
21 </p>
22 </td>
23 </tr>
24 <tr>
25 <td></td>
26 <td></td>
27 <td></td>
28 <td style="width:100px;"></td>
29 <td>
30 <span>评论</span>
31 <span>${record.answer}</span>
32 </td>
33 <td>
34 <span id="like_span" onclick="clickLike(this);">点赞</span>
35 <span id="numbs">${record.like}</span>
36 </td>
37 </tr>
38 </table>
3、JS代码
<script>
function clickLike(obj) {
/**获取table对象
* obj为用户所点击的评论对象*/
var tableObject = obj.parentNode.parentNode.parentNode;
/**获取评论的时间，用来查询该条评论的ID*/
var creatime = tableObject.children[0].children[2].children[0].innerHTML;
/**获取文章的标题*/
var title = $("#title").html();
var data = {title:title,creatime:creatime};
$.ajax({
url:"/like/checkLike",
contentType:'application/json;charset=utf-8',
type:'POST',
data:JSON.stringify(data),
dataType:'text',
success:function (result) {
/**修改该条评论的点赞数*/
tableObject.children[2].children[5].children[1].innerHTML = result;
}
});
}
</script>
4、后台处理
后台来接收前台的参数，包括用户名、文章的标题、评论的时间。
然后根据相关参数来获取对应的ID，将对应的ID插入数据库。
1 @RequestMapping(value = "/checkLike" ,method = RequestMethod.POST) 2 @ResponseBody 3 public String checkLike(@RequestBody String data, HttpSession session){ 4 5 /**获取点赞的用户名*/ 6 String username = session.getAttribute("username").toString(); 7 /**根据用户名来获取用户的id*/ 8 User user = userMapper.findByName(username); 9 Integer uId = user.getId(); 10 logger.info("用户ID:"+uId); 11 12 /**获取前端的参数*/ 13 JSONObject jsonObject = JSONObject.fromObject(data); 14 String title = jsonObject.get("title").toString(); 15 /**根据文章标题获取文章的id*/ 16 Post post = postMapper.queryPost(title); 17 Integer aId = post.getId(); 18 logger.info("文章ID:"+aId); 19 20 /**根据评论的时间来查询该条评论的id*/ 21 String creatime = jsonObject.get("creatime").toString(); 22 logger.info(creatime); 23 Comments comments = commentMapper.queryByCreatime(creatime); 24 Integer cId = comments.getId(); 25 logger.info("评论ID:"+cId); 26 27 /**将数据保存到数据库*/ 28 UserComment userComment = new UserComment(); 29 userComment.setaId(aId); 30 userComment.setuId(uId); 31 userComment.setcId(cId); 32 33 /**检查数据库中是否已经保存了该对象*/ 34 UserComment userComment1 = userCommentMapper.check(userComment); 35 if(userComment1 == null){ 36 userCommentMapper.add(userComment); 37 } 38 int status = userCommentMapper.queryStatusById(userComment); 39 logger.info(status); 40 /***如果该用户没有点赞*/ 41 if(status == 0){ 42 /**获取评论的点赞数*/ 43 Comments comments1 = commentMapper.queryById(cId); 44 Integer result = comments1.getLike(); 45 result = result+1; 46 /**将修改的数据保存到数据库中*/ 47 Comments comments2 = new Comments(); 48 comments2.setId(cId); 49 comments2.setLike(result); 50 commentMapper.modifyLikesById(comments2); 51 52 /**修改点赞状态为1*/ 53 userCommentMapper.modifyStatus(userComment); 54 return result.toString(); 55 }else{ 56 /**如果该用户点过赞了*/ 57 /**获取评论的点赞数*/ 58 Comments comments1 = commentMapper.queryById(cId); 59 Integer result = comments1.getLike(); 60 result = result-1; 61 /**将修改的数据保存到数据库中*/ 62 Comments comments2 = new Comments(); 63 comments2.setId(cId); 64 comments2.setLike(result); 65 commentMapper.modifyLikesById(comments2); 66 67 /**修改点赞状态为1*/ 68 userCommentMapper.newmodifyStatus(userComment); 69 return result.toString(); 70 } 71 }