Springboot+ElementUi實現評論、回復、點贊功能

1.概述

做一個項目,突然需要實現回復功能,所依記錄一下此次的一個實現思路,也希望給別人分享一下,估計代碼還是不夠完善,有空在實現分頁功能。話不多說直接看效果圖。主要實現瞭評論,回復,點贊,取消點贊,如果是自己評論的還可以刪除,刪除的規則是如果該評論下還有回復,也一並刪除。

我這裡管理的是課程id,可以根據需要把課程id換為其他核心業務的id進行關聯,也可以把表進行拆分,評論表和回復表。不過我為瞭方便就沒有進行拆分。具體的實現思路我都寫有詳細步驟,看註釋即可

效果圖:

2.前端代碼

1.html

 <div>
      <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
        <el-avatar class="header-img" :size="40" :src="userAvatar"></el-avatar>
        <div class="reply-info">
          <div
            tabindex="0"
            contenteditable="true"
            id="replyInput"
            spellcheck="false"
            placeholder="輸入評論..."
            class="reply-input"
            @focus="showReplyBtn"
            @input="onDivInput($event)"
          ></div>
        </div>
        <div class="reply-btn-box" v-show="btnShow">
          <el-button
            class="reply-btn"
            size="medium"
            @click="sendComment"
            type="primary"
          >
            發表評論
          </el-button>
        </div>
      </div>
      <div
        v-for="(item, i) in comments"
        :key="i"
        class="author-title reply-father"
      >
        <el-avatar class="header-img" :size="40" :src="item.avatar"></el-avatar>
        <div class="author-info">
          <span class="author-name">{{ item.name }}</span>
          <span class="author-time">{{ item.time }}</span>
        </div>
        <div class="icon-btn">
          <span
            v-if="item.memberId != myId"
            @click="showReplyInput(i, j,item)"
          >
            <i class="iconfont el-icon-s-comment"></i>
            {{ item.commentNum }}
          </span>
          <span v-else>
            <i class="iconfont el-icon-s-comment" @click="noReply()"></i>
            {{ item.commentNum }}
          </span>
          <span class="xin" @click="countlikeNumber('comment', i, 0, item.id)">
            <i
              class="el-icon-star-on"
              v-if="item.likeListId.indexOf(myId) != -1"
            >
            </i>
            <i class="el-icon-star-off" v-else></i>{{ item.likeCount }}
          </span>
          <span
            class="el-icon-delete"
            v-if="item.memberId == myId"
            @click="deleteCommentById(item)"
          ></span>
        </div>
        <div class="talk-box">
          <p>
            <span class="reply">{{ item.content }}</span>
          </p>
        </div>
        <!-- 回復開始 -->
        <div class="reply-box">
          <div v-for="(reply, j) in item.reply" :key="j" class="author-title">
            <el-avatar
              class="header-img"
              :size="40"
              :src="reply.avatar"
            ></el-avatar>
            <div class="author-info">
              <span class="author-name">{{ reply.name }}</span>
              <span class="author-time">{{ reply.time }}</span>
            </div>
            <div class="icon-btn">
              <span
                @click="
                  showReplyInput(i, j, reply)
                "
                v-if="reply.memberId != myId"
              >
                <i class="iconfont el-icon-s-comment"></i>
                {{ reply.commentNum }}
              </span>
              <span v-else>
                <i class="iconfont el-icon-s-comment" @click="noReply()"></i>
                {{ reply.commentNum }}
              </span>

              <span @click="countlikeNumber('reply', i, j, reply.id)">
                <i
                  class="el-icon-star-on"
                  v-if="reply.likeListId.indexOf(myId) != -1"
                >
                </i>
                <i class="el-icon-star-off" v-else></i>{{ reply.likeCount }}
              </span>
              <span
                class="el-icon-delete"
                v-if="reply.memberId == myId"
                @click="deleteCommentById(reply)"
              ></span>
            </div>
            <div class="talk-box">
              <p>
                <b style="color: red">回復 {{ reply.fromName }}:</b>
                <span class="reply">{{ reply.content }}</span>
              </p>
            </div>
            <div class="reply-box"></div>
          </div>
        </div>
        <!-- 回復結束 -->
        <div v-show="_inputShow(i)" class="my-reply my-comment-reply">
          <el-avatar
            class="header-img"
            :size="40"
            :src="userAvatar"
          ></el-avatar>
          <div class="reply-info">
            <div
              tabindex="0"
              contenteditable="true"
              spellcheck="false"
              :placeholder="replyMessage"
              @input="onDivInput($event)"
              class="reply-input reply-comment-input"
            ></div>
          </div>
          <div class="reply-btn-box">
            <el-button
              class="reply-btn"
              size="medium"
              @click="sendCommentReply(i)"
              type="primary"
            >
              發表回復
            </el-button>
          </div>
        </div>
      </div>
    </div>

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

<script>
import commentApi from "@/api/comment";
import courseApi from "@/api/course";
import cookie from "js-cookie";

const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 這裡判斷點擊的元素是否是本身,是本身,則返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判斷指令中是否綁定瞭函數
      if (binding.expression) {
        // 如果綁定瞭函數 則調用那個函數,此處binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 給當前元素綁定個私有變量,方便在unbind中可以解除事件監聽
    el.vueClickOutside = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件監聽
    document.removeEventListener("click", el.vueClickOutside);
    delete el.vueClickOutside;
  },
};

Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小時
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
    }
  }
  return fmt;
};

export default {
  created() {
        // 將用戶數據從本地cookie獲取到
        this.getUserInfo();
        // 獲取評論數據
        this.initCommentList(this.course.id);
  },
  mounted() {},
  data() {
    return {

      course: {
        courseId: "",
      },

      btnShow: false,
      index: "0",
      replyComment: "",
      subIndex: "0",
      userName: "", // 當前用戶name
      userAvatar: "", // 當前用戶頭像
      myId: null, // 當前用戶id
      replyMessage:"",
      comments: [], 
      current:{}, // 當前被點擊的評論對象 
    };
  },
  methods: {


    // 將cookie的用戶信息提取出來
    getUserInfo() {
      let user = cookie.get("userInfo");
      if (user) {
        let userInfo = JSON.parse(user);
        this.userName = userInfo.nickname;
        this.userAvatar = userInfo.avatar;
        this.myId = userInfo.id;
      }
    },
    // 獲取評論數據
    initCommentList(courseId) {
      commentApi.getCommentList(courseId).then((response) => {
        // 先將獲取到的數據進行轉換
        let commentList = response.data.commentList;
        for (let i = 0; i < commentList.length; i++) {
          // 先將父級評論轉化likeListId為數組
          commentList[i].likeListId = commentList[i].likeListId.split(",");
          // 找到子級評論將likeListId為數組
          for (let j = 0; j < commentList[i].reply.length; j++) {
            commentList[i].reply[j].likeListId =
              commentList[i].reply[j].likeListId.split(",");
          }
        }
        this.comments = commentList;
      });
    },
    // 驗證用戶是否登錄
    userIsLogin(){
         let user = cookie.get("userInfo");
         if(user==null){
         this.$confirm('評論操作需要先登錄,是否現在跳轉到登錄頁面?', '溫馨提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
           this.$router.push({path: "/login"});
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '已經為您取消跳轉到登錄頁面'
          });          
        });
        return "no"   
      }
       return "yes"   
    },
    /**
     * 傳遞一個對象過來,將其深拷貝,不會在共用同一個引用
     * targetObj:需要拷貝的對象
     * 
     */
    copyObject(targetObj,type){ 
     
         let comment = {...targetObj}
        // 裝換為以,號分割的字符串 [因為後臺采用的是String進行存儲]
        comment.likeListId = comment.likeListId.join(",")
        // 刪除掉該屬性,不然後臺接收會報錯
        delete comment.reply  
        return comment;


    },
    // 輸入框被點擊是觸發
    inputFocus() {
      var replyInput = document.getElementById("replyInput");
      replyInput.style.padding = "8px 8px";
      replyInput.style.border = "2px solid blue";
      replyInput.focus();
    },
    // 顯示回復按鈕
    showReplyBtn() {
      this.btnShow = true;
    },
    // 提示不能給自己回復
    noReply() {
      this.$message({
        message: "對不起!暫不支持自己給自己回復",
        type: "warning",
      });
    },
    // 隱藏回復按鈕
    hideReplyBtn() {
      this.btnShow = false;
      replyInput.style.padding = "10px";
      replyInput.style.border = "none";
    },
    /**
     * 顯示輸入框[評論和回復共用]
     * i:頂級評論下標
     * j:子級評論下標
     * current:當前被點擊的評論記錄
     *
     */
    showReplyInput(i, j,current ) {
      this.current=current
      if (current.fatherId === "-1") {
        this.parentId = current.id;
      } else {
        this.parentId = current.fatherId;
      }
      this.replyMessage = "回復:" + current.name;
      this.comments[this.index].inputShow = false;
      this.index = i;
      this.comments[i].inputShow = true;
      this.toName = current.name;
      this.toId = current.id;
      this.subIndex = j == "0" ? "0" : j;
    },
    /**
     * 根據id刪除評論(前提是該評論是當前用戶所評論的)
     */
    deleteCommentById(current) {
      let comment = this.copyObject(current)
      console.log("current=",current)
      commentApi.deleteCommentById(comment).then((response) => {
        if (response.success) {
          this.$message({
            showClose: true,
            type: "success",
            message: "刪除成功",
          });
          // 重新獲取獲取評論數據
          this.initCommentList(this.course.id);
        }
      });
    },

    /**
     *
     * 統計點贊數量
     * type:是回復還是評論
     * i:一級評論
     * j:二級評論
     */
    countlikeNumber(type, i, j, id) {
      // 判斷用戶是否登錄
      if( this.userIsLogin()=="no") return;

      const commentObje = type == "comment" ? this.comments[i] : this.comments[i].reply[j];
      let list = commentObje.likeListId;

      if (list.length === 0 || list.indexOf(this.myId) == -1) {
        //在已經點贊的列表中未找到userId
        commentObje.isLike = true;
        commentObje.likeCount += 1;
        commentObje.likeListId.push(this.myId);
        
        // 將對象復制一份並且去除掉reply屬性,避免後臺接收數據出現異常
        let comment = this.copyObject(commentObje) 
        // 發送請求到後臺修改點贊數量
        commentApi.updateLikeCount(comment).then(response=>{
        if(response.success){
         // 重新獲取獲取評論數據
          this.initCommentList(this.course.id);
          this.$message({
            type:"success",
            message:"點贊成功"
          })
        }
      })
        console.log("點贊+1", commentObje.like, commentObje.likeListId);
      } else {
        const index = list.indexOf(this.myId);
        commentObje.isLike = false;
        commentObje.likeCount -= 1;
        commentObje.likeListId.splice(index, 1);
        console.log("點贊-1",  commentObje.likeListId);
        
        let comment =  this.copyObject(commentObje) 

        // 發送請求到後臺修改點贊數量
        commentApi.updateLikeCount(comment).then(response=>{
        if(response.success){
            // 重新獲取獲取評論數據
            this.initCommentList(this.course.id);
          this.$message({
            type:"success",
            message:"取消點贊成功"
          })
        }
      })
      }
      
      console.log("commentObje=",  commentObje);
      
    },
    // 是否顯示輸入框
    _inputShow(i) {
      return this.comments[i].inputShow;
    },
    // 發送評論
    sendComment() {

     if( this.userIsLogin()=="no") return;

      if (!this.replyComment) {
        this.$message({
          type: "warning",
          message: "評論不能為空",
        });
      } else {
        // 評論內容對象
        let object = {};
        let input = document.getElementById("replyInput");
        object.courseId = this.course.id;
        object.name = this.userName;
        object.content = this.replyComment;
        object.avatar = this.userAvatar;
        object.commentNum = 0;
        object.likeCount = 0;
        object.fromId="-1"
        object.memberId = this.myId;
        object.isLike = false;
        object.likeListId = "0,0";
        object.parentId = "-1";
        object.time = new Date().format("yyyy-MM-dd hh:mm:ss");
        this.replyComment = "";
        input.innerHTML = "";
        commentApi.addComment(object,this.current).then((response) => {
          if (response.success) {
            // 重新獲取獲取評論數據
            this.initCommentList(this.course.id);
            this.$message({
              type: "success",
              message: "評論成功",
            });
          }
        });
      }
    },
    // 發送回復
    sendCommentReply(i) {
     if( this.userIsLogin()=="no") return;
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "回復不能為空",
        });
      } else {
        // 回復內容對象
        let current = {};
        if(this.current.parentId == "-1" ){
          current.parentId = this.current.id
        }else{
          current.parentId = this.current.parentId
        }
        current.courseId = this.course.id;
        current.name = this.userName;
        current.memberId = this.myId;
        current.content = this.replyComment;
        current.avatar = this.userAvatar;
        current.commentNum = 0;
        current.likeCount = 0;
        current.isLike = false;
        current.likeListId = "0,0";
        current.fromName = this.current.name;
        current.fromId = this.current.id;
        current.time = new Date().format("yyyy-MM-dd hh:mm:ss");

        // 得到當前被點擊的評論對象,修改他的回復條數
        this.current.commentNum += 1
        let parent = {...this.current}
        parent.likeListId = parent.likeListId.join(",")
        delete parent.reply  // 刪除掉該屬性,不然後臺接收會報錯[後臺采用的是String進行存儲]
        console.log("current=",current)
        console.log("parent=",parent)
        commentApi.addComment(current,parent).then((response) => {
          if (response.success) {
            // 重新獲取獲取評論數據
            this.initCommentList(this.course.id);
            this.$message({
              showClose: true,
              type: "success",
              message: "回復成功",
            });
          }
        });

        // 清空輸入框內容
        this.replyComment = "";
        document.getElementsByClassName("reply-comment-input")[i].innerHTML = "";
      }
    },
    onDivInput: function (e) {
      this.replyComment = e.target.innerHTML;
    }
};
</script>
<style lang="scss">
@import "@/assets/css/comment.css";
</style>

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<EduComment> reply;

}

3.daoMapper

@Repository
public interface EduCommentMapper extends BaseMapper<EduComment> {

    /**
     * 根據課程id獲取到所有的評論列表
     * @param courseId 課程id
     * @return
     */
    public List<EduComment> getAllCommentList(@Param("courseId") String courseId);


}

4.daoMapper實現

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="">

    <resultMap id="ResultCommentList" type="EduComment">
        <id property="id" column="id"/>
        <result property="courseId" column="course_id"/>
        <result property="teacherId" column="teacher_id"/>
        <result property="memberId" column="member_id"/>
        <result property="name" column="name"/>
        <result property="avatar" column="avatar"/>
        <result property="content" column="content"/>
        <result property="parentId" column="parent_id"/>
        <result property="commentNum" column="comment_num"/>
        <result property="likeCount" column="like_count"/>
        <result property="isLike" column="is_like"/>
        <result property="likeListId" column="like_list_id"/>
        <result property="inputShow" column="input_show"/>
        <result property="fromId" column="from_id"/>
        <result property="fromName" column="from_name"/>
        <result property="time" column="time"/>
        <result property="gmtModified" column="gmt_modified"/>
        <result property="gmtCreate" column="gmt_create"/>
        <result property="isDeleted" column="is_deleted"/>
        <collection property="reply" ofType="EduComment"  column="id" select="getReplyList">

        </collection>
    </resultMap>
    <select id="getAllCommentList" resultMap="ResultCommentList" parameterType="String">
        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>

    <select id="getReplyList" resultMap="ResultCommentList">
        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;
    </select>


</mapper>

5.service接口

public interface EduCommentService extends IService<EduComment> {

    /**
     * 根據課程id獲取到所有的評論列表
     * @param courseId 課程id
     * @return
     */
    public List<EduComment> 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<EduCommentMapper, EduComment> implements EduCommentService {

    @Autowired
    private EduCommentMapper eduCommentMapper;

    @Autowired
    private UserCenterClient userCenterClient;

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

    @Override
    @Transactional
    public Integer deleteCommentById(EduComment comment) {
        int deleteCount=1;
      try {
          // 先查詢該評論是不是一條頂級評論
          QueryWrapper<EduComment> isParentWrapper  = new QueryWrapper<>();
          isParentWrapper.eq("id",comment.getId());
          isParentWrapper.eq("parent_id",-1);
          Integer count = eduCommentMapper.selectCount(isParentWrapper);
          // 如果count大於0說明該評論是一條頂級評論,先刪除他的子級評論
          if (count>=0){
              QueryWrapper<EduComment> wrapper  = new QueryWrapper<>();
              wrapper.eq("parent_id",comment.getId());
              eduCommentMapper.delete(wrapper);
          }
          // 最後再刪除父級評論
          QueryWrapper<EduComment> 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<String,EduComment> 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的資料請關註WalkonNet其它相關文章!

推薦閱讀: