解决前端动态路由未完成导致项目无法访问的BUG

新增bootstrap-icon依赖

qing-ui/src/main/frontend/components.d.ts

@@ -17,24 +17,27 @@ declare module 'vue' {
     LayCheckbox: typeof import('@layui/layui-vue')['LayCheckbox']
     LayCheckboxGroup: typeof import('@layui/layui-vue')['LayCheckboxGroup']
     LayDatePicker: typeof import('@layui/layui-vue')['LayDatePicker']
+    LayDescriptions: typeof import('@layui/layui-vue')['LayDescriptions']
+    LayDescriptionsItem: typeof import('@layui/layui-vue')['LayDescriptionsItem']
     LayForm: typeof import('@layui/layui-vue')['LayForm']
     LayFormItem: typeof import('@layui/layui-vue')['LayFormItem']
     LayFullscreen: typeof import('@layui/layui-vue')['LayFullscreen']
     LayHeader: typeof import('@layui/layui-vue')['LayHeader']
-      LayIcon: typeof import('@layui/icons-vue')['LayIcon']
+    LayIcon: typeof import('@layui/icons-vue')['LayIcon']
     LayInput: typeof import('@layui/layui-vue')['LayInput']
     LayLayer: typeof import('@layui/layer-vue')['LayLayer']
     LayLayout: typeof import('@layui/layui-vue')['LayLayout']
     LayMenu: typeof import('@layui/layui-vue')['LayMenu']
     LayMenuItem: typeof import('@layui/layui-vue')['LayMenuItem']
-      LayPage: typeof import('@layui/layui-vue')['LayPage']
+    LayPage: typeof import('@layui/layui-vue')['LayPage']
     LayScroll: typeof import('@layui/layui-vue')['LayScroll']
     LaySelect: typeof import('@layui/layui-vue')['LaySelect']
     LaySelectOption: typeof import('@layui/layui-vue')['LaySelectOption']
     LaySide: typeof import('@layui/layui-vue')['LaySide']
     LaySpace: typeof import('@layui/layui-vue')['LaySpace']
     LaySubMenu: typeof import('@layui/layui-vue')['LaySubMenu']
     LayTable: typeof import('@layui/layui-vue')['LayTable']
+    LayTag: typeof import('@layui/layui-vue')['LayTag']
     LayTextarea: typeof import('@layui/layui-vue')['LayTextarea']
     LayUpload: typeof import('@layui/layui-vue')['LayUpload']
     MyDPlayer: typeof import('./src/components/MyDPlayer.vue')['default']

qing-ui/src/main/frontend/package.json

@@ -18,6 +18,7 @@
     "artplayer" : "^5.1.1",
     "axios" : "1.6.0",
     "bootstrap" : "^5.2.3",
+    "bootstrap-icons" : "^1.11.3",
     "bootstrap-vue" : "^2.23.1",
     "cos-js-sdk-v5" : "^1.7.0",
     "dplayer" : "^1.27.1",

qing-ui/src/main/frontend/src/assets/css/catalog.css

@@ -10,3 +10,4 @@
  * See the Mulan PSL v2 for more details.
  *
  */
+@import url(../../assets/css/common/common.css);

qing-ui/src/main/frontend/src/assets/css/detail.css

@@ -11,6 +11,7 @@
  *
  */
 
+@import url(../../assets/css/common/common.css);
 
 .div_left {
     width: 272px;

qing-ui/src/main/frontend/src/assets/css/header.css

@@ -1,7 +1,7 @@
 /*top ==== ==== ==== ==== ==== ==== ==== ==== */
 
 @import url(../../assets/css/common/base.css);
-
+@import url(../../assets/css/common/common.css);
 
 .user-wrapper {
     /*float: right;*/

qing-ui/src/main/frontend/src/assets/css/play.css

@@ -10,6 +10,7 @@
  * See the Mulan PSL v2 for more details.
  *
  */
+@import url(../../assets/css/common/common.css);
 
 #root {
     margin: 0 auto;

qing-ui/src/main/frontend/src/main.ts

@@ -4,7 +4,6 @@ import {createPinia} from "pinia";
 import App from "./App.vue";
 import router from "./router";
 
-// import "./assets/css/common/common.css";
 import LayUI from "@layui/layui-vue";
 
 const app = createApp(App);

qing-ui/src/main/frontend/src/router/index.ts

@@ -1,6 +1,7 @@
 import {createRouter, createWebHashHistory, type NavigationGuardNext, type RouteLocationNormalized, type Router} from "vue-router";
 
 import {userStore} from "@/stores/user";
+import routerList from "@/router/modules/base-routes";
 
 /** 自动导入全部静态路由，无需再手动引入！匹配 src/router/modules 目录（任何嵌套级别）中具有 .ts 扩展名的所有文件，除了 remaining.ts 文件
  * 如何匹配所有文件请看：https://github.com/mrmlnc/fast-glob#basic-syntax
@@ -11,7 +12,7 @@ const modules: Record<string, any> = import.meta.glob(["./modules/**/*.ts", "!./
 });
 
 /** 原始静态路由（未做任何处理） */
-const routes: any[] = [];
+const routes: any[] = routerList;
 
 Object.keys(modules).forEach((key) => {
     routes.push(modules[key].default);
@@ -39,12 +40,20 @@ const router: Router = createRouter({
  * @param from 来至
  */
 router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext): void => {
+    console.log(to);
+    // 在白名单内的路由，直接放行
+    for (let i = 0; i < whiteList.length; i++) {
+        if (to.path == whiteList[i]) {
+            next();
+            return
+        }
+    }
     const store = userStore();
-
     if (to.meta.requireAuth) {
         next();
     } else if (to.matched.length == 0) {
-        next({path: "/error/404"});
+        // next({path: "/error/404"});
+        next();
     } else {
         next();
     }

qing-ui/src/main/frontend/src/router/modules/base-routes.ts

@@ -153,7 +153,7 @@ const routerList = [
                 meta: {
                     requiresAuth: false,
                 },
-                component: Login,
+                component: () => import("../../views/login/Login.vue"),
             },
         ],
     },
@@ -188,25 +188,25 @@ const pages = import.meta.glob("../../views/anime/*.vue");
 
 console.log("读取到所有的页面信息", pages);
 
-Object.keys(pages).forEach((key) => {
-    console.log("modList", key);
-
-    const name = key
-            .replace(/^\.\.\/\.\.\/views\/anime\//, "")
-            .replace(/\.vue$/, "")
-            .toLowerCase();
-
-    console.log("name", name);
-
-    const mod = pages[key];
-
-    console.log("modList", mod);
-
-    // routerList.push({
-    //     path: `/anime/${name}`,
-    //     name: name,
-    //     component: mod,
-    // });
-});
+// Object.keys(pages).forEach((key) => {
+//     console.log("modList", key);
+//
+//     const name = key
+//             .replace(/^\.\.\/\.\.\/views\/anime\//, "")
+//             .replace(/\.vue$/, "")
+//             .toLowerCase();
+//
+//     console.log("name", name);
+//
+//     const mod = pages[key];
+//
+//     console.log("modList", mod);
+//
+//     // routerList.push({
+//     //     path: `/anime/${name}`,
+//     //     name: name,
+//     //     component: mod,
+//     // });
+// });
 
 export default routerList;

qing-ui/src/main/frontend/src/views/UpdatePage.vue

@@ -50,7 +50,7 @@ onMounted(() => {
     ],
   })
     .then(function (response) {
-      const animeDataList = response.result.list || [];
+      const animeDataList = response.result.content || [];
       console.log("获取到动漫信息内容", animeDataList);
       animeDataList.forEach((anime) => {
         animeList.value.push(anime);

qing-ui/src/main/frontend/src/views/admin/AnimeCatagoryManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="fullscreenTargetRef2" style="height: 800px; background-color: #000000">
-    <lay-table v-if="!isEdit" ref="tableRef" v-model:selectedKey="selectedKey" v-model:selectedKeys="selectedKeys" :autoColsWidth="true" :columns="columns" :data-source="dataSource" :default-toolbar="toolbar" :ellipsisTooltip="true" :even="true" :loading="loading" :page="page" :resize="false" size="md" @change="change">
+    <lay-table v-if="!isEdit" ref="tableRef" v-model:selectedKey="selectedKey" v-model:selectedKeys="selectedKeys" :autoColsWidth="true" :columns="columns" :data-source="dataSource" :default-toolbar="toolbar" :ellipsisTooltip="true" :even="true" :loading="loading" :page="page" :resize="false" size="md">
       <template #toolbar>
         <lay-space>
           <lay-button size="md" type="primary" @click="recommend">添加推荐</lay-button>
@@ -21,9 +21,9 @@
 import {onMounted, reactive, ref} from "vue";
 import {layer} from "@layui/layui-vue";
 import {createAnime, findById} from "@/apis/anime";
-import type {Tag} from "@/apis/tags/types";
 import {getCategoryList} from "@/apis/categories";
 import type {Anime} from "@/apis/anime/types";
+import type {Category} from "@/apis/categories/types";
 
 onMounted(() => {
   resolveCategoryList();
@@ -86,7 +86,7 @@ const addAnime = () => {
   addForm.isAdd = true;
 };
 
-const dataSource = ref<Tag[]>();
+const dataSource = ref<Category[]>();
 
 const view = (anime: any) => {
   isEdit.value = true;

qing-ui/src/main/frontend/src/views/catalog/Catalog.vue

@@ -73,6 +73,7 @@
 </template>
 
 <style lang="less" scoped src="../../assets/css/catalog.css">
+
 #container {
   margin: 0 auto;
   padding: 0 0;
@@ -106,8 +107,8 @@ onMounted(() => {
     page: 0,
   })
           .then(function (response) {
-            console.log("获取到动漫信息内容", response.result.list || []);
-            animeInfoList.value = response.result.list || [];
+            console.log("获取到动漫信息内容", response.result.content || []);
+            animeInfoList.value = response.result.content || [];
           })
           .catch(function (error) {
             console.log(error);

qing-ui/src/main/frontend/src/views/home/Home.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-import { getAnimeList } from "@/apis/anime";
-import type { Anime } from "@/apis/anime/types";
+import {onMounted, ref} from "vue";
+import {getAnimeList} from "@/apis/anime";
+import type {Anime} from "@/apis/anime/types";
 
 const pagination = ref({ current: 0, pageSize: 12, total: 0 });
 const animeInfoList = ref<Anime[]>([]);
@@ -64,7 +64,7 @@ const getCardListData = async () => {
   const result = animeListResponse.result;
   pagination.value.total = result.total;
   console.log("请求结束后的分页信息,总页数：", pagination.value.total);
-  animeInfoList.value = result.list;
+  animeInfoList.value = result.content;
 };
 
 onMounted(() => {

qing-ui/src/main/frontend/src/views/login/Login.vue

@@ -20,6 +20,7 @@
                   <input id="password" type="password" class="form-control" name="password" v-model="loginFormData.password" required data-eye/>
                   <div class="invalid-feedback">请输入密码！</div>
                 </div>
+                <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue"></i>
                 <div class="form-group">
                   <div class="custom-checkbox custom-control">
                     <input type="checkbox" name="remember" id="remember" class="custom-control-input" v-model="loginFormData.rememberMe"/>

qing-ui/src/main/frontend/src/views/recommend/Recommend.vue

@@ -43,8 +43,8 @@ onMounted(() => {
     page: 0,
   })
           .then(function (response) {
-            console.log("获取到动漫信息内容", response.result.list || []);
-            animeInfoList.value = response.result.list || [];
+            console.log("获取到动漫信息内容", response.result.content || []);
+            animeInfoList.value = response.result.content || [];
           })
           .catch(function (error) {
             console.log("异常了", error);