后台表单控件渲染功能初步完成；关于从导航栏挪到页脚；分类首页和分类详情后台分离

bookshelfplus-frontend/public/assets/javascripts/dashboard/admin/BookManage.js

@@ -0,0 +1,130 @@
+function getControlsProfile() {
+    return [
+        {
+            // 必填
+            "tag": "input",
+            "attr": {
+                // 可选
+                "id": "",
+                "name": "", // 用于 POST 提交
+                "class": "",
+                "style": "",
+                "placeholder": "电子书的名称",
+            },
+            "label": {
+                "value": "书本名称",
+            },
+            "required": true, // 是否必填
+
+            // 可选
+            innerHTML: "",
+
+            "validate": function (value) {
+                var result = true, msg = "";
+                if (validateUtils.isEmpty(value)) {
+                    result = false;
+                    msg = "不能为空";
+                }
+                return { result: result, msg: msg };
+            }
+        },
+        {
+            // 必填
+            "tag": "input",
+            "attr": {
+                // 可选
+                "id": "",
+                "name": "", // 用于 POST 提交
+                "class": "",
+                "style": "",
+                "placeholder": "电子书的作者",
+            },
+            "label": {
+                "value": "作者姓名",
+            },
+            "required": true, // 是否必填
+
+            // 可选
+            innerHTML: "",
+
+            "validate": function (value) {
+                var result = true, msg = "";
+                if (validateUtils.isEmpty(value)) {
+                    result = false;
+                    msg = "不能为空";
+                }
+                return { result: result, msg: msg };
+            }
+        },
+        {
+            // 必填
+            "tag": "textarea",
+            "attr": {
+                // 可选
+                "id": "",
+                "name": "", // 用于 POST 提交
+                "class": "",
+                "style": "height:100px;",
+                "placeholder": "电子书的简介",
+            },
+            "label": {
+                "value": "书籍简介",
+            },
+            "required": false, // 是否必填
+
+            // 可选
+            innerHTML: "",
+
+            "validate": function (value) {
+                var result = true, msg = "";
+                if (validateUtils.isEmpty(value)) {
+                    result = false;
+                    msg = "不能为空";
+                }
+                return { result: result, msg: msg };
+            }
+        },
+        {
+            // 必填
+            "tag": "select",
+            "attr": {
+                // 可选
+                "id": "",
+                "name": "", // 用于 POST 提交
+                "class": "",
+                "style": "",
+            },
+            "label": {
+                "value": "书籍简介",
+            },
+            "required": true, // 是否必填
+
+            // 可选
+            "children": [
+                {
+                    "tag": "option",
+                    "attr": { "value": "1" },
+                    "innerHTML": "选项1",
+                },
+                {
+                    "tag": "option",
+                    "attr": { "value": "2" },
+                    "innerHTML": "选项2",
+                },
+            ],
+
+            "validate": function (value) {
+                var result = true, msg = "";
+                if (validateUtils.isEmpty(value)) {
+                    result = false;
+                    msg = "不能为空";
+                }
+                return { result: result, msg: msg };
+            }
+        },
+    ];
+}
+
+function getSubmitButtonValue() {
+    return "提交";
+}

bookshelfplus-frontend/public/assets/javascripts/dashboard/getValidateUtils.js

@@ -0,0 +1,49 @@
+// 表单验证基本函数
+function getValidateUtils() {
+    var validateUtils = {
+        // 验证是否为空
+        isEmpty: function (value) {
+            return value === undefined || value === null || value === '';
+        },
+        // 验证是否为数字
+        isNumber: function (value) {
+            return !isNaN(value);
+        },
+        // 验证是否为整数
+        isInteger: function (value) {
+            return this.isNumber(value) && parseInt(value) === value;
+        },
+        // 验证是否为正整数
+        isPositiveInteger: function (value) {
+            return this.isInteger(value) && value > 0;
+        },
+        // 验证是否为对象
+        isObject: function (value) {
+            return typeof value === 'object';
+        },
+        // 验证是否为数组
+        isArray: function (value) {
+            return Array.isArray(value);
+        },
+        // 验证是否为字符串
+        isString: function (value) {
+            return typeof value === 'string';
+        },
+        // 验证是否为布尔值
+        isBoolean: function (value) {
+            return typeof value === 'boolean';
+        },
+        // 验证是否为函数
+        isFunction: function (value) {
+            return typeof value === 'function';
+        },
+        // 验证是否为日期
+        isDate: function (value) {
+            return value instanceof Date;
+        },
+        // 验证是否为正则表达式
+        isRegExp: function (value) {
+            return value instanceof RegExp;
+        },
+    };
+}

bookshelfplus-frontend/public/assets/javascripts/dashboard/renderFormControls.js

@@ -0,0 +1,93 @@
+// 需要先引入 ./utils/getValidateUtils.js
+var validateUtils = getValidateUtils();
+
+// #######################################################
+// 渲染元素
+// #######################################################
+function renderElements(control) {
+    var element = document.createElement(control.tag);
+
+    // 为元素添加属性
+    Object.keys(control.attr).forEach((key, index) => {
+        var value = control.attr[key];
+        element.setAttribute(key, value);
+    });
+
+    // 如果设置了 innerHTML 属性，则添加 innerHTML 属性
+    if (Object.keys(control).indexOf('innerHTML') > -1) {
+        element.innerHTML = control.innerHTML;
+    }
+
+    // 如果有 children 属性，则递归渲染 children
+    if (Object.keys(control).indexOf('children') > -1) {
+        control.children.forEach(function (child) {
+            var childElement = renderElements(child);
+            element.appendChild(childElement);
+        });
+    }
+    return element;
+}
+
+// #######################################################
+// 渲染表单对象
+// #######################################################
+function renderFormControls({ Controls = [] }) {
+    console.log(Controls);
+
+    var controlList = [];
+    Controls.forEach(function (control) {
+        if (Object.keys(control).indexOf('tag') === -1 || Object.keys(control).indexOf('attr') === -1) {
+            console.log("元素渲染出错");
+            return;
+        }
+
+        // #########################################
+        // 创建元素对象
+        // #########################################
+        var element = renderElements(control);
+
+        // 为 element 添加 "form-elements" class，以便点击提交时可以获取到表单元素，进行批量处理
+        element.classList.add("form-elements");
+
+        // #########################################
+        // 创建元素label
+        // #########################################
+        var label = document.createElement("label");
+        label.innerHTML = control.label.value;
+        label.setAttribute("for", control.attr.id);
+
+        label.innerHTML += `<span style='color: red; user-select: none;'> ${control.required ? '*' : '&nbsp;'}</span>`
+
+        // 为 element 添加 "form-elements" class，以便点击提交时可以获取到表单元素，进行批量处理
+        label.classList.add("form-labels");
+
+        // #########################################
+        // 返回结果
+        // #########################################
+        controlList.push({
+            label: label,
+            control: element
+        });
+    });
+    // console.log(controlList);
+    return controlList;
+}
+
+// #######################################################
+// 提交表单
+// #######################################################
+function formSubmit({
+    type = 'POST',
+    url = '',
+    data = {},
+    success = (response) => { console.log(response) },
+    error = (error) => { console.log(error) }
+}) {
+    $.ajax({
+        type: type,
+        url: url,
+        data: data,
+        success: success,
+        error: error
+    });
+}

bookshelfplus-frontend/routes/index.js

@@ -15,9 +15,18 @@ router.get('/search', function (req, res) {
 });
 
 router.get('/category', function (req, res) {
-    res.render('category', {
-        title: "书籍分类"
-    });
+    console.log(req)
+    if (req.query.id) {
+        // 分类详情页
+        res.render('category-details', {
+            title: "书籍分类"
+        });
+    } else {
+        // 分类首页
+        res.render('category', {
+            title: "书籍分类"
+        });
+    }
 });
 
 router.get('/book', function (req, res) {
@@ -81,7 +90,9 @@ router.get('/dashboard/:group/:page', function (req, res) {
     if (req.params.page == "index") {
         res.render(`dashboard/${req.params.group}/index`, {
             title: "后台管理",
-            links: navbarLinks
+            links: navbarLinks,
+            group: req.params.group,
+            page: req.params.page,
         });
         return;
     }
@@ -92,6 +103,7 @@ router.get('/dashboard/:group/:page', function (req, res) {
         res.render(`dashboard/${req.params.group}/manage`, {
             title: req.params.group === "admin" ? "后台管理" : "用户中心",
             links: navbarLinks,
+            group: req.params.group,
             page: req.params.page,
         });
         return;

bookshelfplus-frontend/views/about.html

@@ -25,7 +25,7 @@
         <hr>
         <p>也许你会问，为爱发电的话，高昂的运维费用怎么办？这个我没有办法给出肯定的回答，就像目前很多的开源项目作者一样，他们也被这个问题所困扰。但我可以肯定的告诉你，我们会尽一切力量来维持这个网站的运行，从服务器到下载地址，我们会尽量压缩成本。压缩成本意味着尽量使用免费或者低价的云服务，这同时意味着可能会让网站加载变慢甚至少数情况下加载不出来，我们会尽量在这二者之间找到一个平衡点。
         </p>
-        <p>在网站的后续运营过程中，我们将主要使用网盘分享链接的形式进行分享，但由于网盘分享链接极其容易失效，所以部分情况下我们会为压缩包设置密码。若压缩包有密码，一律为：<u>bookshelf.plus</u>。</p>
+        <p>在网站的后续运营过程中，我们将主要使用网盘分享链接的形式进行分享，但由于网盘分享链接极其容易失效，所以部分情况下我们会为压缩包设置密码。若压缩包有密码，一律为：<u>bookshelf.plus</u></p>
         <p>但在网站的细节方面，我们绝对会将用户体验放在第一位，该有的通通都给安排上。</p>
         <hr>
         <p>最后，还是要说一下版权的问题。我们十分重视版权。我们所整理的电子书全部来自于互联网，其中部分来自于下载站、公众号等。如果其中包含您的作品，且您不希望我们将您的作品作为免费分享出来，请联系<span>contact@only4.work</span>并提供相应证明材料，我们核实后将会第一时间删除。同时，您在本网站上下载的所有电子书文件，仅供学习交流使用，不可二次传播，特别是不可设置扫码关注等门槛二次分享。

bookshelfplus-frontend/views/category-details.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <%- include("./component/header.html"); %>
+</head>
+<body>
+    <%- include("./component/navbar.html"); %>
+    <main class="main">
+        <!-- <h1><%= title %></h1> -->
+        <div id="container">
+            <!-- <a href="./book">书本详情页</a> -->
+        </div>
+    </main>
+    <%- include("./component/footer.html"); %>
+
+    <!-- 获取参数 -->
+    <script src="/assets/javascripts/getParams.js"></script>
+    <script>
+        var requestParams = getParams();
+        var searchbox = document.getElementById("searchInput");
+        var categoryId = requestParams["id"] ?? "";
+        console.log("categoryId", categoryId);
+        if (categoryId === "") {
+            location.href = "/search";
+        }
+    </script>
+    <script>
+        getRequest("/category/get", { id: categoryId })
+            .then(function (response) {
+                var axiosData = response.data;
+                var status = axiosData.status;
+                var data = axiosData.data;
+                if (status === "success") {
+                    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>`;
+
+                    // 渲染后重新获取一次字体
+                    fontmin(getPageText());
+                } else {
+                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                }
+            }).catch(function (error) {
+                console.log(error);
+            });
+    </script>
+</body>
+</html>

bookshelfplus-frontend/views/category.html

@@ -6,7 +6,7 @@
 <body>
     <%- include("./component/navbar.html"); %>
     <main class="main">
-        <!-- <h1><%= title %></h1> -->
+        <h1><%= title %></h1>
         <div id="container">
             <!-- <a href="./book">书本详情页</a> -->
         </div>
@@ -16,46 +16,47 @@
     <!-- 获取参数 -->
     <script src="/assets/javascripts/getParams.js"></script>
     <script>
-        var requestParams = getParams();
-        var searchbox = document.getElementById("searchInput");
-        var categoryId = Number(requestParams["id"]) ?? "";
-        if (categoryId === "") {
-            location.href = "/search";
-        }
+        // var requestParams = getParams();
+        // var searchbox = document.getElementById("searchInput");
+        // var categoryId = requestParams["id"] ?? "";
+        // console.log("categoryId", categoryId);
+        // if (categoryId === "") {
+        //     location.href = "/search";
+        // }
     </script>
     <script>
-        getRequest("/category/get", { id: categoryId })
-            .then(function (response) {
-                var axiosData = response.data;
-                var status = axiosData.status;
-                var data = axiosData.data;
-                if (status === "success") {
-                    console.log(data)
-                    if (data.description == "")
-                        data.description = "暂无描述";
+        // getRequest("/category/get", { id: categoryId })
+        //     .then(function (response) {
+        //         var axiosData = response.data;
+        //         var status = axiosData.status;
+        //         var data = axiosData.data;
+        //         if (status === "success") {
+        //             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 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>`;
 
-                    // 渲染后重新获取一次字体
-                    fontmin(getPageText());
-                } else {
-                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
-                }
-            }).catch(function (error) {
-                console.log(error);
-            });
+        //             // 渲染后重新获取一次字体
+        //             fontmin(getPageText());
+        //         } else {
+        //             alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+        //         }
+        //     }).catch(function (error) {
+        //         console.log(error);
+        //     });
     </script>
 </body>
 </html>

bookshelfplus-frontend/views/component/footer.html

@@ -12,6 +12,8 @@
             <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>
+            ·
+            <a class="narrowHide" href="/about">关于</a>
         </small>
     </p>
 </div>

bookshelfplus-frontend/views/component/navbar.html

@@ -9,9 +9,8 @@
         <div class="grid-item exnarrowHide" style="text-align: right; color: white;">
             <a class="home narrowHide" href="/">首页</a>
             <a href="/search">搜索</a>
-            <a href="/category">分类</a>
-            <a class="narrowHide" href="/about">关于</a>
-            <a class="narrowHide" href="/login">登录</a>
+            <a class="narrowHide" href="/category">分类</a>
+            <a href="/login">登录</a>
         </div>
         <div class="grid-item"></div>
     </div>
@@ -29,13 +28,13 @@
         }
 
         //其他页面
-        console.log("page:", page);
+        // console.log("page:", page);
         $("a").toArray().forEach(element => {
             var linkRoute = element.getAttribute("href").split('/').filter(s=>!!s);
-            console.log(element.href, linkRoute);
+            // console.log(element.href, linkRoute);
             if(linkRoute.length > 0) {
                 var linkPage = linkRoute[linkRoute.length-1];
-                console.log(element, linkPage);
+                // console.log(element, linkPage);
                 if(page == linkPage) {
                     $(element).addClass("active");
                     return;

bookshelfplus-frontend/views/dashboard/admin/index.html

@@ -1,17 +1,48 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
     <%- include("../component/header.html"); %>
     <%- include("../component/header-admin.html"); %>
+    <style>
+        #container {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 30px;
+            place-items: center;
+            margin-top: 40px;
+        }
+        .mainNav {
+            vertical-align: middle;
+            margin: 0 8px;
+
+            transition: 0.26s;
+        }
+        .mainNav:hover {
+            color: #fff;
+            background-color: black;
+            padding: 5px 8px;
+            border-radius: 4px;
+            transform: scale(1.2);
+        }
+    </style>
 </head>
+
 <body>
     <%- include("../component/navbar.html"); %>
     <main class="main">
-        <h1><%= title %></h1>
+        <h1>
+            <%= title %>
+        </h1>
         <div id="container">
-
+            <% links.forEach(item=> { %>
+            <nobr>
+                <a class="mainNav" href="<%= item.url %>"><%= item.name %></a>
+            </nobr>
+            <% }); %>
         </div>
     </main>
     <%- include("../component/footer-admin.html"); %>
 </body>
+
 </html>

bookshelfplus-frontend/views/dashboard/admin/manage.html

@@ -3,17 +3,79 @@
 <head>
     <%- include("../component/header.html"); %>
     <%- include("../component/header-admin.html"); %>
+    <style>
+        #container-controls {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: 20px;
+            place-items: center right;
+        }
+        #container-controls > .form-labels {
+            font-size: 1.05em;
+            font-family: cursive;
+        }
+        #container-controls > .form-elements {
+            /* grid-column: 1; */
+            height: 30px;
+            width: 100%;
+            font-size: 18px;
+        }
+        #container-submit {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            padding: 0 30%;
+            margin-top: 30px;
+        }
+        .btn {
+            height: 30px;
+        }
+    </style>
 </head>
 <body>
     <%- include("../component/navbar.html"); %>
     <main class="main">
         <h1><%= title %></h1>
+        <p><%= page %></p>
         <div id="container">
-            <div>
-                <%= typeof title !=='undefined' ? page : "出错啦"; %>
+            <div id="container-controls">页面加载中，请稍候 ...</div>
+            <div id="container-submit">
+                <button class="btn" id="btn-submit">提交</button>
+                <button class="btn" id="btn-clear">清空</button>
             </div>
         </div>
     </main>
     <%- include("../component/footer-admin.html"); %>
+    <!-- 验证组件用户输入值 -->
+    <script src="/assets/javascripts/dashboard/getValidateUtils.js"></script>
+    <!-- 渲染组件 & 提交表单方法 -->
+    <script src="/assets/javascripts/dashboard/renderFormControls.js"></script>
+    <!-- 引入对应页面渲染配置 -->
+    <script src="/assets/javascripts/dashboard/<%=group%>/<%=page%>.js"></script>
+    <!-- 进行渲染 -->
+    <script>
+        var group = '<%=group%>';
+        var page = '<%=page%>';
+        var title = '<%=title%>';
+
+        // 获取将要渲染的 Controls
+        var controlsProfile = getControlsProfile();
+
+        // 渲染控件
+        var formControls = renderFormControls({ Controls: controlsProfile });
+        console.log(formControls);
+
+        // 将控件填充到网页上
+        var containerControls = document.getElementById('container-controls');
+        containerControls.innerHTML = "";
+        formControls.forEach(function(item){
+            let Control
+            containerControls.appendChild(item.label);
+            containerControls.appendChild(item.control);
+        });
+
+        // 更新提交按钮显示名称
+        document.getElementById("btn-submit").innerHTML = "提交";
+    </script>
 </body>
 </html>

bookshelfplus-frontend/views/dashboard/component/header.html

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