后台实现二级分类

bookshelfplus-frontend/routes/index.js

@@ -71,7 +71,7 @@ router.get('/callback/:platform', function (req, res) {
     });
 });
 
-router.get('/dashboard/:group/:page', function (req, res) {
+router.get('/dashboard/:group/:page/:subpage?', function (req, res) {
 
     // baseTemplate 基于哪个html模板渲染页面
     // pageTemplate 引入这个文件中的页面脚本
@@ -81,27 +81,34 @@ router.get('/dashboard/:group/:page', function (req, res) {
                 title: "仪表盘",
                 baseTemplate: "index",
             },
-            "BookManage": {
+            "book-manage": {
                 title: "书籍管理",
-                baseTemplate: "form",
+                baseTemplate: "blank",
                 pageTemplate: "BookManage",
+                childPage: {
+                    "add": {
+                        title: "添加书籍",
+                        baseTemplate: "form",
+                        pageTemplate: "BookManage_Add",
+                    },
+                }
             },
-            "CategoryManage": {
+            "category-manage": {
                 title: "分类管理",
                 baseTemplate: "form",
                 pageTemplate: "CategoryManage",
             },
-            "UserManage": {
+            "user-manage": {
                 title: "用户管理",
                 baseTemplate: "form",
                 pageTemplate: "UserManage",
             },
-            "Account": {
+            "account": {
                 title: "账号设置",
                 baseTemplate: "blank",
                 pageTemplate: "Account",
             },
-            "Debug": {
+            "debug": {
                 title: "调试",
                 baseTemplate: "blank",
                 pageTemplate: "Debug",
@@ -114,17 +121,17 @@ router.get('/dashboard/:group/:page', function (req, res) {
                 title: "仪表盘",
                 baseTemplate: "index",
             },
-            // "myBookshelf": {
+            // "my-bookshelf": {
             //     title: "我的书架",
             //     baseTemplate: "form",
             //     pageTemplate: "myBookshelf",
             // },
-            "myCollection": {
+            "my-collection": {
                 title: "我的收藏",
                 baseTemplate: "blank",
                 pageTemplate: "myCollection",
             },
-            "myAccount": {
+            "my-account": {
                 title: "账号设置",
                 baseTemplate: "blank",
                 pageTemplate: "myAccount",
@@ -133,61 +140,54 @@ router.get('/dashboard/:group/:page', function (req, res) {
         var headText = "用户中心";
     }
 
+    // function isChildPage(page) {
+    //     console.log(page);
+    //     // 查找 dashboardPage 中每一项的 childPage 字段，并与 page 比较
+    //     for (var key in dashboardPage) {
+    //         console.log(key);
+    //         if (dashboardPage[key].childPage && dashboardPage[key].childPage[page]) {
+    //             return true;
+    //         }
+    //     }
+    //     return false;
+    // }
+
+    console.log("req.params.page\t\t" + req.params.page)
+    console.log("req.params.subpage\t" + req.params.subpage)
+    // 如果请求的页面在 dashboardPage 中
     if (Object.keys(dashboardPage).indexOf(req.params.page) > -1) {
+        // 当前请求的页面
         var currentPage = dashboardPage[req.params.page];
-        res.render(`dashboard/${currentPage.baseTemplate}`, {
-            htmlTitle: getPageTitle(headText),
-            title: currentPage.title,
-            pageTemplate: "./" + req.params.group + "/" + currentPage.pageTemplate + ".html",
-            dashboardPage: dashboardPage,
-            group: req.params.group,
-            page: req.params.page,
-        });
-        return;
-    }
-    throw new Error("404 Not Found");
 
-    // 仪表盘
-    if (req.params.page == "index") {
-        res.render(`dashboard/${req.params.group}/index`, {
-            title: title,
-            headText: headText,
-            headSubTextArr: {},
-            links: navbarLinks,
-            group: req.params.group,
-            page: req.params.page,
-        });
-        return;
-    }
-
-    // 后台管理 新增或者修改页面
-    if ((req.params.group === "admin" && ["UserManage", "BookManage", "CategoryManage", "Debug"].indexOf(req.params.page) > -1) ||
-        (req.params.group === "user" && ["myBookshelf", "myCollection"].indexOf(req.params.page) > -1)) {
-        res.render(`dashboard/${req.params.group}/manage`, {
-            title: title,
-            headSubTextArr: headSubTextArr,
-            links: navbarLinks,
-            group: req.params.group,
-            page: req.params.page,
-            // 引入Scripts
-            generateCategoryHierarchy: ["BookManage", "CategoryManage"].indexOf(req.params.page) > -1
-        });
-        return;
-    }
-
-    // 后台管理 其他管理页面
-    if ((req.params.group === "admin" && [].indexOf(req.params.page) > -1) ||
-        (req.params.group === "user" && ["myAccount"].indexOf(req.params.page) > -1)) {
-        res.render(`dashboard/${req.params.group}/${req.params.page}`, {
-            title: title,
-            headSubTextArr: headSubTextArr,
-            links: navbarLinks,
-            group: req.params.group,
-            page: req.params.page,
-        });
+        // 如果请求的就是主页面，或者当前页没有子页面，则渲染主页面
+        if (!req.params.subpage || !currentPage.childPage || Object.keys(currentPage.childPage).indexOf(req.params.subpage) === -1) {
+            console.log("page");
+            res.render(`dashboard/${currentPage.baseTemplate}`, {
+                htmlTitle: getPageTitle(headText),
+                title: currentPage.title,
+                pageTemplate: "./" + req.params.group + "/" + currentPage.pageTemplate + ".html",
+                dashboardPage: dashboardPage,
+                group: req.params.group,
+                page: req.params.page,
+            });
+        } else {
+            // 如果当前 page 有 subpage，则渲染子页面
+            var currentSubPage = currentPage.childPage[req.params.subpage];
+            console.log("subpage");
+            res.render(`dashboard/${currentSubPage.baseTemplate}`, {
+                htmlTitle: getPageTitle(headText),
+                title: currentSubPage.title,
+                pageTemplate: "./" + req.params.group + "/" + currentSubPage.pageTemplate + ".html",
+                dashboardPage: dashboardPage,
+                group: req.params.group,
+                page: req.params.page,
+                subpage: req.params.subpage
+            });
+        }
         return;
     }
 
+    // 如果请求的页面不在 dashboardPage 中，则渲染错误页面
     throw new Error("404 Not Found");
 });
 

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

@@ -1,241 +1,3 @@
-<!-- 是否连续录入复选框 -->
-<p style="text-align: center;">
-    <input type="checkbox" id="isContinuous" checked="checked" />连续录入
-</p>
-<!-- 生成分类结构 -->
-<script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
-<script>
-    async function getControlsProfile() {
-    function btnSubmitClick() {
-        formSubmit({
-            type: 'POST',
-            url: '/book/add',
-            success: function (data) {
-                console.log(data);
-                alert("添加成功！");
-                if (document.getElementById("isContinuous").checked) {
-                    location.reload();
-                } else {
-                    // 回到书籍管理页
-                }
-            }
-        });
-    }
-
-    async function getControlsProfile(getValidateUtils) {
-        // 获取分类列表
-        var categoryOptions = [];
-
-        var responseData = await getRequest("/category/list");
-        var axiosData = responseData.data;
-        var status = axiosData.status;
-        var data = axiosData.data;
-        if (status === "success") {
-            // console.log(data)
-            hierarchyData = generateCategoryHierarchy(data);
-            console.log(hierarchyData);
-            function render(category) {
-                categoryOptions.push({
-                    "tag": "option",
-                    "attr": { "value": category.id },
-                    "innerHTML": `${"&nbsp;".repeat((category.level - 1) * 8)}${category.name}`,
-                })
-                for (let i = 0; i < category.children.length; i++)
-                    render(category.children[i]);
-            }
-            render({ children: hierarchyData });
-            categoryOptions.shift(); // 删除数组中的第一个元素
-        } else {
-            alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
-        }
-
-        console.log(categoryOptions);
-        return [
-            // 【模板】
-            // {
-            //     // 必填
-            //     "tag": "input",
-            //     "attr": {
-            //         // 可选
-            //         "id": "",
-            //         "name": "", // 用于 POST 提交
-            //         "class": "",
-            //         "style": "",
-            //         "placeholder": "电子书的名称",
-            //     },
-            //     "label": {
-            //         "value": "书本名称",
-            //     },
-            //     "required": true, // 是否必填
-
-            //     // 可选
-            //     "innerHTML": "",
-            //     "children": [
-            //         {
-            //             "tag": "option",
-            //             "attr": { "value": "1" },
-            //             "innerHTML": "选项1",
-            //         },
-            //         {
-            //             "tag": "option",
-            //             "attr": { "value": "2" },
-            //             "innerHTML": "选项2",
-            //         },
-            //     ],
-            //     "validate": function (value) {
-            //         var validate = validateUtils.setValue(value)
-            //             .validate.notNull(value, "书本名称不能为空，请输入书本名称")
-            //             .validate.notNull(value, "书本名称不能超过 50 个字符")
-            //             .validate.notNull(value, "书本名称不能包含特殊字符")
-            //             .result();
-            //         console.log(validate);
-
-            //         if (validateUtils.isEmpty(value)) {
-            //             result = false;
-            //             msg = "不能为空";
-            //         }
-            //         return { result: result, msg: msg };
-            //     }
-            // },
-            // 必须设置 id, name
-            // 只有设置了 id 才会使用 validate 校验取值
-            {
-                "tag": "input",
-                "attr": {
-                    "id": "bookName",
-                    "name": "bookName",
-                    "placeholder": "电子书的名称",
-                },
-                "label": {
-                    "value": "书本名称",
-                },
-                "required": true, // 是否必填
-                "innerHTML": "",
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notString("传入的值为非字符串类型")
-                    .notEmptyAfterTrim("书本名称不能为空，请输入书本名称")
-                    .length(0, 50, "书本名称不能超过 50 个字符")
-                    .isValid()
-            },
-            {
-                "tag": "input",
-                "attr": {
-                    "id": "author",
-                    "name": "author",
-                    "placeholder": "电子书的作者",
-                },
-                "label": {
-                    "value": "作者姓名",
-                },
-                "required": true, // 是否必填
-                "innerHTML": "",
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notString("传入的值为非字符串类型")
-                    .notEmpty("作者姓名不能为空")
-                    .length(0, 50, "作者姓名不能超过 50 个字符")
-                    .isValid()
-            },
-            {
-                "tag": "textarea",
-                "attr": {
-                    "id": "description",
-                    "name": "description",
-                    "style": "height:100px;",
-                    "placeholder": "电子书的简介",
-                },
-                "label": {
-                    "value": "书籍简介",
-                },
-                "required": false, // 是否必填
-                "innerHTML": "",
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notString("传入的值为非字符串类型")
-                    .length(0, 5000, "书籍简介不能超过 5000 个字符")
-                    .isValid()
-            },
-            {
-                "tag": "select",
-                "attr": {
-                    "id": "language",
-                    "name": "language",
-                    "placeholder": "书籍语言",
-                },
-                "label": {
-                    "value": "语言",
-                },
-                "required": true, // 是否必填
-                "children": [
-                    {
-                        "tag": "option",
-                        "attr": { "value": "Chinese" },
-                        "innerHTML": "中文",
-                    },
-                    {
-                        "tag": "option",
-                        "attr": { "value": "English" },
-                        "innerHTML": "英文",
-                    },
-                    {
-                        "tag": "option",
-                        "attr": { "value": "" },
-                        "innerHTML": "其他",
-                    },
-                ],
-                "innerHTML": "",
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notNull("书籍语言传入值错误")
-                    .isValid()
-            },
-            {
-                "tag": "input",
-                "attr": {
-                    "id": "publishingHouse",
-                    "name": "publishingHouse",
-                    "placeholder": "出版社",
-                },
-                "label": {
-                    "value": "出版社",
-                },
-                "required": true, // 是否必填
-                "innerHTML": "",
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notString("传入的值为非字符串类型")
-                    .notEmpty("出版社不能为空")
-                    .length(0, 50, "出版社不能超过 50 个字符")
-                    .isValid()
-            },
-            {
-                "tag": "input",
-                "attr": {
-                    "id": "copyright",
-                    "name": "copyright",
-                    "placeholder": "来源信息 & 版权信息",
-                },
-                "label": {
-                    "value": "来源(版权)",
-                },
-                "required": false, // 是否必填
-                "innerHTML": "",
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notNull("来源(版权)传入值错误")
-                    .isValid()
-            },
-            {
-                "tag": "select",
-                "attr": {
-                    "id": "categoryId",
-                    "name": "categoryId",
-                },
-                "label": {
-                    "value": "书籍分类",
-                },
-                "required": true, // 是否必填
-                "children": categoryOptions,
-                "validate": (val) => getValidateUtils().setValue(val)
-                    .notEmpty("请选择书籍分类")
-                    .notStringNumber("书籍分类传入值错误")
-                    .isValid()
-            },
-        ];
-    }
-</script>
+<p>
+    <a href="book-manage/add">添加书籍</a>
+</p>

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

@@ -0,0 +1,240 @@
+<!-- 是否连续录入复选框 -->
+<p style="text-align: center;">
+    <input type="checkbox" id="isContinuous" checked="checked" />连续录入
+</p>
+<!-- 生成分类结构 -->
+<script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
+<script>
+    function btnSubmitClick() {
+        formSubmit({
+            type: 'POST',
+            url: '/book/add',
+            success: function (data) {
+                console.log(data);
+                alert("添加成功！");
+                if (document.getElementById("isContinuous").checked) {
+                    location.reload();
+                } else {
+                    // 回到书籍管理页
+                }
+            }
+        });
+    }
+
+    async function getControlsProfile(getValidateUtils) {
+        // 获取分类列表
+        var categoryOptions = [];
+
+        var responseData = await getRequest("/category/list");
+        var axiosData = responseData.data;
+        var status = axiosData.status;
+        var data = axiosData.data;
+        if (status === "success") {
+            // console.log(data)
+            hierarchyData = generateCategoryHierarchy(data);
+            console.log(hierarchyData);
+            function render(category) {
+                categoryOptions.push({
+                    "tag": "option",
+                    "attr": { "value": category.id },
+                    "innerHTML": `${"&nbsp;".repeat((category.level - 1) * 8)}${category.name}`,
+                })
+                for (let i = 0; i < category.children.length; i++)
+                    render(category.children[i]);
+            }
+            render({ children: hierarchyData });
+            categoryOptions.shift(); // 删除数组中的第一个元素
+        } else {
+            alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+        }
+
+        console.log(categoryOptions);
+        return [
+            // 【模板】
+            // {
+            //     // 必填
+            //     "tag": "input",
+            //     "attr": {
+            //         // 可选
+            //         "id": "",
+            //         "name": "", // 用于 POST 提交
+            //         "class": "",
+            //         "style": "",
+            //         "placeholder": "电子书的名称",
+            //     },
+            //     "label": {
+            //         "value": "书本名称",
+            //     },
+            //     "required": true, // 是否必填
+
+            //     // 可选
+            //     "innerHTML": "",
+            //     "children": [
+            //         {
+            //             "tag": "option",
+            //             "attr": { "value": "1" },
+            //             "innerHTML": "选项1",
+            //         },
+            //         {
+            //             "tag": "option",
+            //             "attr": { "value": "2" },
+            //             "innerHTML": "选项2",
+            //         },
+            //     ],
+            //     "validate": function (value) {
+            //         var validate = validateUtils.setValue(value)
+            //             .validate.notNull(value, "书本名称不能为空，请输入书本名称")
+            //             .validate.notNull(value, "书本名称不能超过 50 个字符")
+            //             .validate.notNull(value, "书本名称不能包含特殊字符")
+            //             .result();
+            //         console.log(validate);
+
+            //         if (validateUtils.isEmpty(value)) {
+            //             result = false;
+            //             msg = "不能为空";
+            //         }
+            //         return { result: result, msg: msg };
+            //     }
+            // },
+            // 必须设置 id, name
+            // 只有设置了 id 才会使用 validate 校验取值
+            {
+                "tag": "input",
+                "attr": {
+                    "id": "bookName",
+                    "name": "bookName",
+                    "placeholder": "电子书的名称",
+                },
+                "label": {
+                    "value": "书本名称",
+                },
+                "required": true, // 是否必填
+                "innerHTML": "",
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notString("传入的值为非字符串类型")
+                    .notEmptyAfterTrim("书本名称不能为空，请输入书本名称")
+                    .length(0, 50, "书本名称不能超过 50 个字符")
+                    .isValid()
+            },
+            {
+                "tag": "input",
+                "attr": {
+                    "id": "author",
+                    "name": "author",
+                    "placeholder": "电子书的作者",
+                },
+                "label": {
+                    "value": "作者姓名",
+                },
+                "required": true, // 是否必填
+                "innerHTML": "",
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notString("传入的值为非字符串类型")
+                    .notEmpty("作者姓名不能为空")
+                    .length(0, 50, "作者姓名不能超过 50 个字符")
+                    .isValid()
+            },
+            {
+                "tag": "textarea",
+                "attr": {
+                    "id": "description",
+                    "name": "description",
+                    "style": "height:100px;",
+                    "placeholder": "电子书的简介",
+                },
+                "label": {
+                    "value": "书籍简介",
+                },
+                "required": false, // 是否必填
+                "innerHTML": "",
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notString("传入的值为非字符串类型")
+                    .length(0, 5000, "书籍简介不能超过 5000 个字符")
+                    .isValid()
+            },
+            {
+                "tag": "select",
+                "attr": {
+                    "id": "language",
+                    "name": "language",
+                    "placeholder": "书籍语言",
+                },
+                "label": {
+                    "value": "语言",
+                },
+                "required": true, // 是否必填
+                "children": [
+                    {
+                        "tag": "option",
+                        "attr": { "value": "Chinese" },
+                        "innerHTML": "中文",
+                    },
+                    {
+                        "tag": "option",
+                        "attr": { "value": "English" },
+                        "innerHTML": "英文",
+                    },
+                    {
+                        "tag": "option",
+                        "attr": { "value": "" },
+                        "innerHTML": "其他",
+                    },
+                ],
+                "innerHTML": "",
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notNull("书籍语言传入值错误")
+                    .isValid()
+            },
+            {
+                "tag": "input",
+                "attr": {
+                    "id": "publishingHouse",
+                    "name": "publishingHouse",
+                    "placeholder": "出版社",
+                },
+                "label": {
+                    "value": "出版社",
+                },
+                "required": true, // 是否必填
+                "innerHTML": "",
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notString("传入的值为非字符串类型")
+                    .notEmpty("出版社不能为空")
+                    .length(0, 50, "出版社不能超过 50 个字符")
+                    .isValid()
+            },
+            {
+                "tag": "input",
+                "attr": {
+                    "id": "copyright",
+                    "name": "copyright",
+                    "placeholder": "来源信息 & 版权信息",
+                },
+                "label": {
+                    "value": "来源(版权)",
+                },
+                "required": false, // 是否必填
+                "innerHTML": "",
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notNull("来源(版权)传入值错误")
+                    .isValid()
+            },
+            {
+                "tag": "select",
+                "attr": {
+                    "id": "categoryId",
+                    "name": "categoryId",
+                },
+                "label": {
+                    "value": "书籍分类",
+                },
+                "required": true, // 是否必填
+                "children": categoryOptions,
+                "validate": (val) => getValidateUtils().setValue(val)
+                    .notEmpty("请选择书籍分类")
+                    .notStringNumber("书籍分类传入值错误")
+                    .isValid()
+            },
+        ];
+    }
+</script>

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

@@ -6,7 +6,7 @@
                 <img src="/assets/image/svg/home.svg" style="width: 1em; height: 1em; transform: translateY(2px);" title="返回首页">
             </h1>
             <% Object.keys(dashboardPage).forEach(item => { %>
-                <a href="./<%= item %>" style="vertical-align: middle;"><%= dashboardPage[item].title %></a>
+                <a href="/dashboard/<%= group %>/<%= item %>" style="vertical-align: middle;"><%= dashboardPage[item].title %></a>
             <% }); %>
             <a href="javascript:logout();" style="color: grey; vertical-align: middle; float: right;">退出登录</a>
         </div>