Springboot+ElementUi实现评论、回复、点赞功能

目录

• 1.概述
• 2.前端代码
• 1.html
• 2.css
• 3.js
• 4.api调用后台接口
• 3.后端代码
• 1.数据库SQL
• 2.实体类
• 3.daoMapper
• 4.daoMapper实现
• 5.service接口
• 6.service接口实现
• 7.controller

1.概述

做一个项目，突然需要实现回复功能，所依记录一下此次的一个实现思路，也希望给别人分享一下，估计代码还是不够完善，有空在实现分页功能。话不多说直接看效果图。主要实现了评论，回复，点赞，取消点赞，如果是自己评论的还可以删除，删除的规则是如果该评论下还有回复，也一并删除。

我这里管理的是课程id，可以根据需要把课程id换为其他核心业务的id进行关联，也可以把表进行拆分，评论表和回复表。不过我为了方便就没有进行拆分。具体的实现思路我都写有详细步骤，看注释即可

效果图：

2.前端代码

1.html

 

      

        
        

          

        
        

          
            发表评论
          
        
      
      

        
        

          {{ item.name }}
          {{ item.time }}
        
        

          
            
            {{ item.commentNum }}
          
          
            
            {{ item.commentNum }}
          
          
            
            
            {{ item.likeCount }}
          
          
        
        

          

            {{ item.content }}
          
        
        
        

          

            
            

              {{ reply.name }}
              {{ reply.time }}
            
            

              
                
                {{ reply.commentNum }}
              
              
                
                {{ reply.commentNum }}
              

              
                
                
                {{ reply.likeCount }}
              
              
            
            

              

                回复 {{ reply.fromName }}:
                {{ reply.content }}
              
            
            

          
        
        
        

          
          

            

          
          

            
              发表回复
            
          
        
      
    

2.css

.my-reply {
    padding: 10px;
    background-color: #fafbfc;
  }
  .my-reply .header-img {
    display: inline-block;
    vertical-align: top;
  }
  .my-reply .reply-info {
    display: inline-block;
    margin-left: 5px;
    width: 80%;
  }
  @media screen and (max-width: 1200px) {
    .my-reply .reply-info {
      width: 80%;
    }
  }
  .my-reply .reply-info .reply-input {
    min-height: 20px;
    line-height: 22px;
    padding: 10px 10px;
    color: #ccc;
    background-color: #fff;
    border-radius: 5px;
  }
  .my-reply .reply-info .reply-input:empty:before {
    content: attr(placeholder);
  }
  .my-reply .reply-info .reply-input:focus:before {
    content: none;
  }
  .my-reply .reply-info .reply-input:focus {
    padding: 8px 8px;
    border: 2px solid blue;
    box-shadow: none;
    outline: none;
  }
  .my-reply .reply-btn-box {
    height: 25px;
    display: inline-block;
 
  }
  .my-reply .reply-btn-box .reply-btn {
    position: relative;
    float: right;
    margin-left: 15px;
  }
  .my-comment-reply {
    margin-left: 50px;
  }
  .my-comment-reply .reply-input {
    width: flex;
  }
  .author-title:not(:last-child) {
    border-bottom: 1px solid rgba(74, 136, 199, 0.3);
  }
  .reply-father {
    padding: 10px;
  }
  .reply-father .header-img {
    display: inline-block;
    vertical-align: top;
  }
  .reply-father .author-info {
    display: inline-block;
    margin-left: 5px;
    width: 60%;
    height: 40px;
    line-height: 20px;
  }
  .reply-father .author-info span {
    display: block;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .reply-father .author-info .author-name {
    color: #000;
    font-size: 18px;
    font-weight: bold;
  }
  .reply-father .author-info .author-time {
    font-size: 14px;
  }
  .reply-father .author-info .author-count{
    font-size: 15px; color: blue;
  } 
  .reply-father .icon-btn {
    width: 30%;
    padding: 0 !important ;
    float: right;
  }
  @media screen and (max-width: 1200px) {
    .reply-father .icon-btn {
      width: 20%;
      padding: 7px;
    }
  }
  .reply-father .icon-btn span {
    cursor: pointer;
  }
  .reply-father .icon-btn .iconfont {
    margin: 0 5px;
  }
  .reply-father .talk-box {
    margin: 0 50px;
  }
  .reply-father .talk-box p {
    margin: 0;
  }
  .reply-father .talk-box .reply {
    font-size: 16px;
    color: #000;
  }
  .reply-father .reply-box {
    margin: 10px 0 0 50px;
    background-color: #efefef;
  }
  

3.js

4.api调用后台接口

import request from "@/utils/request";

export default {
  // 根据课程id获取评论信息
  getCommentList(courseId) {
    return request({
      url: `/serviceedu/edu-comment/getCommentList/${courseId}`,
      method: "get",
    });
  },

  // 添加一条评论记录
  addComment(current,parent) {
    return request({
      url: `/serviceedu/edu-comment/addComment`,
      method: "post",
      data:{current,parent}
    });
  },

  // 根据评论id删除一条记录 
  deleteCommentById(current) {
    return request({
      url: `/serviceedu/edu-comment/deleteCommentById`,
      method: "delete",
      data:current
    });
  },

   // 修改评论的点赞数量
   updateLikeCount(comment) {
    return request({
      url: `/serviceedu/edu-comment/updateLikeCount`,
      method: "post",
      data:comment
    });
  },

};

3.后端代码

1.数据库SQL

/*
 Navicat Premium Data Transfer

 Source Server         : WindowsMysql
 Source Server Type    : MySQL
 Source Server Version : 50732
 Source Host           : localhost:3306
 Source Schema         : guli_edu

 Target Server Type    : MySQL
 Target Server Version : 50732
 File Encoding         : 65001

 Date: 24/01/2022 22:54:47
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for edu_comment
-- ----------------------------
DROP TABLE IF EXISTS `edu_comment`;
CREATE TABLE `edu_comment`  (
  `id` char(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键id',
  `course_id` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '课程id',
  `teacher_id` char(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '讲师id',
  `member_id` varchar(19) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户id',
  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '用户昵称',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '用户头像',
  `content` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '评论内容',
  `parent_id` char(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '父级评论id\r\n',
  `comment_num` int(11) NULL DEFAULT NULL COMMENT '回复条数',
  `like_count` int(11) NULL DEFAULT NULL COMMENT '点赞数量',
  `is_like` tinyint(1) NULL DEFAULT 0 COMMENT '是否点赞',
  `like_list_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '点赞id列表',
  `input_show` tinyint(1) NULL DEFAULT 0 COMMENT '是否显示输入框',
  `time` datetime(0) NULL DEFAULT NULL COMMENT '评论创建时间',
  `from_id` char(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '回复记录id\r\n',
  `from_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NULL DEFAULT NULL COMMENT '回复人名称\r\n',
  `gmt_modified` datetime(0) NOT NULL COMMENT '更新时间',
  `gmt_create` datetime(0) NOT NULL COMMENT '创建时间',
  `is_deleted` tinyint(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',
  PRIMARY KEY (`id`) USING BTREE,
  INDEX `idx_course_id`(`course_id`) USING BTREE,
  INDEX `idx_teacher_id`(`teacher_id`) USING BTREE,
  INDEX `idx_member_id`(`member_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '评论' ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of edu_comment
-- ----------------------------
INSERT INTO `edu_comment` VALUES ('123963852741', '1482334670241763330', '', '1484454710336294913', 'compass', 'https://thirdwx.qlogo.cn/mmopen/vi_32/1JYibUaLyibKXk4VDEvDGyEUgFNAGrIHibRY4iatO3atSD1YERDS6qZbbbdibNpnsPqYF7kJxicAGtehHAAjiajrrict7g/132', 'spring如何实现AOP功能?', '-1', 4, 2, 1, ',1191616288114163713,1484112436503019522', 0, '2021-12-01 15:42:35', '-1', NULL, '2022-01-24 13:32:50', '2022-01-23 15:42:31', 0);
INSERT INTO `edu_comment` VALUES ('123963852742', '1482334670241763330', '', '1191616288114163713', '马超', 'https://guli-edu-compass.oss-cn-hangzhou.aliyuncs.com/avatar/2022-01-16/g.png', 'Joinpoint(连接点)： 在Sping程序中允许你使用通知或增强的地方，这种地方比较多，可以是方法前后，也可以是抛出异常的时，这里只提到了方法连接点，这是因为Spring只支持方法类型的连接点。再通俗一点就是哪些方法可以被增强（使用通知），这些方法称为连接点。', '123963852741', 1, 2, 1, ',1191616288114163713,1484112436503019522', 0, '2022-01-01 15:42:35', '123963852741', 'compass', '2022-01-24 13:32:50', '2022-01-23 15:42:31', 0);
INSERT INTO `edu_comment` VALUES ('123963852743', '1482334670241763330', '', '1484112436503019522', '卡夫卡', 'https://guli-edu-compass.oss-cn-hangzhou.aliyuncs.com/avatar/2022-01-16/b80d2ab57bc0401db0aee83746e94b1d-file.png', 'Pointcut(切入点)： 连接点是Spinrg程序中允许你使用通知或增强的地方，但是不是所有允许使用通知或增强的地方的地方都需要通知（增强）的，只有那些被我们使用了通知或者增强的地方才能称之为切入点。再通俗一点就是类中实际被增加（使用了通知）的方法称为切入点。', '123963852741', 1, 2, 1, '0,1191616288114163713,1484112436503019522', 0, '2020-01-01 15:42:35', '123963852741', 'compass', '2022-01-24 10:36:58', '2022-01-23 15:42:31', 0);
INSERT INTO `edu_comment` VALUES ('1485288657161056257', '1482334670241763330', '', '1484454710336294913', 'compass', 'https://thirdwx.qlogo.cn/mmopen/vi_32/1JYibUaLyibKXk4VDEvDGyEUgFNAGrIHibRY4iatO3atSD1YERDS6qZbbbdibNpnsPqYF7kJxicAGtehHAAjiajrrict7g/132', '前置通知(before):在执行业务代码前做些操作，比如获取连接对象', '-1', 1, 2, 1, ',1191616288114163713,1484112436503019522', 0, '2022-01-23 16:29:45', '-1', NULL, '2022-01-24 10:36:47', '2022-01-23 16:29:46', 0);
INSERT INTO `edu_comment` VALUES ('1485348435136622593', '1482334670241763330', '', '1191616288114163713', '马超', 'https://guli-edu-compass.oss-cn-hangzhou.aliyuncs.com/avatar/2022-01-16/g.png', 'Weaving（织入）：将 Aspect 和其他对象连接起来, 并创建 Adviced object 的过程', '1485288657161056257', 0, 2, 1, ',1191616288114163713,1484112436503019522', 0, '2022-01-23 20:27:18', '123963852741', 'compass', '2022-01-24 10:45:55', '2022-01-23 20:27:18', 0);
INSERT INTO `edu_comment` VALUES ('1485352669110349825', '1482334670241763330', '', '1191600824445046786', '司马懿', '\r\nhttps://img-blog.csdnimg.cn/2df9541c7fd044ff992ff234a29ca444.png?x-oss-process=image/resize,m_fixed,h_300', 'before advice, 在 join point 前被执行的 advice. 虽然 before advice 是在 join point 前被执行, 但是它并不能够阻止 join point 的执行, 除非发生了异常(即我们在 before advice 代码中, 不能人为地决定是否继续执行 join point 中的代码)', '123963852741', 0, 2, 1, ',1191616288114163713,1484112436503019522', 0, '2022-01-23 20:44:07', '123963852743', '卡夫卡', '2022-01-24 10:47:37', '2022-01-23 20:44:07', 0);
INSERT INTO `edu_comment` VALUES ('1485606518391865345', '1482334670241763330', '', '1484112436503019522', '卡夫卡', 'https://guli-edu-compass.oss-cn-hangzhou.aliyuncs.com/avatar/2022-01-16/b80d2ab57bc0401db0aee83746e94b1d-file.png', 'js中对象是引用数据类型，如果只是通过 objectB = objectA 简单的赋值，objectA 和 objectB 指向的是同一个地址', '123963852741', 0, 0, 0, '0,0', 0, '2022-01-24 13:32:49', '123963852742', '马超', '2022-01-24 13:32:50', '2022-01-24 13:32:50', 0);

SET FOREIGN_KEY_CHECKS = 1;

2.实体类

@Data
@ToString
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="EduComment对象", description="评论")
public class EduComment implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "主键id")
    @TableId(value = "id", type = IdType.ID_WORKER_STR)
    private String id;

    @ApiModelProperty(value = "课程id")
    private String courseId;

    @ApiModelProperty(value = "讲师id")
    private String teacherId;

    @ApiModelProperty(value = "用户id")
    private String memberId;

    @ApiModelProperty(value = "用户昵称")
    private String name;

    @ApiModelProperty(value = "用户头像")
    private String avatar;

    @ApiModelProperty(value = "评论内容")
    private String content;

    @ApiModelProperty(value = "父级评论id")
    private String parentId;

    @ApiModelProperty(value = "回复条数")
    private Integer commentNum;

    @ApiModelProperty(value = "点赞数量")
    private Integer likeCount;

    @ApiModelProperty(value = "是否点赞")
    private Boolean isLike;

    @ApiModelProperty(value = "点赞id列表")
    private String likeListId;

    @ApiModelProperty(value = "是否显示输入框")
    private Boolean inputShow;

  
    @ApiModelProperty(value = "评论创建时间")
    private Date time;

    @ApiModelProperty(value = "被回复的记录id")
    private String fromId;

    @ApiModelProperty(value = "回复人名称")
    private String fromName;

    @TableField(fill = FieldFill.INSERT_UPDATE)
    @ApiModelProperty(value = "更新时间")
    private Date gmtModified;

    @ApiModelProperty(value = "创建时间")
    @TableField(fill = FieldFill.INSERT)
    private Date gmtCreate;

    @TableLogic
    @ApiModelProperty(value = "逻辑删除 1（true）已删除， 0（false）未删除")
    private Boolean isDeleted;

    @ApiModelProperty(value = "回复列表")
    @TableField(exist = false)
    private List reply;

}

3.daoMapper

@Repository
public interface EduCommentMapper extends BaseMapper {

    /**
     * 根据课程id获取到所有的评论列表
     * @param courseId 课程id
     * @return
     */
    public List getAllCommentList(@Param("courseId") String courseId);


}

4.daoMapper实现

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

        
    
    
        SELECT
         id, course_id, teacher_id, member_id, name, avatar, content, parent_id,
               comment_num, like_count, is_like, like_list_id, input_show, time,
               from_id, from_name, gmt_modified, gmt_create, is_deleted
        FROM
            edu_comment
        WHERE
            parent_id = '-1'
          AND course_id = #{courseId} AND is_deleted!=1;
    

    
        select
            id, course_id, teacher_id, member_id, name, avatar, content, parent_id,
            comment_num, like_count, is_like, like_list_id, input_show, time,
            from_id, from_name, gmt_modified, gmt_create, is_deleted
        from edu_comment
        where parent_id=#{id} AND is_deleted!=1;
    

5.service接口

public interface EduCommentService extends IService {

    /**
     * 根据课程id获取到所有的评论列表
     * @param courseId 课程id
     * @return
     */
    public List getAllCommentList(@Param("courseId") String courseId);

    /**
     * 根据评论id删除一条记录[是本人评论的记录]
     * @param comment 评论对象中包含回复人的id也包含被回复人的id
     * @return
     */
    public  Integer deleteCommentById(EduComment comment);

    /**
     * 添加一条评论或回复记录
     * @param current 当前提交的新comment对象
     * @param  parent  当前被点击回复的对象[评论时不需要，回复需要根据他进行判断]
     * @param token 根据request对象取到token获取用户信息
     * @return
     */
    int addComment(EduComment current,EduComment parent, HttpServletRequest token);


    /**
     * 修改点赞数量
     * @param eduComment 评论对象
     * @return
     */
    public int updateLikeCount(EduComment eduComment);


}

6.service接口实现

@Service
public class EduCommentServiceImpl extends ServiceImpl implements EduCommentService {

    @Autowired
    private EduCommentMapper eduCommentMapper;

    @Autowired
    private UserCenterClient userCenterClient;

    @Override
    public List getAllCommentList(String courseId) {
        return eduCommentMapper.getAllCommentList(courseId);
    }

    @Override
    @Transactional
    public Integer deleteCommentById(EduComment comment) {
        int deleteCount=1;
      try {
          // 先查询该评论是不是一条顶级评论
          QueryWrapper isParentWrapper  = new QueryWrapper<>();
          isParentWrapper.eq("id",comment.getId());
          isParentWrapper.eq("parent_id",-1);
          Integer count = eduCommentMapper.selectCount(isParentWrapper);
          // 如果count大于0说明该评论是一条顶级评论，先删除他的子级评论
          if (count>=0){
              QueryWrapper wrapper  = new QueryWrapper<>();
              wrapper.eq("parent_id",comment.getId());
              eduCommentMapper.delete(wrapper);
          }
          // 最后再删除父级评论
          QueryWrapper wrapper  = new QueryWrapper<>();
          wrapper.eq("member_id",comment.getMemberId());
          wrapper.eq("id",comment.getId());
          eduCommentMapper.delete(wrapper);

          // 找到该记录的顶级评论让他的评论数-1
          String parentId = comment.getParentId();
          String fromId = comment.getFromId();
          if (!StringUtils.isEmpty(parentId) && parentId.equals(fromId)){
              EduComment eduComment = this.getById(parentId);
              if (eduComment!=null){
                  eduComment.setCommentNum(eduComment.getCommentNum()-1);
                  this.updateLikeCount(eduComment);
              }
          }

         // 考虑到不是顶级记录的直接子记录的情况 fromId:表示该记录回复的是那一条记录
         if (!StringUtils.isEmpty(parentId) && !parentId.equals(fromId)){
             // 更新他的直接父级
             EduComment father = this.getById(fromId);
             if (father!=null){
                 father.setCommentNum(father.getCommentNum()-1);
                 this.updateLikeCount(father);
             }
             // 更新他的跟节点评论数量
             EduComment root = this.getById(parentId);
             if (root!=null){
                 root.setCommentNum(root.getCommentNum()-1);
                 this.updateLikeCount(root);
             }
         }

      }catch (Exception e){
          e.printStackTrace();
          deleteCount = -1;
      }
        return deleteCount ;

    }


    @Override
    @Transactional
    public int addComment(EduComment current, EduComment parent ,HttpServletRequest token) {

        // mybatis-plus总是出现逻辑删除修改返回的影响条数为0的情况，所有进行异常捕捉，捕捉到异常返回-1表示失败
        try {

            if (StringUtils.isEmpty(token)){
                throw  new GuLiException(20001,"对不起!添加失败");
            }
            // 从请求头中根据token获取用户id
            String result = JwtUtils.getMemberIdByJwtToken(token);
            if (result.equals("error")){
                throw  new GuLiException(20001,"登录时长过期，请重新登录");
            }

            // 是一条顶级评论，直接进行添加操作 如果他的parentId=-1那就是顶级评论[发表评论]
            if (current!=null && !StringUtils.isEmpty(current.getParentId()) && current.getParentId().equals("-1")){
                // 如果从token中解析出来的memberId等于提交数据中MemberId就评论成功，否则失败
                if (result.equals(current.getMemberId())){
                    return  eduCommentMapper.insert(current);
                }
            }

            // 如果能直接到这里，说明是一条回复评论
            if (parent!=null && StringIsEmpty.isEmpty(parent.getId(),parent.getParentId())){

                // 修改当前被回复的记录的总回复条数+1 [前端传递过来的时候已经+1，直接按照id修改即可]
                this.updateLikeCount(parent);
                // 根据parentId查询一条记录
                EduComment root  = this.getById(parent.getParentId());
                if (root!=null && root.getParentId().equals("-1")){
                    // 根据当前被回复的记录找到顶级记录，将顶级记录也+1
                    root.setCommentNum(root.getCommentNum()+1);
                     this.updateLikeCount(root);
                }
                // 如果从token中解析出来的memberId等于提交数据中MemberId就评论成功，否则失败
                if (result.equals(current.getMemberId())){
                    return  eduCommentMapper.insert(current);
                }

            }

        }catch (Exception e){
            e.printStackTrace();
            return -1;
        }
        return -1;
    }

    @Override
    public int updateLikeCount(EduComment eduComment) {
        return  eduCommentMapper.updateById(eduComment);
    }


}

7.controller

@Api(value = "EduCommentController",description = "前台评论控制器")
@CrossOrigin
@RestController
@RequestMapping("/serviceedu/edu-comment")
public class EduCommentController {

    @Autowired
    private EduCommentService eduCommentService;

    @GetMapping("getCommentList/{courseId}")
    @ApiOperation(value = "根据课程id查询评论信息",notes = "传入课程id")
    public R getCommentList(@PathVariable String courseId){

        return R.ok().data("commentList",eduCommentService.getAllCommentList(courseId));
    }

    @DeleteMapping("deleteCommentById")
    @ApiOperation(value = "根据评论id删除一条记录",notes = "被点击的当前记录对象")
    public R deleteCommentById(@RequestBody EduComment comment){
         int updateCount = eduCommentService.deleteCommentById(comment);
        return updateCount !=-1 ?R.ok():R.error();
    }

    @PostMapping("addComment")
    @ApiOperation(value = "添加一条评论记录",notes = "json类型的评论对象")
    public R addComment(@RequestBody Map map,HttpServletRequest token){
        EduComment parent = map.get("parent");
        EduComment current = map.get("current");


        int updateCount = eduCommentService.addComment(current,parent,token);
        return updateCount!=-1?R.ok():R.error();
    }

    @PostMapping("updateLikeCount")
    @ApiOperation(value = "修改点赞数量",notes = "传递完整的EduComment对象")
    public R updateLikeCount(@RequestBody EduComment comment){

        int  updateLikeCount = eduCommentService.updateLikeCount(comment);
        return updateLikeCount>0?R.ok():R.error();
    }


}

以上就是Springboot+ElementUi实现评论、回复、点赞功能的详细内容，更多关于Springboot ElementUi的资料请关注脚本之家其它相关文章！