管理员后台 添加书籍功能完成

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

@@ -32,7 +32,7 @@ function getValidateUtils() {
         },
 
         // 验证是否为空 或者为空字符串 或者 trim() 为空字符串
-        notEmpty: function (notValidMsg) {
+        notEmptyAfterTrim: function (notValidMsg) {
             let value = this.validateValue;
             if (value === null || value === undefined || value === "" || value.trim() === "") {
                 this.result = false;
@@ -41,6 +41,27 @@ function getValidateUtils() {
             return this;
         },
 
+        // 验证字符串长度
+        length: function (min, max, notValidMsg) {
+            let value = this.validateValue;
+            if (value.length < min || value.length > max) {
+                this.result = false;
+                this.msg.push(notValidMsg);
+            }
+            return this;
+        },
+
+        // 验证是否包含特殊字符
+        specialChar: function (notValidMsg) {
+            let value = this.validateValue;
+            let reg = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
+            if (reg.test(value)) {
+                this.result = false;
+                this.msg.push(notValidMsg);
+            }
+            return this;
+        },
+
         // 不是字符串
         notString: function (notValidMsg) {
             let value = this.validateValue;
@@ -61,6 +82,16 @@ function getValidateUtils() {
             return this;
         },
 
+        // 不是字符串类型的数字
+        notStringNumber: function (notValidMsg) {
+            let value = this.validateValue;
+            if ((typeof value !== "string" && typeof value !== "number") || isNaN(value)) {
+                this.result = false;
+                this.msg.push(notValidMsg);
+            }
+            return this;
+        },
+
         // 验证是否为整数
         notInteger: function (notValidMsg) {
             let value = this.validateValue;
@@ -72,10 +103,20 @@ function getValidateUtils() {
             return this;
         },
 
+        // 验证是否为字符串类型的整数
+        notStringInteger: function (notValidMsg) {
+            let value = this.validateValue;
+            if (typeof value !== "string" || isNaN(value) || value % 1 !== 0) {
+                this.result = false;
+                this.msg.push(notValidMsg);
+            }
+            return this;
+        },
+
         // 验证是否为正整数
         notPositiveInteger: function (notValidMsg) {
             let value = this.validateValue;
-            if (typeof value !== "number" || isNaN(value) || value % 1 !== 0 || value <= 0) {
+            if ((typeof value !== "string" && typeof value !== "number") || isNaN(value) || value % 1 !== 0 || value <= 0) {
                 this.result = false;
                 this.msg.push(notValidMsg);
             }
@@ -144,11 +185,13 @@ function getValidateUtils() {
         },
 
         // 返回结果
-        result: function () {
+        isValid: function () {
+            console.log("验证内容", this.validateValue, "验证结果", this.result, "错误信息", this.msg);
             return {
                 result: this.result,
-                msg: this.msg
+                msg: this.msg.join("；")
             }
         },
     };
+    return validateUtils;
 }

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

@@ -1,6 +1,3 @@
-// 需要先引入 ./utils/getValidateUtils.js
-var validateUtils = getValidateUtils();
-
 // #######################################################
 // 渲染元素
 // #######################################################
@@ -72,22 +69,3 @@ function renderFormControls({ Controls = [] }) {
     // 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/views/book.html

@@ -173,6 +173,9 @@
                             alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                         }
                     }
+                }).catch(function (error) {
+                    console.log(error);
+                    // alert("无法连接到服务器，请检查网络连接！");
                 }).finally(function () {
                     $("#favorties-button").css("visibility", "visible");
                 });
@@ -207,6 +210,9 @@
                     } else {
                         alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                     }
+                }).catch(function (error) {
+                    console.log(error);
+                    // alert("无法连接到服务器，请检查网络连接！");
                 }).finally(function () {
                     setTimeout(toggleDisplayButton, 500);
                 });

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

@@ -1,7 +1,28 @@
+<!-- 是否连续录入复选框 -->
+<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 = [];
 
@@ -76,12 +97,13 @@
             //         return { result: result, msg: msg };
             //     }
             // },
+            // 必须设置 id, name
+            // 只有设置了 id 才会使用 validate 校验取值
             {
                 "tag": "input",
                 "attr": {
-                    "name": "",
+                    "id": "bookName",
-                    "class": "",
+                    "name": "bookName",
-                    "style": "",
                     "placeholder": "电子书的名称",
                 },
                 "label": {
@@ -89,28 +111,17 @@
                 },
                 "required": true, // 是否必填
                 "innerHTML": "",
-                "validate": function (value) {
+                "validate": (val) => getValidateUtils().setValue(val)
-
+                    .notString("传入的值为非字符串类型")
-                    var validate = validateUtils.setValue(value)
+                    .notEmptyAfterTrim("书本名称不能为空，请输入书本名称")
-                        .validate.notNull(value, "书本名称不能为空，请输入书本名称")
+                    .length(0, 50, "书本名称不能超过 50 个字符")
-                        .validate.notNull(value, "书本名称不能超过 50 个字符")
+                    .isValid()
-                        .validate.notNull(value, "书本名称不能包含特殊字符")
-                        .result();
-                    console.log(validate);
-
-                    if (validateUtils.isEmpty(value)) {
-                        result = false;
-                        msg = "不能为空";
-                    }
-                    return { result: result, msg: msg };
-                }
             },
             {
                 "tag": "input",
                 "attr": {
-                    "name": "",
+                    "id": "author",
-                    "class": "",
+                    "name": "author",
-                    "style": "",
                     "placeholder": "电子书的作者",
                 },
                 "label": {
@@ -118,21 +129,17 @@
                 },
                 "required": true, // 是否必填
                 "innerHTML": "",
-                "validate": function (value) {
+                "validate": (val) => getValidateUtils().setValue(val)
-                    var result = true, msg = "";
+                    .notString("传入的值为非字符串类型")
-                    if (validateUtils.isEmpty(value)) {
+                    .notEmpty("作者姓名不能为空")
-                        result = false;
+                    .length(0, 50, "作者姓名不能超过 50 个字符")
-                        msg = "不能为空";
+                    .isValid()
-                    }
-                    return { result: result, msg: msg };
-                }
             },
             {
                 "tag": "textarea",
                 "attr": {
-                    "id": "",
+                    "id": "description",
-                    "name": "",
+                    "name": "description",
-                    "class": "",
                     "style": "height:100px;",
                     "placeholder": "电子书的简介",
                 },
@@ -141,22 +148,16 @@
                 },
                 "required": false, // 是否必填
                 "innerHTML": "",
-                "validate": function (value) {
+                "validate": (val) => getValidateUtils().setValue(val)
-                    var result = true, msg = "";
+                    .notString("传入的值为非字符串类型")
-                    if (validateUtils.isEmpty(value)) {
+                    .length(0, 5000, "书籍简介不能超过 5000 个字符")
-                        result = false;
+                    .isValid()
-                        msg = "不能为空";
-                    }
-                    return { result: result, msg: msg };
-                }
             },
             {
                 "tag": "select",
                 "attr": {
-                    "id": "",
+                    "id": "language",
-                    "name": "",
+                    "name": "language",
-                    "class": "",
-                    "style": "",
                     "placeholder": "书籍语言",
                 },
                 "label": {
@@ -181,21 +182,15 @@
                     },
                 ],
                 "innerHTML": "",
-                "validate": function (value) {
+                "validate": (val) => getValidateUtils().setValue(val)
-                    var result = true, msg = "";
+                    .notNull("书籍语言传入值错误")
-                    if (validateUtils.isEmpty(value)) {
+                    .isValid()
-                        result = false;
-                        msg = "不能为空";
-                    }
-                    return { result: result, msg: msg };
-                }
             },
             {
                 "tag": "input",
                 "attr": {
-                    "name": "",
+                    "id": "publishingHouse",
-                    "class": "",
+                    "name": "publishingHouse",
-                    "style": "",
                     "placeholder": "出版社",
                 },
                 "label": {
@@ -203,75 +198,44 @@
                 },
                 "required": true, // 是否必填
                 "innerHTML": "",
-                "validate": function (value) {
+                "validate": (val) => getValidateUtils().setValue(val)
-                    var result = true, msg = "";
+                    .notString("传入的值为非字符串类型")
-                    if (validateUtils.isEmpty(value)) {
+                    .notEmpty("出版社不能为空")
-                        result = false;
+                    .length(0, 50, "出版社不能超过 50 个字符")
-                        msg = "不能为空";
+                    .isValid()
-                    }
-                    return { result: result, msg: msg };
-                }
             },
             {
                 "tag": "input",
                 "attr": {
-                    "name": "",
+                    "id": "copyright",
-                    "class": "",
+                    "name": "copyright",
-                    "style": "",
+                    "placeholder": "来源信息 & 版权信息",
-                    "placeholder": "",
                 },
                 "label": {
                     "value": "来源(版权)",
                 },
                 "required": false, // 是否必填
                 "innerHTML": "",
-                "validate": function (value) {
+                "validate": (val) => getValidateUtils().setValue(val)
-                    var result = true, msg = "";
+                    .notNull("来源(版权)传入值错误")
-                    if (validateUtils.isEmpty(value)) {
+                    .isValid()
-                        result = false;
-                        msg = "不能为空";
-                    }
-                    return { result: result, msg: msg };
-                }
             },
             {
                 "tag": "select",
                 "attr": {
-                    "name": "",
+                    "id": "categoryId",
-                    "class": "",
+                    "name": "categoryId",
-                    "style": "",
                 },
                 "label": {
                     "value": "书籍分类",
                 },
                 "required": true, // 是否必填
                 "children": categoryOptions,
-                // [
+                "validate": (val) => getValidateUtils().setValue(val)
-                //     {
+                    .notEmpty("请选择书籍分类")
-                //         "tag": "option",
+                    .notStringNumber("书籍分类传入值错误")
-                //         "attr": { "value": "1" },
+                    .isValid()
-                //         "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 "提交";
-    }
 </script>

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

@@ -58,6 +58,9 @@
                     }
                     alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                 }
+            }).catch(function (error) {
+                console.log(error);
+                alert("无法连接到服务器，请检查网络连接！");
             });
     }
     getUserStatus();

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

@@ -32,11 +32,10 @@
                 } else {
                     alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
                 }
-            })
+            }).catch(function (error) {
-            .catch(function (error) {
                 console.log(error);
                 var choice = confirm("服务器连接失败，无法正常退出登录，是否要强行退出登录？");
-                if(choice) {
+                if (choice) {
                     localStorageUtils.userLogout();
                     location.href = "/login";
                 }

bookshelfplus-frontend/views/dashboard/form.html

@@ -46,10 +46,9 @@
             </div>
         </div>
     </main>
-    <%- include("./component/footer.html"); %>
     <!-- 验证组件用户输入值 -->
     <script src="/assets/javascripts/dashboard/getValidateUtils.js"></script>
-    <!-- 渲染组件 & 提交表单方法 -->
+    <!-- 渲染组件 -->
     <script src="/assets/javascripts/dashboard/renderFormControls.js"></script>
     <% if ( pageTemplate != "" ) { %>
         <!-- 引入对应页面渲染配置 -->
@@ -60,10 +59,11 @@
         var group = '<%= group %>';
         var page = '<%= page %>';
         var title = '<%= title %>';
+        var controlsProfile = {};
 
         async function renderFormControlsFunc() {
             // 获取将要渲染的 Controls
-            var controlsProfile = await getControlsProfile();
+            controlsProfile = await getControlsProfile(getValidateUtils);
 
             // 渲染控件
             var formControls = renderFormControls({ Controls: controlsProfile });
@@ -73,15 +73,78 @@
             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 = getSubmitButtonValue() || "提交";
         }
+
+        // 渲染控件
         renderFormControlsFunc();
+
+        // 提交表单事件
+        function formSubmit({
+            type = 'POST',
+            url = '',
+            success = (response) => { console.log(response) }
+        }) {
+            var data = {};
+            for (var i = 0; i < controlsProfile.length; i++) {
+                const controlsProfileItem = controlsProfile[i];
+                var control = document.getElementById(controlsProfileItem.attr.id);
+                // 判断 control 是否为空
+                if (!control) {
+                    alert("控件不存在：" + controlsProfileItem.attr.id);
+                    return;
+                }
+                var name = control.name;
+                var value = control.value;
+                console.log("name:", name, "value:", value, "control:", control);
+                var validateResult = controlsProfileItem.validate(value);
+                if (validateResult.result) {
+                    data[name] = value;
+                } else {
+                    alert(validateResult.msg);
+                    control.focus();
+                    return;
+                }
+            }
+            // var controls = document.getElementsByClassName('form-elements');
+            // for (var i = 0; i < controls.length; i++) {
+            //     var control = controls[i];
+            //     var name = control.name;
+            //     var value = control.value;
+            //     data[name] = value;
+            // }
+            // 添加管理员 token 信息
+            data['token'] = localStorageUtils.getToken();
+            console.log(data);
+
+            postRequest(url, data)
+                .then(function (responseData) {
+                    var axiosData = responseData.data;
+                    var status = axiosData.status;
+                    var data = axiosData.data;
+                    if (status === "success") {
+                        success(data);
+                    } else {
+                        alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                        if (data.errCode == "20004") {
+                            // 登陆过期
+                            localStorageUtils.userLogout();
+                            location.href = "/login";
+                        }
+                    }
+                }).catch(function (error) {
+                    console.log(error);
+                    alert("无法连接到服务器，请检查网络连接！");
+                }).finally(function () {
+                    $("#favorties-button").css("visibility", "visible");
+                });
+        }
+
+        // 绑定提交按钮事件
+        $("#btn-submit").click(btnSubmitClick);
     </script>
+    <%- include("./component/footer.html"); %>
 </body>
 </html>