Springboot+ElementUi實(shí)現(xiàn)評(píng)論、回復(fù)、點(diǎn)贊功能
更新時(shí)間：2022年01月26日 15:10:55 作者：野生java研究僧
這篇文章主要介紹了通過(guò)Springboot ElementUi實(shí)現(xiàn)評(píng)論、回復(fù)、點(diǎn)贊功能。如果是自己評(píng)論的還可以刪除，刪除的規(guī)則是如果該評(píng)論下還有回復(fù)，也一并刪除。需要的可以參考一下
1.概述
做一個(gè)項(xiàng)目，突然需要實(shí)現(xiàn)回復(fù)功能，所依記錄一下此次的一個(gè)實(shí)現(xiàn)思路，也希望給別人分享一下，估計(jì)代碼還是不夠完善，有空在實(shí)現(xiàn)分頁(yè)功能。話不多說(shuō)直接看效果圖。主要實(shí)現(xiàn)了評(píng)論，回復(fù)，點(diǎn)贊，取消點(diǎn)贊，如果是自己評(píng)論的還可以刪除，刪除的規(guī)則是如果該評(píng)論下還有回復(fù)，也一并刪除。
我這里管理的是課程id，可以根據(jù)需要把課程id換為其他核心業(yè)務(wù)的id進(jìn)行關(guān)聯(lián)，也可以把表進(jìn)行拆分，評(píng)論表和回復(fù)表。不過(guò)我為了方便就沒(méi)有進(jìn)行拆分。具體的實(shí)現(xiàn)思路我都寫有詳細(xì)步驟，看注釋即可
效果圖：
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="輸入評(píng)論..."
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"
>
發(fā)表評(píng)論
</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>
<!-- 回復(fù)開(kāi)始 -->
<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">回復(fù) {{ reply.fromName }}:</b>
<span class="reply">{{ reply.content }}</span>
</p>
</div>
<div class="reply-box"></div>
</div>
</div>
<!-- 回復(fù)結(jié)束 -->
<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"
>
發(fā)表回復(fù)
</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) {
// 這里判斷點(diǎn)擊的元素是否是本身，是本身，則返回
if (el.contains(e.target)) {
return false;
}
// 判斷指令中是否綁定了函數(shù)
if (binding.expression) {
// 如果綁定了函數(shù) 則調(diào)用那個(gè)函數(shù)，此處binding.value就是handleClose方法
binding.value(e);
}
}
// 給當(dāng)前元素綁定個(gè)私有變量，方便在unbind中可以解除事件監(jiān)聽(tīng)
el.vueClickOutside = documentHandler;
document.addEventListener("click", documentHandler);
},
update() {},
unbind(el, binding) {
// 解除事件監(jiān)聽(tīng)
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(), //小時(shí)
"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() {
// 將用戶數(shù)據(jù)從本地cookie獲取到
this.getUserInfo();
// 獲取評(píng)論數(shù)據(jù)
this.initCommentList(this.course.id);
},
mounted() {},
data() {
return {
course: {
courseId: "",
},
btnShow: false,
index: "0",
replyComment: "",
subIndex: "0",
userName: "", // 當(dāng)前用戶name
userAvatar: "", // 當(dāng)前用戶頭像
myId: null, // 當(dāng)前用戶id
replyMessage:"",
comments: [],
current:{}, // 當(dāng)前被點(diǎn)擊的評(píng)論對(duì)象
};
},
methods: {
// 將cookie的用戶信息提取出來(lái)
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;
}
},
// 獲取評(píng)論數(shù)據(jù)
initCommentList(courseId) {
commentApi.getCommentList(courseId).then((response) => {
// 先將獲取到的數(shù)據(jù)進(jìn)行轉(zhuǎn)換
let commentList = response.data.commentList;
for (let i = 0; i < commentList.length; i++) {
// 先將父級(jí)評(píng)論轉(zhuǎn)化likeListId為數(shù)組
commentList[i].likeListId = commentList[i].likeListId.split(",");
// 找到子級(jí)評(píng)論將likeListId為數(shù)組
for (let j = 0; j < commentList[i].reply.length; j++) {
commentList[i].reply[j].likeListId =
commentList[i].reply[j].likeListId.split(",");
}
}
this.comments = commentList;
});
},
// 驗(yàn)證用戶是否登錄
userIsLogin(){
let user = cookie.get("userInfo");
if(user==null){
this.$confirm('評(píng)論操作需要先登錄，是否現(xiàn)在跳轉(zhuǎn)到登錄頁(yè)面?', '溫馨提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning'
}).then(() => {
this.$router.push({path: "/login"});
}).catch(() => {
this.$message({
type: 'success',
message: '已經(jīng)為您取消跳轉(zhuǎn)到登錄頁(yè)面'
});
});
return "no"
}
return "yes"
},
/**
* 傳遞一個(gè)對(duì)象過(guò)來(lái)，將其深拷貝，不會(huì)在共用同一個(gè)引用
* targetObj:需要拷貝的對(duì)象
*
*/
copyObject(targetObj,type){
let comment = {...targetObj}
// 裝換為以,號(hào)分割的字符串 [因?yàn)楹笈_(tái)采用的是String進(jìn)行存儲(chǔ)]
comment.likeListId = comment.likeListId.join(",")
// 刪除掉該屬性，不然后臺(tái)接收會(huì)報(bào)錯(cuò)
delete comment.reply
return comment;
},
// 輸入框被點(diǎn)擊是觸發(fā)
inputFocus() {
var replyInput = document.getElementById("replyInput");
replyInput.style.padding = "8px 8px";
replyInput.style.border = "2px solid blue";
replyInput.focus();
},
// 顯示回復(fù)按鈕
showReplyBtn() {
this.btnShow = true;
},
// 提示不能給自己回復(fù)
noReply() {
this.$message({
message: "對(duì)不起!暫不支持自己給自己回復(fù)",
type: "warning",
});
},
// 隱藏回復(fù)按鈕
hideReplyBtn() {
this.btnShow = false;
replyInput.style.padding = "10px";
replyInput.style.border = "none";
},
/**
* 顯示輸入框[評(píng)論和回復(fù)共用]
* i：頂級(jí)評(píng)論下標(biāo)
* j：子級(jí)評(píng)論下標(biāo)
* current:當(dāng)前被點(diǎn)擊的評(píng)論記錄
*
*/
showReplyInput(i, j,current ) {
this.current=current
if (current.fatherId === "-1") {
this.parentId = current.id;
} else {
this.parentId = current.fatherId;
}
this.replyMessage = "回復(fù):" + 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;
},
/**
* 根據(jù)id刪除評(píng)論(前提是該評(píng)論是當(dāng)前用戶所評(píng)論的)
*/
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: "刪除成功",
});
// 重新獲取獲取評(píng)論數(shù)據(jù)
this.initCommentList(this.course.id);
}
});
},
/**
*
* 統(tǒng)計(jì)點(diǎn)贊數(shù)量
* type：是回復(fù)還是評(píng)論
* i:一級(jí)評(píng)論
* j:二級(jí)評(píng)論
*/
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) {
//在已經(jīng)點(diǎn)贊的列表中未找到userId
commentObje.isLike = true;
commentObje.likeCount += 1;
commentObje.likeListId.push(this.myId);
// 將對(duì)象復(fù)制一份并且去除掉reply屬性,避免后臺(tái)接收數(shù)據(jù)出現(xiàn)異常
let comment = this.copyObject(commentObje)
// 發(fā)送請(qǐng)求到后臺(tái)修改點(diǎn)贊數(shù)量
commentApi.updateLikeCount(comment).then(response=>{
if(response.success){
// 重新獲取獲取評(píng)論數(shù)據(jù)
this.initCommentList(this.course.id);
this.$message({
type:"success",
message:"點(diǎn)贊成功"
})
}
})
console.log("點(diǎn)贊+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("點(diǎn)贊-1", commentObje.likeListId);
let comment = this.copyObject(commentObje)
// 發(fā)送請(qǐng)求到后臺(tái)修改點(diǎn)贊數(shù)量
commentApi.updateLikeCount(comment).then(response=>{
if(response.success){
// 重新獲取獲取評(píng)論數(shù)據(jù)
this.initCommentList(this.course.id);
this.$message({
type:"success",
message:"取消點(diǎn)贊成功"
})
}
})
}
console.log("commentObje=", commentObje);
},
// 是否顯示輸入框
_inputShow(i) {
return this.comments[i].inputShow;
},
// 發(fā)送評(píng)論
sendComment() {
if( this.userIsLogin()=="no") return;
if (!this.replyComment) {
this.$message({
type: "warning",
message: "評(píng)論不能為空",
});
} else {
// 評(píng)論內(nèi)容對(duì)象
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) {
// 重新獲取獲取評(píng)論數(shù)據(jù)
this.initCommentList(this.course.id);
this.$message({
type: "success",
message: "評(píng)論成功",
});
}
});
}
},
// 發(fā)送回復(fù)
sendCommentReply(i) {
if( this.userIsLogin()=="no") return;
if (!this.replyComment) {
this.$message({
showClose: true,
type: "warning",
message: "回復(fù)不能為空",
});
} else {
// 回復(fù)內(nèi)容對(duì)象
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");
// 得到當(dāng)前被點(diǎn)擊的評(píng)論對(duì)象，修改他的回復(fù)條數(shù)
this.current.commentNum += 1
let parent = {...this.current}
parent.likeListId = parent.likeListId.join(",")
delete parent.reply // 刪除掉該屬性，不然后臺(tái)接收會(huì)報(bào)錯(cuò)[后臺(tái)采用的是String進(jìn)行存儲(chǔ)]
console.log("current=",current)
console.log("parent=",parent)
commentApi.addComment(current,parent).then((response) => {
if (response.success) {
// 重新獲取獲取評(píng)論數(shù)據(jù)
this.initCommentList(this.course.id);
this.$message({
showClose: true,
type: "success",
message: "回復(fù)成功",
});
}
});
// 清空輸入框內(nèi)容
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調(diào)用后臺(tái)接口
import request from "@/utils/request";
export default {
// 根據(jù)課程id獲取評(píng)論信息
getCommentList(courseId) {
return request({
url: `/serviceedu/edu-comment/getCommentList/${courseId}`,
method: "get",
});
},
// 添加一條評(píng)論記錄
addComment(current,parent) {
return request({
url: `/serviceedu/edu-comment/addComment`,
method: "post",
data:{current,parent}
});
},
// 根據(jù)評(píng)論id刪除一條記錄
deleteCommentById(current) {
return request({
url: `/serviceedu/edu-comment/deleteCommentById`,
method: "delete",
data:current
});
},
// 修改評(píng)論的點(diǎn)贊數(shù)量
updateLikeCount(comment) {
return request({
url: `/serviceedu/edu-comment/updateLikeCount`,
method: "post",
data:comment
});
},
};
3.后端代碼
1.數(shù)據(jù)庫(kù)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 '評(píng)論內(nèi)容',
`parent_id` char(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '父級(jí)評(píng)論id\r\n',
`comment_num` int(11) NULL DEFAULT NULL COMMENT '回復(fù)條數(shù)',
`like_count` int(11) NULL DEFAULT NULL COMMENT '點(diǎn)贊數(shù)量',
`is_like` tinyint(1) NULL DEFAULT 0 COMMENT '是否點(diǎn)贊',
`like_list_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '點(diǎn)贊id列表',
`input_show` tinyint(1) NULL DEFAULT 0 COMMENT '是否顯示輸入框',
`time` datetime(0) NULL DEFAULT NULL COMMENT '評(píng)論創(chuàng)建時(shí)間',
`from_id` char(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '回復(fù)記錄id\r\n',
`from_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NULL DEFAULT NULL COMMENT '回復(fù)人名稱\r\n',
`gmt_modified` datetime(0) NOT NULL COMMENT '更新時(shí)間',
`gmt_create` datetime(0) NOT NULL COMMENT '創(chuàng)建時(shí)間',
`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 = '評(píng)論' 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如何實(shí)現(xiàn)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(連接點(diǎn))： 在Sping程序中允許你使用通知或增強(qiáng)的地方，這種地方比較多，可以是方法前后，也可以是拋出異常的時(shí)，這里只提到了方法連接點(diǎn)，這是因?yàn)镾pring只支持方法類型的連接點(diǎn)。再通俗一點(diǎn)就是哪些方法可以被增強(qiáng)（使用通知），這些方法稱為連接點(diǎn)。', '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(切入點(diǎn))： 連接點(diǎn)是Spinrg程序中允許你使用通知或增強(qiáng)的地方，但是不是所有允許使用通知或增強(qiáng)的地方的地方都需要通知（增強(qiáng)）的，只有那些被我們使用了通知或者增強(qiáng)的地方才能稱之為切入點(diǎn)。再通俗一點(diǎn)就是類中實(shí)際被增加（使用了通知）的方法稱為切入點(diǎn)。', '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):在執(zhí)行業(yè)務(wù)代碼前做些操作，比如獲取連接對(duì)象', '-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 和其他對(duì)象連接起來(lái), 并創(chuàng)建 Adviced object 的過(guò)程', '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 前被執(zhí)行的 advice. 雖然 before advice 是在 join point 前被執(zhí)行, 但是它并不能夠阻止 join point 的執(zhí)行, 除非發(fā)生了異常(即我們?cè)?before advice 代碼中, 不能人為地決定是否繼續(xù)執(zhí)行 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中對(duì)象是引用數(shù)據(jù)類型，如果只是通過(guò) objectB = objectA 簡(jiǎn)單的賦值，objectA 和 objectB 指向的是同一個(gè)地址', '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.實(shí)體類
@Data
@ToString
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="EduComment對(duì)象", description="評(píng)論")
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 = "評(píng)論內(nèi)容")
private String content;
@ApiModelProperty(value = "父級(jí)評(píng)論id")
private String parentId;
@ApiModelProperty(value = "回復(fù)條數(shù)")
private Integer commentNum;
@ApiModelProperty(value = "點(diǎn)贊數(shù)量")
private Integer likeCount;
@ApiModelProperty(value = "是否點(diǎn)贊")
private Boolean isLike;
@ApiModelProperty(value = "點(diǎn)贊id列表")
private String likeListId;
@ApiModelProperty(value = "是否顯示輸入框")
private Boolean inputShow;
@ApiModelProperty(value = "評(píng)論創(chuàng)建時(shí)間")
private Date time;
@ApiModelProperty(value = "被回復(fù)的記錄id")
private String fromId;
@ApiModelProperty(value = "回復(fù)人名稱")
private String fromName;
@TableField(fill = FieldFill.INSERT_UPDATE)
@ApiModelProperty(value = "更新時(shí)間")
private Date gmtModified;
@ApiModelProperty(value = "創(chuàng)建時(shí)間")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@TableLogic
@ApiModelProperty(value = "邏輯刪除 1（true）已刪除， 0（false）未刪除")
private Boolean isDeleted;
@ApiModelProperty(value = "回復(fù)列表")
@TableField(exist = false)
private List<EduComment> reply;
}
3.daoMapper
@Repository
public interface EduCommentMapper extends BaseMapper<EduComment> {
/**
* 根據(jù)課程id獲取到所有的評(píng)論列表
* @param courseId 課程id
* @return
*/
public List<EduComment> getAllCommentList(@Param("courseId") String courseId);
}
4.daoMapper實(shí)現(xiàn)
<?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> {
/**
* 根據(jù)課程id獲取到所有的評(píng)論列表
* @param courseId 課程id
* @return
*/
public List<EduComment> getAllCommentList(@Param("courseId") String courseId);
/**
* 根據(jù)評(píng)論id刪除一條記錄[是本人評(píng)論的記錄](méi)
* @param comment 評(píng)論對(duì)象中包含回復(fù)人的id也包含被回復(fù)人的id
* @return
*/
public Integer deleteCommentById(EduComment comment);
/**
* 添加一條評(píng)論或回復(fù)記錄
* @param current 當(dāng)前提交的新comment對(duì)象
* @param parent 當(dāng)前被點(diǎn)擊回復(fù)的對(duì)象[評(píng)論時(shí)不需要，回復(fù)需要根據(jù)他進(jìn)行判斷]
* @param token 根據(jù)request對(duì)象取到token獲取用戶信息
* @return
*/
int addComment(EduComment current,EduComment parent, HttpServletRequest token);
/**
* 修改點(diǎn)贊數(shù)量
* @param eduComment 評(píng)論對(duì)象
* @return
*/
public int updateLikeCount(EduComment eduComment);
}
6.service接口實(shí)現(xiàn)
@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 {
// 先查詢?cè)撛u(píng)論是不是一條頂級(jí)評(píng)論
QueryWrapper<EduComment> isParentWrapper = new QueryWrapper<>();
isParentWrapper.eq("id",comment.getId());
isParentWrapper.eq("parent_id",-1);
Integer count = eduCommentMapper.selectCount(isParentWrapper);
// 如果count大于0說(shuō)明該評(píng)論是一條頂級(jí)評(píng)論，先刪除他的子級(jí)評(píng)論
if (count>=0){
QueryWrapper<EduComment> wrapper = new QueryWrapper<>();
wrapper.eq("parent_id",comment.getId());
eduCommentMapper.delete(wrapper);
}
// 最后再刪除父級(jí)評(píng)論
QueryWrapper<EduComment> wrapper = new QueryWrapper<>();
wrapper.eq("member_id",comment.getMemberId());
wrapper.eq("id",comment.getId());
eduCommentMapper.delete(wrapper);
// 找到該記錄的頂級(jí)評(píng)論讓他的評(píng)論數(shù)-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);
}
}
// 考慮到不是頂級(jí)記錄的直接子記錄的情況 fromId:表示該記錄回復(fù)的是那一條記錄
if (!StringUtils.isEmpty(parentId) && !parentId.equals(fromId)){
// 更新他的直接父級(jí)
EduComment father = this.getById(fromId);
if (father!=null){
father.setCommentNum(father.getCommentNum()-1);
this.updateLikeCount(father);
}
// 更新他的跟節(jié)點(diǎn)評(píng)論數(shù)量
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總是出現(xiàn)邏輯刪除修改返回的影響條數(shù)為0的情況，所有進(jìn)行異常捕捉，捕捉到異常返回-1表示失敗
try {
if (StringUtils.isEmpty(token)){
throw new GuLiException(20001,"對(duì)不起!添加失敗");
}
// 從請(qǐng)求頭中根據(jù)token獲取用戶id
String result = JwtUtils.getMemberIdByJwtToken(token);
if (result.equals("error")){
throw new GuLiException(20001,"登錄時(shí)長(zhǎng)過(guò)期，請(qǐng)重新登錄");
}
// 是一條頂級(jí)評(píng)論，直接進(jìn)行添加操作 如果他的parentId=-1那就是頂級(jí)評(píng)論[發(fā)表評(píng)論]
if (current!=null && !StringUtils.isEmpty(current.getParentId()) && current.getParentId().equals("-1")){
// 如果從token中解析出來(lái)的memberId等于提交數(shù)據(jù)中MemberId就評(píng)論成功，否則失敗
if (result.equals(current.getMemberId())){
return eduCommentMapper.insert(current);
}
}
// 如果能直接到這里，說(shuō)明是一條回復(fù)評(píng)論
if (parent!=null && StringIsEmpty.isEmpty(parent.getId(),parent.getParentId())){
// 修改當(dāng)前被回復(fù)的記錄的總回復(fù)條數(shù)+1 [前端傳遞過(guò)來(lái)的時(shí)候已經(jīng)+1，直接按照id修改即可]
this.updateLikeCount(parent);
// 根據(jù)parentId查詢一條記錄
EduComment root = this.getById(parent.getParentId());
if (root!=null && root.getParentId().equals("-1")){
// 根據(jù)當(dāng)前被回復(fù)的記錄找到頂級(jí)記錄，將頂級(jí)記錄也+1
root.setCommentNum(root.getCommentNum()+1);
this.updateLikeCount(root);
}
// 如果從token中解析出來(lái)的memberId等于提交數(shù)據(jù)中MemberId就評(píng)論成功，否則失敗
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 = "前臺(tái)評(píng)論控制器")
@CrossOrigin
@RestController
@RequestMapping("/serviceedu/edu-comment")
public class EduCommentController {
@Autowired
private EduCommentService eduCommentService;
@GetMapping("getCommentList/{courseId}")
@ApiOperation(value = "根據(jù)課程id查詢?cè)u(píng)論信息",notes = "傳入課程id")
public R getCommentList(@PathVariable String courseId){
return R.ok().data("commentList",eduCommentService.getAllCommentList(courseId));
}
@DeleteMapping("deleteCommentById")
@ApiOperation(value = "根據(jù)評(píng)論id刪除一條記錄",notes = "被點(diǎn)擊的當(dāng)前記錄對(duì)象")
public R deleteCommentById(@RequestBody EduComment comment){
int updateCount = eduCommentService.deleteCommentById(comment);
return updateCount !=-1 ?R.ok():R.error();
}
@PostMapping("addComment")
@ApiOperation(value = "添加一條評(píng)論記錄",notes = "json類型的評(píng)論對(duì)象")
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 = "修改點(diǎn)贊數(shù)量",notes = "傳遞完整的EduComment對(duì)象")
public R updateLikeCount(@RequestBody EduComment comment){
int updateLikeCount = eduCommentService.updateLikeCount(comment);
return updateLikeCount>0?R.ok():R.error();
}
}
以上就是Springboot+ElementUi實(shí)現(xiàn)評(píng)論、回復(fù)、點(diǎn)贊功能的詳細(xì)內(nèi)容，更多關(guān)于Springboot ElementUi的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Java異或技操作給任意的文件加密原理及使用詳解，具有一定借鑒價(jià)值，需要的朋友可以參考下。2017-12-12
Java中Elasticsearch 實(shí)現(xiàn)分頁(yè)方式(三種方式)
Elasticsearch是用Java語(yǔ)言開(kāi)發(fā)的，并作為Apache許可條款下的開(kāi)放源碼發(fā)布，是一種流行的企業(yè)級(jí)搜索引擎，這篇文章主要介紹了Elasticsearch實(shí)現(xiàn)分頁(yè)的3種方式，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了java輸入空行結(jié)束問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Java實(shí)現(xiàn)簡(jiǎn)易的洗牌和發(fā)牌功能
本文主要介紹了Java實(shí)現(xiàn)簡(jiǎn)易的洗牌和發(fā)牌功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Spring?Boot?中starter原理詳析，文章圍繞主題展開(kāi)springboot的插件機(jī)制和starter原理相關(guān)資料，需要的小伙伴可以參考一下2022-06-06
java 定時(shí)器Timer和TimerTask的使用詳解(執(zhí)行和暫停)
這篇文章主要介紹了java 定時(shí)器Timer和TimerTask的使用詳解(執(zhí)行和暫停),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Java客戶端服務(wù)端上傳接收文件實(shí)現(xiàn)詳解
這篇文章主要介紹了Java客戶端服務(wù)端上傳接收文件實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
詳解Java使用Pipeline對(duì)Redis批量讀寫（hmset&hgetall）
本篇文章主要介紹了Java使用Pipeline對(duì)Redis批量讀寫（hmset&hgetall），具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
Hutool?是一個(gè)?Java?工具包，也只是一個(gè)工具包，它幫助我們簡(jiǎn)化每一行代碼，減少每一個(gè)方法，讓?Java?語(yǔ)言也可以?“甜甜的”，下面通過(guò)本文學(xué)習(xí)下hutool?工具類基本使用教程，感興趣的朋友跟隨小編一起看看吧2021-12-12
解決mybatis-plus動(dòng)態(tài)數(shù)據(jù)源切換不生效的問(wèn)題
本文主要介紹了解決mybatis-plus動(dòng)態(tài)數(shù)據(jù)源切換不生效的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01