feat:vue版登陆、注册、重置密码功能完成

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); //公共背景色

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
       }
     ]
   }

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;
   }
 };
 

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);
 }
 
 /**

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");
+  }
 };
 </script>
 

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;
   }

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

@@ -16,7 +16,7 @@
         <a-form-model-item prop="password">
           <div class="reset">
             <a-checkbox v-model="form.rememberMe">记住我</a-checkbox>
-            <router-link replace="reset">重置密码</router-link>
+            <router-link to="resetPassword" replace>重置密码</router-link>
           </div>
         </a-form-model-item>
 
@@ -33,6 +33,7 @@
 <script>
 import Header from "@/components/public/Switch.vue";
 import httpUtil from "../../../util/HttpUtil.js";
+import { mapMutations } from "vuex";
 export default {
   name: "Login",
   components: {
@@ -48,21 +49,24 @@ export default {
       rules: {
         str: [
           { required: true, message: "请输入用户名", trigger: "blur" },
-          { min: 1, max: 50, message: "最短1，最长50", trigger: "blur" }
+          { min: 1, max: 50, message: "最短1，最长50", trigger: "change" }
         ],
         password: [
           { required: true, message: "请输入密码", trigger: "blur" },
-          { pattern: "^\\w{6,18}$", message: "密码为6-18位数字,字母,下划线组合", trigger: "blur" }
+          { pattern: "^\\w{6,18}$", message: "密码为6-18位数字,字母,下划线组合", trigger: "change" }
         ]
       }
     };
   },
   methods: {
+    ...mapMutations("globalConfig", ["setUserInfo", "setToken"]),
     submit() {
-      let _this = this;
       this.$refs.loginForm.validate(async status => {
         if (status) {
-          let res = await httpUtil.post("/user/login", null, _this.form);
+          let res = await httpUtil.post("/user/login", null, this.form);
+          this.setUserInfo(res.user);
+          this.$store.commit("globalConfig/setToken", res.token);
+          this.$router.replace("/");
         }
       });
     }

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

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <Header current="register" />
+    <div class="form">
+      <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-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-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-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-input>
+        </a-form-model-item>
+
+        <a-form-model-item>
+          <div class="btns">
+            <a-button type="primary" block @click="submit">注册</a-button>
+          </div>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from "@/components/public/Switch.vue";
+import httpUtil from "../../../util/HttpUtil.js";
+export default {
+  name: "Login",
+  components: {
+    Header
+  },
+  data() {
+    let repeatPass = (rule, value, cb) => {
+      if (value === "") {
+        cb(new Error("请再次输入密码"));
+      } else if (value !== this.form.password) {
+        cb(new Error("两次密码不一致"));
+      } else {
+        cb();
+      }
+    };
+    return {
+      form: {
+        username: "",
+        email: "",
+        password: "",
+        repeatPass: ""
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 1, max: 50, message: "最短1，最长50", trigger: "blur" }
+        ],
+        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,}))$/,
+            message: "请输入正确的邮箱",
+            trigger: "change"
+          }
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { pattern: "^\\w{6,18}$", message: "密码为6-18位数字,字母,下划线组合", trigger: "change" }
+        ],
+        repeatPass: [{ validator: repeatPass, trigger: "change" }]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      let _this = this;
+      this.$refs.registerForm.validate(async status => {
+        if (status) {
+          let res = await httpUtil.put("/user", null, _this.form);
+          this.$store.commit("globalConfig/setUserInfo", res.user);
+          this.$store.commit("globalConfig/setToken", res.token);
+          this.$router.replace("/");
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.form {
+  margin: 0.3rem;
+  .reset {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>