fanxb/bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat:刷新页面时判断缓存

Browse Source
This commit is contained in:
fanxb 2021-03-05 14:17:49 +08:00
parent 270587c990
commit a960ca062f
6 changed files with 165 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
bookMarkService/files/public/icon/1.1614853232994.html Normal file
View File

@ -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>

17
bookMarkService/files/public/icon/1.1614853330412.html Normal file
View File

@ -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>

86
bookmark_front/src/components/main/Search.vue
View File

@ -1,37 +1,10 @@
<template>
<div class="search">
<a-input-search
ref="searchInput"
size="large"
style="width: 100%"
v-model="value"
enter-button
@change="search"
@search="searchClick"
allowClear
@blur.prevent="inputBlur"
@focus="inputFocus"
@keydown="keyPress"
/>
<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" />
<div v-if="focused" class="searchContent">
<a-empty v-if="list.length == 0" />
<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)"
>
<a
class="listItemUrl"
style="padding-right: 1em; max-width: calc(100% - 2em)"
:id="'bookmark:' + item.bookmarkId"
:href="item.url"
target="_blank"
>
<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)">
<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">
{{ 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) {
HttpUtil.post("/bookmark/visitNum", { id: item.bookmarkId });
itemClick(e, id) {
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.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();
this.itemClick();
break;
}
},
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;
}
}
}

6
bookmark_front/src/store/modules/treeData.js
View File

@ -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);

1
bookmark_front/src/views/main/Main.vue
View File

@ -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() {

87
bookmark_front/src/views/main/pages/personSpace/UserInfo.vue
View File

@ -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>