feat(novel-front): 增加评论回复功能

novel-front/src/main/java/com/java2nb/novel/controller/BookController.java

@@ -3,17 +3,11 @@ package com.java2nb.novel.controller;
 import com.java2nb.novel.core.bean.UserDetails;
 import com.java2nb.novel.core.enums.ResponseStatus;
 import com.java2nb.novel.core.utils.IpUtil;
-import com.java2nb.novel.entity.Book;
-import com.java2nb.novel.entity.BookCategory;
-import com.java2nb.novel.entity.BookComment;
-import com.java2nb.novel.entity.BookIndex;
+import com.java2nb.novel.entity.*;
 import com.java2nb.novel.service.BookContentService;
 import com.java2nb.novel.service.BookService;
 import com.java2nb.novel.service.IpLocationService;
-import com.java2nb.novel.vo.BookCommentVO;
-import com.java2nb.novel.vo.BookSettingVO;
-import com.java2nb.novel.vo.BookSpVO;
-import com.java2nb.novel.vo.BookVO;
+import com.java2nb.novel.vo.*;
 import io.github.xxyopen.model.page.PageBean;
 import io.github.xxyopen.model.page.builder.pagehelper.PageBuilder;
 import io.github.xxyopen.model.resp.RestResult;
@@ -153,6 +147,16 @@ public class BookController extends BaseController {
         return RestResult.ok(bookService.listCommentByPage(null, bookId, page, pageSize));
     }
 
+    /**
+     * 分页查询评论回复列表
+     */
+    @GetMapping("listCommentReplyByPage")
+    public RestResult<PageBean<BookCommentReplyVO>> listCommentReplyByPage(@RequestParam("commentId") Long commentId,
+        @RequestParam(value = "curr", defaultValue = "1") int page,
+        @RequestParam(value = "limit", defaultValue = "5") int pageSize) {
+        return RestResult.ok(bookService.listCommentReplyByPage(null, commentId, page, pageSize));
+    }
+
     /**
      * 新增评价
      */
@@ -167,6 +171,20 @@ public class BookController extends BaseController {
         return RestResult.ok();
     }
 
+    /**
+     * 新增回复
+     */
+    @PostMapping("addCommentReply")
+    public RestResult<?> addCommentReply(BookCommentReply commentReply, HttpServletRequest request) {
+        UserDetails userDetails = getUserDetails(request);
+        if (userDetails == null) {
+            return RestResult.fail(ResponseStatus.NO_LOGIN);
+        }
+        commentReply.setLocation(ipLocationService.getLocation(IpUtil.getRealIp(request)));
+        bookService.addBookCommentReply(userDetails.getId(), commentReply);
+        return RestResult.ok();
+    }
+
     /**
      * 根据小说ID查询小说前十条最新更新目录集合
      */

novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java

@@ -313,6 +313,16 @@ public class PageController extends BaseController {
         return "book/book_comment";
     }
 
+    /**
+     * 评论回复页面
+     */
+    @RequestMapping("/book/reply-{commentId}.html")
+    public String commentReplyList(@PathVariable("commentId") Long commentId, Model model) {
+        model.addAttribute("commentId", commentId);
+        model.addAttribute("commentContent", bookService.getBookComment(commentId).getCommentContent());
+        return "book/book_comment_reply";
+    }
+
     /**
      * 新闻内容页面
      */

novel-front/src/main/java/com/java2nb/novel/mapper/FrontBookCommentMapper.java

@@ -12,4 +12,5 @@ public interface FrontBookCommentMapper extends BookCommentMapper {
 
     List<BookCommentVO> listCommentByPage(@Param("userId") Long userId, @Param("bookId") Long bookId);
 
+    void addReplyCount(@Param("commentId") Long commentId);
 }

novel-front/src/main/java/com/java2nb/novel/mapper/FrontBookCommentReplyMapper.java

@@ -0,0 +1,16 @@
+package com.java2nb.novel.mapper;
+
+import com.java2nb.novel.vo.BookCommentReplyVO;
+import com.java2nb.novel.vo.BookCommentVO;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+/**
+ * @author Administrator
+ */
+public interface FrontBookCommentReplyMapper extends BookCommentReplyMapper {
+
+    List<BookCommentReplyVO> listCommentReplyByPage(@Param("userId") Long userId, @Param("commentId") Long commentId);
+
+}

novel-front/src/main/java/com/java2nb/novel/service/BookService.java

@@ -1,12 +1,9 @@
 package com.java2nb.novel.service;
 
 
+import com.java2nb.novel.vo.*;
 import io.github.xxyopen.model.page.PageBean;
 import com.java2nb.novel.entity.*;
-import com.java2nb.novel.vo.BookCommentVO;
-import com.java2nb.novel.vo.BookSettingVO;
-import com.java2nb.novel.vo.BookSpVO;
-import com.java2nb.novel.vo.BookVO;
 
 import java.util.Date;
 import java.util.List;
@@ -295,4 +292,15 @@ public interface BookService {
      * 查询AI生成图片
      */
     String queryAiGenPic(Long bookId);
+
+    /**
+     * 新增回复
+     * @param userId 用户ID
+     * @param commentReply 回复内容
+     * */
+    void addBookCommentReply(Long userId, BookCommentReply commentReply);
+
+    PageBean<BookCommentReplyVO> listCommentReplyByPage(Long userId, Long commentId, int page, int pageSize);
+
+    BookComment getBookComment(Long commentId);
 }

novel-front/src/main/java/com/java2nb/novel/service/impl/BookServiceImpl.java

@@ -15,10 +15,7 @@ import com.java2nb.novel.mapper.*;
 import com.java2nb.novel.service.AuthorService;
 import com.java2nb.novel.service.BookService;
 import com.java2nb.novel.service.FileService;
-import com.java2nb.novel.vo.BookCommentVO;
-import com.java2nb.novel.vo.BookSettingVO;
-import com.java2nb.novel.vo.BookSpVO;
-import com.java2nb.novel.vo.BookVO;
+import com.java2nb.novel.vo.*;
 import io.github.xxyopen.model.page.PageBean;
 import io.github.xxyopen.model.page.builder.pagehelper.PageBuilder;
 import io.github.xxyopen.util.IdWorker;
@@ -87,6 +84,8 @@ public class BookServiceImpl implements BookService {
 
     private final FrontBookCommentMapper bookCommentMapper;
 
+    private final FrontBookCommentReplyMapper bookCommentReplyMapper;
+
     private final BookAuthorMapper bookAuthorMapper;
 
     private final CacheService cacheService;
@@ -888,5 +887,27 @@ public class BookServiceImpl implements BookService {
         return cacheService.get(CacheKey.AI_GEN_PIC + bookId);
     }
 
+    @Transactional(rollbackFor = Exception.class)
+    @Override
+    public void addBookCommentReply(Long userId, BookCommentReply commentReply) {
+        //增加回复
+        commentReply.setCreateUserId(userId);
+        commentReply.setCreateTime(new Date());
+        bookCommentReplyMapper.insertSelective(commentReply);
+        //增加评论回复数
+        bookCommentMapper.addReplyCount(commentReply.getCommentId());
+    }
+
+    @Override
+    public PageBean<BookCommentReplyVO> listCommentReplyByPage(Long userId, Long commentId, int page, int pageSize) {
+        PageHelper.startPage(page, pageSize);
+        return PageBuilder.build(bookCommentReplyMapper.listCommentReplyByPage(userId, commentId));
+    }
+
+    @Override
+    public BookComment getBookComment(Long commentId) {
+        return bookCommentMapper.selectByPrimaryKey(commentId).orElse(null);
+    }
+
 
 }

novel-front/src/main/java/com/java2nb/novel/vo/BookCommentReplyVO.java

@@ -0,0 +1,30 @@
+package com.java2nb.novel.vo;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.fasterxml.jackson.databind.annotation.JsonSerialize;
+import com.java2nb.novel.core.serialize.CommentUserNameSerialize;
+import com.java2nb.novel.entity.BookComment;
+import com.java2nb.novel.entity.BookCommentReply;
+import lombok.Data;
+
+import java.util.Date;
+
+/**
+ * @author 11797
+ */
+@Data
+public class BookCommentReplyVO extends BookCommentReply {
+
+    @JsonSerialize(using = CommentUserNameSerialize.class)
+    private String createUserName;
+
+    private String createUserPhoto;
+
+    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
+    private Date createTime;
+
+    @Override
+    public String toString() {
+        return super.toString();
+    }
+}

novel-front/src/main/resources/mybatis/mapping/BookCommentMapper.xml

@@ -19,5 +19,12 @@
     </select>
 
 
+    <update id="addReplyCount" parameterType="long">
+        update book_comment
+        set reply_count = reply_count + 1
+        where id = #{commentId}
+    </update>
+
+
 
 </mapper>

novel-front/src/main/resources/mybatis/mapping/BookCommentReplyMapper.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+
+<mapper namespace="com.java2nb.novel.mapper.FrontBookCommentReplyMapper">
+
+    <select id="listCommentReplyByPage"  resultType="com.java2nb.novel.vo.BookCommentReplyVO">
+        select t1.id,t1.reply_content,t1.location,t1.create_time,t2.username create_user_name,t2.user_photo create_user_photo
+        from book_comment_reply t1 inner join user t2 on t1.create_user_id = t2.id
+        <trim>
+            <if test="commentId != null">
+                and t1.comment_id = #{commentId}
+            </if>
+            <if test="userId != null">
+                and t1.create_user_id = #{userId}
+            </if>
+        </trim>
+        order by t1.create_time desc
+
+    </select>
+
+
+
+</mapper>

novel-front/src/main/resources/static/css/base.css

@@ -964,4 +964,14 @@ i.vip_b {
 
 .userBox {
     margin: 0 auto
+}
+
+
+.layui-elem-quote {
+    margin-bottom: 10px;
+    padding: 15px;
+    line-height: 1.8;
+    border-left: 5px solid #16b777;
+    border-radius: 0 2px 2px 0;
+    background-color: #fafafa;
 }

novel-front/src/main/resources/static/javascript/bookdetail.js

@@ -133,6 +133,52 @@
         })
 
 
+    },
+
+    SaveCommentReply: function (cmtBId, cmtCId, cmtDetail) {
+        if (!isLogin) {
+            layer.alert('请先登陆');
+            return;
+        }
+        var cmtDetailTemp = cmtDetail.replace(/(^\s*)/g, "");
+        if (cmtDetailTemp == '') {
+            layer.alert('回复内容必须填写');
+            return;
+        }
+        if (cmtDetailTemp.length < 5) {
+            layer.alert('回复内容必须大于5个字');
+            return;
+        }
+        if (cmtDetail.length < 5) {
+            layer.alert('回复内容必须大于5个字');
+            return;
+        }
+        $.ajax({
+            type: "POST",
+            url: "/book/addCommentReply",
+            data: {'commentId': $("#commentId").val(), 'replyContent': cmtDetail},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    $('#txtComment').val("")
+                    layer.alert('回复成功！');
+                    loadCommentList(1, 20);
+
+                } else if (data.code == 1001) {
+                    //未登录
+                    location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
+
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+
+
     },
     GetFavoritesBook: function (BId) {
     },

novel-front/src/main/resources/templates/book/book_comment.html

@@ -114,9 +114,9 @@
             $('#txtComment').val($('#txtComment').val().substring(0, 1000));
         }
     });
-    searchComments(1, 20);
+    loadCommentList(1, 20);
 
-    function searchComments(curr, limit) {
+    function loadCommentList(curr, limit) {
 
         $.ajax({
             type: "get",
@@ -139,8 +139,11 @@
                                 comment.commentContent+
                                 "</li><li class=\"other cf\">" +
                                 "<span class=\"time fl\">"+comment.createTime+"</span>" +
-                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:BookDetail.AddAgreeTotal(77,this);\" class=\"zan\" style=\"display: none;\">赞<i class=\"num\">(0)</i></a>" +
-                                "</span></li>\t\t</ul>\t</div>");
+                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:;\" class=\"zan\"  style=\"padding-left: 10px\">踩<i class=\"num\">(0)</i></a></span>" +
+                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:;\" class=\"zan\" style=\"padding-left: 10px\">赞<i class=\"num\">(0)</i></a></span>" +
+                                "<span class=\"fr\"><a href=\"/book/reply-"+comment.id+".html\" class=\"zan\" style=\"padding-left: 10px\">回复<i class=\"num\">("+comment.replyCount+
+                                ")</i></a></span>" +
+                                "</li>\t\t</ul>\t</div>");
                         }
                         $("#commentPanel").html(commentListHtml);
 

novel-front/src/main/resources/templates/book/book_comment_reply.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head th:replace="common/header :: common_head(~{::title},~{},~{::link},~{})">
+    <title th:text="'评论回复区'"></title>
+    <link href="/css/main.css" rel="stylesheet"/>
+    <link href="/css/book.css" rel="stylesheet"/>
+</head>
+<body>
+
+<input type="hidden" id="commentId" th:value="${commentId}"/>
+
+<div th:replace="common/top :: top('')">
+</div>
+
+<div class="main box_center cf mb50">
+    <div class="channelBookContent cf">
+        <!--left start-->
+        <div class="wrap_left fl">
+            <div class="wrap_bg">
+                <div class="pad20">
+
+                    <div class="bookComment">
+                        <div class="book_tit">
+                            <div class="fl">
+                                <h3>评论回复区</h3><span id="bookCommentTotal">(0条)</span>
+                            </div>
+                            <a class="fr" href="#txtComment">发表回复</a>
+                        </div>
+                        <blockquote class="layui-elem-quote" th:utext="${commentContent}">
+                        </blockquote>
+                        <div class="no_comment" id="noCommentPanel" style="display: none;">
+                            <img src="/images/no_comment.png" alt=""/>
+                            <span class="block">暂无回复</span>
+                        </div>
+                        <div class="commentBar" id="commentPanel">
+
+                        </div>
+                        <div class="pageBox cf mt15 mr10" id="commentPage">
+                        </div>
+
+                        <div class="reply_bar" id="reply_bar">
+                            <div class="tit">
+                                <span class="fl font16">发表回复</span>
+                                <!--未登录状态下不可发表评论，显示以下链接-->
+                                <span class="fr black9" style="display:none; ">请先 <a class="orange"
+                                                                                       href="/user/login.html">登录</a><em
+                                        class="ml10 mr10">|</em><a class="orange"
+                                                                   href="/user/register.html">注册</a></span>
+                            </div>
+                            <textarea name="txtComment" rows="2" cols="20" id="txtComment" class="replay_text"
+                                      placeholder="我来说两句..."></textarea>
+                            <div class="reply_btn">
+                                <span class="fl black9"><em class="ml5" id="emCommentNum">0/1000</em> 字</span>
+                                <span class="fr"><a class="btn_ora" href="javascript:void(0);"
+                                                    onclick="javascript:BookDetail.SaveCommentReply(37,0,$('#txtComment').val());">发表</a></span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <!--left end-->
+
+        <!--right start-->
+
+        <!--right end-->
+    </div>
+</div>
+
+<div th:replace="common/footer :: footer">
+</div>
+<div th:replace="common/js :: js"></div>
+<script src="/javascript/bookdetail.js" type="text/javascript"></script>
+<script language="javascript" type="text/javascript">
+    $('#txtComment').on('input propertychange', function () {
+        var count = $(this).val().length;
+        $('#emCommentNum').html(count + "/1000");
+        if (count > 1000) {
+            $('#txtComment').val($('#txtComment').val().substring(0, 1000));
+        }
+    });
+    loadCommentList(1, 20);
+
+    function loadCommentList(curr, limit) {
+
+        $.ajax({
+            type: "get",
+            url: "/book/listCommentReplyByPage",
+            data: {'commentId': $("#commentId").val(), 'curr': curr, 'limit': limit},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    if (data.data.total == 0) {
+                        $("#noCommentPanel").css("display", "block");
+                        $("#commentPanel").css("display", "none");
+                        return;
+                    }
+                    $("#noCommentPanel").css("display", "none");
+                    $("#commentPanel").css("display", "block");
+                    var commentList = data.data.list;
+                    if (commentList.length > 0) {
+                        $("#bookCommentTotal").html("(" + data.data.total + "条)");
+                        var commentListHtml = "";
+                        for (var i = 0; i < commentList.length; i++) {
+                            var comment = commentList[i];
+                            commentListHtml += ("<div class=\"comment_list cf\">" +
+                                "<div class=\"user_heads fl\" vals=\"389\">" +
+                                "<img src=\"" + (comment.createUserPhoto ? comment.createUserPhoto : '/images/man.png') + "\" class=\"user_head\" alt=\"\">" +
+                                "<span class=\"user_level1\" style=\"display: none;\">见习</span></div>" +
+                                "<ul class=\"pl_bar fr\">\t\t\t<li class=\"name\">" + (comment.createUserName) + "<span style='padding-left: 10px' class=\"other\">" + (comment.location ? comment.location + "读者" : '') + "</span></li><li class=\"dec\">" +
+                                comment.replyContent +
+                                "</li><li class=\"other cf\">" +
+                                "<span class=\"time fl\" style='padding-right: 10px'>" + (data.data.total - ((curr - 1) * limit + i)) + "楼</span>" +
+                                "<span class=\"time fl\">" + comment.createTime + "</span>" +
+                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:BookDetail.AddAgreeTotal(77,this);\" class=\"zan\" style=\"display: none;\">赞<i class=\"num\">(0)</i></a>" +
+                                "</span></li>\t\t</ul>\t</div>");
+                        }
+                        $("#commentPanel").html(commentListHtml);
+
+                        layui.use('laypage', function () {
+                            var laypage = layui.laypage;
+
+                            //执行一个laypage实例
+                            laypage.render({
+                                elem: 'commentPage' //注意，这里的 test1 是 ID，不用加 # 号
+                                , count: data.data.total //数据总数，从服务端得到,
+                                , curr: data.data.pageNum
+                                , limit: data.data.pageSize
+                                , jump: function (obj, first) {
+
+
+                                    //obj包含了当前分页的所有参数，比如：
+                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
+                                    console.log(obj.limit); //得到每页显示的条数
+
+
+                                    //首次不执行
+                                    if (!first) {
+                                        loadCommentList(obj.curr, obj.limit);
+                                    } else {
+
+                                    }
+                                }
+                            });
+                        });
+
+                    }
+
+
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+
+    }
+</script>
+</body>
+</html>

novel-front/src/main/resources/templates/book/book_detail.html

@@ -22,21 +22,23 @@
 
 <div class="main box_center cf mb50">
     <div class="nav_sub">
-        <a href="/" th:text="${application.website.name}"></a>&gt;<a th:href="'/book/bookclass.html?c='+${book.catId}" th:text="${book.catName}"></a>&gt;<a
+        <a href="/" th:text="${application.website.name}"></a>&gt;<a th:href="'/book/bookclass.html?c='+${book.catId}"
+                                                                     th:text="${book.catName}"></a>&gt;<a
             th:href="'/book/'+${book.id}+'.html'" th:utext="${book.bookName}"></a>
     </div>
     <div class="channelWrap channelBookInfo cf">
         <div class="bookCover cf">
             <a th:href="${book.picUrl}" class="book_cover"><img class="cover" th:src="${book.picUrl}"
-                                                      th:attr="alt=${book.bookName}"/></a>
+                                                                th:attr="alt=${book.bookName}"/></a>
             <div class="book_info">
                 <div class="tit">
                     <h1 th:utext="${book.bookName}"></h1><!--<i class="vip_b">VIP</i>--><a class="author"
-                                                                                          th:utext="${book.authorName}+' 著'"></a>
+                                                                                           th:utext="${book.authorName}+' 著'"></a>
                 </div>
                 <ul class="list">
                     <li><span class="item">类别：<em th:text="${book.catName}"></em></span>
-                        <span class="item" th:switch="${book.bookStatus}">状态：<em th:case="'0'">连载中</em><em th:case="*">已完结</em></span>
+                        <span class="item" th:switch="${book.bookStatus}">状态：<em th:case="'0'">连载中</em><em
+                                th:case="*">已完结</em></span>
                         <span class="item">总点击：<em id="cTotal" th:text="${book.visitCount}"></em></span>
                         <span class="item">总字数：<em th:text="${book.wordCount}"></em></span></li>
                 </ul>
@@ -70,7 +72,9 @@
                         </div>
                         <ul class="list cf">
                             <li>
-                                <span class="fl font16"> <a th:href="'/book/'+${book.id}+'/'+${book.lastIndexId}+'.html'" th:utext="${book.lastIndexName}"><!--<i class="vip">VIP</i>--></a></span>
+                                <span class="fl font16"> <a
+                                        th:href="'/book/'+${book.id}+'/'+${book.lastIndexId}+'.html'"
+                                        th:utext="${book.lastIndexName}"><!--<i class="vip">VIP</i>--></a></span>
                                 <span class="black9 fr"
                                       th:text="'更新时间：'+${#dates.format(book.lastIndexUpdateTime, 'yy/MM/dd HH:mm:ss')}"></span>
                             </li>
@@ -86,21 +90,46 @@
                     <div class="bookComment">
                         <div class="book_tit">
                             <div class="fl">
-                                <h3>作品评论区</h3><span id="bookCommentTotal" th:text="'('+${bookCommentPageBean.total}+'条)'"></span>
+                                <h3>作品评论区</h3><span id="bookCommentTotal"
+                                                         th:text="'('+${bookCommentPageBean.total}+'条)'"></span>
                             </div>
                             <a class="fr" href="#txtComment">发表评论</a>
                         </div>
-                        <div class="no_comment" id="noCommentPanel" th:style="${bookCommentPageBean.total > 0}? 'display:none'" >
+                        <div class="no_comment" id="noCommentPanel"
+                             th:style="${bookCommentPageBean.total > 0}? 'display:none'">
                             <img src="/images/no_comment.png" alt=""/>
                             <span class="block">暂无评论</span>
                         </div>
-                        <div class="commentBar" id="commentPanel" th:style="${bookCommentPageBean.total == 0}? 'display:none'">
-                            <div th:each="comment: ${bookCommentPageBean.list}" class="comment_list cf"><div class="user_heads fl" vals="389"><img th:src="${comment.createUserPhoto}?${comment.createUserPhoto}:'/images/man.png'" class="user_head" alt=""><span class="user_level1" style="display: none;">见习</span></div><ul class="pl_bar fr">			<li class="name"><span th:text="${#strings.substring(comment.createUserName,0,4)}+'****'+${#strings.substring(comment.createUserName,#strings.length(comment.createUserName)-3,#strings.length(comment.createUserName))}"></span><span style="padding-left: 10px" class="other" th:if="${comment.location}" th:text="${comment.location} + '读者'"></span></span></li><li class="dec" th:utext="${comment.commentContent}"></li><li class="other cf"><span class="time fl" th:text="${#calendars.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span><span class="fr"><a href="javascript:void(0);" onclick="javascript:BookDetail.AddAgreeTotal(77,this);" class="zan" style="display: none;">赞<i class="num">(0)</i></a></span></li>		</ul>	</div>
+                        <div class="commentBar" id="commentPanel"
+                             th:style="${bookCommentPageBean.total == 0}? 'display:none'">
+                            <div th:each="comment: ${bookCommentPageBean.list}" class="comment_list cf">
+                                <div class="user_heads fl" vals="389"><img
+                                        th:src="${comment.createUserPhoto}?${comment.createUserPhoto}:'/images/man.png'"
+                                        class="user_head" alt=""><span class="user_level1"
+                                                                       style="display: none;">见习</span></div>
+                                <ul class="pl_bar fr">
+                                    <li class="name"><span
+                                            th:text="${#strings.substring(comment.createUserName,0,4)}+'****'+${#strings.substring(comment.createUserName,#strings.length(comment.createUserName)-3,#strings.length(comment.createUserName))}"></span><span
+                                            style="padding-left: 10px" class="other" th:if="${comment.location}"
+                                            th:text="${comment.location} + '读者'"></span></span></li>
+                                    <li class="dec" th:utext="${comment.commentContent}"></li>
+                                    <li class="other cf"><span class="time fl"
+                                                               th:text="${#calendars.format(comment.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span><span
+                                            class="fr"><a href="javascript:void(0);" onclick="javascript:;" class="zan"
+                                                          style="padding-left: 10px">踩<i class="num">(0)</i></a></span><span
+                                            class="fr"><a href="javascript:void(0);" onclick="javascript:;" class="zan"
+                                                          style="padding-left: 10px">赞<i class="num">(0)</i></a></span><span
+                                            class="fr"><a th:href="'/book/reply-'+${comment.id}+'.html'" class="zan"
+                                                          style="padding-left: 10px">回复<i class="num">([[${comment.replyCount}]])</i></a></span>
+                                    </li>
+                                </ul>
+                            </div>
 
                         </div>
 
                         <!--无评论时此处隐藏-->
-                        <div class="more_bar" id="moreCommentPanel" th:style="${bookCommentPageBean.total == 0}? 'display:none'">
+                        <div class="more_bar" id="moreCommentPanel"
+                             th:style="${bookCommentPageBean.total == 0}? 'display:none'">
                             <a th:href="'/book/comment-'+${book.id}+'.html'">查看全部评论&gt;</a>
                         </div>
 
@@ -109,7 +138,7 @@
                                 <span class="fl font16">发表评论</span>
                                 <!--未登录状态下不可发表评论，显示以下链接-->
                                 <span class="fr black9" style="display:none; ">请先 <a class="orange"
-                                                                                     href="/user/login.html">登录</a><em
+                                                                                       href="/user/login.html">登录</a><em
                                         class="ml10 mr10">|</em><a class="orange"
                                                                    href="/user/register.html">注册</a></span>
                             </div>
@@ -175,10 +204,12 @@
                         <li th:each="book : ${recBooks}">
                             <div class="book_intro">
                                 <div class="cover">
-                                    <a th:href="'/book/'+${book.id}+'.html'"><img th:src="${book.picUrl}" th:alt="${book.bookName}"></a>
+                                    <a th:href="'/book/'+${book.id}+'.html'"><img th:src="${book.picUrl}"
+                                                                                  th:alt="${book.bookName}"></a>
                                 </div>
                                 <div class="dec">
-                                    <a class="book_name" th:href="'/book/'+${book.id}+'.html'" th:text="${book.bookName}"></a>
+                                    <a class="book_name" th:href="'/book/'+${book.id}+'.html'"
+                                       th:text="${book.bookName}"></a>
                                     <a class="txt" th:href="'/book/'+${book.id}+'.html'" th:utext="${book.bookDesc}">
 
                                     </a>
@@ -210,7 +241,7 @@
     var bookId = pathname.substring(pathname.lastIndexOf("/") + 1, pathname.lastIndexOf("."))
     //查询章节信息
     var lastBookIndexId = $("#lastBookIndexId").val();
-    if(lastBookIndexId){
+    if (lastBookIndexId) {
         $.ajax({
             type: "get",
             url: "/book/queryBookIndexAbout",
@@ -232,7 +263,7 @@
                 layer.alert('网络异常');
             }
         })
-    }else{
+    } else {
         $("#optBtn").remove();
     }
 </script>
@@ -264,9 +295,6 @@
     })
 
 
-
-
-
     var currentBId = 37, spmymoney = 0;
     var relationStep = 0;
     var authorUId = 8;
@@ -283,7 +311,6 @@
         });
 
 
-
         $("#AuthorOtherNovel li").unbind("mouseover");
 
         $('#txtComment').on('input propertychange', function () {
@@ -301,7 +328,7 @@
     });
 
 
-    function loadCommentList(){
+    function loadCommentList() {
         $.ajax({
             type: "get",
             url: "/book/listCommentByPage",
@@ -311,20 +338,25 @@
                 if (data.code == 200) {
                     var commentList = data.data.list;
                     if (commentList.length > 0) {
-                        $("#bookCommentTotal").html("("+data.data.total+"条)");
+                        $("#bookCommentTotal").html("(" + data.data.total + "条)");
                         var commentListHtml = "";
                         for (var i = 0; i < commentList.length; i++) {
                             var comment = commentList[i];
                             commentListHtml += ("<div class=\"comment_list cf\">" +
                                 "<div class=\"user_heads fl\" vals=\"389\">" +
-                                "<img src=\""+(comment.createUserPhoto ? comment.createUserPhoto : '/images/man.png')+"\" class=\"user_head\" alt=\"\">" +
+                                "<img src=\"" + (comment.createUserPhoto ? comment.createUserPhoto : '/images/man.png') + "\" class=\"user_head\" alt=\"\">" +
                                 "<span class=\"user_level1\" style=\"display: none;\">见习</span></div>" +
-                                "<ul class=\"pl_bar fr\">\t\t\t<li class=\"name\">"+(comment.createUserName)+"<span style='padding-left: 10px' class=\"other\">"+(comment.location ? comment.location + "读者" : '')+"</span></li><li class=\"dec\">" +
-                                comment.commentContent+
+                                "<ul class=\"pl_bar fr\">\t\t\t<li class=\"name\">" + (comment.createUserName) + "<span style='padding-left: 10px' class=\"other\">" + (comment.location ? comment.location + "读者" : '') + "</span></li><li class=\"dec\">" +
+                                comment.commentContent +
                                 "</li><li class=\"other cf\">" +
-                                "<span class=\"time fl\">"+comment.createTime+"</span>" +
-                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:BookDetail.AddAgreeTotal(77,this);\" class=\"zan\" style=\"display: none;\">赞<i class=\"num\">(0)</i></a>" +
-                                "</span></li>\t\t</ul>\t</div>");
+                                "<span class=\"time fl\">" + comment.createTime + "</span>" +
+                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:;\" class=\"zan\"  style=\"padding-left: 10px\">踩<i class=\"num\">(0)</i></a></span>" +
+                                "<span class=\"fr\"><a href=\"javascript:void(0);\" onclick=\"javascript:;\" class=\"zan\" style=\"padding-left: 10px\">赞<i class=\"num\">(0)</i></a></span>" +
+                                "<span class=\"fr\"><a href=\"/book/reply-"+comment.id+".html\" class=\"zan\" style=\"padding-left: 10px\">回复<i class=\"num\">("+comment.replyCount+
+                            ")</i></a></span>" +
+                            "</li>\t\t</ul>\t</div>"
+                        )
+                            ;
                         }
                         $("#commentPanel").html(commentListHtml);
                         $("#noCommentPanel").hide();