完成书名搜索功能

bookshelfplus-frontend/public/assets/stylesheets/style.css

@@ -105,7 +105,7 @@ hr {
 
 /* 搜索框 */
 .searchBox #searchInput {
-  padding: 0 10px;
+  /* padding: 0 10px; */
   width: 300px;
   width: min(70vw, 280px);
   height: 30px;
@@ -116,9 +116,12 @@ hr {
 
   border: none;
   border-bottom: 1px solid #ccc;
-  padding: 0.5em;
+  /* padding: 0.5em; */
   font-size: 1em;
   outline: none;
+
+  padding-bottom: 0.2em;
+  /* text-align: center; */
 }
 
 .searchBox #searchInput:focus {
@@ -128,6 +131,8 @@ hr {
 
   border: 1px solid rgb(133, 133, 133);
   border-radius: 3px;
+
+  /* text-align: left; */
 }
 
 .searchBox #searchButton {

bookshelfplus-frontend/views/component/searchbox.html

@@ -48,8 +48,9 @@
     $('#searchButton').click(function () {
         var searchBoxValue = $('#searchInput').val();
         if (!searchBoxValue || searchBoxValue.trim() == "") {
-            alert("请输入搜索内容");
-            return;
+            // alert("请输入搜索内容");
+            // return;
+            window.location.href = "./search";
         }
         window.location.href = "./search?keyword=" + encodeURIComponent(searchBoxValue.trim());
     });

bookshelfplus-frontend/views/search.html

@@ -52,7 +52,7 @@
         }
 
         function search(searchboxValue) {
-            getRequest("/book/search", { bookName: encodeURIComponent(searchboxValue) })
+            getRequest("/book/search", { bookName: searchboxValue })
                 .then(function (responseData) {
                     var axiosData = responseData.data;
                     var status = axiosData.status;
@@ -66,12 +66,12 @@
                             var mainDivWidth = 80/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
                             var columnWidth = [23, 17, 30, 10, 20];
                             renderData.push({
-                                书名: ` <a href="/book?id=${element.category.id}">
+                                书名: ` <a target="_blank" 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}">
+                                分类: ` <a target="_blank" 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>
@@ -89,7 +89,7 @@
                         });
 
                         if(renderData.length == 0) {
-                            renderTable({ data: "没有搜索到相关书籍", tableId: "result-table", renderTableHead: true });
+                            renderTable({ data: `没有搜索到与 <span style="color: red;">${searchboxValue}</span> 相关的书籍，请换个关键词再试试吧`, tableId: "result-table", renderTableHead: true });
                         } else {
                             renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
                         }