前端添加渲染表格和获取Url参数相关代码，更新search搜索页

bookshelfplus-frontend/public/assets/javascripts/getParams.js

@@ -0,0 +1,8 @@
+function getParams() {
+    var params = {};
+    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
+        params[key] = decodeURIComponent(value);
+    });
+    return params;
+}
+getParams()

bookshelfplus-frontend/public/assets/javascripts/renderTable.js

@@ -0,0 +1,145 @@
+function renderTable({
+    tableId = "",
+    data,
+    renderTableHead = true,
+}) {
+    var tbodyHtml = "";
+    var theadHtml = "";
+
+    if (Array.isArray(data)) {
+        // 是数组
+        // 如果元素是数组 ["a", "b", "c"]，则数组的第一项作为表头
+
+        // 生成表格填充内容
+        for (var i = renderTableHead ? 1 : 0; i < data.length; i++) {
+            tbodyHtml += "<tr>";
+            for (var cell in data[i]) {
+                tbodyHtml += "<td>" + cell + "</td>";
+            }
+            tbodyHtml += "</tr>";
+        }
+
+        // 生成表头内容 (使用第一条数据)
+        if (renderTableHead) {
+            theadHtml += "<tr>";
+            for (var cell in data[0]) {
+                theadHtml += "<th>" + cell + "</th>";
+            }
+            theadHtml += "</tr>";
+        }
+
+    } else if (typeof data === "object") {
+        // 是字典
+        // 如果元素是字典 {a: "a", b: "b"}，则字典的key作为表头
+
+        // 生成表格填充内容
+        for (var i = 0; i < data.length; i++) {
+            tbodyHtml += "<tr>";
+            // for (var key in data[0]) {
+            for (var key in data[i]) {
+                tbodyHtml += "<td>" + data[i][key] + "</td>";
+            }
+            tbodyHtml += "</tr>";
+        }
+
+        // 生成表头内容 (以第一条数据的key为准)
+        if (renderTableHead) {
+            theadHtml += "<tr>";
+            for (var key in data[0]) {
+                theadHtml += "<th>" + key + "</th>";
+            }
+            theadHtml += "</tr>";
+        }
+    } else {
+        throw new DOMException("Failed to render table: data is not array or dictionary.");
+    }
+
+    // 获取table
+    var table = document.getElementById(tableId);
+    if (!table) {
+        table = document.createElement("table");
+        table.id = tableId;
+        // document.body.appendChild(oldScriptDom);
+    }
+    table.innerHTML = '';
+
+    // 获取tbody & 填充tbody
+    var tbody = document.createElement("tbody");
+    tbody.innerHTML = tbodyHtml;
+
+    if (!!renderTableHead) {
+        var thead = document.createElement("thead");
+        thead.innerHTML = theadHtml;
+        table.appendChild(thead);
+    }
+
+    // 填充table
+    table.appendChild(tbody);
+    return table;
+}
+
+// console.clear();
+
+// var data1 = [
+//     { a: "a1", b: "b1", c: "c1", },
+//     { c: "c2", a: "a2", b: "b2", },
+//     { a: "a3", c: "c3", b: "b3", }
+// ];
+
+// var data2 = [
+//     ["a1", "b1", "c1"],
+//     ["a1", "b1", "c1"],
+//     ["a1", "b1", "c1"],
+// ];
+
+// var table1 = renderTable({
+//     tableId: "table1",
+//     data: data1,
+//     renderTableHead: true,
+// });
+// document.body.appendChild(table1);
+
+// var table2 = renderTable({
+//     tableId: "table2",
+//     data: data2,
+//     renderTableHead: true,
+// });
+// document.body.appendChild(table2);
+
+// var table3 = renderTable({
+//     tableId: "table3",
+//     data: data1,
+//     renderTableHead: false,
+// });
+// document.body.appendChild(table3);
+
+// var table4 = renderTable({
+//     tableId: "table4",
+//     data: data2,
+//     renderTableHead: false,
+// });
+// document.body.appendChild(table4);
+
+// $('table').css('border', '1px solid red');
+
+/*
+表格结构：
+<table>
+    <thead>
+        <th>
+            <td>表头</td>
+        </th>
+    </thead>
+    <tbody>
+        <tr>
+            <td>表体</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <td>表脚</td>
+        </tr>
+    </tfoot>
+</table>
+
+*/

bookshelfplus-frontend/routes/index.js

@@ -38,6 +38,7 @@ router.get('/status', function (req, res) {
     });
 });
 
+// 网站状态检测Api接口
 router.get('/get-frontend-status', function (req, res) {
     res.end(JSON.stringify({ "server": "OK" }));
 });

bookshelfplus-frontend/views/component/searchbox.html

@@ -45,8 +45,11 @@
 
     // 搜索按钮点击事件
     $('#searchButton').click(function () {
-        if ($('#searchInput').val() !== "") {
-            location.href = "search?keyword=" + encodeURIComponent($('#searchInput').val());
+        var searchBoxValue = $('#searchInput').val();
+        if (!searchBoxValue || searchBoxValue.trim() == "") {
+            alert("请输入搜索内容");
+            return;
         }
+        window.location.href = "./search?keyword=" + encodeURIComponent(searchBoxValue);
     });
 </script>

bookshelfplus-frontend/views/search.html

@@ -2,14 +2,45 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <%- include("./component/header.html"); %>
+    <style>
+        #result-table {
+            width: 100%;
+            border: 1px solid black;
+            margin-top: 30px;
+        }
+    </style>
 </head>
 <body>
     <%- include("./component/navbar.html"); %>
-    <main class="main">
+    <div class="main">
         <h1><%= title %></h1>
+        <%- include("./component/searchbox.html"); %>
         <div id="container">
+            <table id="result-table"></table>
         </div>
-    </main>
+    </div>
     <%- include("./component/footer.html"); %>
+    <!-- 获取参数 -->
+    <script src="./assets/javascripts/getParams.js"></script>
+    <script>
+        var requestParams = getParams();
+        var searchbox = document.getElementById("searchInput");
+        searchbox.value = requestParams["keyword"];
+    </script>
+    <!-- 渲染表格 -->
+    <script src="./assets/javascripts/renderTable.js"></script>
+    <script>
+        var data1 = [
+            { a: "a1", b: "b1", c: "c1", },
+            { c: "c2", a: "a2", b: "b2", },
+            { a: "a3", c: "c3", b: "b3", }
+        ];
+
+        var table1 = renderTable({
+            tableId: "result-table",
+            data: data1,
+            renderTableHead: true,
+        });
+    </script>
 </body>
 </html>