Advertisement

个人博客:博客详情评论功能

阅读量:

评论功能
1、评论信息提交与回复功能
改写blog.html页面

复制代码
    <!--留言区域列表-->
      <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>
                </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.parentComment.nickname}|" 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>
                    </div>
                  </div>
                </div>
              </div>
            </div>

添加头像信息

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

添加评论功能实体类

在这里插入图片描述

添加评论功能接口类

在这里插入图片描述

运行项目文件,访问http://127.0.0.1:8080/点击任意博客查看详情

在这里插入图片描述

2、评论信息列表展示功能

在这里插入图片描述

效果图

在这里插入图片描述

3、管理员回复评论功能

在这里插入图片描述
在这里插入图片描述

效果图

在这里插入图片描述

全部评论 (0)

还没有任何评论哟~