点赞功能

Posted 2021-01-06 xiaocao123

对文章评论的点赞功能

 

 

需求:实现对文章评论的点赞功能，第一次点赞点赞数加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     }