需求: 实现对文章评论的点赞功能, 第一次点赞点赞数加 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, 前端页面的设计
- <table class="comment_tb">
- <tr class="tr_border">
- <td id="first_td">
- <img id="userImage" class="userImage" name="" src="${pageContext.request.contextPath}/demo/queryImage?username=${record.username}">
- </td>
- <td>
- <span class="username">${record.username}</span>
- </td>
- <td>
- <span id="creatime">${record.creatime}</span>
- </td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td colspan="6">
- <p style="text-indent: 1cm">
- ${record.content}
- </p>
- </td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- <td></td>
- <td style="width:100px;"></td>
- <td>
- <span > 评论 </span>
- <span>${record.answer}</span>
- </td>
- <td>
- <span id="like_span" onclick="clickLike(this);"> 点赞 </span>
- <span id="numbs">${record.like}</span>
- </td>
- </tr>
- </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 插入数据库.
- @RequestMapping(value = "/checkLike" ,method = RequestMethod.POST)
- @ResponseBody
- public String checkLike(@RequestBody String data, HttpSession session){
- /** 获取点赞的用户名 */
- String username = session.getAttribute("username").toString();
- /** 根据用户名来获取用户的 id*/
- User user = userMapper.findByName(username);
- Integer uId = user.getId();
- logger.info("用户 ID:"+uId);
- /** 获取前端的参数 */
- JSONObject jsonObject = JSONObject.fromObject(data);
- String title = jsonObject.get("title").toString();
- /** 根据文章标题获取文章的 id*/
- Post post = postMapper.queryPost(title);
- Integer aId = post.getId();
- logger.info("文章 ID:"+aId);
- /** 根据评论的时间来查询该条评论的 id*/
- String creatime = jsonObject.get("creatime").toString();
- logger.info(creatime);
- Comments comments = commentMapper.queryByCreatime(creatime);
- Integer cId = comments.getId();
- logger.info("评论 ID:"+cId);
- /** 将数据保存到数据库 */
- UserComment userComment = new UserComment();
- userComment.setaId(aId);
- userComment.setuId(uId);
- userComment.setcId(cId);
- /** 检查数据库中是否已经保存了该对象 */
- UserComment userComment1 = userCommentMapper.check(userComment);
- if(userComment1 == null){
- userCommentMapper.add(userComment);
- }
- int status = userCommentMapper.queryStatusById(userComment);
- logger.info(status);
- /*** 如果该用户没有点赞 */
- if(status == 0){
- /** 获取评论的点赞数 */
- Comments comments1 = commentMapper.queryById(cId);
- Integer result = comments1.getLike();
- result = result+1;
- /** 将修改的数据保存到数据库中 */
- Comments comments2 = new Comments();
- comments2.setId(cId);
- comments2.setLike(result);
- commentMapper.modifyLikesById(comments2);
- /** 修改点赞状态为 1*/
- userCommentMapper.modifyStatus(userComment);
- return result.toString();
- }else{
- /** 如果该用户点过赞了 */
- /** 获取评论的点赞数 */
- Comments comments1 = commentMapper.queryById(cId);
- Integer result = comments1.getLike();
- result = result-1;
- /** 将修改的数据保存到数据库中 */
- Comments comments2 = new Comments();
- comments2.setId(cId);
- comments2.setLike(result);
- commentMapper.modifyLikesById(comments2);
- /** 修改点赞状态为 1*/
- userCommentMapper.newmodifyStatus(userComment);
- return result.toString();
- }
- }
点赞功能
来源: http://www.bubuko.com/infodetail-2770310.html