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其它相關文章!
推薦閱讀:
- Lombok使用@Tolerate實現沖突兼容問題
- springboot+mybatis plus實現樹形結構查詢
- Vue elementUI實現樹形結構表格與懶加載
- SpringBoot 統一公共返回類的實現
- 關於mybatis一對一查詢一對多查詢遇到的問題