VUE+Java实现评论回复功能

背景

最近需要做一个多级评论的功能,技术路线:VUE(Element)+Java(SpringBoot)

效果

VUE+Java实现评论回复功能_第1张图片

后台

SQL

VUE+Java实现评论回复功能_第2张图片

Java

Controller

/**
  * 根据关联id获取评论信息
  * @param relationId 关联id
  * @param type 类型
  * @return: com.harvey.result.ResultSupport
  * @date: 2020/12/10 14:37
  */
 @GetMapping("findList")
 public ResultSupport findList(@RequestParam("relationId") String relationId, @RequestParam("type") String type){
     log.debug("接口[findList]的参数:relationId={}, type={}", relationId, type);
     ResultSupport result = ResultSupport.createMisResp();
     try {
         List commentList = commentService.findList(relationId, type);
         ResultSupportUtils.fillResultSupport(result, commentList);
     } catch (Exception e) {
         log.error("[findList]接口执行异常", e);
         ResultSupportUtils.fillError(result,"系统出现异常!");
     }
     log.debug("接口[findList]的结果:result={}", result);
     return result;
 }

 /**
  * 保存评论
  * @param comment 参数
  * @return: com.tortoise.common.result.ResultSupport
  * @date: 2020/12/10 14:37
  */
 @PostMapping("save")
 public ResultSupport save(@RequestBody Comment comment, HttpServletRequest request){
     log.debug("接口[save]的参数:comment={}", comment);
     ResultSupport result = ResultSupport.createMisResp();
     String token = request.getHeader("authorization");
     if (StrUtil.isEmpty(token)) {
         result.setSuccess(false);
         result.setMessage("token无效!");
         return result;
     }
     if (BeanUtil.isEmpty(comment)){
         result.setSuccess(false);
         result.setMessage("参数无效!");
         return result;
     }
     try {
         commentService.save(comment, token);
     } catch (Exception e) {
         log.error("[save]接口执行异常", e);
         ResultSupportUtils.fillError(result,"系统出现异常!");
     }
     log.debug("接口[save]的结果:result={}", result);
     return result;
 }

Service

/**
  * 根据关联id获取绩效信息
  */
 public List findList(String relationId, String type) {
     return commentMapper.findList(relationId, type);
 }

 /**
  * 保存评论
  * @param comment 参数
  * @param token 用户token
  * @return:
  * @date: 2020/12/10 14:37
  */
 @Transactional(rollbackFor = Exception.class)
 public void save(Comment comment, String token) {
     SysUser user = UserUtils.getUser(token);
     comment.preInsert(user.getId());
     comment.setDelFlag("0");
     commentMapper.save(comment);
 }

Mapper

/**
 * 根据关联id获取绩效信息
 */
List findList(@Param("relationId") String relationId, @Param("type") String type);

/**
 * 根据id获取子评论内容
 */
List selectByParentId(@Param("parentId") String parentId);

/**
 * 保存评论
 */
void save(Comment comment);

XML


        a.id AS "id",
        a.user_id AS "userId",
        u.name AS "userName",
        a.relation_id AS "relationId",
        a.type AS "type",
        a.reply_user_id AS "replyUserId",
        r.name AS "replyUserName",
        a.parent_id AS "parentId",
        a.content AS "content",
        u.photo AS "photo",
        a.del_flag AS "delFlag",
        a.create_by AS "createBy",
        a.create_date AS "createDate"
    

    
        LEFT JOIN sys_user u ON a.user_id = u.id AND u.del_flag = '0'
        LEFT JOIN sys_user r ON a.reply_user_id = r.id AND r.del_flag = '0'
    
    
    
        INSERT INTO comment(
            id,
            user_id,
            relation_id,
            type,
            reply_user_id,
            parent_id,
            content,
            del_flag,
            create_by,
            create_date
        ) VALUES (
            #{id},
            #{userId},
            #{relationId},
            #{type},
            #{replyUserId},
            #{parentId},
            #{content},
            #{delFlag},
            #{createBy},
            #{createDate}
        )
    

    
        
        
        
        
        
        
        
        
        
        
    

    
    

    
    

前端

把评论抽成组件,方便其他模块引用





其他模块引用该评论组件



以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(VUE+Java实现评论回复功能)