小说详情页优化

novel-front/src/main/java/com/java2nb/novel/core/serialize/CommentUserNameSerialize.java

@@ -0,0 +1,20 @@
+package com.java2nb.novel.core.serialize;
+
+import com.fasterxml.jackson.core.JsonGenerator;
+import com.fasterxml.jackson.databind.JsonSerializer;
+import com.fasterxml.jackson.databind.SerializerProvider;
+import org.apache.commons.lang3.StringUtils;
+
+import java.io.IOException;
+
+public class CommentUserNameSerialize extends JsonSerializer<String> {
+
+    @Override
+    public void serialize(String s, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException {
+
+        if(StringUtils.isNotBlank(s)){
+            jsonGenerator.writeString(s.substring(0, 4) + "****" + s.substring(s.length() - 3));
+        }
+
+    }
+}

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

@@ -1,6 +1,7 @@
 package com.java2nb.novel.page;
 
 import com.java2nb.novel.controller.BaseController;
+import com.java2nb.novel.core.bean.PageBean;
 import com.java2nb.novel.core.bean.UserDetails;
 import com.java2nb.novel.core.utils.ThreadLocalUtil;
 import com.java2nb.novel.entity.*;
@@ -8,6 +9,7 @@ import com.java2nb.novel.service.AuthorService;
 import com.java2nb.novel.service.BookService;
 import com.java2nb.novel.service.NewsService;
 import com.java2nb.novel.service.UserService;
+import com.java2nb.novel.vo.BookCommentVO;
 import lombok.RequiredArgsConstructor;
 import lombok.SneakyThrows;
 import lombok.extern.slf4j.Slf4j;
@@ -78,7 +80,7 @@ public class PageController extends BaseController {
      */
     @RequestMapping(path = {"/", "/index", "/index.html"})
     public String index(Model model) {
-        model.addAttribute("bookMap",bookService.listBookSettingVO());
+        model.addAttribute("bookMap", bookService.listBookSettingVO());
         return ThreadLocalUtil.getTemplateDir() + "index";
     }
 
@@ -106,13 +108,42 @@ public class PageController extends BaseController {
     @SneakyThrows
     @RequestMapping("/book/{bookId}.html")
     public String bookDetail(@PathVariable("bookId") Long bookId, Model model) {
-        Book book = bookService.queryBookDetail(bookId);
-        model.addAttribute("book", book);
-        if (book.getLastIndexId() != null) {
-            //查询首章目录ID
-            Long firstBookIndexId = bookService.queryFirstBookIndexId(bookId);
-            model.addAttribute("firstBookIndexId", firstBookIndexId);
-        }
+        //加载小说基本信息线程
+        CompletableFuture<Book> bookCompletableFuture = CompletableFuture.supplyAsync(() -> {
+            //查询书籍
+            Book book = bookService.queryBookDetail(bookId);
+            log.debug("加载小说基本信息线程结束");
+            return book;
+        }, threadPoolExecutor);
+        //加载小说评论列表线程
+        CompletableFuture<PageBean<BookCommentVO>> bookCommentPageBeanCompletableFuture = CompletableFuture.supplyAsync(() -> {
+            PageBean<BookCommentVO> bookCommentVOPageBean = bookService.listCommentByPage(null, bookId, 1, 5);
+            log.debug("加载小说评论列表线程结束");
+            return bookCommentVOPageBean;
+        }, threadPoolExecutor);
+        //加载小说首章信息线程，该线程在加载小说基本信息线程执行完毕后才执行
+        CompletableFuture<Long> firstBookIndexIdCompletableFuture = bookCompletableFuture.thenApplyAsync((book) -> {
+            if (book.getLastIndexId() != null) {
+                //查询首章目录ID
+                Long firstBookIndexId = bookService.queryFirstBookIndexId(bookId);
+                log.debug("加载小说基本信息线程结束");
+                return firstBookIndexId;
+            }
+            return null;
+        }, threadPoolExecutor);
+        //加载随机推荐小说线程，该线程在加载小说基本信息线程执行完毕后才执行
+        CompletableFuture<List<Book>> recBookCompletableFuture = bookCompletableFuture.thenApplyAsync((book) -> {
+            List<Book> books = bookService.listRecBookByCatId(book.getCatId());
+            log.debug("加载随机推荐小说线程结束");
+            return books;
+        }, threadPoolExecutor);
+
+
+        model.addAttribute("book", bookCompletableFuture.get());
+        model.addAttribute("firstBookIndexId", firstBookIndexIdCompletableFuture.get());
+        model.addAttribute("recBooks", recBookCompletableFuture.get());
+        model.addAttribute("bookCommentPageBean", bookCommentPageBeanCompletableFuture.get());
+
         return ThreadLocalUtil.getTemplateDir() + "book/book_detail";
     }
 
@@ -136,8 +167,6 @@ public class PageController extends BaseController {
     @SneakyThrows
     @RequestMapping("/book/{bookId}/{bookIndexId}.html")
     public String indexList(@PathVariable("bookId") Long bookId, @PathVariable("bookIndexId") Long bookIndexId, HttpServletRequest request, Model model) {
-
-
         //加载小说基本信息线程
         CompletableFuture<Book> bookCompletableFuture = CompletableFuture.supplyAsync(() -> {
             //查询书籍

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

@@ -1,6 +1,8 @@
 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 lombok.Data;
 
@@ -13,6 +15,7 @@ import java.util.Date;
 @Data
 public class BookCommentVO extends BookComment {
 
+    @JsonSerialize(using = CommentUserNameSerialize.class)
     private String createUserName;
 
     private String createUserPhoto;

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

@@ -86,20 +86,21 @@
                     <div class="bookComment">
                         <div class="book_tit">
                             <div class="fl">
-                                <h3>作品评论区</h3><span id="bookCommentTotal">(0条)</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" style="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">
+                        <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" th:text="${#strings.substring(comment.createUserName,0,4)}+'****'+${#strings.substring(comment.createUserName,#strings.length(comment.createUserName)-3,#strings.length(comment.createUserName))}"></li><li class="dec" th:text="${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>
 
                         <!--无评论时此处隐藏-->
-                        <div class="more_bar" id="moreCommentPanel">
+                        <div class="more_bar" id="moreCommentPanel" th:style="${bookCommentPageBean.total == 0}? 'display:none'">
                             <a th:href="'/book/comment-'+${book.id}+'.html'">查看全部评论&gt;</a>
                         </div>
 
@@ -171,7 +172,19 @@
                 </div>
                 <div class="tj_bar">
                     <ul id="recBookList">
+                        <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>
+                                </div>
+                                <div class="dec">
+                                    <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>
+                                </div>
+                            </div>
+                        </li>
 
                     </ul>
                 </div>
@@ -250,56 +263,7 @@
         }
     })
 
-    //加载评价列表
-    loadCommentList();
 
-    function loadCommentList(){
-        $.ajax({
-            type: "get",
-            url: "/book/listCommentByPage",
-            data: {'bookId': $("#bookId").val()},
-            dataType: "json",
-            success: function (data) {
-                if (data.code == 200) {
-                    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.substr(0, 4) + "****" + comment.createUserName.substr(comment.createUserName.length - 3, 3))+"</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>");
-                        }
-                        $("#commentPanel").html(commentListHtml);
-                        $("#noCommentPanel").hide();
-                        $("#commentPanel").show();
-                        $("#moreCommentPanel").show();
-
-                    } else {
-                        $("#commentPanel").hide();
-                        $("#moreCommentPanel").hide();
-                        $("#noCommentPanel").show();
-                    }
-
-
-                } else {
-                    layer.alert(data.msg);
-                }
-
-            },
-            error: function () {
-                layer.alert('网络异常');
-            }
-        })
-    }
 
 
 
@@ -332,49 +296,58 @@
 
     });
 
-    var bookCatId = $("#bookCatId").val();
-    //查询同类推荐
-    $.ajax({
-        type: "get",
-        url: "/book/listRecBookByCatId",
-        data: {'catId': bookCatId},
-        dataType: "json",
-        success: function (data) {
-            if (data.code == 200) {
-                var recBookList = data.data;
-                var recBookListHtml = "";
-                for (var i = 0; i < recBookList.length; i++) {
-                    var recBook = recBookList[i];
-                    recBookListHtml += ("<li>\n" +
-                        "                            <div class=\"book_intro\">\n" +
-                        "                                <div class=\"cover\">\n" +
-                        "                                    <a href=\"/book/" + recBook.id + ".html\" ><img src=\"" + recBook.picUrl + "\" alt=\"" + recBook.bookName + "\" /></a>\n" +
-                        "                                </div>\n" +
-                        "                                <div class=\"dec\">\n" +
-                        "                                    <a class=\"book_name\" href=\"/book/" + recBook.id + ".html\" >" + recBook.bookName + "</a>\n" +
-                        "                                    <a class=\"txt\" href=\"/book/" + recBook.id + ".html\" >\n" + recBook.bookDesc +
-                        "                                    </a>\n" +
-                        "                                </div>\n" +
-                        "                            </div>\n" +
-                        "                        </li>");
-
-
-                }
-                $("#recBookList").html(recBookListHtml);
-
-
-            } else {
-                layer.alert(data.msg);
-            }
-
-        },
-        error: function () {
-            layer.alert('网络异常');
-        }
-    })
 
     $.post("/book/addVisitCount", {"bookId": bookId}, function () {
     });
+
+
+    function loadCommentList(){
+        $.ajax({
+            type: "get",
+            url: "/book/listCommentByPage",
+            data: {'bookId': $("#bookId").val()},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    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)+"</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>");
+                        }
+                        $("#commentPanel").html(commentListHtml);
+                        $("#noCommentPanel").hide();
+                        $("#commentPanel").show();
+                        $("#moreCommentPanel").show();
+
+                    } else {
+                        $("#commentPanel").hide();
+                        $("#moreCommentPanel").hide();
+                        $("#noCommentPanel").show();
+                    }
+
+
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+    }
 </script>
 </body>
 </html>