springboot thymeleaf 评论回复功能前端代码

我的笔记而已，小白勿看。当然你可以参考下面的链接：

评论回复数据库设计，代码设计，前端部分设计：
链接: https://www.cnblogs.com/lizhaoyao/p/8617436.html.
链接: https://blog.csdn.net/qq_38157825/article/details/104890308.
链接: https://blog.csdn.net/weixin_44566320/article/details/87836233.

三目运算符解决链接
链接: https://blog.csdn.net/cui1004/article/details/112062010.
链接: https://blog.csdn.net/qq_39566715/article/details/105146036.

注意：被回复楼层只有一层结构，不是树状结构。回复的回复多添加个 @被回复名 字段，参考csdn或哔哩哔哩的回复结构

我的项目是进入一个相册，然后评论该相册。
结构中有 layui 框架的css样式（没也一样）

是这样的结构：

数据库：

评论表 comment
评论id:c_id
发表用户id: uid
评论的相册id:aid
点赞数：c_likes
评论日期：c_time
评论内容：c_content text
父评论id:parent_id //即该楼层的id，最初的父评论id
被回复人的名字：targetName //即在回复中回复别人

html结构

   <!--评论信息-->
        <div class="cc_comment" style="padding-left: 30px;margin-top: 30px;background-color: #242424">


            <h5>评论区</h5>

           <div class="cc_comment__textarea" style="margin-bottom: 20px">
               <textarea placeholder="提点意见，让TA有所进步" form="commentForms" name="comment" style="margin-top: 0px; margin-bottom: 0px; height: 79px;"></textarea>
               <!--和form关联    评论框主体-->
              <div class="comment__textarea_form" style="overflow: hidden">
                  <form action="/recomm/comment" method="post" id="commentForms">
                      <input id="album_id" type="text" style="display: none" name="album_id" th:value="${session.currentAlbum.getAid()}">
                      <input id="comment_userID" type="text" style="display: none" name="userID" th:value="${session.user}!=null ?${session.user.getUid()}:''">
                      <!--这两个input仅仅只是获取相册id和用户id   不显示-->
                      <input type="submit" value="评论" style="float: right">
                  </form>
              </div>


           </div>

            <!--评论列表-->
            <div class="cc_comments">
              <div class="cc_comment_list"  th:each="comment,commentStat : ${session.comments}"  style="margin-bottom: 20px">
                <div class="cc_comment_part">

                        <a style="position:absolute;">
                          <img class="layui-nav-img" th:src="${comment.getProfile_photo()}!=null ?'/' + ${comment.getProfile_photo()}:'http://t.cn/RCzsdCq'">
                        </a>
                        <div style="margin-left: 40px">

                            <span th:text="${comment.getUsername()}" style="color: #999;font-size: 12px"></span>
                            <div th:text="${comment.getC_content()}"></div>
                            <span th:text="${comment.getC_time()}" style="font-size: 10px;color: #999"></span>
                            <!--父评论id，即该楼层发起者的id-->
                            <p style="display: none" th:text="${comment.getC_id()}"></p>
                            <a href="javascript:;" class="reply_btn" style="color: #999;font-size: 12px">回复</a>
                        </div>
                    
                    <!--子评论-->
                    <div th:if="${not #strings.isEmpty(comment.getChild())}">
                        <div th:each="commentChild:${comment.getChild()}" style="margin-top: 10px;margin-left: 20px">
                            <a style="position:absolute;">
                                <img class="layui-nav-img" th:src="${commentChild.getProfile_photo()} !=null?'/' + ${commentChild.getProfile_photo()}:'http://t.cn/RCzsdCq'">
                            </a>
                            <div style="margin-left: 40px">

                                <span th:text="${commentChild.getUsername()}" style="color: #999;font-size: 12px"></span>
                                <span th:if="${not #strings.isEmpty(commentChild.getTargetName())}" th:text="'回复：'+${commentChild.getTargetName()}" style="font-size: 12px"></span>
                                <div th:text="${commentChild.getC_content()}"></div>
                                <span th:text="${commentChild.getC_time()}" style="font-size: 10px;color: #999"></span>
                                 <!--父评论id，即该楼层发起者的id-->
                                <p style="display: none" th:text="${comment.getC_id()}"></p>
                                <a href="javascript:;" class="reply_btn" style="color: #999;font-size: 12px">回复</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
           </div>
        </div>

js

<!--插入回复框-->
<script type="text/javascript">
    $(function(){
        //页面加载完毕后开始执行的事件
        $(".reply_btn").click(function(){
            //获取相册的id
            var album_id = $("#album_id").val();
            //获取回复对象的名称,即兄弟节点的第一个元素的值
            var name =  $(this).siblings(":first").text();
            //获取父回复的id,即评论楼id
            var parent_id = $(this).siblings("p").text();
            //获取当前用户的id
            var userId = $("#comment_userID").val();

            //alert(name);
            //删除可能存在的回复框
            $(".reply_textarea").remove();
            //插入div
            $(this).parent()
                .append("" +
                    "<div class='reply_textarea'>" +
                    "<textarea name='commentTex' form='commentForm' cols='40' rows='5'></textarea><br/>" +
                    "<form action='/recomm/replyComment' method='post' id='commentForm'>"+
                    "<input style='display: none' type='text' name='targetName' id='setValue1'>"+
                    "<input style='display: none' type='text' name='parent_id' id='setValue2'>"+
                    "<input style='display: none' type='text' name='album_id' id='setValue3'>"+
                    "<input style='display: none' type='text' name='userID' id='setValue4'>"+
                    "<input type='submit' value='评论' />" +
                    "<a οnclick='delRow()'>取消</a>"+
                    "</div>");
           /* 设置添加的div中input的值*/
            $("#setValue1").val(name);
            $("#setValue2").val(parent_id);
            $("#setValue3").val(album_id);
            $("#setValue4").val(userId);
        });
    });
    /* 删除 */
    function delRow() {
        $(".reply_textarea").remove();
    }
</script>

css样式:

.cc_infobox{
    margin-left: 30px;
    margin-top: 20px;
    background-color: #00FFFF;

}
.cc_comment__textarea textarea{
    display: block;
    padding: 10px 13px;
    width: 100%;
    background: #2B2B2B;
    border-radius: 4px;
    color: #fff;
    box-sizing: border-box;
}

.cc_div:after{
    content:"";
    display: block;
    clear: both;

}
.cc_comments{
    padding-bottom: 60px;
}

后端给评论分层代码：

   List<Comment> allComments = commentMapper.queryComment(aid);
        System.out.println("全部:"+allComments);
        List<Comment> parents = new ArrayList<>();//最终排好的评论，返回的
        //做成层级评论
        for (Comment comment:allComments){
            if (comment.getParent_id()==null){
              parents.add(comment);
            }else {
              for (Comment parent:parents){
                  System.out.println("现在的parent:"+parent);
                  if (parent.getC_id() == comment.getParent_id()){
                      if (parent.getChild() == null) {
                          parent.setChild(new ArrayList<>());
                      }
                      //添加进入父评论列表
                      parent.getChild().add(comment);
                      break;
                  }
              }
            }
        }
        System.out.println(parents);
        session.setAttribute("comments",parents);

后端控制台略,接受参数即可

如：

@Controller
@RequestMapping("/recomm")
public class RecommController {

//评论功能
    @PostMapping(value = "/comment")
    public String comment(HttpSession session,Integer currentAid,Integer userID,String comment){}


 //回复功能
    @PostMapping(value = "/replyComment")
    @ResponseBody
    public String getComment(@RequestParam String commentTex,String targetName,Integer album_id,Integer parent_id,Integer userID){}
    
}