路由更新

增加修改密码组件增加mock 增加状态管理
4 years ago · f3a09a0cde
parent c143deb551
commit f3a09a0cde
9 changed files with 234 additions and 72 deletions
--- a/mock/test.ts
+++ b/mock/test.ts
@ -1,5 +1,5 @@
 import {MockMethod} from 'vite-plugin-mock';
-import {sendCodeApi} from "../src/interface";
+import {changeEmailApi, changePwdApi, sendCodeApi} from "../src/interface";


 const Mock = require('mockjs')
@ -8,22 +8,57 @@ export default [
    {
        url: sendCodeApi,
        method: 'post',
-        response: ({ query }) => {
-            return Mock.mock({
-                'result':'OK',
-                'message':'验证码发送成功'
+        response: ({query}) => {
+            const result = Mock.mock({
+                'result': /OK|FAIL/,
            })
+            if (result.result === 'OK') {
+                result.message = '验证码发送成功'
+            } else {
+                result.message = '验证码发送失败'
+            }
+            return result
        },
    },
    {
-        url: '/api/post',
+        url: changeEmailApi,
        method: 'post',
-        timeout: 2000,
-        response: {
-            code: 0,
-            data: {
-                name: 'vben',
-            },
+        response: ({query}) => {
+            const result = Mock.mock({
+                'result': /OK|FAIL/,
+            })
+
+
+            if (result.result === 'OK') {
+                result.message = '邮箱更新成功'
+                return result
+            } else {
+                return {
+                    ...result, ...Mock.mock({
+                        'message': /更新失败,(邮箱不合法|邮箱已绑定|请输入正确验证码)/
+                    })
+                }
+            }
        },
    },
+    {
+        url: changePwdApi,
+        method: 'post',
+        response: ({query}) => {
+            const result = Mock.mock({
+                'result': /OK|FAIL/,
+            })
+
+            if (result.result === 'OK') {
+                result.message = '修改密码成功'
+                return result
+            } else {
+                return {
+                    ...result, ...Mock.mock({
+                        'message': /修改失败,(密码不合法)/
+                    })
+                }
+            }
+        }
+    }
 ] as MockMethod[];
--- a/src/App.vue
+++ b/src/App.vue
@ -6,35 +6,39 @@
            <h1>直播间状态通知</h1>
          </el-col>
          <el-col :span="20">
-            <el-menu mode="horizontal" :default-active="activeIndex">
-              <el-menu-item index="1"><router-link to="/">主页</router-link></el-menu-item>
-              <el-submenu index="2">
+            <el-menu mode="horizontal" :router="true" :default-active="store.state.route">
+              <el-menu-item index="/home">主页</el-menu-item>
+              <el-submenu index="">
                <template v-slot:title>个人信息</template>
-                  <el-menu-item index="2-1">修改密码</el-menu-item>
-                  <el-menu-item index="2-2"><router-link to="/email">修改邮箱</router-link></el-menu-item>
-                  <el-menu-item index="2-3"><router-link to="">退出登录</router-link></el-menu-item>
+                <el-menu-item index="/password">修改密码</el-menu-item>
+                <el-menu-item index="/email">修改邮箱</el-menu-item>
+                <el-menu-item index="/">退出登录</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
    </el-header>
    <el-main>
-      <router-view></router-view>
+      <Home v-if="$route.fullPath==='/'"/>
+      <router-view v-else/>
    </el-main>
  </el-container>

 </template>

 <script lang="ts">
-import {defineComponent, ref} from 'vue'
+import {defineComponent} from 'vue'
+import Home from "./components/Home.vue";
+import {useStore} from "vuex";


 export default defineComponent({
  name: 'App',
-  setup(){
-    const activeIndex=ref<string>('1')
+  components: {Home},
+  setup() {
+    const store = useStore()

-    return {activeIndex}
+    return {store}
  }
 })
 </script>
--- a/src/components/Email.vue
+++ b/src/components/Email.vue
@ -26,11 +26,11 @@
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="2">
-      <el-button type="primary" class="btn-block" :disabled="!checkCode">更换邮箱</el-button>
+      <el-button type="primary" class="btn-block" :disabled="!checkCode" @click="changeEmail">更换邮箱</el-button>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="2">
-      <el-button type="info" class="btn-block">返回</el-button>
+      <el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
    </el-col>
  </el-row>
 </template>
@ -38,9 +38,10 @@
 <script lang="ts">
 import {computed, defineComponent, ref} from "vue";

-import {changeEmail as _changeEmail, sendCode as _sendCode} from "../request";
+import {changeEmail as _changeEmail, message, sendCode as _sendCode} from "../request";
 import {useStore} from "vuex";
-import {Message} from 'element3/src/components/Message'
+import {updateRoute} from "../router";
+import {useRouter} from "vue-router";

 export default defineComponent({
  name: 'Email',
@ -50,40 +51,41 @@ export default defineComponent({

    const second = ref<number>(0)

-    const store=useStore()
+    const store = useStore()
+
+    const router = useRouter()

    const sendCode = () => {
-      second.value=10
-      _sendCode(store.state.user.email).then(res=>res.json()).then(res=>{
-        if(res.result==='OK'){
+      second.value = 10
+
+      _sendCode(store.state.user.email).then(res => res.json()).then(res => {
+        message(res)
+        if (res.result === 'OK') {
          console.info('发送验证码成功')
-          new Message({
-            showClose: true,
-            message: '发送验证码成功',
-            type: 'success'
-          })

-          const t=setInterval(function (){
+          const t = setInterval(function () {
            if(second.value===0){
              clearInterval(t)
-            }else {
+            } else {
              second.value--
            }
-          },1000)
-        }else{
-          second.value=0
-          new Message({
-            showClose: true,
-            message: '发送验证码失败',
-            type: 'error'
-          })
+          }, 1000)
+        } else {
+          second.value = 0
        }
      })
    }

-    const changeEmail=()=> _changeEmail(store.state.user.email,newEmail.value,code.value)
+    const changeEmail = () => _changeEmail(store.state.user.email, newEmail.value, code.value).then(res => res.json()).then(
+        res => {
+          message(res)
+          if (res.result === 'OK') {
+            router.replace('/home')
+          }
+        }
+    )

-    const userEmail= computed(() => store.state.user.email)
+    const userEmail = computed(() => store.state.user.email)

    const allowSendCode = computed<boolean>(() => second.value === 0 && userEmail !== newEmail.value && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(newEmail.value))

@ -91,6 +93,7 @@ export default defineComponent({

    const checkCode = computed<boolean>(() => /^\d{6}$/.test(code.value))

+    updateRoute()

    return {
      newEmail,
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@ -2,10 +2,21 @@
  <h1>主页</h1>
 </template>

-<script>
-export default {
-  name: "Home"
-}
+<script lang="ts">
+import {defineComponent, onMounted} from "vue";
+import {useStore} from "vuex";
+
+export default defineComponent({
+  name: "Home",
+  setup() {
+
+    const store = useStore()
+
+    onMounted(() => {
+      store.commit('updateRoute', '/home')
+    })
+  }
+})
 </script>

 <style scoped>
--- a/src/components/Password.vue
+++ b/src/components/Password.vue
@ -0,0 +1,71 @@
+<template>
+  <el-row type="flex" justify="center">
+    <el-col :span="8">
+      <span>密码只能由数字和英文字母组成，长度最小{{ min }}最大{{ max }}</span>
+      <el-input v-model="password" show-password>
+        <template v-slot:prepend>新密码</template>
+      </el-input>
+      <span v-if="password!==''&&!checkPwd">新密码不合法</span>
+    </el-col>
+  </el-row>
+  <el-row type="flex" justify="center" class="mt-1">
+    <el-col :span="8">
+      <el-input v-model="newPassword" show-password>
+        <template v-slot:prepend>确认新密码</template>
+      </el-input>
+      <span v-if="password!==''&&newPassword!==''&&password!==newPassword">两次密码输入不一致！</span>
+    </el-col>
+  </el-row>
+  <el-row type="flex" justify="center" class="mt-1">
+    <el-col :span="2">
+      <el-button type="primary" class="btn-block" :disabled="!(password!==''&&password===newPassword)"
+                 @click="requestChangePwd">修改密码
+      </el-button>
+    </el-col>
+    <el-col :span="2"/>
+    <el-col :span="2">
+      <el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, ref} from "vue"
+import {updateRoute} from "../router";
+import {changePwd, message} from "../request";
+import {useRoute, useRouter} from "vue-router";
+import {useStore} from "vuex";
+
+const min = 5
+const max = 10
+const pwdRegExp = new RegExp(`^[0-9a-zA-Z]{5,10}$`)
+
+export default defineComponent({
+  name: "Password",
+  setup(props) {
+    const password = ref<string>('')
+    const newPassword = ref<string>('')
+    const route = useRoute()
+    const router = useRouter()
+    const store = useStore()
+
+    const checkPwd = computed<boolean>(() => pwdRegExp.test(password.value))
+
+    const requestChangePwd = () => changePwd(store.state.user.email, password.value).then(res => res.json())
+        .then(res => {
+          message(res)
+          if (res.result === 'OK') {
+            router.replace('/home')
+          }
+        })
+
+    updateRoute()
+
+    return {password, newPassword, checkPwd, min, max, requestChangePwd}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
--- a/src/interface.ts
+++ b/src/interface.ts
@ -1 +1,3 @@
-export const sendCodeApi='/api/change/email'
+export const sendCodeApi = '/api/change/email/code'
+export const changeEmailApi = '/api/change/email'
+export const changePwdApi = '/api/change/pwd'
--- a/src/request.ts
+++ b/src/request.ts
@ -1,13 +1,39 @@
-import {sendCodeApi} from "./interface";
+import {changeEmailApi, changePwdApi, sendCodeApi} from "./interface";
+// @ts-ignore
+import {Message} from 'element3/src/components/Message'

 /**
 * 发送验证码
 * @param userEmail
 */
-export function sendCode(userEmail:string){
-    return fetch(new Request(sendCodeApi,{method:'POST',body:JSON.stringify({userEmail})}))
+export function sendCode(userEmail: string) {
+    return fetch(new Request(sendCodeApi, {method: 'POST', body: JSON.stringify({userEmail})}))
 }

-export function changeEmail(oldEmail:string,newEmail:string,code:string){
+/**
+ * 更换邮箱
+ * @param oldEmail
+ * @param newEmail
+ * @param code
+ */
+export function changeEmail(oldEmail: string, newEmail: string, code: string) {
+    return fetch(new Request(changeEmailApi, {method: 'POST', body: JSON.stringify({oldEmail, newEmail, code})}))
+}
+
+/**
+ * 更换密码
+ * @param userEmail
+ * @param password
+ */
+export function changePwd(userEmail: string, password: string) {
+    return fetch(new Request(changePwdApi, {method: 'POST', body: JSON.stringify({userEmail, password})}))
+}

+export function message(res: any) {
+    new Message({
+        showClose: true,
+        duration: 3000,
+        message: res.message,
+        type: res.result === 'OK' ? 'success' : 'error'
+    })
 }
--- a/src/router.ts
+++ b/src/router.ts
@ -1,22 +1,28 @@
-// 1. 定义路由组件.
-// 也可以从其他文件导入
-import {createRouter, createWebHashHistory} from "vue-router";
+import {createRouter, createWebHashHistory, useRoute} from "vue-router";
 import Email from "./components/Email.vue";
 import Home from "./components/Home.vue";
+import {useStore} from "vuex";
+import {onMounted} from "vue";
+import Password from "./components/Password.vue";
+

-// 2. 定义一些路由
-// 每个路由都需要映射到一个组件。
-// 我们后面再讨论嵌套路由。
 const routes = [
-    {path:'/',component: Home},
-    { path: '/email', component: Email },
+    {path: '/home', component: Home},
+    {path: '/email', component: Email},
+    {path: '/password', component: Password}
 ]

-// 3. 创建路由实例并传递 `routes` 配置
-// 你可以在这里输入更多的配置，但我们在这里
-// 暂时保持简单
+
 export const router = createRouter({
-    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
-    routes, // `routes: routes` 的缩写
+    routes
 })
+
+export function updateRoute() {
+    const store = useStore()
+    const route = useRoute()
+
+    onMounted(() => {
+        store.commit('updateRoute', route.fullPath)
+    })
+}
--- a/src/store.ts
+++ b/src/store.ts
@ -4,12 +4,16 @@ export const store = createStore({
    state: () => ({
        user: {
            email: '1029559041@qq.com'
-        }
+        },
+        route: '/home'
    }),
    mutations: {
        setUser(state, user) {
            // @ts-ignore
            state.user = user
+        },
+        updateRoute(state, route) {
+            state.route = route
        }
    }