从0开始码第⼀个SpringBoot项⽬（javaweb个⼈博客系统）之完成⽂章⼀级⼆
级评论功能
⽬录
1. 效果预览
1.1进⼊⾸页
进⼊⾸页后点击⼀篇⽂章进⼊：
1.2 测试评论功能
进⼊⽂章详细列表后，上⽅为⽂章内容区域，下⽅为⽂章评论区域
对此评论框做了数据校验，如果评论内容为空，给出提⽰并返回，否则评论成功，我们输⼊⼀条评论信息，然后点击回复，如下：
测试⼆级评论功能：
我们点击⼀级评论下的评论图标，如果有⼆级评论则显⽰⼆级评论和⼆级评论框，如果没有只显⽰⼆级评论框
测试⼆级评论：
测试⼆级评论：
2. 功能实现
2.1 ⽂章详情页布局(articleDetail.html)
<!DOCTYPE HTML>
<html th="">
<head>
<!-- 踩过的坑，springboot引⼊静态资源路径不要加/static/，否则会报404--> <title text="${ArticleDetail.title}"></title>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<link rel="stylesheet"href="/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"href="/css/community.css">
<link rel="stylesheet"href="//at.alicdn/t/font_1643567_yxz5icboc4.css"> <link rel="stylesheet"href="/bootstrap-3.3.7/css/bootstrap-theme.min.css"> <script src="/jquery-1.12.4/jque
ry-1.12.4.min.js"></script>
<script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/js/community.js"></script>
</head>
</head>
<body>
<div replace="navigation :: nav"></div>
<div class="row main">
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 col-left">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class=""><h4 text="${ArticleDetail.title}"></h4></div>
<hr>
<div class="detail-msg">
作者：<span text="${ArticleDetail.user.name}"></span> | 发布时间：<span text="${#dates.ateTime,'yyyy-MM-dd')}"></ span> | 阅读数：<span text="${adCount}"></span>
<div class="link-items"if="${session.user !=null && ArticleDetail.user.id==session.user.id}">
<a href="@{/article/edit(id=${Id()})}"><i class="iconfont icon-fabu2"></i> ；编辑</a>
</div>
</div>
<div>
<span text="${ArticleDetail.description}"></span>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="comment">
<h4><span text="${AnswerCount()}"></span>个回复</h4>
</div>
<div class="media media_list"each="comment :${comments}">
<div class="comment-head">
<div class="media-left">
<a href="#">
<img class="img-rounded img-comment"src="${User().getAvatarUrl()}">
</a>
</div>
<div class="media-body">
<span class="media-heading"text="${User().getName()}"></span>
<span class="float-right"text="${#dates.ateTime,'yyyy-MM-dd')}"></span>
</div>
</div>
<div class="comment-style comment-body"text="${Content()}">
</div>
<div class="comment-style comment-footer">
<div>
<span class="operate like">
<i class="iconfont icon-z-like"like-id="${Id()}"onclick="like(this)"></i>
<span id="likeCount"text="${LikeCount()==0?'':LikeCount()}"></span>
</span>
<span class="operate answer"data-id="${Id()}"onclick="showChildComment(this)">
<i class="iconfont icon-pinglun"></i>
<span id="${'commentCount-'+Id()}"text="${commentmentCount==0?'':commentmentCount}"></span>
bootstrap项目</span>
</div>
<div class="collapse childCol col-lg-12 col-md-12 col-sm-12 col-xs-12"id="${'comment-'+Id()}">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-comment"if="${session.user!=null}">
<input type="text"class="form-control"id="${'childComment-'+Id()}"name="childComment"placeholder="说说你的看法..." >
<button type="button"class="btn btn-success btn-comment"data-parentId="${Id()}"onclick="subComment(this)">评论</b utton>
</div>
</div>
</div>
</div>
</div>
<!-- 评论 -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<div class="comment"if="${session.user!=null}">
<input type="hidden"id="parentId"value="${Id()}">
<div class="d-flex">
<div class="media">
<div class="media-comment">
<a href="#">
<img class="img-rounded img-comment"src="${AvatarUrl()}">
</a>
</div>
</div>
<textarea id="commentArea"name="description"class="comment-content open"maxlength="1000"></textarea> </div>
<button type="button"class="btn btn-success btn-comment"onclick="postComment();">回复</button>
</div>
<div class="notLogin"if="${session.user==null}">
要回复问题请先<a onclick="toLogin()">登录</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
<div>
<p>发起⼈</p>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-rounded"src="${AvatarUrl()}">
</a>
</div>
<div class="media-body">
<span class="media-heading"text="${ArticleDetail.user.name}"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.2 ⼀级/⼆级评论回复功能
点击回复按钮事件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论