目录

• 1.概述
• 2.前端代码
• 1.html
• 2.css
• 3.js
• 4.api调用后台接口
• 3.后端代码
• 1.数据库SQL
• 2.实体类
• 3.daoMapper
• 4.daoMapper实现
• 5.service接口
• 6.service接口实现
• 7.controller

1.概述 做一个项目，突然需要实现回复功能，所依记录一下此次的一个实现思路，也希望给别人分享一下，估计代码还是不够完善，有空在实现分页功能。话不多说直接看效果图。主要实现了评论，回复，点赞，取消点赞，如果是自己评论的还可以删除，删除的规则是如果该评论下还有回复，也一并删除。
我这里管理的是课程id，可以根据需要把课程id换为其他核心业务的id进行关联，也可以把表进行拆分，评论表和回复表。不过我为了方便就没有进行拆分。具体的实现思路我都写有详细步骤，看注释即可
效果图：

文章图片


2.前端代码
1.html

发表评论{{ item.name }}{{ item.time }}{{ item.commentNum }}{{ item.commentNum }}{{ item.likeCount }}{{ item.content }}
{{ reply.name }}{{ reply.time }}{{ reply.commentNum }}{{ reply.commentNum }}{{ reply.likeCount }}回复 {{ reply.fromName }}:{{ reply.content }}
发表回复

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

@import "@/assets/css/comment.css";

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="https://www.it610.com/article/EduComment对象", description="评论")public class EduComment implements Serializable {private static final long serialVersionUID = 1L; @ApiModelProperty(value = "https://www.it610.com/article/主键id")@TableId(value = "https://www.it610.com/article/id", type = IdType.ID_WORKER_STR)private String id; @ApiModelProperty(value = "https://www.it610.com/article/课程id")private String courseId; @ApiModelProperty(value = "https://www.it610.com/article/讲师id")private String teacherId; @ApiModelProperty(value = "https://www.it610.com/article/用户id")private String memberId; @ApiModelProperty(value = "https://www.it610.com/article/用户昵称")private String name; @ApiModelProperty(value = "https://www.it610.com/article/用户头像")private String avatar; @ApiModelProperty(value = "https://www.it610.com/article/评论内容")private String content; @ApiModelProperty(value = "https://www.it610.com/article/父级评论id")private String parentId; @ApiModelProperty(value = "https://www.it610.com/article/回复条数")private Integer commentNum; @ApiModelProperty(value = "https://www.it610.com/article/点赞数量")private Integer likeCount; @ApiModelProperty(value = "https://www.it610.com/article/是否点赞")private Boolean isLike; @ApiModelProperty(value = "https://www.it610.com/article/点赞id列表")private String likeListId; @ApiModelProperty(value = "https://www.it610.com/article/是否显示输入框")private Boolean inputShow; @ApiModelProperty(value = "https://www.it610.com/article/评论创建时间")private Date time; @ApiModelProperty(value = "https://www.it610.com/article/被回复的记录id")private String fromId; @ApiModelProperty(value = "https://www.it610.com/article/回复人名称")private String fromName; @TableField(fill = FieldFill.INSERT_UPDATE)@ApiModelProperty(value = "https://www.it610.com/article/更新时间")private Date gmtModified; @ApiModelProperty(value = "https://www.it610.com/article/创建时间")@TableField(fill = FieldFill.INSERT)private Date gmtCreate; @TableLogic@ApiModelProperty(value = "https://www.it610.com/article/逻辑删除 1（true）已删除， 0（false）未删除")private Boolean isDeleted; @ApiModelProperty(value = "https://www.it610.com/article/回复列表")@TableField(exist = false)private List reply; }

3.daoMapper

@Repositorypublic interface EduCommentMapper extends BaseMapper {/*** 根据课程id获取到所有的评论列表* @param courseId 课程id* @return*/public List getAllCommentList(@Param("courseId") String courseId); }

【Springboot+ElementUi实现评论、回复、点赞功能】
4.daoMapper实现

SELECTid, 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_deletedFROMedu_commentWHEREparent_id = '-1'AND course_id = #{courseId} AND is_deleted!=1; selectid, 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_deletedfrom edu_commentwhere parent_id=#{id} AND is_deleted!=1;

5.service接口

public interface EduCommentService extends IService {/*** 根据课程id获取到所有的评论列表* @param courseId 课程id* @return*/public List getAllCommentList(@Param("courseId") String courseId); /*** 根据评论id删除一条记录[是本人评论的记录]* @param comment 评论对象中包含回复人的id也包含被回复人的id* @return*/publicInteger deleteCommentById(EduComment comment); /*** 添加一条评论或回复记录* @param current 当前提交的新comment对象* @paramparent当前被点击回复的对象[评论时不需要，回复需要根据他进行判断]* @param token 根据request对象取到token获取用户信息* @return*/int addComment(EduComment current,EduComment parent, HttpServletRequest token); /*** 修改点赞数量* @param eduComment 评论对象* @return*/public int updateLikeCount(EduComment eduComment); }

6.service接口实现

@Servicepublic class EduCommentServiceImpl extends ServiceImpl implements EduCommentService {@Autowiredprivate EduCommentMapper eduCommentMapper; @Autowiredprivate UserCenterClient userCenterClient; @Overridepublic List getAllCommentList(String courseId) {return eduCommentMapper.getAllCommentList(courseId); }@Override@Transactionalpublic Integer deleteCommentById(EduComment comment) {int deleteCount=1; try {// 先查询该评论是不是一条顶级评论QueryWrapper isParentWrapper= new QueryWrapper<>(); isParentWrapper.eq("id",comment.getId()); isParentWrapper.eq("parent_id",-1); Integer count = eduCommentMapper.selectCount(isParentWrapper); // 如果count大于0说明该评论是一条顶级评论，先删除他的子级评论if (count>=0){QueryWrapper wrapper= new QueryWrapper<>(); wrapper.eq("parent_id",comment.getId()); eduCommentMapper.delete(wrapper); }// 最后再删除父级评论QueryWrapper wrapper= new QueryWrapper<>(); wrapper.eq("member_id",comment.getMemberId()); wrapper.eq("id",comment.getId()); eduCommentMapper.delete(wrapper); // 找到该记录的顶级评论让他的评论数-1String 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@Transactionalpublic int addComment(EduComment current, EduComment parent ,HttpServletRequest token) {// mybatis-plus总是出现逻辑删除修改返回的影响条数为0的情况，所有进行异常捕捉，捕捉到异常返回-1表示失败try {if (StringUtils.isEmpty(token)){thrownew GuLiException(20001,"对不起!添加失败"); }// 从请求头中根据token获取用户idString result = JwtUtils.getMemberIdByJwtToken(token); if (result.equals("error")){thrownew GuLiException(20001,"登录时长过期，请重新登录"); }// 是一条顶级评论，直接进行添加操作 如果他的parentId=-1那就是顶级评论[发表评论]if (current!=null && !StringUtils.isEmpty(current.getParentId()) && current.getParentId().equals("-1")){// 如果从token中解析出来的memberId等于提交数据中MemberId就评论成功，否则失败if (result.equals(current.getMemberId())){returneduCommentMapper.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")){// 根据当前被回复的记录找到顶级记录，将顶级记录也+1root.setCommentNum(root.getCommentNum()+1); this.updateLikeCount(root); }// 如果从token中解析出来的memberId等于提交数据中MemberId就评论成功，否则失败if (result.equals(current.getMemberId())){returneduCommentMapper.insert(current); }}}catch (Exception e){e.printStackTrace(); return -1; }return -1; }@Overridepublic int updateLikeCount(EduComment eduComment) {returneduCommentMapper.updateById(eduComment); }}

7.controller

@Api(value = "https://www.it610.com/article/EduCommentController",description = "前台评论控制器")@CrossOrigin@RestController@RequestMapping("/serviceedu/edu-comment")public class EduCommentController {@Autowiredprivate EduCommentService eduCommentService; @GetMapping("getCommentList/{courseId}")@ApiOperation(value = "https://www.it610.com/article/根据课程id查询评论信息",notes = "传入课程id")public R getCommentList(@PathVariable String courseId){return R.ok().data("commentList",eduCommentService.getAllCommentList(courseId)); }@DeleteMapping("deleteCommentById")@ApiOperation(value = "https://www.it610.com/article/根据评论id删除一条记录",notes = "被点击的当前记录对象")public R deleteCommentById(@RequestBody EduComment comment){int updateCount = eduCommentService.deleteCommentById(comment); return updateCount !=-1 ?R.ok():R.error(); }@PostMapping("addComment")@ApiOperation(value = "https://www.it610.com/article/添加一条评论记录",notes = "json类型的评论对象")public R addComment(@RequestBody Map 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 = "https://www.it610.com/article/修改点赞数量",notes = "传递完整的EduComment对象")public R updateLikeCount(@RequestBody EduComment comment){intupdateLikeCount = eduCommentService.updateLikeCount(comment); return updateLikeCount>0?R.ok():R.error(); }}

以上就是Springboot+ElementUi实现评论、回复、点赞功能的详细内容，更多关于Springboot ElementUi的资料请关注脚本之家其它相关文章！

推荐阅读

• 

  科颜氏夜间修护精华怎么用
• 

  网上买烟被骗了怎么办 qq上买烟被骗如何处理，qq买烟是真的假的
• 

  C++中指针的详解及其作用介绍
• 

  市场生猪蹄怎么挑选 市场生猪蹄怎么挑选的
• 

  原神赠礼套装怎么摆 原神赠礼套装摆放方法
• 

  Win10如何隐藏鼠标指针？win10隐藏鼠标指针的方法
• 

  豆子长白毛还能吃吗,红豆沙长白毛还能吃吗 与用大豆做纳豆产生的白毛性质有区别吗
• 

  赞美云海的诗句
• 

  东科半导体,马鞍山东科半导体
• 

  如何系统的学习英语？最短期限是多久？
• 

  双核平板
• 

  苹果系统模拟器手机版，有没有很好用的苹果手机模拟器
• 

  苹果8与苹果7那个支持NFC 苹果 iphone 7和苹果 iphone 8
• 

  两位数的体重，期待(?˙ー˙?)~敖小果
• 

  卡西欧手表如何调时间（卡西欧手表时间怎么调）
• 

  博世锅炉代码16解决方法,这是什么故障代码
• 

  嘉宝果泡酒的功效与作用
• 

  技嘉笔记本USB坏了维修报价
• 

  考完试第一天
• 

  they怎么读英语 they的意思

• vue实现聊天框发送表情
• Vue使用MD5对前后端进行加密的实现
• 巧用|巧用 background-clip 实现超强的文字动效
• ASP.NET|ASP.NET Core中MVC模式实现路由一
• SpringBoot整合Keycloak实现单点登录的示例代码
• 大话设计模式——策略模式（C++实现）
• 大话设计模式|大话设计模式 —— 第二章《策略模式》C++ 代码实现
• 带码农《手写Mybatis》进度3（实现映射器的注册和使用）
• Django|Django + Taro 前后端分离项目实现企业微信登录
• 如何在|如何在 Java 中实现最小生成树算法