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

2025-09-22 01:30:40 +08:00 · 2022-03-15 21:11:28 +08:00
parent 328d9f0dd2
commit c6397dfa47
13 changed files with 223 additions and 81 deletions
--- a/bookshelfplus-frontend/views/about.html
+++ b/bookshelfplus-frontend/views/about.html
@@ -5,8 +5,8 @@
 </head>
 <body>
    <%- include("./component/navbar.html"); %>
-    <div class="main" align="center">
-        <h1>书栖网</h1>
+    <div class="main">
+        <h1>关于 · 书栖网</h1>
        <p>一个完全免费无门槛的计算机类电子书下载网站</p>

        <h2>随便唠唠</h2>
--- a/bookshelfplus-frontend/views/book.html
+++ b/bookshelfplus-frontend/views/book.html
@@ -2,20 +2,87 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <%- include("./component/header.html"); %>
+    <style>
+        .main {
+            width: 80vw !important;
+            max-width: initial !important;
+        }
+
+        #bookImage {
+            /* width: 100%; */
+            height: auto;
+            max-height: 300px;
+            margin-bottom: 20px;
+        }
+    </style>
 </head>
 <body>
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <h1><%= title %></h1>
        <div id="container">
+
        </div>
    </main>
    <%- include("./component/footer.html"); %>

+    <!-- 获取参数 -->
+    <script src="./assets/javascripts/getParams.js"></script>
    <script>
-        getRequest("/book/get", { id: 1 })
+        var requestParams = getParams();
+        var searchbox = document.getElementById("searchInput");
+        var bookId = Number(requestParams["id"]) ?? "";
+        if (bookId === "") {
+            location.href = "/search";
+        }
+    </script>
+    <script>
+        getRequest("/book/get", { id: bookId })
            .then(function (response) {
-                console.log(response.data);
+                var axiosData = response.data;
+                var status = axiosData.status;
+                var data = axiosData.data;
+                if (status === "success") {
+                    console.log(data)
+                    data.thumbnail = "https://img14.360buyimg.com/pop/jfs/t1/141705/31/25225/853702/61a85f89Ef68c838b/929ded96a4a7579e.png";
+                    if(data.description == ""){
+                        data.description = "暂无描述";
+                    }
+                    document.getElementById("container").innerHTML =`
+                    <div class="grid">
+                        <div class="grid-item">
+                            <img id="bookImage" src="${data.thumbnail}" alt="书籍缩略图">
+                        </div>
+                        <div class="grid-item">
+                            <h1>${data.bookName}</h1>
+                        </div>
+                        <div class="grid-item">
+                            <a href="/download/?bookId=${data.id}">下载这本书</a>
+                        </div>
+                        <div class="grid-item">
+                            <p>作者：${data.author}</p>
+                            <p>所属分类：<a href="/category?id=${data.category.id}">${data.category.name}</a></p>
+                            <p>语言：${data.language}</p>
+                            <p>出版社：${data.publishingHouse}</p>
+                            <p></p>
+                        </div>
+                    </div>
+                    <div>
+                        <h2>书本介绍</h2>
+                        <p>${data.description}</p>
+                        <h2>版权信息</h2>
+                        <p>${data.copyright}</p>
+                    </div>`;
+
+                    // 渲染后重新获取一次字体
+                    fontmin(getPageText());
+                }
+                else {
+                    alert(
+                        `查询失败
+                        错误码: ${data.errCode}
+                        错误信息: ${data.errMsg}`);
+                }
            }).catch(function (error) {
                console.log(error);
            });
--- a/bookshelfplus-frontend/views/component/footer.html
+++ b/bookshelfplus-frontend/views/component/footer.html
@@ -4,9 +4,15 @@
        书栖网 • 2021-2022
        <br>
        <small>
+            <br>
+            ❤️本项目是开源项目，项目的发展离不开大家的支持，欢迎前往项目仓库点亮Star支持我们❤️
+            <br>
+            <a target="_blank" href="https://gitee.com/bookshelfplus/bookshelfplus"><img src="./assets/image/svg/gitee.svg" style="height: 1.05em; vertical-align: middle;"/><span style="vertical-align: middle; margin-left: 3px;">码云</span></a>
+            ·
+            <a target="_blank" href="https://github.com/bookshelfplus/bookshelfplus"><img src="./assets/image/svg/github.svg" style="height: 1.08em; vertical-align: middle;"/><span style="vertical-align: middle; margin-left: 3px;">GitHub</span></a>
+            <br>
            <a href="/status">网站状态检测</a>
        </small>
-
    </p>
 </div>

@@ -43,7 +49,7 @@

    $(document).ready(function () {
        var allText = getPageText();
-        console.log(allText);
+        // console.log(allText);
        fontmin(allText);
    });
 </script>
--- a/bookshelfplus-frontend/views/component/header.html
+++ b/bookshelfplus-frontend/views/component/header.html
@@ -1,13 +1,14 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<title><%= title; %></title>

-<link rel="stylesheet" href="./assets/stylesheets/style.css">
-<script src="./assets/lib/jquery/3.6.0/jquery.min.js"></script>
-<script src="./assets/lib/axios/0.26.1/axios.min.js"></script>
+<title><%= typeof title !=='undefined' ? title : "前端服务出现异常"; %></title>

-<script src="./assets/javascripts/httpRequest.js"></script>
+<link rel="stylesheet" href="/assets/stylesheets/style.css">
+<script src="/assets/lib/jquery/3.6.0/jquery.min.js"></script>
+<script src="/assets/lib/axios/0.26.1/axios.min.js"></script>
+
+<script src="/assets/javascripts/httpRequest.js"></script>
 <script>
    // API地址
    const APIHOST = '<%= global.site.api.prefix %>';
--- a/bookshelfplus-frontend/views/component/searchbox.html
+++ b/bookshelfplus-frontend/views/component/searchbox.html
@@ -1,6 +1,7 @@
 <div class="searchBox">
-    <input id="searchInput" type="text" placeholder="只需两步：搜索、下载  就这么简单" />
-    <input id="searchButton" type="button" value="搜一下" />
+    <input id="searchInput" type="text" placeholder="只需两步：搜索、下载  就这么简单" /><!--
+
+    --><input id="searchButton" type="button" value="搜一下" />
 </div>
 <script>
    // /**
--- a/bookshelfplus-frontend/views/error.html
+++ b/bookshelfplus-frontend/views/error.html
@@ -5,9 +5,11 @@
 </head>
 <body>
    <%- include("./component/navbar.html"); %>
-    <h1><%= message %></h1>
-    <h2><%= error.status %></h2>
-    <pre><%= error.stack %></pre>
+    <div class="main">
+        <h1><%= message %></h1>
+        <h2><%= error.status %></h2>
+        <pre><%= error.stack %></pre>
+    </div>
    <%- include("./component/footer.html"); %>
 </body>
 </html>
--- a/bookshelfplus-frontend/views/search.html
+++ b/bookshelfplus-frontend/views/search.html
@@ -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>
--- a/bookshelfplus-frontend/views/status.html
+++ b/bookshelfplus-frontend/views/status.html
@@ -53,16 +53,5 @@
    </main>
    <%- include("./component/footer.html"); %>
    <script async="true" src="./assets/javascripts/siteStatus.js"></script>
-    <script>
-        // function checkTimeOff() {
-        //     var oldScriptDom = document.getElementById("timeCalibrationScript");
-        //     if (oldScriptDom) oldScriptDom.parentNode.removeChild(oldScriptDom);
-
-        //     oldScriptDom = document.createElement("script");
-        //     oldScriptDom.id = "timeCalibrationScript";
-        //     oldScriptDom.src = "./assets/javascripts/timeCalibration.js?" + Date.now() + "-" + new Date().getTime();
-        //     document.body.appendChild(oldScriptDom);
-        // }
-    </script>
 </body>
 </html>