bookshelfplus/bookshelfplus
1
0
Fork 0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-09-02 23:23:28 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

搜索功能前端页面

Browse Source
This commit is contained in:
小墨
2022-03-15 19:26:47 +08:00
parent c2079f9064
commit 328d9f0dd2
5 changed files with 78 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
bookshelfplus-frontend/public/assets/javascripts/renderTable.js
View File

@@ -5,8 +5,10 @@ function renderTable({
}) { }) {
var tbodyHtml = ""; var tbodyHtml = "";
var theadHtml = ""; var theadHtml = "";
if (!data) return null;
if (!data.length) return null;
if (Array.isArray(data)) { if (Array.isArray(data[0])) {
// 是数组 // 是数组
// 如果元素是数组 ["a", "b", "c"]，则数组的第一项作为表头 // 如果元素是数组 ["a", "b", "c"]，则数组的第一项作为表头

2
bookshelfplus-frontend/views/component/searchbox.html
View File

@@ -50,6 +50,6 @@
alert("请输入搜索内容"); alert("请输入搜索内容");
return; return;
} }
window.location.href = "./search?keyword=" + encodeURIComponent(searchBoxValue); window.location.href = "./search?keyword=" + encodeURIComponent(searchBoxValue.trim());
}); });
</script> </script>

3
bookshelfplus-frontend/views/index.html
View File

@@ -17,5 +17,8 @@
</div> </div>
</div> </div>
<%- include("./component/footer.html"); %> <%- include("./component/footer.html"); %>
<script>
$('#searchInput').focus();
</script>
</body> </body>
</html> </html>

80
bookshelfplus-frontend/views/search.html
View File

@@ -3,10 +3,32 @@
<head> <head>
<%- include("./component/header.html"); %> <%- include("./component/header.html"); %>
<style> <style>
.main {
width: 80vw !important;
max-width: initial !important;
}
#result-table { #result-table {
width: 100%; width: 100%;
border: 1px solid black; border: 1px solid black;
margin-top: 30px; margin-top: 30px;
line-height: 1.8em;
}
tr:hover {
background-color: #f5f5f5;
}
tr a {
cursor: pointer;
/* cursor: alias; */
}
.overflow-omit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
} }
</style> </style>
</head> </head>
@@ -17,6 +39,7 @@
<%- include("./component/searchbox.html"); %> <%- include("./component/searchbox.html"); %>
<div id="container"> <div id="container">
<table id="result-table"></table> <table id="result-table"></table>
<!-- <table id="origin-table"></table> -->
</div> </div>
</div> </div>
<%- include("./component/footer.html"); %> <%- include("./component/footer.html"); %>
@@ -25,22 +48,57 @@
<script> <script>
var requestParams = getParams(); var requestParams = getParams();
var searchbox = document.getElementById("searchInput"); var searchbox = document.getElementById("searchInput");
searchbox.value = requestParams["keyword"]; var keyword = (requestParams["keyword"] || "").trim();
searchbox.value = keyword;
if (keyword === "") {
searchbox.focus();
}
</script> </script>
<!-- 渲染表格 --> <!-- 渲染表格 -->
<script src="./assets/javascripts/renderTable.js"></script> <script src="./assets/javascripts/renderTable.js"></script>
<script> <script>
var data1 = [ getRequest("/book/search", { bookName: encodeURIComponent(searchbox.value) })
{ a: "a1", b: "b1", c: "c1", }, .then(function (responseData) {
{ c: "c2", a: "a2", b: "b2", }, var axiosData = responseData.data;
{ a: "a3", c: "c3", b: "b3", } var status = axiosData.status;
]; var data = axiosData.data;
if (status === "success") {
console.log(data)
var table1 = renderTable({ // 数据进行转换
tableId: "result-table", var renderData = [];
data: data1, data.forEach(element => {
renderTableHead: true, var mainDivWidth = 80/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
}); var columnWidth = [23, 17, 30, 10, 20];
renderData.push({
书名: ` <a href="/book?id=${element.category.id}">
<span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em;">
${element.bookName}
</span>
</a>`,
分类: ` <a href="/category?id=${element.category.id}">
<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em;">
${element.category.name}
</span>
</a>`,
简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em;">
${element.description}
</span>`,
语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em;">
${element.language}
</span>`,
出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em;">
${element.publishingHouse}
</span>`,
})
});
renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
// renderTable({ data: data, tableId: "origin-table", renderTableHead: true });
}
else {
alert("搜索失败");
}
});
</script> </script>
</body> </body>
</html> </html>

3
bookshelfplus/src/main/java/plus/bookshelf/Service/Impl/BookServiceImpl.java
View File

@@ -51,7 +51,7 @@ public class BookServiceImpl implements BookService {
BookDOExample bookDOExample = new BookDOExample(); BookDOExample bookDOExample = new BookDOExample();
BeanUtils.copyProperties(bookModel, bookDOExample); BeanUtils.copyProperties(bookModel, bookDOExample);
List<BookDO> bookDOS = bookDOMapper.selectByExample(bookDOExample); List<BookDO> bookDOS = bookDOMapper.selectByExampleWithBLOBs(bookDOExample);
List<BookModel> bookModels = new ArrayList<>(); List<BookModel> bookModels = new ArrayList<>();
for (BookDO bookDO : bookDOS) { for (BookDO bookDO : bookDOS) {
@@ -73,6 +73,7 @@ public class BookServiceImpl implements BookService {
bookModel.setCopyright(bookDO.getCopyright()); bookModel.setCopyright(bookDO.getCopyright());
bookModel.setIsDelete(bookDO.getIsDelete()); bookModel.setIsDelete(bookDO.getIsDelete());
bookModel.setThumbnail(bookDO.getThumbnail()); bookModel.setThumbnail(bookDO.getThumbnail());
bookModel.setLanguage(bookDO.getLanguage());
// 查询得到categoryModel // 查询得到categoryModel
CategoryModel categoryModel = categoryService.getCategoryById(bookDO.getCategoryId()); CategoryModel categoryModel = categoryService.getCategoryById(bookDO.getCategoryId());