如何实现博客的评论和回复功能

实现思路：

数据库设计：评论表需要定义出当前博客id以便做关联，因为评论需要有回复功能，则需要定义当前评论有无上一级评论，需要定义出上级评论id；博主回复评论需要带有标签，所以需要定义Boolean类型判断是否为博主。

代码方面：点击评论需要获取当前博客id与自己评论数据进行插入，点击回复按钮需要获取上一条评论的id以及用户姓名作为回复，回复成功后，刷新页面，后台则是在数据库中查找出所有parentCommentId为-1的进行遍历，因为上级id为-1则证明当前评论无父节点。在通过对父节点id的遍历查询出所有对应评论的子节点。

页面展示

博客实体类

 private Long id; private String nickname; private String email; private String content; //头像 private String avatar; private Date createTime; private Long blogId; //关联博客id private Long parentCommentId; //上级评论id private String parentNickname; //回复评论 private List&lt;Comment&gt; replyComments &#61; new ArrayList&lt;&gt;(); private Comment parentComment; private boolean adminComment; //是不是博主 private DetailedBlog blog;

private Long id; private String nickname; private String email; private String content; //头像 private String avatar; private Date createTime; private Long blogId; //关联博客id private Long parentCommentId; //上级评论id private String parentNickname; //回复评论 private List<Comment> replyComments = new ArrayList<>(); private Comment parentComment; private boolean adminComment; //是不是博主 private DetailedBlog blog;

评论的博客表单html

&lt;div id&#61;&#34;comment-form&#34; class&#61;&#34;ui form&#34;&gt; &lt;!--获取当前博客id进行评论 使用隐藏域--&gt; &lt;input type&#61;&#34;hidden&#34; name&#61;&#34;blogId&#34; th:value&#61;&#34;${blog.id}&#34;&gt; &lt;input type&#61;&#34;hidden&#34; name&#61;&#34;parentComment.id&#34; value&#61;&#34;-1&#34;&gt; &lt;div class&#61;&#34;field&#34;&gt; &lt;textarea name&#61;&#34;content&#34; placeholder&#61;&#34;请输入评论信息...&#34;&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div class&#61;&#34;fields&#34;&gt; &lt;div class&#61;&#34;field m-mobile-wide m-margin-bottom-small&#34;&gt; &lt;div class&#61;&#34;ui left icon input&#34;&gt; &lt;i class&#61;&#34;user icon&#34;&gt;&lt;/i&gt; &lt;input type&#61;&#34;text&#34; name&#61;&#34;nickname&#34; placeholder&#61;&#34;姓名&#34; th:value&#61;&#34;${session.user}!&#61;null ? ${session.user.nickname}&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class&#61;&#34;field m-mobile-wide m-margin-bottom-small&#34;&gt; &lt;div class&#61;&#34;ui left icon input&#34;&gt; &lt;i class&#61;&#34;mail icon&#34;&gt;&lt;/i&gt; &lt;input type&#61;&#34;text&#34; name&#61;&#34;email&#34; placeholder&#61;&#34;邮箱&#34; th:value&#61;&#34;${session.user}!&#61;null ? ${session.user.email}&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class&#61;&#34;field m-margin-bottom-small m-mobile-wide&#34;&gt; &lt;button id&#61;&#34;commentpost-btn&#34; type&#61;&#34;button&#34; class&#61;&#34;ui teal button m-mobile-wide&#34;&gt;&lt;i class&#61;&#34;edit icon&#34;&gt;&lt;/i&gt;发布&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;

点击发布按钮触发

$(&#39;#commentpost-btn&#39;).click(function () { var boo &#61; $(&#39;.ui.form&#39;).form(&#39;validate form&#39;); if (boo) { console.log(&#39;校验成功&#39;); postData(); } else { console.log(&#39;校验失败&#39;); } }); //评论表单验证 $(&#39;.ui.form&#39;).form({ fields: { title: { identifier: &#39;content&#39;, rules: [{ type: &#39;empty&#39;, prompt: &#39;请输入评论内容&#39; } ] }, content: { identifier: &#39;nickname&#39;, rules: [{ type: &#39;empty&#39;, prompt: &#39;请输入你的大名&#39; }] }, type: { identifier: &#39;email&#39;, rules: [{ type: &#39;email&#39;, prompt: &#39;请填写正确的邮箱地址&#39; }] } } });

$('#commentpost-btn').click(function () { var boo = $('.ui.form').form('validate form'); if (boo) { console.log('校验成功'); postData(); } else { console.log('校验失败'); } }); //评论表单验证 $('.ui.form').form({ fields: { title: { identifier: 'content', rules: [{ type: 'empty', prompt: '请输入评论内容' } ] }, content: { identifier: 'nickname', rules: [{ type: 'empty', prompt: '请输入你的大名' }] }, type: { identifier: 'email', rules: [{ type: 'email', prompt: '请填写正确的邮箱地址' }] } } });

表单验证后发送请求到后端，提交成功之后清空表单

function postData() { $(&#34;#comment-container&#34;).load(/*[[&#64;{/comments}]]*/&#34;&#34;,{ &#34;parentComment.id&#34; : $(&#34;[name&#61;&#39;parentComment.id&#39;]&#34;).val(), &#34;blogId&#34; : $(&#34;[name&#61;&#39;blogId&#39;]&#34;).val(), &#34;nickname&#34;: $(&#34;[name&#61;&#39;nickname&#39;]&#34;).val(), &#34;email&#34; : $(&#34;[name&#61;&#39;email&#39;]&#34;).val(), &#34;content&#34; : $(&#34;[name&#61;&#39;content&#39;]&#34;).val() },function (responseTxt, statusTxt, xhr) { $(window).scrollTo($(&#39;#goto&#39;),500); //提交成功之后滚动到评论位置 clearContent(); }); } function clearContent() { $(&#34;[name&#61;&#39;nickname&#39;]&#34;).val(&#39;&#39;); $(&#34;[name&#61;&#39;email&#39;]&#34;).val(&#39;&#39;); $(&#34;[name&#61;&#39;content&#39;]&#34;).val(&#39;&#39;); $(&#34;[name&#61;&#39;parentComment.id&#39;]&#34;).val(-1); $(&#34;[name&#61;&#39;content&#39;]&#34;).attr(&#34;placeholder&#34;, &#34;请输入评论信息...&#34;); }

点击回复按钮，在评论区显示回复给哪个用户

&lt;a class&#61;&#34;reply&#34; data-messageid&#61;&#34;1&#34; data-messagenickname&#61;&#34;Matt&#34; th:attr&#61;&#34;data-messageid&#61;${reply.id},data-messagenickname&#61;${reply.nickname}&#34; onclick&#61;&#34;reply(this)&#34;&gt;回复&lt;/a&gt;

1	<a class="reply" data-messageid="1" data-messagenickname="Matt" th:attr="data-messageid=${reply.id},data-messagenickname=${reply.nickname}" onclick="reply(this)">回复</a>

对应函数

 function reply(obj) { var messageId &#61; $(obj).data(&#39;messageid&#39;); var messageNickname &#61; $(obj).data(&#39;messagenickname&#39;); $(&#34;[name&#61;&#39;content&#39;]&#34;).attr(&#34;placeholder&#34;, &#34;&#64;&#34;&#43;messageNickname).focus();//在回复时显示 &#64;对应人 $(&#34;[name&#61;&#39;parentMessage.id&#39;]&#34;).val(messageId);//为隐藏域赋值 $(window).scrollTo(0,500); //滚动 }

1	function reply(obj) { var messageId = $(obj).data('messageid'); var messageNickname = $(obj).data('messagenickname'); $("[name='content']").attr("placeholder", "@"+messageNickname).focus();//在回复时显示 @对应人 $("[name='parentMessage.id']").val(messageId);//为隐藏域赋值 $(window).scrollTo(0,500); //滚动 }

对应后端代码

&#64;Controller public class CommentController { &#64;Autowired private CommentService commentService; &#64;Autowired private BlogService blogService; &#64;Value(&#34;${comment.avatar}&#34;) private String avatar; // 查询评论列表 &#64;GetMapping(&#34;/comments/{blogId}&#34;) public String comments(&#64;PathVariable Long blogId, Model model) { List&lt;Comment&gt; comments &#61; commentService.listCommentByBlogId(blogId); model.addAttribute(&#34;comments&#34;, comments); return &#34;blog :: commentList&#34;; //返回到blog下面的commentList片段 } // 新增评论 &#64;PostMapping(&#34;/comments&#34;) public String post(Comment comment, HttpSession session,Model model) { Long blogId &#61; comment.getBlogId(); User user &#61; (User) session.getAttribute(&#34;user&#34;); if (user !&#61; null) { comment.setAvatar(user.getAvatar()); comment.setAdminComment(true); } else { //设置头像 comment.setAvatar(avatar); } //页面中定义为-1 不会出现空指针 if (comment.getParentComment().getId() !&#61; null) { //获取父对象设置对应关系 comment.setParentCommentId(comment.getParentComment().getId()); } commentService.saveComment(comment); List&lt;Comment&gt; comments &#61; commentService.listCommentByBlogId(blogId); model.addAttribute(&#34;comments&#34;, comments); return &#34;blog :: commentList&#34;; }

@Controller public class CommentController { @Autowired private CommentService commentService; @Autowired private BlogService blogService; @Value("${comment.avatar}") private String avatar; // 查询评论列表 @GetMapping("/comments/{blogId}") public String comments(@PathVariable Long blogId, Model model) { List<Comment> comments = commentService.listCommentByBlogId(blogId); model.addAttribute("comments", comments); return "blog :: commentList"; //返回到blog下面的commentList片段 } // 新增评论 @PostMapping("/comments") public String post(Comment comment, HttpSession session,Model model) { Long blogId = comment.getBlogId(); User user = (User) session.getAttribute("user"); if (user != null) { comment.setAvatar(user.getAvatar()); comment.setAdminComment(true); } else { //设置头像 comment.setAvatar(avatar); } //页面中定义为-1 不会出现空指针 if (comment.getParentComment().getId() != null) { //获取父对象设置对应关系 comment.setParentCommentId(comment.getParentComment().getId()); } commentService.saveComment(comment); List<Comment> comments = commentService.listCommentByBlogId(blogId); model.addAttribute("comments", comments); return "blog :: commentList"; }

列表设置，前端遍历显示层级关系

 &lt;div class&#61;&#34;ui bottom attached segment&#34; th:if&#61;&#34;${blog.commentabled}&#34;&gt; &lt;!--评论区域列表--&gt; &lt;div id&#61;&#34;comment-container&#34; class&#61;&#34;ui teal segment&#34;&gt; &lt;div th:fragment&#61;&#34;commentList&#34;&gt; &lt;div class&#61;&#34;ui threaded comments&#34; style&#61;&#34;max-width: 100%;&#34;&gt; &lt;h3 class&#61;&#34;ui dividing header&#34;&gt;评论&lt;/h3&gt; &lt;div class&#61;&#34;comment&#34; th:each&#61;&#34;comment : ${comments}&#34;&gt; &lt;a class&#61;&#34;avatar&#34;&gt; &lt;img src&#61;&#34;https://unsplash.it/100/100?image&#61;1005&#34; th:src&#61;&#34;&#64;{${comment.avatar}}&#34;&gt; &lt;/a&gt; &lt;div class&#61;&#34;content&#34;&gt; &lt;a class&#61;&#34;author&#34; &gt; &lt;span th:text&#61;&#34;${comment.nickname}&#34;&gt;Matt&lt;/span&gt; &lt;--判断是不是博主--&gt; &lt;div class&#61;&#34;ui mini basic teal left pointing label m-padded-mini&#34; th:if&#61;&#34;${comment.adminComment}&#34;&gt;栈主&lt;/div&gt; &lt;/a&gt; &lt;div class&#61;&#34;metadata&#34;&gt; &lt;span class&#61;&#34;date&#34; th:text&#61;&#34;${#dates.format(comment.createTime,&#39;yyyy-MM-dd HH:mm&#39;)}&#34;&gt;Today at 5:42PM&lt;/span&gt; &lt;/div&gt; &lt;div class&#61;&#34;text&#34; th:text&#61;&#34;${comment.content}&#34;&gt; How artistic! &lt;/div&gt; &lt;div class&#61;&#34;actions&#34;&gt; &lt;a class&#61;&#34;reply&#34; data-commentid&#61;&#34;1&#34; data-commentnickname&#61;&#34;Matt&#34; th:attr&#61;&#34;data-commentid&#61;${comment.id},data-commentnickname&#61;${comment.nickname}&#34; onclick&#61;&#34;reply(this)&#34;&gt;回复&lt;/a&gt; &lt;a class&#61;&#34;delete&#34; href&#61;&#34;#&#34; th:href&#61;&#34;&#64;{/comment/{param1}/{param2}/delete(param1&#61;${comment.blogId},param2&#61;${comment.id})}&#34; onclick&#61;&#34;return confirm(&#39;确定要删除该评论吗&#xff1f;&#39;)&#34; th:if&#61;&#34;${session.user}&#34;&gt;删除&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--子集评论--&gt; &lt;div class&#61;&#34;comments&#34; th:if&#61;&#34;${#arrays.length(comment.replyComments)}&gt;0&#34;&gt; &lt;div class&#61;&#34;comment&#34; th:each&#61;&#34;reply : ${comment.replyComments}&#34;&gt; &lt;a class&#61;&#34;avatar&#34;&gt; &lt;img src&#61;&#34;https://unsplash.it/100/100?image&#61;1005&#34; th:src&#61;&#34;&#64;{${reply.avatar}}&#34;&gt; &lt;/a&gt; &lt;div class&#61;&#34;content&#34;&gt; &lt;a class&#61;&#34;author&#34; &gt; &lt;span th:text&#61;&#34;${reply.nickname}&#34;&gt;小红&lt;/span&gt; &lt;!--若是博主 给标签--&gt; &lt;div class&#61;&#34;ui mini basic teal left pointing label m-padded-mini&#34; th:if&#61;&#34;${reply.adminComment}&#34;&gt;栈主&lt;/div&gt; &amp;nbsp;&lt;span th:text&#61;&#34;|&#64; ${reply.parentNickname}|&#34; class&#61;&#34;m-teal&#34;&gt;&#64; 小白&lt;/span&gt; &lt;/a&gt; &lt;div class&#61;&#34;metadata&#34;&gt; &lt;span class&#61;&#34;date&#34; th:text&#61;&#34;${#dates.format(reply.createTime,&#39;yyyy-MM-dd HH:mm&#39;)}&#34;&gt;Today at 5:42PM&lt;/span&gt; &lt;/div&gt; &lt;div class&#61;&#34;text&#34; th:text&#61;&#34;${reply.content}&#34;&gt; How artistic! &lt;/div&gt; &lt;div class&#61;&#34;actions&#34;&gt; &lt;a class&#61;&#34;reply&#34; data-commentid&#61;&#34;1&#34; data-commentnickname&#61;&#34;Matt&#34; th:attr&#61;&#34;data-commentid&#61;${reply.id},data-commentnickname&#61;${reply.nickname}&#34; onclick&#61;&#34;reply(this)&#34;&gt;回复&lt;/a&gt; &lt;a class&#61;&#34;delete&#34; href&#61;&#34;#&#34; th:href&#61;&#34;&#64;{/comment/{param1}/{param2}/delete(param1&#61;${reply.blogId},param2&#61;${reply.id})}&#34; onclick&#61;&#34;return confirm(&#39;确定要删除该评论吗&#xff01;&#39;)&#34; th:if&#61;&#34;${session.user}&#34;&gt;删除&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

<div class="ui bottom attached segment" th:if="${blog.commentabled}">  <div id="comment-container" class="ui teal segment"> <div th:fragment="commentList"> <div class="ui threaded comments" style="max-width: 100%;"> <h3 class="ui dividing header">评论</h3> <div class="comment" th:each="comment : ${comments}"> <a class="avatar"> <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}"> </a> <div class="content"> <a class="author" > <span th:text="${comment.nickname}">Matt</span> <--判断是不是博主--> <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">栈主</div> </a> <div class="metadata"> <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span> </div> <div class="text" th:text="${comment.content}"> How artistic! </div> <div class="actions"> <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a> <a class="delete" href="#" th:href="@{/comment/{param1}/{param2}/delete(param1=${comment.blogId},param2=${comment.id})}" onclick="return confirm('确定要删除该评论吗？')" th:if="${session.user}">删除</a> </div> </div>  <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0"> <div class="comment" th:each="reply : ${comment.replyComments}"> <a class="avatar"> <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}"> </a> <div class="content"> <a class="author" > <span th:text="${reply.nickname}">小红</span>  <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">栈主</div> &nbsp;<span th:text="|@ ${reply.parentNickname}|" class="m-teal">@ 小白</span> </a> <div class="metadata"> <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span> </div> <div class="text" th:text="${reply.content}"> How artistic! </div> <div class="actions"> <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a> <a class="delete" href="#" th:href="@{/comment/{param1}/{param2}/delete(param1=${reply.blogId},param2=${reply.id})}" onclick="return confirm('确定要删除该评论吗！')" th:if="${session.user}">删除</a> </div> </div> </div> </div> </div> </div> </div> </div>

后端实现逻辑：先获取顶级的数据，在一层一层往下找、放入集合

&#64;Service public class CommentServiceImpl implements CommentService { &#64;Autowired private CommentDao commentDao; &#64;Autowired private BlogDao blogDao; //存放迭代找出的所有子代的集合 private List&lt;Comment&gt; tempReplys &#61; new ArrayList&lt;&gt;(); &#64;Override public List&lt;Comment&gt; listCommentByBlogId(Long blogId) { //查询出父节点 List&lt;Comment&gt; comments &#61; commentDao.findByBlogIdParentIdNull(blogId, Long.parseLong(&#34;-1&#34;)); for(Comment comment : comments){ Long id &#61; comment.getId(); String parentNickname1 &#61; comment.getNickname(); List&lt;Comment&gt; childComments &#61; commentDao.findByBlogIdParentIdNotNull(blogId,id); // 查询出子评论 combineChildren(blogId, childComments, parentNickname1); comment.setReplyComments(tempReplys); tempReplys &#61; new ArrayList&lt;&gt;(); } return comments; } private void combineChildren(Long blogId, List&lt;Comment&gt; childComments, String parentNickname1) { // 判断是否有一级子评论 if(childComments.size() &gt; 0){ // 循环找出子评论的id for(Comment childComment : childComments){ String parentNickname &#61; childComment.getNickname(); childComment.setParentNickname(parentNickname1); tempReplys.add(childComment); Long childId &#61; childComment.getId(); // 查询出子二级评论 recursively(blogId, childId, parentNickname); } } } private void recursively(Long blogId, Long childId, String parentNickname1) { // 根据子一级评论的id找到子二级评论 List&lt;Comment&gt; replayComments &#61; commentDao.findByBlogIdAndReplayId(blogId,childId); if(replayComments.size() &gt; 0){ for(Comment replayComment : replayComments){ String parentNickname &#61; replayComment.getNickname(); replayComment.setParentNickname(parentNickname1); Long replayId &#61; replayComment.getId(); tempReplys.add(replayComment); recursively(blogId,replayId,parentNickname); } } } // 新增评论 &#64;Override public int saveComment(Comment comment) { comment.setCreateTime(new Date()); int comments &#61; commentDao.saveComment(comment); // 文章评论计数 blogDao.getCommentCountById(comment.getBlogId()); return comments; } }

@Service public class CommentServiceImpl implements CommentService { @Autowired private CommentDao commentDao; @Autowired private BlogDao blogDao; //存放迭代找出的所有子代的集合 private List<Comment> tempReplys = new ArrayList<>(); @Override public List<Comment> listCommentByBlogId(Long blogId) { //查询出父节点 List<Comment> comments = commentDao.findByBlogIdParentIdNull(blogId, Long.parseLong("-1")); for(Comment comment : comments){ Long id = comment.getId(); String parentNickname1 = comment.getNickname(); List<Comment> childComments = commentDao.findByBlogIdParentIdNotNull(blogId,id); // 查询出子评论 combineChildren(blogId, childComments, parentNickname1); comment.setReplyComments(tempReplys); tempReplys = new ArrayList<>(); } return comments; } private void combineChildren(Long blogId, List<Comment> childComments, String parentNickname1) { // 判断是否有一级子评论 if(childComments.size() > 0){ // 循环找出子评论的id for(Comment childComment : childComments){ String parentNickname = childComment.getNickname(); childComment.setParentNickname(parentNickname1); tempReplys.add(childComment); Long childId = childComment.getId(); // 查询出子二级评论 recursively(blogId, childId, parentNickname); } } } private void recursively(Long blogId, Long childId, String parentNickname1) { // 根据子一级评论的id找到子二级评论 List<Comment> replayComments = commentDao.findByBlogIdAndReplayId(blogId,childId); if(replayComments.size() > 0){ for(Comment replayComment : replayComments){ String parentNickname = replayComment.getNickname(); replayComment.setParentNickname(parentNickname1); Long replayId = replayComment.getId(); tempReplys.add(replayComment); recursively(blogId,replayId,parentNickname); } } } // 新增评论 @Override public int saveComment(Comment comment) { comment.setCreateTime(new Date()); int comments = commentDao.saveComment(comment); // 文章评论计数 blogDao.getCommentCountById(comment.getBlogId()); return comments; } }

总结：本章主要是简单介绍博客评论功能的实现，功能并不全面。实现逻辑：因为是博客普通用户不需要登录即可浏览，所以没有做普通用户登录功能，评论时候需要输入自己的姓名和邮箱进行评论，若为博主评论则是通过实体类定义的字段在前端做判断，若为博主则增加标签。

软粉网

如何实现博客的评论和回复功能

作者: HUI

发表评论取消回复

给这篇文章的作者打赏

作者: HUI

相关文章

java元注解及源码浅析

【MySQL语句】MySQL基础语句，应付期末考试，木得问题~

Django–初识

CentOS7关闭防火墙

Spring框架学习记录

SpringBoot核心配置与注解02

发表评论 取消回复

发表评论取消回复