我的笔记而已,小白勿看。当然你可以参考下面的链接:
评论回复数据库设计,代码设计,前端部分设计:
链接: 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){}
}