页面调整，添加状态检测

bookshelfplus-frontend/views/component/footer.html

@@ -1,6 +1,13 @@
-<div class="footer">
+<div class="footer" style="margin-top: 10vh;">
     <hr>
-    <p>书栖网 • 2021-2022</p>
+    <p>
+        书栖网 • 2021-2022
+        <br>
+        <small>
+            <a href="/status">网站状态检测</a>
+        </small>
+
+    </p>
 </div>
 
 <!-- https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a -->
@@ -14,10 +21,7 @@
         return res;
     }
     function fontmin(text) {
-        // 设置post type
-        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-        // 接口地址
-        axios.post('/fontmin/getfont', { text: text, font: "" })
+        axios.post('../fontmin/getfont', { text: text, font: "" })
             .then(function (response) {
                 // 当接口成功返回时，动态设置css
                 let styleDom = document.createElement('style');

bookshelfplus-frontend/views/component/header.html

@@ -4,7 +4,15 @@
 <title><%= title; %></title>
 
 <link rel="stylesheet" href="./assets/stylesheets/style.css">
-<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> -->
 <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/lib/axios/0.20.0/axios.min.js"></script>
+<script src="./assets/javascripts/httpRequest.js"></script>
+<script>
+    // API地址
+    const APIHOST = '<%= global.site.api.prefix %>';
+    axios.defaults.baseURL = APIHOST;
+
+    // 请求头 Content-Type
+    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+</script>

bookshelfplus-frontend/views/component/searchbox.html

@@ -0,0 +1,52 @@
+<div class="searchBox">
+    <input id="searchInput" type="text" placeholder="只需两步：搜索、下载  就这么简单" />
+    <input id="searchButton" type="button" value="搜一下" />
+</div>
+<script>
+    // /**
+    //  * 内容改变时并不会触发事件，但是在失去焦点的时候会触发。
+    //  */
+    // $("#inputid").change(function () {
+    //     console.log($(this).val());
+    // });
+    // /**
+    //  * 只要文本类容发生改变，就会触发该事件
+    //  */
+    // $("#inputid").bind("input propertychange", function () {
+    //     console.log($(this).val());
+    // });
+
+    // // 搜索框文字改变事件（实时）
+    // $("#searchInput").bind("input propertychange", function () {
+    //     if ($('#searchInput').val() !== "")
+    //         $('#searchInput').val("这个功能还没做呢，再等等吧");
+    // });
+
+    // 搜索框获得焦点事件
+    $('#searchInput').focus(() => {
+        // $('#searchInput').val("");
+        $('#searchInput').attr('placeholder', "在这里输入您想搜索的电子书吧")
+    })
+
+    // 搜索框失去焦点事件
+    $('#searchInput').blur((that) => {
+        // $('#searchInput').val("");
+        $('#searchInput').attr('placeholder', "只需两步：搜索、下载  就这么简单")
+    })
+
+    // 文本框回车事件
+    $('#searchInput').keydown(function (e) {
+        var curKey = e.which;
+        if (curKey == 13) {
+            $("#searchButton").click();
+            return false;
+        }
+    });
+
+    // 搜索按钮点击事件
+    $('#searchButton').click(function () {
+        if ($('#searchInput').val() !== "") {
+            location.href = "search?keyword=" + encodeURIComponent($('#searchInput').val());
+        }
+    });
+</script>