VUE+Java实现评论回复功能

背景

• 最近需要做一个多级评论的功能，技术路线：VUE（Element）+Java（SpringBoot）

效果

后台

• SQL

• Java

Controller

/**
  * 根据关联id获取评论信息
  * @param relationId 关联id
  * @param type 类型
  * @return: com.harvey.result.ResultSupport
  * @date: 2020/12/10 14:37
  */
 @GetMapping("findList")
 public ResultSupport<Object> findList(@RequestParam("relationId") String relationId, @RequestParam("type") String type){
     log.debug("接口[findList]的参数：relationId={}, type={}", relationId, type);
     ResultSupport<Object> result = ResultSupport.createMisResp();
     try {
         List<Comment> 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<Object> save(@RequestBody Comment comment, HttpServletRequest request){
     log.debug("接口[save]的参数：comment={}", comment);
     ResultSupport<Object> 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<Comment> 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<Comment> findList(@Param("relationId") String relationId, @Param("type") String type);

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

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

XML

<sql id="commentColumns">
		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"
	sql>

	<sql id="commentJoins">
		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'
    sql>
	
	<insert id="save">
		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}
		)
	insert>

	<resultMap id="commentResultMap" type="com.harvey.entity.Comment">
		<id column="id" property="id" />
		<result column="userId" property="userId" />
		<result column="userName" property="userName" />
		<result column="relationId" property="relationId" />
		<result column="type" property="type" />
		<result column="replyUserId" property="replyUserId" />
		<result column="replyUserName" property="replyUserName" />
		<result column="parentId" property="parentId" />
		<result column="content" property="content" />
		<collection property="children" column="{parentId=id}" select="selectByParentId" ofType="com.harvey.Comment"/>
	resultMap>

	
	<select id="findList" resultMap="commentResultMap">
		SELECT
		<include refid="commentColumns"/>
		FROM
			comment a
		<include refid="commentJoins"/>
		WHERE
			a.relation_id = #{relationId}
			AND a.type = #{type}
			AND a.parent_id = '0'
		ORDER BY
			a.create_date DESC
	select>

	
	<select id="selectByParentId" resultType="com.harvey.entity.Comment">
		SELECT
		<include refid="commentColumns"/>
		FROM
		comment a
		<include refid="commentJoins"/>
		WHERE
		a.parent_id = #{parentId}
		ORDER BY
		a.create_date DESC
	select>

前端

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

<template>
  <el-drawer
    title="评论"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="handleClose"
    :modal="false"
    :withHeader="true"
    @open="getCommentList"
    @close="close"
    size="320px"
  >
    <div class="container">
      <div class="write-reply" @click="showCommentInputMajor()">
        <div style="margin-top: 10px;">
          <el-input
            class="gray-bg-input"
            v-model="majorComment"
            type="textarea"
            :rows="3"
            autofocus
            placeholder="写下你的评论"
          >
          el-input>
          <div style="text-align: right;margin-top: 10px;">
            <el-button @click="reset" size="small" round>重置el-button>
            <el-button
              type="primary"
              round
              @click="commitMajorComment"
              size="small"
              >确定el-button
            >
          div>
        div>
      div>
      <div class="comment" v-for="item in commentList" :key="item.id">
        <div class="info">
          <img
            class="avatar"
            :src="fileUrl + item.photo"
            width="36"
            height="36"
          />
          <div class="right">
            <div class="name">{{ item.userName }}div>
            <div class="date">{{ formatDate(item.createDate) }}div>
          div>
        div>
        <div class="content">{{ item.content }}div>
        <div class="control">
          
          <span
            class="comment-reply"
            @click="showCommentInput(item, item, 'major')"
          >
            <i class="iconfont icon-iconcomment">i>
            <span>回复span>
          span>
        div>
        <div class="reply">
          <div class="item" v-for="reply in item.children" :key="reply.id">
            <div class="reply-content">
              <span class="from-name">{{ reply.userName }}span
              ><span>: span>
              <span class="to-name">@{{ reply.replyUserName }}span>
              <span>{{ reply.content }}span>
            div>
            <div class="reply-bottom">
              <span>{{ formatDate(reply.createDate) }}span>
              <span
                class="reply-text"
                @click="showCommentInput(item, reply, 'child')"
              >
                <i class="iconfont icon-iconcomment">i>
                <span>回复span>
              span>
            div>
          div>
          <transition name="fade">
            <div class="input-wrapper" v-if="showItemId === item.id">
              <el-tag
                type="info"
                effect="dark"
                v-if="inputLabel != undefined && inputLabel"
                >{{ inputLabel }}el-tag
              >
              <el-input
                class="gray-bg-input"
                v-model="inputComment"
                type="textarea"
                :rows="3"
                autofocus
                placeholder="写下你的评论"
              >
              el-input>
              <div class="btn-control">
                <el-button @click="cancel" size="small" round>取消el-button>
                <el-button
                  type="primary"
                  round
                  @click="commitComment"
                  size="small"
                  >确定el-button
                >
              div>
            div>
          transition>
        div>
      div>
    div>
  el-drawer>
template>

<script>
import * as commentApi from "@/api/comment-api";
import { DateUtil } from "@/utils/DateUtils";
import { UserUtil } from "@/utils/UserUtils";
import "@/assets/css/iconfont/iconfont.css";

export default {
  props: {
    drawer: {
      type: Boolean,
      required: true,
      default: false
    },
    relationId: {
      type: String,
      required: true,
      default: ""
    },
    commentType: {
      type: String,
      required: true,
      default: ""
    }
  },
  data() {
    return {
      fileUrl: process.env.VUE_APP_FDFST_FILE_URL,
      commentList: [],
      inputComment: "",
      showItemId: "",
      replyUserId: "",
      parentId: "",
      userInfo: UserUtil.getUserByStorage(),
      inputLabel: "",
      majorComment: ""
    };
  },
  methods: {
    formatDate(date) {
      return DateUtil.formatDate(date, "yyyy-MM-dd hh:mm");
    },
    handleClose(done) {
      done();
    },
    /**
     * 点赞
     */
    /* likeClick(item) {
      if (item.isLike === null) {
        item.likeNum++;
      } else {
        if (item.isLike) {
          item.likeNum--;
        } else {
          item.likeNum++;
        }
        item.isLike = !item.isLike;
      }
    }, */
    // 获取评论内容
    getCommentList() {
      commentApi.findList(this.relationId, this.commentType).then(res => {
        this.commentList = res.data;
      });
    },
    /**
     * 点击取消按钮
     */
    cancel() {
      this.showItemId = "";
    },

    /**
     * 提交评论
     */
    commitComment() {
      // 封装参数
      let param = {
        userId: this.userInfo.userId,
        relationId: this.relationId,
        type: this.commentType,
        replyUserId: this.replyUserId,
        parentId: this.parentId,
        content: this.inputComment
      };
      commentApi.saveComment(param).then(res => {
        if (res.success) {
          this.$message({
            message: "评论成功",
            type: "success"
          });
          this.getCommentList();
          this.inputComment = "";
        } else {
          this.$message.error("评论失败");
        }
      });
    },

    /**
     * 提交评论
     */
    commitMajorComment() {
      // 封装参数
      let param = {
        userId: this.userInfo.userId,
        relationId: this.relationId,
        type: this.commentType,
        replyUserId: this.replyUserId,
        parentId: this.parentId,
        content: this.majorComment
      };
      commentApi.saveComment(param).then(res => {
        if (res.success) {
          this.$message({
            message: "评论成功",
            type: "success"
          });
          this.getCommentList();
          this.majorComment = "";
        } else {
          this.$message.error("评论失败");
        }
      });
    },

    /**
     * 点击评论按钮显示输入框
     * item: 当前大评论
     * reply: 当前回复的评论
     */
    showCommentInput(item, reply, type) {
      if (reply) {
        this.inputLabel = "@" + reply.userName + " ";
        if (type === "major") {
          this.parentId = reply.id;
        }
        if (type === "child") {
          this.parentId = reply.parentId;
        }
        this.replyUserId = reply.userId;
        debugger;
      } else {
        this.inputLabel = "";
        this.parentId = "0";
        this.replyUserId = "";
      }
      this.inputComment = "";
      this.showItemId = item.id;
    },
    showCommentInputMajor() {
      this.inputLabel = "";
      this.parentId = "0";
      this.replyUserId = "";
    },
    reset() {
      this.inputComment = "";
      this.majorComment = "";
    },
    close() {
      this.$emit("commentClose", "0");
    }
  }
};
script>

<style scoped lang="less">
/deep/.el-drawer__body {
  overflow: auto;
}
/deep/.el-drawer__header span:focus {
  outline: 0 !important;
}
.container {
  padding: 0 10px;
  box-sizing: border-box;
  .comment {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid #f2f6fc;
    .info {
      display: flex;
      align-items: center;
      .avatar {
        border-radius: 50%;
      }
      .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .name {
          font-size: 16px;
          color: #303133;
          margin-bottom: 5px;
          font-weight: 500;
        }
        .date {
          font-size: 12px;
          color: #909399;
        }
      }
    }
    .content {
      font-size: 16px;
      color: #303133;
      line-height: 20px;
      padding: 10px 0;
    }
    .control {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #909399;
      .like {
        display: flex;
        align-items: center;
        margin-right: 20px;
        cursor: pointer;
        &.active,
        &:hover {
          color: #409eff;
        }
        .iconfont {
          font-size: 14px;
          margin-right: 5px;
        }
      }
      .comment-reply {
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: #333;
        }
        .iconfont {
          font-size: 16px;
          margin-right: 5px;
          margin-top: 4px;
        }
      }
    }
    .reply {
      margin: 10px 0;
      border-left: 2px solid #dcdfe6;
      .item {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px dashed #ebeef5;
        .reply-content {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #303133;
          .from-name {
            color: #409eff;
          }
          .to-name {
            color: #409eff;
            margin-left: 5px;
            margin-right: 5px;
          }
        }
        .reply-bottom {
          display: flex;
          align-items: center;
          margin-top: 6px;
          font-size: 12px;
          color: #909399;
          .reply-text {
            display: flex;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            &:hover {
              color: #333;
            }
            .icon-iconcomment {
              margin-right: 5px;
              margin-top: 4px;
              font-size: 13px;
            }
          }
        }
      }
      .write-reply {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #909399;
        padding: 10px;
        cursor: pointer;
        &:hover {
          color: #303133;
        }
        .el-icon-edit {
          margin-right: 5px;
        }
      }
      .fade-enter-active,
      fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }
      .input-wrapper {
        padding: 10px;
        .gray-bg-input,
        .el-input__inner {
          /*background-color: #67C23A;*/
        }
        .btn-control {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-top: 10px;
          .cancel {
            font-size: 16px;
            color: #606266;
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              color: #333;
            }
          }
          .confirm {
            font-size: 16px;
          }
        }
      }
    }
  }
}
style>

其他模块引用该评论组件

<template>
	<Comment
      :relationId="kpiPerformance.id"
      :commentType="'1'"
      :drawer="isComment"
      @commentClose="commentClick('0')"
    >Comment>
template>

<script>
import Comment from "@/components/Comment";

export default {
	components: {
	   Comment
	}
}
script>