Skip to content

Commit

Permalink
小说详情页优化
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoyang committed May 28, 2021
1 parent 625694b commit 928cb24
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 93 deletions.
20 changes: 20 additions & 0 deletions novel-front/src/main/java/com/java2nb/novel/core/serialize/CommentUserNameSerialize.java
View file
Original file line number Diff line number Diff line change
@@ -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));
}

}
}
49 changes: 39 additions & 10 deletions novel-front/src/main/java/com/java2nb/novel/page/PageController.java
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
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.*;
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;
Expand Down Expand Up @@ -78,7 +80,7 @@ public String module3(@PathVariable("module") String module, @PathVariable("clas
*/
@RequestMapping(path = {"/", "/index", "/index.html"})
public String index(Model model) {
model.addAttribute("bookMap",bookService.listBookSettingVO());
model.addAttribute("bookMap", bookService.listBookSettingVO());
return ThreadLocalUtil.getTemplateDir() + "index";
}

Expand Down Expand Up @@ -106,13 +108,42 @@ public String bookRank() {
@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";
}

Expand All @@ -136,8 +167,6 @@ public String indexList(@PathVariable("bookId") Long bookId, Model model) {
@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(() -> {
//查询书籍
Expand Down
3 changes: 3 additions & 0 deletions novel-front/src/main/java/com/java2nb/novel/vo/BookCommentVO.java
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -13,6 +15,7 @@
@Data
public class BookCommentVO extends BookComment {

@JsonSerialize(using = CommentUserNameSerialize.class)
private String createUserName;

private String createUserPhoto;
Expand Down
139 changes: 56 additions & 83 deletions novel-front/src/main/resources/templates/book/book_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,20 +86,21 @@ <h3>最新章节</h3><span id="bookIndexCount">(0章)</span></div>
<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>

Expand Down Expand Up @@ -171,7 +172,19 @@ <h3 class="on">同类推荐</h3>
</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>
Expand Down Expand Up @@ -250,8 +263,43 @@ <h3 class="on">同类推荐</h3>
}
})

//加载评价列表
loadCommentList();




var currentBId = 37, spmymoney = 0;
var relationStep = 0;
var authorUId = 8;
$(function () {
$(".icon_show").click(function () {
$(this).hide();
$(".icon_hide").show();
$(".intro_txt").innerHeight("auto");
});
$(".icon_hide").click(function () {
$(this).hide();
$(".icon_show").show();
$(".intro_txt").innerHeight("");
});



$("#AuthorOtherNovel li").unbind("mouseover");

$('#txtComment').on('input propertychange', function () {
var count = $(this).val().length;
$('#emCommentNum').html(count + "/1000");
if (count > 1000) {
$('#txtComment').val($('#txtComment').val().substring(0, 1000));
}
});

});


$.post("/book/addVisitCount", {"bookId": bookId}, function () {
});


function loadCommentList(){
$.ajax({
Expand All @@ -271,7 +319,7 @@ <h3 class="on">同类推荐</h3>
"<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\">" +
"<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>" +
Expand Down Expand Up @@ -300,81 +348,6 @@ <h3 class="on">同类推荐</h3>
}
})
}



var currentBId = 37, spmymoney = 0;
var relationStep = 0;
var authorUId = 8;
$(function () {
$(".icon_show").click(function () {
$(this).hide();
$(".icon_hide").show();
$(".intro_txt").innerHeight("auto");
});
$(".icon_hide").click(function () {
$(this).hide();
$(".icon_show").show();
$(".intro_txt").innerHeight("");
});



$("#AuthorOtherNovel li").unbind("mouseover");

$('#txtComment').on('input propertychange', function () {
var count = $(this).val().length;
$('#emCommentNum').html(count + "/1000");
if (count > 1000) {
$('#txtComment').val($('#txtComment').val().substring(0, 1000));
}
});

});

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 () {
});
</script>
</body>
</html>

0 comments on commit 928cb24

Please sign in to comment.