feat: 书签主页面显示

bookMarkService/common/src/main/java/com/fanxb/bookmark/common/filter/LoginFilter.java

@@ -51,12 +51,12 @@ public class LoginFilter implements Filter {
     @Autowired
     private UrlDao urlDao;
 
-    private static AntPathMatcher matcher = new AntPathMatcher();
+    private static final AntPathMatcher matcher = new AntPathMatcher();
 
     volatile private static List<Url> publicUrl;
 
     @Override
-    public void init(FilterConfig filterConfig) throws ServletException {
+    public void init(FilterConfig filterConfig) {
     }
 
     @Override

bookmark_front/src/layout/main/Content.vue

@@ -28,6 +28,6 @@ export default {};
 
   font-size: 0.14rem;
 
-  background-color: rgba(249, 231, 62, 0.2);
+  background-color: white;
 }
 </style>

bookmark_front/src/layout/main/Top.vue

@@ -45,6 +45,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   background-color: rgba(197, 190, 198, 0.4);
+  z-index: 100;
   .ico {
     height: 100%;
   }

bookmark_front/src/main.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import { Button, FormModel, Input, Icon, message, Checkbox, Dropdown, Menu } from "ant-design-vue";
+import { Button, FormModel, Input, Icon, message, Checkbox, Dropdown, Menu, Tree } from "ant-design-vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
@@ -11,6 +11,7 @@ Vue.component(Icon.name, Icon);
 Vue.use(Checkbox);
 Vue.use(Dropdown);
 Vue.use(Menu);
+Vue.use(Tree);
 
 Vue.prototype.$message = message;
 Vue.config.productionTip = false;

bookmark_front/src/router/index.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import Main from "../views/main/Main.vue";
 import UserInfo from "../views/main/pages/personSpace/UserInfo.vue";
-import BookmarkTree from "../views/main/pages/things/BookmarkTree.vue";
+import BookmarkManage from "../views/main/pages/things/BookmarkManage.vue";
 
 import Public from "../views/public/Public.vue";
 import Login from "../views/public/pages/Login.vue";
@@ -18,8 +18,8 @@ const routes = [
     children: [
       {
         path: "",
-        name: "BookmarkTree",
-        component: BookmarkTree
+        name: "BookmarkManage",
+        component: BookmarkManage
       },
       {
         path: "personSpakce/userInfo",

bookmark_front/src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import globalConfig from "./modules/globalConfig";
+import treeData from "./modules/treeData";
 
 Vue.use(Vuex);
 
@@ -9,6 +10,7 @@ export default new Vuex.Store({
   mutations: {},
   actions: {},
   modules: {
-    globalConfig
+    globalConfig,
+    treeData
   }
 });

bookmark_front/src/store/modules/globalConfig.js

@@ -1,4 +1,4 @@
-import localforage, { clear } from "localforage";
+import localforage from "localforage";
 /**
  * 存储全局配置
  */

bookmark_front/src/store/modules/treeData.js

@@ -0,0 +1,61 @@
+import localforage from "localforage";
+import httpUtil from "../../util/HttpUtil";
+
+/**
+ * 书签树相关配置
+ */
+const state = {
+  //全部书签数据
+  totalTreeData: {},
+  isInit: false
+};
+
+const getters = {};
+
+const actions = {
+  //从缓存初始化数据
+  async init(context) {
+    if (context.state.isInit) {
+      return;
+    }
+    let data = await localforage.getItem("totalTreeData");
+    if (data == null) {
+      await context.dispatch("refresh");
+    } else {
+      context.commit("totalTreeData", data);
+    }
+  },
+  //刷新缓存数据
+  async refresh(context) {
+    let treeData = await httpUtil.get("/bookmark/currentUser");
+    context.commit("totalTreeData", treeData);
+    localforage.setItem("totalTreeData", treeData);
+  },
+  //清除缓存数据
+  async clear(context) {
+    context.commit("totalTreeData", {});
+    await localforage.removeItem("totalTreeData");
+  }
+};
+
+const mutations = {
+  treeData(state, treeData) {
+    localforage.setItem("treeData", treeData);
+    state.treeData = treeData;
+  },
+  totalTreeData(state, totalTreeData) {
+    localforage.setItem("totalTreeData", totalTreeData);
+    state.totalTreeData = totalTreeData;
+  },
+  isInit(state, isInit) {
+    state.isInit = isInit;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};

bookmark_front/src/util/HttpUtil.js

@@ -28,21 +28,27 @@ async function request(url, method, params, body, isForm, redirect) {
   if (body) {
     options.data = body;
   }
+  let res;
   try {
-    const res = await http.default.request(options);
-    const { code, data, message } = res.data;
-    if (code === 1) {
-      return data;
-    }
-    if (code === -1 && redirect) {
-      // 跳转到登陆页
-      router.replace(`/public/login?redirect=${encodeURIComponent(router.currentRoute.fullPath)}`);
-      return null;
-    }
+    res = await http.default.request(options);
+  } catch (err) {
+    window.vueInstance.$message.error("发生了某些异常问题");
+    console.error(err);
+    return;
+  }
+  const { code, data, message } = res.data;
+  if (code === 1) {
+    return data;
+  } else if (code === -1 && redirect) {
+    // 跳转到登陆页
+    window.vueInstance.$message.error("您尚未登陆，请先登陆");
+    router.replace(`/public/login?redirect=${encodeURIComponent(router.currentRoute.fullPath)}`);
+    throw new Error(message);
+  } else if (code === 0) {
     window.vueInstance.$message.error(message);
     throw new Error(message);
-  } catch (err) {
-    throw new Error(err);
+  } else {
+    console.error(res.data);
   }
 }
 

bookmark_front/src/views/main/Main.vue

@@ -13,11 +13,15 @@ import Content from "@/layout/main/Content.vue";
 import Bottom from "@/layout/main/Bottom.vue";
 import Top from "@//layout/main/Top.vue";
 
+import httpUtil from "../../util/HttpUtil";
 export default {
   name: "Home",
   components: { Top, Content, Bottom },
   async beforeCreate() {
-    this.$store.dispatch("globalConfig/init");
+    //数据初始化
+    await this.$store.dispatch("globalConfig/init");
+    //更新用户基本信息
+    this.$store.commit("globalConfig/setUserInfo", await httpUtil.get("/user/currentUserInfo"));
   }
 };
 </script>

bookmark_front/src/views/main/pages/things/BookmarkManage.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <a-tree
+      :tree-data="treeData"
+      :load-data="loadData"
+      :replace-fields="replaceFields"
+      :expandedKeys="expandedKeys"
+      @select="select"
+      @expand="expand"
+      blockNode
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "BookmarkManage",
+  data() {
+    return {
+      treeData: [],
+      expandedKeys: [],
+      replaceFields: {
+        title: "name",
+        key: "bookmarkId"
+      }
+    };
+  },
+  computed: {
+    ...mapState("treeData", ["totalTreeData"])
+  },
+  async beforeCreate() {
+    await this.$store.dispatch("treeData/init");
+    if (!this.totalTreeData[""]) {
+      this.totalTreeData[""] = [];
+    }
+    this.totalTreeData[""].forEach(item => (item.isLeaf = item.type === 0));
+    this.treeData = this.totalTreeData[""];
+  },
+  methods: {
+    loadData(treeNode) {
+      return new Promise(resolve => {
+        const data = treeNode.dataRef;
+        let newPath = data.path + "." + data.bookmarkId;
+        if (!this.totalTreeData[newPath]) {
+          this.totalTreeData[newPath] = [];
+        }
+        this.totalTreeData[newPath].forEach(item => (item.isLeaf = item.type === 0));
+        data.children = this.totalTreeData[newPath];
+        this.treeData = [...this.treeData];
+        resolve();
+      });
+    },
+    expand(expandedKeys, { expanded, node }) {
+      if (expanded) {
+        let item = node.dataRef;
+        this.expandedKeys = [
+          ...item.path
+            .split(".")
+            .filter(item => item.length > 0)
+            .map(item => parseInt(item)),
+          item.bookmarkId
+        ];
+      } else {
+        this.expandedKeys.pop();
+      }
+    },
+    select(key, { node }) {
+      let item = node.dataRef;
+      if (item.type === 1) {
+        let index = this.expandedKeys.indexOf(item.bookmarkId);
+        if (index > -1) {
+          this.expandedKeys.splice(index, 1);
+        } else {
+          this.expandedKeys = [
+            ...item.path
+              .split(".")
+              .filter(item => item.length > 0)
+              .map(item => parseInt(item)),
+            item.bookmarkId
+          ];
+        }
+      } else {
+        window.open(item.url);
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

bookmark_front/src/views/main/pages/things/BookmarkTree.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>书签树</div>
-</template>
-
-<script>
-export default {
-  name: "BookmarkTree"
-};
-</script>
-
-<style></style>

bookmark_front/src/views/public/pages/ResetPassword.vue

@@ -21,7 +21,7 @@
         <a-form-model-item prop="authCode" ref="authCode" :autoLink="false">
           <div class="authCodeGroup">
             <a-input v-model="form.authCode" placeholder="验证码" @change="() => $refs.authCode.onFieldChange()" />
-            <a-button @click="getAuthCode">{{ countDown == 0 ? "获取验证码" : countDown + "秒后重试" }}</a-button>
+            <a-button @click="getAuthCode" :disabled="countDown > 0">{{ countDown == 0 ? "获取验证码" : countDown + "秒后重试" }}</a-button>
           </div>
         </a-form-model-item>
 
@@ -84,26 +84,30 @@ export default {
     async getAuthCode() {
       this.$refs.resetPassword.validateField("email", async message => {
         if (message === "") {
-          await httpUtil.get("/user/authCode", { email: this.form.email });
-          this.$message.success("发送成功，请查收(注意垃圾箱)");
-          this.countDown = 60;
-          if (this.timer != null) {
-            clearInterval(this.timer);
-          }
-          this.timer = setInterval(() => {
-            if (this.countDown > 0) {
-              this.countDown = this.countDown - 1;
-            } else {
+          try {
+            this.countDown = 60;
+            if (this.timer != null) {
               clearInterval(this.timer);
             }
-          }, 1000);
+            this.timer = setInterval(() => {
+              if (this.countDown > 0) {
+                this.countDown = this.countDown - 1;
+              } else {
+                clearInterval(this.timer);
+              }
+            }, 1000);
+            await httpUtil.get("/user/authCode", { email: this.form.email });
+            this.$message.success("发送成功，请查收(注意垃圾箱)");
+          } catch (error) {
+            this.countDown = 0;
+          }
         }
       });
     },
     submit() {
       this.$refs.resetPassword.validate(async status => {
         if (status) {
-          let res = await httpUtil.put("/resetPassword", null, this.form);
+          let res = await httpUtil.post("/user/resetPassword", null, this.form);
           this.$message.success("重置成功");
           this.$router.replace("login");
         }