feat:刷新页面时判断缓存

bookMarkService/files/public/icon/1.1614853232994.html

@@ -0,0 +1,17 @@
+<!DOCTYPE NETSCAPE-Bookmark-file-1>
+<!-- This is an automatically generated file.
+     It will be read and overwritten.
+     DO NOT EDIT! -->
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+<TITLE>Bookmarks</TITLE>
+<H1>Bookmarks Menu</H1>
+
+<DL><p>
+    <DT><A HREF="http://0.0.0.1/" ADD_DATE="1614837460" LAST_MODIFIED="1614837465">1</A>
+    <DT><A HREF="http://0.0.0.2/" ADD_DATE="1614837471" LAST_MODIFIED="1614837474">2</A>
+    <DT><H3 ADD_DATE="1614837478" LAST_MODIFIED="1614837497">f1</H3>
+    <DL><p>
+        <DT><A HREF="http://asdf/" ADD_DATE="1614837485" LAST_MODIFIED="1614837493" TAGS="ww">f11</A>
+        <DT><A HREF="http://f12/" ADD_DATE="1614837497" LAST_MODIFIED="1614837502">f12</A>
+    </DL><p>
+</DL>

bookMarkService/files/public/icon/1.1614853330412.html

@@ -0,0 +1,17 @@
+<!DOCTYPE NETSCAPE-Bookmark-file-1>
+<!-- This is an automatically generated file.
+     It will be read and overwritten.
+     DO NOT EDIT! -->
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+<TITLE>Bookmarks</TITLE>
+<H1>Bookmarks Menu</H1>
+
+<DL><p>
+    <DT><A HREF="http://0.0.0.1/" ADD_DATE="1614837460" LAST_MODIFIED="1614837465">1</A>
+    <DT><A HREF="http://0.0.0.2/" ADD_DATE="1614837471" LAST_MODIFIED="1614837474">2</A>
+    <DT><H3 ADD_DATE="1614837478" LAST_MODIFIED="1614837497">f1</H3>
+    <DL><p>
+        <DT><A HREF="http://asdf/" ADD_DATE="1614837485" LAST_MODIFIED="1614837493" TAGS="ww">f11</A>
+        <DT><A HREF="http://f12/" ADD_DATE="1614837497" LAST_MODIFIED="1614837502">f12</A>
+    </DL><p>
+</DL>

bookmark_front/src/components/main/Search.vue

@@ -1,37 +1,10 @@
 <template>
   <div class="search">
-    <a-input-search
+    <a-input-search id="searchInput" ref="searchInput" size="large" style="width: 100%" v-model="value" enter-button @change="search" @search="searchClick" allowClear @blur.prevent="inputBlur" @focus="inputFocus" @keydown="keyPress" />
-      ref="searchInput"
-      size="large"
-      style="width: 100%"
-      v-model="value"
-      enter-button
-      @change="search"
-      @search="searchClick"
-      allowClear
-      @blur.prevent="inputBlur"
-      @focus="inputFocus"
-      @keydown="keyPress"
-    />
     <div v-if="focused" class="searchContent">
       <a-empty v-if="list.length == 0" />
-      <div
+      <div class="listItem" :class="{ itemActive: index == hoverIndex || index == selectIndex }" v-for="(item, index) in list" :key="item.bookmarkId" @mouseenter="mouseEnterOut(index, 'enter')" @mouseleave="mouseEnterOut(index, 'leave')" @mouseup="onMouse" @click="itemClick(item)">
-        class="listItem"
+        <a class="listItemUrl" style="padding-right: 1em; max-width: calc(100% - 2em)" :id="'bookmark:' + item.bookmarkId" :href="item.url" @click="itemClick($event,item.bookmarkId)" target="_blank">
-        :class="{ itemActive: index == hoverIndex || index == selectIndex }"
-        v-for="(item, index) in list"
-        :key="item.bookmarkId"
-        @mouseenter="mouseEnterOut(index, 'enter')"
-        @mouseleave="mouseEnterOut(index, 'leave')"
-        @mouseup="onMouse"
-        @click="itemClick(item)"
-      >
-        <a
-          class="listItemUrl"
-          style="padding-right: 1em; max-width: calc(100% - 2em)"
-          :id="'bookmark:' + item.bookmarkId"
-          :href="item.url"
-          target="_blank"
-        >
           {{ item.name }}
         </a>
         <a-tooltip v-if="showActions && hoverIndex === index" title="定位到书签树中">
@@ -79,6 +52,7 @@ export default {
       }
       let time1 = Date.now();
       this.list = this.dealSearch(content);
+      this.selectIndex = null;
       console.info("搜索耗时：" + (Date.now() - time1));
     },
     searchClick() {
@@ -86,12 +60,26 @@ export default {
         clearTimeout(this.timer);
       }
     },
-    itemClick(item) {
+    itemClick(e, id) {
-      HttpUtil.post("/bookmark/visitNum", { id: item.bookmarkId });
+      console.log(e, id);
+      this.stopDefault(e);
+      if (!id) {
+        return;
+      }
+      HttpUtil.post("/bookmark/visitNum", { id });
+      if (this.selectIndex == null) {
+        this.targetUrl = "https://www.baidu.com/s?ie=UTF-8&wd=" + encodeURIComponent(this.value);
+      } else {
+        this.targetUrl = this.list[this.selectIndex].url;
+      }
+      let a = this.$refs["targetA"];
+      a.href = this.targetUrl;
+      a.click();
+      return false;
     },
     inputBlur() {
       console.log("blur");
-      this.timer = setTimeout(() => (this.focused = false), 300);
+      this.timer = setTimeout(() => (this.focused = false), 250);
     },
     inputFocus() {
       this.focused = true;
@@ -103,7 +91,6 @@ export default {
       this.$refs["searchInput"].focus();
     },
     mouseEnterOut(item, type) {
-      console.log(item, type);
       if (type === "enter") {
         this.hoverIndex = item;
       } else {
@@ -116,22 +103,19 @@ export default {
     },
     //上下事件
     keyPress(e) {
+      let input = document.getElementById("searchInput");
       switch (e.key) {
         case "ArrowUp":
           this.selectIndex = this.selectIndex == null ? this.list.length - 1 : this.selectIndex == 0 ? null : this.selectIndex - 1;
+          this.stopDefault();
           break;
         case "ArrowDown":
           this.selectIndex = this.selectIndex == null ? 0 : this.selectIndex == this.list.length - 1 ? null : this.selectIndex + 1;
+          this.stopDefault();
           break;
         case "Enter":
-          if (this.selectIndex == null) {
+          this.itemClick();
-            this.targetUrl = "https://www.baidu.com/s?ie=UTF-8&wd=" + encodeURIComponent(this.value);
+          break;
-          } else {
-            this.targetUrl = this.list[this.selectIndex].url;
-          }
-          let a = this.$refs["targetA"];
-          a.href = this.targetUrl;
-          a.click();
       }
     },
     dealSearch(content) {
@@ -153,6 +137,18 @@ export default {
       }
       return res;
     },
+    /**
+     * 阻止默认事件
+     */
+    stopDefault(e) {
+      //阻止默认浏览器动作(W3C)
+      if (e && e.preventDefault) {
+        e.preventDefault();
+      } else {
+        window.event.returnValue = false;
+      }
+      return false;
+    },
   },
 };
 </script>
@@ -165,6 +161,10 @@ export default {
     width: 100%;
     background: white;
     z-index: 1;
+    border: 1px solid black;
+    border-top: 0;
+    padding: 5px;
+    border-radius: 5px;
     .listItem {
       font-size: 0.16rem;
       display: flex;
@@ -178,7 +178,7 @@ export default {
       }
     }
     .itemActive {
-      background-color: #f8f8f8;
+      background-color: #aca6a6;
     }
   }
 }

bookmark_front/src/store/modules/treeData.js

@@ -43,12 +43,14 @@ const actions = {
       return;
     }
     context.commit("isIniting", true);
+    let userInfo = await httpUtil.get("/user/currentUserInfo");
     let data = await localforage.getItem(TOTAL_TREE_DATA);
-    if (!data) {
+    let version = await localforage.getItem(VERSION);
+    if (!data || userInfo.version > version) {
       await context.dispatch("refresh");
     } else {
       context.commit(TOTAL_TREE_DATA, data);
-      context.commit(VERSION, await localforage.getItem(VERSION));
+      context.commit(VERSION, version);
     }
     context.commit("isIniting", false);
     context.commit("isInit", true);

bookmark_front/src/views/main/Main.vue

@@ -35,7 +35,6 @@ export default {
     await this.$store.dispatch("treeData/init");
     console.log("treeData加载完毕");
     console.log("state数据:", this.$store.state);
-    await this.checkVersion();
     this.timer = setInterval(this.checkVersion, 60 * 1000);
   },
   destroyed() {

bookmark_front/src/views/main/pages/personSpace/UserInfo.vue

@@ -1,11 +1,92 @@
 <template>
-  <div>个人空间</div>
+  <div class="userInfo">
+    <div class="icon">
+      <img :src="userInfo.icon" class="full" />
+      <label class="full">
+        <input type="file" style="display: none" @change="changeIcon" />
+        <div class="full changeIcon">
+          <span>编辑</span>
+        </div>
+      </label>
+    </div>
+    <div class="baseInfo">
+      <div class="item">
+        <span>昵称</span>
+        <span>{{userInfo.name}}</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+import HttpUtil from "../../../../util/HttpUtil";
 export default {
-  name: "UserInfo"
+  name: "UserInfo",
+  computed: {
+    ...mapState("globalConfig", ["userInfo"]),
+  },
+  methods: {
+    async changeIcon(e) {
+      let file = e.target.files[0];
+      console.log(file);
+      if (!file || file.size > 500 * 1024 * 8) {
+        message.error("文件大小请勿超过500KB");
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file);
+      let res = await HttpUtil.post("/user/icon", null, formData, true);
+      this.$set(this.userInfo, "icon", res);
+    },
+  },
 };
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.userInfo {
+  min-width: 50%;
+  max-width: 30em;
+  margin: 0 auto;
+  display: flex;
+
+  .icon {
+    position: relative;
+    border-radius: 5px;
+    margin-right: 1em;
+    @media (min-width: 768px) {
+      width: 150px;
+      height: 150px;
+    }
+    @media (max-width: 768px) {
+      width: 75px;
+      height: 75px;
+    }
+
+    .full {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    .changeIcon {
+      background-color: transparent;
+      color: rgba(173, 166, 166, 0);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 2em;
+    }
+
+    .changeIcon:hover {
+      // background-color: rbga(173, 166, 166, 1);
+      background-color: rgba(173, 166, 166, 0.8) !important;
+      color: white;
+    }
+  }
+
+  .baseInfo {
+    flex: 1;
+  }
+}
+</style>