用户后台 我的收藏功能完成

bookshelfplus-frontend/routes/index.js

@@ -127,7 +127,7 @@ router.get('/dashboard/:group/:page/:subpage?', function (req, res) {
             // },
             "my-collection": {
                 title: "我的收藏",
-                baseTemplate: "blank",
+                baseTemplate: "table",
                 pageTemplate: "myCollection",
             },
             "my-account": {

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

@@ -1,8 +1,18 @@
 <p>
     <a href="<%= pageUrl %>detail">添加书籍</a>
 </p>
+<input id="searchInput" type="text" />
+<input id="searchButton" type="button" value="搜索" />
 <!-- 搜索书籍 -->
 <script>
+    $("#searchButton").click(function () {
+        search({
+            tableElementId: "book-table",
+            searchText: $("#searchInput").val(),
+            categoryId: null
+        });
+    });
+
     function search({ tableElementId = "", searchText = "", categoryId = 0 }) {
         getRequest("/book/search", { bookName: searchText, categoryId: categoryId })
             .then(function (responseData) {

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

@@ -24,7 +24,7 @@
 </script>
 <%} else {%>
 <script>
-    if(llocalStorageUtils.getIsAdmin()) {
+    if(localStorageUtils.getIsAdmin()) {
         // 是管理员用户，跳转到管理员用户后台页面
         window.location.href = "/dashboard/admin/index";
     }

bookshelfplus-frontend/views/dashboard/table.html

@@ -4,7 +4,7 @@
     <%- include("./component/header.html"); %>
     <style>
         .main {
-            width: 96vw !important;
+            width: 92vw !important;
             max-width: initial !important;
         }
 
@@ -36,8 +36,6 @@
                 <!-- 引入对应页面渲染配置 -->
                 <%- include(pageTemplate); %>
             <% } %>
-            <input id="searchInput" type="text" />
-            <input id="searchButton" type="button" value="搜索" />
             <table id="book-table"></table>
         </div>
     </main>
@@ -51,20 +49,11 @@
         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>

bookshelfplus-frontend/views/dashboard/user/myCollection.html

@@ -0,0 +1,99 @@
+<!-- 搜索书籍 -->
+<script>
+    function search({ tableElementId = "" }) {
+        postRequest("/book/getFavoritesList", { token: localStorageUtils.getToken() })
+            .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, 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 style="display: block; width: 80px; max-height: 2em; margin: 0 auto;">
+                                        <a id="favorites_button_${element.id}" href="javascript:toggleFavorites(false, ${element.id});">取消收藏</a>
+                                    </span>`,
+                        })
+                    });
+
+                    if (renderData.length == 0) {
+                        console.log("没有搜索到相关书籍");
+                        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("无法连接到服务器，请检查网络连接！");
+            });
+    }
+
+    // 正在请求标记
+    var requestingFlag = false;
+    // 添加收藏/取消收藏
+    function toggleFavorites(toggleStatus, bookId) {
+        if (requestingFlag) return;
+        requestingFlag = true;
+        $("#favorties-button").css("opacity", "0.3");
+        $("#favorites_button_" + bookId).html($("#favorites_button_" + bookId).html() + "中...");
+        $("#favorites_button_" + bookId).css("color", "grey");
+        postRequest("/book/toggleFavorites", { token: localStorageUtils.getToken(), bookId: bookId, status: toggleStatus ? 1 : 0 })
+            .then(function (responseData) {
+                var axiosData = responseData.data;
+                var status = axiosData.status;
+                var data = axiosData.data;
+                if (status === "success") {
+                    console.log(data)
+                    if (data == "success") {
+                        if (toggleStatus) {
+                            console.log("收藏成功");
+                            $("#favorites_button_" + bookId).html("取消收藏");
+                            $("#favorites_button_" + bookId).attr("href", "javascript:toggleFavorites(false, " + bookId + ");");
+                        } else {
+                            console.log("取消收藏成功");
+                            $("#favorites_button_" + bookId).html("收藏");
+                            $("#favorites_button_" + bookId).attr("href", "javascript:toggleFavorites(true, " + bookId + ");");
+                        }
+                        $("#favorites_button_" + bookId).css("color", "");
+                    } else {
+                        console.log("操作失败");
+                    }
+                } else {
+                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                }
+            }).catch(function (error) {
+                console.log(error);
+                alert("无法连接到服务器，请检查网络连接！");
+            }).finally(function () {
+                requestingFlag = false;
+            });
+    }
+</script>

bookshelfplus.sql

@@ -11,7 +11,7 @@
  Target Server Version : 50726
  File Encoding         : 65001
 
- Date: 05/04/2022 17:54:17
+ Date: 07/04/2022 11:32:50
 */
 
 SET NAMES utf8mb4;
@@ -172,6 +172,7 @@ CREATE TABLE `third_party_user_auth_relation`  (
   INDEX `third_party_user_id`(`third_party_user_id`) USING BTREE,
   CONSTRAINT `third_party_user_auth_relation_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `user_info` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT,
   CONSTRAINT `third_party_user_auth_relation_ibfk_2` FOREIGN KEY (`third_party_user_id`) REFERENCES `third_party_user_info` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT
+) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = DYNAMIC;
 
 -- ----------------------------
 -- Records of third_party_user_auth_relation

bookshelfplus/src/main/resources/mapping/BookDOMapper.xml

@@ -288,10 +288,8 @@
   </update>
   <select id="selectFavoritesListByUserId" parameterType="java.lang.Integer" resultMap="ResultMapWithBLOBs">
     select
-    book_info.id, book_name, category_id, publishing_house, `language`, copyright, is_delete, thumbnail
+    book_info.id, book_name, category_id, publishing_house, `language`, copyright, is_delete, thumbnail, `author`
     <!--<include refid="Base_Column_List" />-->
-    ,
-    <include refid="Blob_Column_List" />,
     from user_book_favorites_relation
     left join book_info on user_book_favorites_relation.book_id = book_info.id
     where user_book_favorites_relation.user_id = #{userId,jdbcType=INTEGER}