temp:首页布局

bookmark_front/src/layout/home/Bottom.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="bottom">这是首页的底部</div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "homeTop",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.bottom {
+  height: 0.2rem;
+}
+</style>

bookmark_front/src/layout/home/Top.vue

@@ -1,5 +1,8 @@
 <template>
-  <div></div>
+  <div class="top">
+    <div>应用</div>
+    <div>头像</div>
+  </div>
 </template>
 
 <script>
@@ -15,4 +18,14 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.top {
+  height: 0.8rem;
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 0.4rem;
+  padding-right: 0.4rem;
+}
+</style>

bookmark_front/src/layout/manage/Top.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main" v-if="userInfo">
-    <a class="ico" href="/"><img src="/static/img/bookmarkLogo.png" style="height:100%" /></a>
+    <a class="ico" href="/"><img src="/static/img/bookmarkLogo.png" style="height: 100%" /></a>
     <a-dropdown>
       <div class="user">
         <img :src="userInfo.icon" class="userIcon" />
@@ -28,10 +28,12 @@ export default {
   methods: {
     async menuClick({ key }) {
       if (key === "logout") {
+        //推出登录清理缓存
+        await this.$store.dispatch("treeData/clear");
         await this.$store.dispatch("globalConfig/clear");
         this.$router.replace("/public/login");
       } else if (key === "personSpace") {
-        this.$router.push("/personSpace/userInfo");
+        this.$router.push("/manage/personSpace/userInfo");
       }
     },
   },

bookmark_front/src/router/index.js

@@ -12,6 +12,7 @@ const routes = [
 		path: "/manage",
 		component: () => import("@/views/manage/index"),
 		children: [
+			{ path: "", redirect: "/manage/bookmarkTree" },
 			{ path: "bookmarkTree", component: () => import("@/views/manage/bookmarkTree/index") },
 			{ path: "personSpace/userInfo", component: () => import("@/views/manage/personSpace/index") },
 		]
@@ -46,7 +47,9 @@ router.beforeEach(async (to, from, next) => {
 	let supportNoLogin = to.path === '/' || to.path.startsWith("/public");
 	vuex.default.commit(GLOBAL_CONFIG + "/" + SUPPORT_NO_LOGIN, supportNoLogin);
 	if (!supportNoLogin && !checkJwtValid(vuex.default.state[GLOBAL_CONFIG][TOKEN])) {
-		//如不支持未登录进入，切jwt已过期，直接跳转到登录页面
+		//如不支持未登录进入，切jwt已过期，直接跳转到登录页面,并清理缓存
+		await vuex.default.dispatch("treeData/clear");
+		await vuex.default.dispatch("globalConfig/clear");
 		next({
 			path: "/public/login?to=" + btoa(location.href),
 			replace: true

bookmark_front/src/util/HttpUtil.js

@@ -43,6 +43,9 @@ async function request (url, method, params, body, isForm, redirect) {
 	} else if (code === -1 && redirect) {
 		//未登陆，根据redirect参数判断是否需要跳转到登陆页
 		window.vueInstance.$message.error("您尚未登陆，请先登陆");
+		//跳转到登录页面需要清理缓存
+		await this.$store.dispatch("treeData/clear");
+		await this.$store.dispatch("globalConfig/clear");
 		router.replace(`/public/login?redirect=${encodeURIComponent(router.currentRoute.fullPath)}`);
 		throw new Error(message);
 	} else if (code === 0) {

bookmark_front/src/views/home/header.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="main">表头</div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="less" scoped>
-.main {
-}
-</style>

bookmark_front/src/views/home/index.vue

@@ -1,13 +1,24 @@
 <template>
-  <div class="main">这是主页面</div>
+  <div class="main">
+    <top />
+    <div class="content">
+      <search style="width: 60%" />
+      <div>书签收藏区</div>
+    </div>
+    <bottom />
+  </div>
 </template>
 
 <script>
-import header from "./header.vue";
+import Top from "@/layout/home/Top.vue";
+import Bottom from "@/layout/home/Bottom.vue";
+import Search from "@/components/main/Search.vue";
 export default {
   name: "HOME",
   components: {
-    header,
+    Top,
+    Bottom,
+    Search,
   },
   data() {
     return {};
@@ -20,5 +31,16 @@ export default {
 .main {
   width: 100%;
   height: 100vh;
+  background: url("/static/img/homeBg.jpg") no-repeat center center;
+  background-size: cover;
+  background-attachment: fixed;
+
+  .content {
+    height: calc(~"100vh" - 1.01rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
 }
 </style>

bookmark_front/src/views/public/login/index.vue

@@ -5,12 +5,12 @@
       <a-form-model ref="loginForm" :model="form" :rules="rules">
         <a-form-model-item prop="str" ref="str">
           <a-input v-model="form.str" placeholder="邮箱/用户名">
-            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
+            <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-model-item>
         <a-form-model-item prop="password">
           <a-input v-model="form.password" placeholder="密码" type="password">
-            <a-icon slot="prefix" type="password" style="color:rgba(0,0,0,.25)" />
+            <a-icon slot="prefix" type="password" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-model-item>
         <div class="reset">
@@ -25,7 +25,7 @@
           <div class="thirdPart">
             <span>第三方登陆</span>
             <a-tooltip v-if="serverConfig.proxyExist" title="github登陆" class="oneIcon" placement="bottom">
-              <a-icon type="github" @click="toGithub" style="font-size:1.4em" />
+              <a-icon type="github" @click="toGithub" style="font-size: 1.4em" />
             </a-tooltip>
           </div>
         </a-form-model-item>
@@ -37,15 +37,15 @@
 <script>
 import Header from "@/components/public/Switch.vue";
 import httpUtil from "../../../util/HttpUtil.js";
-import { mapMutations ,mapState} from "vuex";
+import { mapMutations, mapState } from "vuex";
 import HttpUtil from "../../../util/HttpUtil.js";
 export default {
   name: "Login",
   components: {
     Header,
   },
-  computed:{
+  computed: {
-    ...mapState("globalConfig", ["serverConfig"])
+    ...mapState("globalConfig", ["serverConfig"]),
   },
   data() {
     return {
@@ -72,10 +72,6 @@ export default {
   async created() {
     let _this = this;
     window.addEventListener("storage", this.storageDeal.bind(this));
-
-    //进入注册、登录页需要清理掉所有的缓存数据
-    await this.$store.dispatch("treeData/clear");
-    await this.$store.dispatch("globalConfig/clear");
   },
   destroyed() {
     window.removeEventListener("storage", this.storageDeal);

bookmark_front/src/views/public/register/index.vue

@@ -5,22 +5,22 @@
       <a-form-model ref="registerForm" :model="form" :rules="rules">
         <a-form-model-item prop="username">
           <a-input v-model="form.username" placeholder="用户名">
-            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
+            <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-model-item>
         <a-form-model-item prop="email">
           <a-input v-model="form.email" placeholder="邮箱">
-            <a-icon slot="prefix" type="password" style="color:rgba(0,0,0,.25)" />
+            <a-icon slot="prefix" type="password" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-model-item>
         <a-form-model-item prop="password">
           <a-input v-model="form.password" placeholder="密码" type="password">
-            <a-icon slot="prefix" type="password" style="color:rgba(0,0,0,.25)" />
+            <a-icon slot="prefix" type="password" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-model-item>
         <a-form-model-item prop="repeatPass">
           <a-input v-model="form.repeatPass" placeholder="重复密码" type="password">
-            <a-icon slot="prefix" type="password" style="color:rgba(0,0,0,.25)" />
+            <a-icon slot="prefix" type="password" style="color: rgba(0, 0, 0, 0.25)" />
           </a-input>
         </a-form-model-item>
 
@@ -66,7 +66,8 @@ export default {
         ],
         email: [
           {
-            pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+            pattern:
+              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
             message: "请输入正确的邮箱",
             trigger: "change",
           },
@@ -79,11 +80,6 @@ export default {
       },
     };
   },
-  async created() {
-    //进入注册、登录页需要清理掉所有的缓存数据
-    await this.$store.dispatch("treeData/clear");
-    await this.$store.dispatch("globalConfig/clear");
-  },
   methods: {
     submit() {
       let _this = this;