From 3754a4db90a9634b03867322669877bf12f45c2b Mon Sep 17 00:00:00 2001 From: fanxb Date: Tue, 14 Jul 2020 14:38:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:vue=E7=89=88=E7=99=BB=E9=99=86=E3=80=81?= =?UTF-8?q?=E6=B3=A8=E5=86=8C=E3=80=81=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bookmark_front/src/global.less | 7 +- bookmark_front/src/router/index.js | 12 ++ .../src/store/modules/globalConfig.js | 40 ++++++- bookmark_front/src/util/HttpUtil.js | 26 +++-- bookmark_front/src/views/main/Main.vue | 5 +- bookmark_front/src/views/public/Public.vue | 2 +- .../src/views/public/pages/Login.vue | 14 ++- .../src/views/public/pages/Register.vue | 106 ++++++++++++++++++ 8 files changed, 186 insertions(+), 26 deletions(-) create mode 100644 bookmark_front/src/views/public/pages/Register.vue diff --git a/bookmark_front/src/global.less b/bookmark_front/src/global.less index 256d66a..8adef63 100644 --- a/bookmark_front/src/global.less +++ b/bookmark_front/src/global.less @@ -1,5 +1,10 @@ @bgColor: rgba(211, 211, 205, 0.3); //全局背景色 +/** + * 公共页面配置 +**/ +@publicBgColor: rgb(255, 255, 255); //public背景色 + /** * header 配置 */ @@ -14,4 +19,4 @@ /** * content配置 */ -@contentBgColor: rgb(255, 255, 255); //登录页背景色 +@contentbgcolor: rgb(255, 255, 255); //公共背景色 diff --git a/bookmark_front/src/router/index.js b/bookmark_front/src/router/index.js index cc18d0b..7c97398 100644 --- a/bookmark_front/src/router/index.js +++ b/bookmark_front/src/router/index.js @@ -6,6 +6,8 @@ import BookmarkTree from "../views/main/pages/things/BookmarkTree.vue"; import Public from "../views/public/Public.vue"; import Login from "../views/public/pages/Login.vue"; +import Register from "../views/public/pages/Register.vue"; +import ResetPassword from "../views/public/pages/ResetPassword.vue"; Vue.use(VueRouter); @@ -35,6 +37,16 @@ const routes = [ path: "login", name: "Login", component: Login + }, + { + path: "register", + name: "Register", + component: Register + }, + { + path: "resetPassword", + name: "ResetPassword", + component: ResetPassword } ] } diff --git a/bookmark_front/src/store/modules/globalConfig.js b/bookmark_front/src/store/modules/globalConfig.js index cb05578..a9098ba 100644 --- a/bookmark_front/src/store/modules/globalConfig.js +++ b/bookmark_front/src/store/modules/globalConfig.js @@ -1,21 +1,49 @@ +import localforage from "localforage"; /** * 存储全局配置 */ const state = { /** - * 是否处于登录、注册页 + * 用户信息 */ - isLogReg: false + userInfo: null, + /** + * token + */ + token: null, + /** + * 是否已经初始化完成,避免多次重复初始化 + */ + isInit: false }; const getters = {}; -const actions = {}; +const actions = { + async init(context) { + if (context.state.isInit) { + return; + } + context.commit("setUserInfo", await localforage.getItem("userInfo")); + const token = await localforage.getItem("token"); + window.token = token; + context.commit("setToken", token); + context.commit("isInit", true); + } +}; const mutations = { - setCount(oState, isLogReg) { - // eslint-disable-next-line no-param-reassign - oState.isLogReg = isLogReg; + setUserInfo(state, userInfo) { + localforage.setItem("userInfo", userInfo); + state.userInfo = userInfo; + }, + setToken(state, token) { + localforage.setItem("token", token); + window.token = token; + state.token = token; + }, + isInit(state, isInit) { + state.isInit = isInit; } }; diff --git a/bookmark_front/src/util/HttpUtil.js b/bookmark_front/src/util/HttpUtil.js index 0734b34..5df374e 100644 --- a/bookmark_front/src/util/HttpUtil.js +++ b/bookmark_front/src/util/HttpUtil.js @@ -13,21 +13,23 @@ import router from "../router/index"; * @returns 数据 */ async function request(url, method, params, body, isForm, redirect) { - const headers = { - "jwt-token": await getToken() + let options = { + url, + baseURL: "/bookmark/api", + method, + params, + headers: { + "jwt-token": await getToken() + } }; if (isForm) { - headers["Content-Type"] = "multipart/form-data"; + options.headers["Content-Type"] = "multipart/form-data"; + } + if (body) { + options.data = body; } try { - const res = await http.default.request({ - url, - baseURL: "/bookmark/api", - method, - params, - data: body, - headers - }); + const res = await http.default.request(options); const { code, data, message } = res.data; if (code === 1) { return data; @@ -51,7 +53,7 @@ async function request(url, method, params, body, isForm, redirect) { * @param {*} redirect 未登陆是否跳转到登陆页 */ async function get(url, params = null, redirect = true) { - return request(url, "get", params, null, redirect); + return request(url, "get", params, null, false, redirect); } /** diff --git a/bookmark_front/src/views/main/Main.vue b/bookmark_front/src/views/main/Main.vue index 0aa7f17..548a90d 100644 --- a/bookmark_front/src/views/main/Main.vue +++ b/bookmark_front/src/views/main/Main.vue @@ -15,7 +15,10 @@ import Top from "@//layout/main/Top.vue"; export default { name: "Home", - components: { Top, Content, Bottom } + components: { Top, Content, Bottom }, + async beforeCreate() { + this.$store.dispatch("globalConfig/init"); + } }; diff --git a/bookmark_front/src/views/public/Public.vue b/bookmark_front/src/views/public/Public.vue index 1c8d271..0ba2d8e 100644 --- a/bookmark_front/src/views/public/Public.vue +++ b/bookmark_front/src/views/public/Public.vue @@ -31,7 +31,7 @@ export default { .main-body { width: 5rem; min-height: 3.5rem; - background-color: @contentBgColor; + background-color: @publicBgColor; border-radius: 5px; padding: 0.1rem; } diff --git a/bookmark_front/src/views/public/pages/Login.vue b/bookmark_front/src/views/public/pages/Login.vue index 6ed2852..c49cc2e 100644 --- a/bookmark_front/src/views/public/pages/Login.vue +++ b/bookmark_front/src/views/public/pages/Login.vue @@ -16,7 +16,7 @@
记住我 - 重置密码 + 重置密码
@@ -33,6 +33,7 @@ + +