bookshelfplus/bookshelfplus
1
0
Fork 0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-10-21 22:56:41 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

前端书籍搜索页面、手机详情页面；前端优化；后端异常处理；添加项目Gitee和GitHub仓库地址；搜索按钮样式美化

Browse Source
This commit is contained in:
小墨
2022-03-15 21:11:28 +08:00
parent 328d9f0dd2
commit c6397dfa47
13 changed files with 223 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,9 +10,9 @@
#result-table {
width: 100%;
border: 1px solid black;
/* border: 1px solid black; */
margin-top: 30px;
line-height: 1.8em;
line-height: 2.3em;
}
tr:hover {
@@ -23,13 +23,6 @@
cursor: pointer;
/* cursor: alias; */
}
.overflow-omit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
</style>
</head>
<body>
@@ -45,6 +38,8 @@
<%- include("./component/footer.html"); %>
<!-- 获取参数 -->
<script src="./assets/javascripts/getParams.js"></script>
<!-- 渲染表格 -->
<script src="./assets/javascripts/renderTable.js"></script>
<script>
var requestParams = getParams();
var searchbox = document.getElementById("searchInput");
@@ -52,53 +47,66 @@
searchbox.value = keyword;
if (keyword === "") {
searchbox.focus();
} else {
search(keyword);
}
</script>
<!-- 渲染表格 -->
<script src="./assets/javascripts/renderTable.js"></script>
<script>
getRequest("/book/search", { bookName: encodeURIComponent(searchbox.value) })
.then(function (responseData) {
var axiosData = responseData.data;
var status = axiosData.status;
var data = axiosData.data;
if (status === "success") {
console.log(data)
// 数据进行转换
var renderData = [];
data.forEach(element => {
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("搜索失败");
}
});
function search(searchboxValue) {
getRequest("/book/search", { bookName: encodeURIComponent(searchboxValue) })
.then(function (responseData) {
var axiosData = responseData.data;
var status = axiosData.status;
var data = axiosData.data;
if (status === "success") {
console.log(data)
// 数据进行转换
var renderData = [];
data.forEach(element => {
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; margin: 0 auto;">
${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; margin: 0 auto;">
${element.category.name}
</span>
</a>`,
简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.description}
</span>`,
语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.language}
</span>`,
出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
${element.publishingHouse}
</span>`,
})
});
if(renderData.length == 0) {
renderData.push({
书名: "没有搜索到相关书籍",
分类: "",
简介: "",
语言: "",
出版社: "",
})
}
renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
// renderTable({ data: data, tableId: "origin-table", renderTableHead: true });
// 渲染后重新获取一次字体
fontmin(getPageText());
}
else {
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
}
});
}
</script>
</body>
</html>