后台添加图书、修改图书、书籍管理列表页功能完成；修正一处数据渲染错误；一些小调整

2025-09-01 22:53:29 +08:00 · 2022-04-06 22:52:07 +08:00
parent ca0ede8917
commit 3d2e9b6dfa
14 changed files with 288 additions and 52 deletions
--- a/bookshelfplus-frontend/public/assets/javascripts/dashboard/getValidateUtils.js
+++ b/bookshelfplus-frontend/public/assets/javascripts/dashboard/getValidateUtils.js
@@ -186,7 +186,7 @@ function getValidateUtils() {

        // 返回结果
        isValid: function () {
-            console.log("验证内容", this.validateValue, "验证结果", this.result, "错误信息", this.msg);
+            // console.log("验证内容", this.validateValue, "验证结果", this.result, "错误信息", this.msg);
            return {
                result: this.result,
                msg: this.msg.join("；")
--- a/bookshelfplus-frontend/public/assets/javascripts/dashboard/renderFormControls.js
+++ b/bookshelfplus-frontend/public/assets/javascripts/dashboard/renderFormControls.js
@@ -22,6 +22,13 @@ function renderElements(control) {
            element.appendChild(childElement);
        });
    }
+
+    // select 下拉框直接设置 value 会不生效，需要等其插入 DOM 之后再操作
+    if (control.tag == "select") {
+        setTimeout(function () {
+            element.value = control.attr.value;
+        }, 0);
+    }
    return element;
 }

--- a/bookshelfplus-frontend/public/assets/javascripts/searchBooks.js
+++ b/bookshelfplus-frontend/public/assets/javascripts/searchBooks.js
@@ -13,7 +13,7 @@ function search({ tableElementId = "", searchText = "", categoryId = 0 }) {
                    var mainDivWidth = 80/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
                    var columnWidth = [23, 17, 30, 10, 20];
                    renderData.push({
-                        书名: ` <a target="_blank" href="/book?id=${element.category.id}">
+                        书名: ` <a target="_blank" href="/book?id=${element.id}">
                                    <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                                        ${element.bookName}
                                    </span>
@@ -56,7 +56,9 @@ function search({ tableElementId = "", searchText = "", categoryId = 0 }) {
                }

                // 渲染后重新获取一次字体
-                fontmin(getPageText());
+                if (typeof (fontmin) === "function") {
+                    fontmin(getPageText());
+                }
            } else {
                alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
            }
--- a/bookshelfplus-frontend/routes/index.js
+++ b/bookshelfplus-frontend/routes/index.js
@@ -72,7 +72,6 @@ router.get('/callback/:platform', function (req, res) {
 });

 router.get('/dashboard/:group/:page/:subpage?', function (req, res) {
-
    // baseTemplate 基于哪个html模板渲染页面
    // pageTemplate 引入这个文件中的页面脚本
    if (req.params.group === "admin") {
@@ -83,13 +82,13 @@ router.get('/dashboard/:group/:page/:subpage?', function (req, res) {
            },
            "book-manage": {
                title: "书籍管理",
-                baseTemplate: "blank",
+                baseTemplate: "table",
                pageTemplate: "BookManage",
                childPage: {
-                    "add": {
-                        title: "添加书籍",
+                    "detail": {
+                        title: req.query.id ? "修改书籍" : "添加书籍",
                        baseTemplate: "form",
-                        pageTemplate: "BookManage_Add",
+                        pageTemplate: "BookManage_Detail",
                    },
                }
            },
@@ -140,29 +139,17 @@ router.get('/dashboard/:group/:page/:subpage?', 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];

-        // 如果请求的就是主页面，或者当前页没有子页面，则渲染主页面
-        if (!req.params.subpage || !currentPage.childPage || Object.keys(currentPage.childPage).indexOf(req.params.subpage) === -1) {
-            console.log("page");
+        // 如果请求的就是主页面，或者当前页没有子页面
+        if (!req.params.subpage) {
+            // 渲染主页面
+            console.log("page", req.params.page, req.params.subpage);
            res.render(`dashboard/${currentPage.baseTemplate}`, {
+                pageUrl: (req._parsedUrl.pathname + "/").replace("//", "/"),
                htmlTitle: getPageTitle(headText),
                title: currentPage.title,
                pageTemplate: "./" + req.params.group + "/" + currentPage.pageTemplate + ".html",
@@ -171,10 +158,16 @@ router.get('/dashboard/:group/:page/:subpage?', function (req, res) {
                page: req.params.page,
            });
        } else {
+            // 渲染子页面
+            if (!currentPage.childPage || Object.keys(currentPage.childPage).indexOf(req.params.subpage) === -1) {
+                // 请求的子页面不存在，直接返回404
+                throw new Error("404 Not Found");
+            }
            // 如果当前 page 有 subpage，则渲染子页面
            var currentSubPage = currentPage.childPage[req.params.subpage];
-            console.log("subpage");
+            console.log("subpage", req.params.page, req.params.subpage);
            res.render(`dashboard/${currentSubPage.baseTemplate}`, {
+                pageUrl: (req._parsedUrl.pathname + "/").replace("//", "/"),
                htmlTitle: getPageTitle(headText),
                title: currentSubPage.title,
                pageTemplate: "./" + req.params.group + "/" + currentSubPage.pageTemplate + ".html",
--- a/bookshelfplus-frontend/views/dashboard/admin/BookManage.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/BookManage.html
@@ -1,3 +1,81 @@
 <p>
-    <a href="book-manage/add">添加书籍</a>
-</p>
+    <a href="<%= pageUrl %>detail">添加书籍</a>
+</p>
+<!-- 搜索书籍 -->
+<script>
+    function search({ tableElementId = "", searchText = "", categoryId = 0 }) {
+        getRequest("/book/search", { bookName: searchText, categoryId: categoryId })
+            .then(function (responseData) {
+                var axiosData = responseData.data;
+                var status = axiosData.status;
+                var data = axiosData.data;
+                if (status === "success") {
+                    // console.log(data)
+
+                    // 数据进行转换
+                    var renderData = [];
+                    data.forEach(element => {
+                        var mainDivWidth = 96/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
+                        var columnWidth = [20, 15, 10, 15, 5, 35];
+                        renderData.push({
+                            编号: `${element.id}`,
+                            书名: ` <a target="_blank" href="/book?id=${element.id}">
+                                        <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                            ${element.bookName}
+                                        </span>
+                                    </a>`,
+                            分类: ` <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>
+                                    </a>`,
+                            作者: `${element.author}`,
+                            语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        ${element.language}
+                                    </span>`,
+                            出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        ${element.publishingHouse}
+                                    </span>`,
+                            来源: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        ${element.publishingHouse}
+                                    </span>`,
+                            管理: `<span class="overflow-omit" style="max-width: ${columnWidth[5] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
+                                        <a href="<%= pageUrl %>detail?id=${element.id}">修改</a>
+                                        <a href="">删除</a>
+                                    </span>`,
+                        })
+                    });
+
+                    if (renderData.length == 0) {
+                        console.log("没有搜索到相关书籍");
+                        function htmlEncode(str) {
+                            // refer: https://stackoverflow.com/questions/4183801/escape-html-chracters
+                            var div = document.createElement('div');
+                            var txt = document.createTextNode(str);
+                            div.appendChild(txt);
+                            return div.innerHTML;
+                        }
+                        if (searchText && searchText != "") {
+                            //
+                            renderTable({ data: `没有搜索到与 <span style="color: red;">${htmlEncode(searchText)}</span> 相关的书籍，请换个关键词再试试吧`, tableId: tableElementId, renderTableHead: true });
+                        } else if (categoryId && categoryId != 0) {
+                            //
+                            renderTable({ data: `该分类下暂无电子书`, tableId: tableElementId, renderTableHead: true });
+                        }
+                    } else {
+                        renderTable({ data: renderData, tableId: tableElementId, renderTableHead: true });
+                    }
+
+                    // 渲染后重新获取一次字体
+                    if (typeof (fontmin) === "function") {
+                        fontmin(getPageText());
+                    }
+                } else {
+                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                }
+            }).catch(function (error) {
+                console.log(error);
+                alert("无法连接到服务器，请检查网络连接！");
+            });
+    }
+</script>
--- a/bookshelfplus-frontend/views/dashboard/admin/BookManage_Detail.html
+++ b/bookshelfplus-frontend/views/dashboard/admin/BookManage_Detail.html
@@ -1,27 +1,59 @@
 <!-- 是否连续录入复选框 -->
 <p style="text-align: center;">
+    <!-- 只在新增书籍的时候显示 -->
    <input type="checkbox" id="isContinuous" checked="checked" />连续录入
 </p>
 <!-- 生成分类结构 -->
 <script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
 <script>
+    // 如果传入了 id 那么就是修改书籍，否则就是添加书籍
+    var bookId = getParams().id;
+    var isModify = bookId ? true : false;
+    if (!isModify) {
+        // 新增书籍
+        bookId = 0;
+    } else {
+        // 修改书籍
+        $("#isContinuous").parent().remove();
+    }
+
+    // 点击提交按钮
    function btnSubmitClick() {
        formSubmit({
            type: 'POST',
-            url: '/book/add',
+            url: '/book/detail',
+            data: { id: bookId },
            success: function (data) {
                console.log(data);
-                alert("添加成功！");
-                if (document.getElementById("isContinuous").checked) {
+                alert(isModify ? "修改成功！" : "添加成功！");
+                if (!isModify && document.getElementById("isContinuous").checked) {
                    location.reload();
                } else {
                    // 回到书籍管理页
+                    location.href = "<%= pageUrl %>../";
                }
            }
        });
    }

+    // 如果是修改书籍，则需要获取书籍详情
+    async function getBookDetail(bookId) {
+        var responseData = await getRequest("/book/get", { id: bookId });
+        var axiosData = responseData.data;
+        var status = axiosData.status;
+        var data = axiosData.data;
+        if (status === "success") {
+            console.log(data)
+            return data;
+        } else {
+            alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+            // 回到书籍管理页
+            location.href = "<%= pageUrl %>../";
+        }
+    }
+
    async function getControlsProfile(getValidateUtils) {
+
        // 获取分类列表
        var categoryOptions = [];

@@ -49,6 +81,15 @@
        }

        console.log(categoryOptions);
+
+        // 修改书籍: 获取书籍详情
+        var bookDetail = {};
+        if (isModify) {
+            bookDetail = await getBookDetail(bookId);
+        } else {
+            console.log("新增书籍无需获取书籍详情");
+        }
+
        return [
            // 【模板】
            // {
@@ -104,6 +145,7 @@
                    "id": "bookName",
                    "name": "bookName",
                    "placeholder": "电子书的名称",
+                    "value": bookDetail.bookName || "",
                },
                "label": {
                    "value": "书本名称",
@@ -122,6 +164,7 @@
                    "id": "author",
                    "name": "author",
                    "placeholder": "电子书的作者",
+                    "value": bookDetail.author || "",
                },
                "label": {
                    "value": "作者姓名",
@@ -146,7 +189,7 @@
                    "value": "书籍简介",
                },
                "required": false, // 是否必填
-                "innerHTML": "",
+                "innerHTML": bookDetail.description || "",
                "validate": (val) => getValidateUtils().setValue(val)
                    .notString("传入的值为非字符串类型")
                    .length(0, 5000, "书籍简介不能超过 5000 个字符")
@@ -158,6 +201,7 @@
                    "id": "language",
                    "name": "language",
                    "placeholder": "书籍语言",
+                    "value": bookDetail.language || "",
                },
                "label": {
                    "value": "语言",
@@ -191,6 +235,7 @@
                    "id": "publishingHouse",
                    "name": "publishingHouse",
                    "placeholder": "出版社",
+                    "value": bookDetail.publishingHouse || "",
                },
                "label": {
                    "value": "出版社",
@@ -209,6 +254,7 @@
                    "id": "copyright",
                    "name": "copyright",
                    "placeholder": "来源信息 & 版权信息",
+                    "value": bookDetail.copyright || "",
                },
                "label": {
                    "value": "来源(版权)",
@@ -224,6 +270,7 @@
                "attr": {
                    "id": "categoryId",
                    "name": "categoryId",
+                    "value": bookDetail.category.id || "",
                },
                "label": {
                    "value": "书籍分类",
--- a/bookshelfplus-frontend/views/dashboard/form.html
+++ b/bookshelfplus-frontend/views/dashboard/form.html
@@ -38,14 +38,19 @@
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <h1><%= title %></h1>
+        <% if (typeof(subpage) !== "undefined") { %>
+        <p><a href="<%= pageUrl %>../">返回上一级</a></p>
+        <% } %>
        <div id="container">
            <div id="container-controls">页面加载中，请稍候 ...</div>
            <div id="container-submit">
                <button class="btn" id="btn-submit">提交</button>
-                <button class="btn" id="btn-clear">清空</button>
+                <button class="btn" id="btn-clear" disabled="true">清空</button>
            </div>
        </div>
    </main>
+    <!-- 获取参数 -->
+    <script src="/assets/javascripts/getParams.js"></script>
    <!-- 验证组件用户输入值 -->
    <script src="/assets/javascripts/dashboard/getValidateUtils.js"></script>
    <!-- 渲染组件 -->
@@ -85,9 +90,10 @@
        function formSubmit({
            type = 'POST',
            url = '',
+            data = {},
            success = (response) => { console.log(response) }
        }) {
-            var data = {};
+            var data = data || {};
            for (var i = 0; i < controlsProfile.length; i++) {
                const controlsProfileItem = controlsProfile[i];
                var control = document.getElementById(controlsProfileItem.attr.id);
@@ -98,7 +104,7 @@
                }
                var name = control.name;
                var value = control.value;
-                console.log("name:", name, "value:", value, "control:", control);
+                // console.log("name:", name, "value:", value, "control:", control);
                var validateResult = controlsProfileItem.validate(value);
                if (validateResult.result) {
                    data[name] = value;
--- a/bookshelfplus-frontend/views/dashboard/index.html
+++ b/bookshelfplus-frontend/views/dashboard/index.html
@@ -35,7 +35,9 @@
        </h1>
        <div id="container">
            <% Object.keys(dashboardPage).forEach(item => { %>
-                <a class="mainNav" href="./<%= item %>"><%= dashboardPage[item].title %></a>
+                <% if (item.indexOf("index") == -1) { /* 跳过 仪表盘 */ %>
+                    <a class="mainNav" href="./<%= item %>"><%= dashboardPage[item].title %></a>
+                <% } %>
            <% }); %>
        </div>
    </main>
--- a/bookshelfplus-frontend/views/dashboard/table.html
+++ b/bookshelfplus-frontend/views/dashboard/table.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <%- include("./component/header.html"); %>
+    <style>
+        .main {
+            width: 96vw !important;
+            max-width: initial !important;
+        }
+
+        #book-table {
+            width: 100%;
+            margin-top: 30px;
+            line-height: 2.3em;
+        }
+
+        table, tr, th, td {
+            border: 1px solid black;
+        }
+
+        tr:hover {
+            background-color: #f5f5f5;
+        }
+
+        tr a {
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <%- include("./component/navbar.html"); %>
+    <main class="main">
+        <h1><%= title %></h1>
+        <div id="container">
+            <% if ( pageTemplate != "" ) { %>
+                <!-- 引入对应页面渲染配置 -->
+                <%- include(pageTemplate); %>
+            <% } %>
+            <input id="searchInput" type="text" />
+            <input id="searchButton" type="button" value="搜索" />
+            <table id="book-table"></table>
+        </div>
+    </main>
+    <%- include("./component/footer.html"); %>
+
+    <!-- 获取参数 -->
+    <script src="/assets/javascripts/getParams.js"></script>
+    <!-- 渲染表格 -->
+    <script src="/assets/javascripts/renderTable.js"></script>
+    <script>
+        var requestParams = getParams();
+        var searchbox = document.getElementById("searchInput");
+        var keyword = (requestParams["keyword"] || "").trim();
+        searchbox.value = keyword;
+        search({
+            tableElementId: "book-table",
+            searchText: null,
+            categoryId: null
+        });
+
+        $("#searchButton").click(function () {
+            search({
+                tableElementId: "book-table",
+                searchText: $("#searchInput").val(),
+                categoryId: null
+            });
+        })
+    </script>
+</body>
+</html>
--- a/bookshelfplus-frontend/views/search.html
+++ b/bookshelfplus-frontend/views/search.html
@@ -10,7 +10,6 @@

        #result-table {
            width: 100%;
-            /* border: 1px solid black; */
            margin-top: 30px;
            line-height: 2.3em;
        }
@@ -21,7 +20,6 @@

        tr a {
            cursor: pointer;
-            /* cursor: alias; */
        }
    </style>
 </head>
--- a/bookshelfplus/src/main/java/plus/bookshelf/Controller/Controller/BookController.java
+++ b/bookshelfplus/src/main/java/plus/bookshelf/Controller/Controller/BookController.java
@@ -117,19 +117,21 @@ public class BookController extends BaseController {
        return CommonReturnType.create(favoritesStatus);
    }

-    @ApiOperation(value = "【管理员】添加书籍", notes = "管理员在后台添加书籍")
-    @RequestMapping(value = "add", method = {RequestMethod.GET})
+    @ApiOperation(value = "【管理员】添加/修改书籍", notes = "管理员在后台添加/修改书籍（bookId 传 0 或 null 或 不传 即为添加）")
+    @RequestMapping(value = "detail", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})
    @ResponseBody
-    public CommonReturnType add(@RequestParam(value = "token", required = false) String token,
-                                @RequestParam(required = false, value = "bookName") String bookName,
-                                @RequestParam(required = false, value = "description") String description,
-                                @RequestParam(required = false, value = "categoryId") Integer categoryId,
-                                @RequestParam(required = false, value = "publishingHouse") String publishingHouse,
-                                @RequestParam(required = false, value = "language") String language,
-                                @RequestParam(required = false, value = "copyright") String copyright,
-                                @RequestParam(required = false, value = "isDelete") Boolean isDelete,
-                                @RequestParam(required = false, value = "thumbnail") String thumbnail,
-                                @RequestParam(required = false, value = "author") String author) throws BusinessException {
+    public CommonReturnType detail(@RequestParam(value = "token", required = false) String token,
+                                   @RequestParam(required = false, value = "id") Integer bookId,
+                                   @RequestParam(required = false, value = "bookName") String bookName,
+                                   @RequestParam(required = false, value = "description") String description,
+                                   @RequestParam(required = false, value = "categoryId") Integer categoryId,
+                                   @RequestParam(required = false, value = "publishingHouse") String publishingHouse,
+                                   @RequestParam(required = false, value = "language") String language,
+                                   @RequestParam(required = false, value = "copyright") String copyright,
+                                   // 【前端未提交到后端的参数】 isDelete thumbnail
+                                   @RequestParam(required = false, value = "isDelete") Boolean isDelete,
+                                   @RequestParam(required = false, value = "thumbnail") String thumbnail,
+                                   @RequestParam(required = false, value = "author") String author) throws BusinessException {
        // 已经在 getUserByToken 方法中判断了 token 为空、不合法；用户不存在情况，此处无需再判断
        UserModel userModel = userService.getUserByToken(redisTemplate, token);

@@ -149,7 +151,17 @@ public class BookController extends BaseController {
            bookModel.setCategory(categoryModel);
        }

-        Integer affectRows = bookService.addBook(bookModel);
+        Integer affectRows = 0;
+        if (bookId == null || bookId == 0) {
+            // 新增图书
+            isDelete = false;
+            affectRows = bookService.addBook(bookModel);
+        } else {
+            //修改图书
+            bookModel.setId(bookId);
+            affectRows = bookService.modifyBook(bookModel);
+        }
+
        if (affectRows > 0) {
            return CommonReturnType.create("success");
        } else {
--- a/bookshelfplus/src/main/java/plus/bookshelf/Service/Impl/BookServiceImpl.java
+++ b/bookshelfplus/src/main/java/plus/bookshelf/Service/Impl/BookServiceImpl.java
@@ -74,7 +74,6 @@ public class BookServiceImpl implements BookService {

    @Override
    public Integer addBook(BookModel bookModel) throws BusinessException {
-
        // 校验入参
        ValidationResult result = validator.validate(bookModel);
        if (result.isHasErrors()) {
@@ -85,6 +84,18 @@ public class BookServiceImpl implements BookService {
        return bookDOMapper.insertSelective(bookDO);
    }

+    @Override
+    public Integer modifyBook(BookModel bookModel) throws BusinessException {
+        // 校验入参
+        ValidationResult result = validator.validate(bookModel);
+        if (result.isHasErrors()) {
+            throw new BusinessException(BusinessErrorCode.PARAMETER_VALIDATION_ERROR, result.getErrMsg());
+        }
+
+        BookDO bookDO = convertToDataObjecct(bookModel);
+        return bookDOMapper.updateByPrimaryKeySelective(bookDO);
+    }
+
    /**
     * 用户收藏书籍
     *
--- a/bookshelfplus/src/main/java/plus/bookshelf/Service/Model/ThirdPartyUserAuthModel.java
+++ b/bookshelfplus/src/main/java/plus/bookshelf/Service/Model/ThirdPartyUserAuthModel.java
@@ -7,7 +7,9 @@ public class ThirdPartyUserAuthModel {

    private Integer id;

+    // 用户 Id
    private String userId;

+    // 用户第三方授权 Id
    private String thirdPartyUserId;
 }
--- a/bookshelfplus/src/main/java/plus/bookshelf/Service/Service/BookService.java
+++ b/bookshelfplus/src/main/java/plus/bookshelf/Service/Service/BookService.java
@@ -31,6 +31,14 @@ public interface BookService {
     */
    Integer addBook(BookModel bookModel) throws BusinessException;

+    /**
+     * 修改书籍
+     * @param bookModel
+     * @return
+     * @throws BusinessException
+     */
+    Integer modifyBook(BookModel bookModel) throws BusinessException;
+
    /**
     * 用户收藏书籍
     *