bookshelfplus/bookshelfplus
1
0
Fork 0
mirror of https://gitee.com/bookshelfplus/bookshelfplus synced 2025-10-10 01:35:14 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

分类首页前端渲染完成

Browse Source
This commit is contained in:
小墨
2022-04-02 22:30:07 +08:00
parent 60b76089e0
commit 26c4e1c55f
3 changed files with 155 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
bookshelfplus-frontend/views/category.html
View File

@@ -2,41 +2,116 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%- include("./component/header.html"); %>
<style>
.main {
width: 70vw !important;
max-width: initial !important;
}
#result-table {
width: 100%;
/* border: 1px solid black; */
margin-top: 30px;
line-height: 2.3em;
}
tr:hover {
background-color: #f5f5f5;
}
tr > th:last-child,
tr > td:last-child {
border-left: 2px dashed;
}
tr > th {
border-bottom: 2px dotted;
}
tr a {
cursor: pointer;
/* cursor: alias; */
}
@media (max-width: 700px) {
tr > th:last-child,
tr > td:last-child {
display: none;
}
}
</style>
</head>
<body>
<%- include("./component/navbar.html"); %>
<main class="main">
<h1><%= title %></h1>
<div id="container">
<!-- <a href="./book">书本详情页</a> -->
<table id="result-table"></table>
</div>
</main>
<%- include("./component/footer.html"); %>
<!-- 渲染表格 -->
<script src="/assets/javascripts/renderTable.js"></script>
<script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
<script>
getRequest("/category/list")
.then(function (response) {
var axiosData = response.data;
.then(function (responseData) {
var axiosData = responseData.data;
var status = axiosData.status;
var data = axiosData.data;
if (status === "success") {
// console.log("获取的分类信息");
console.log(data)
// if (data.description == "")
// data.description = "暂无描述";
// var topCategory = data.parentId !== 0 ? `<a href="/category?id=${data.parentId}">上级分类</a>` : "";
// document.getElementById("container").innerHTML = `
// <div class="grid">
// <div class="grid-item">
// <h1>${data.name}</h1>
// <p>分类ID: ${data.id}</p>
// <p>${topCategory}</p>
// </div>
// <div class="grid-item">
// <h2>简介</h2>
// <p>${data.description}</p>
// </div>
// </div>`;
var renderData = [];
// 按照列表渲染
// data.forEach(element => {
// var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
// var columnWidth = [60, 40];
// renderData.push({
// 分类名: ` <a target="_blank" href="/category?id=${element.id}">
// <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
// ${element.name}
// </span>
// </a>`,
// 简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
// ${element.description}
// </span>`,
// })
// });
// 按照层级关系进行渲染
// console.log("按照层级关系排列好之后");
hierarchyData = generateCategoryHierarchy(data);
function render(category) {
function renderCategory(category, renderData) {
var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
var columnWidth = [70, 30];
renderData.push({
分类名: ` <a target="_blank" href="/category?id=${category.id}">
<span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; text-align: left;">
${"&nbsp;".repeat((category.level-1)*8)}${category.name}
</span>
</a>`,
简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; text-align: left; text-indent: 1em;">
${category.description}
</span>`,
})
}
renderCategory(category, renderData);
// console.log("category", category)
for (let i = 0; i < category.children.length; i++)
render(category.children[i]);
}
render({ children: hierarchyData });
renderData.shift(); // 删除数组中的第一个元素
if(renderData.length == 0) {
renderTable({ data: `系统中暂时还没有书籍分类`, tableId: "result-table", renderTableHead: true });
} else {
renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
}
// 渲染后重新获取一次字体
fontmin(getPageText());