路由更新

增加修改密码组件
增加mock
增加状态管理

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 }) => {
+        response: ({query}) => {
-            return Mock.mock({
+            const result = Mock.mock({
-                'result':'OK',
+                'result': /OK|FAIL/,
-                'message':'验证码发送成功'
             })
+            if (result.result === 'OK') {
+                result.message = '验证码发送成功'
+            } else {
+                result.message = '验证码发送失败'
+            }
+            return result
         },
     },
     {
-        url: '/api/post',
+        url: changeEmailApi,
         method: 'post',
-        timeout: 2000,
+        response: ({query}) => {
-        response: {
+            const result = Mock.mock({
-            code: 0,
+                'result': /OK|FAIL/,
-            data: {
+            })
-                name: 'vben',
+
-            },
+
+            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[];

src/App.vue

@@ -6,35 +6,39 @@
             <h1>直播间状态通知</h1>
           </el-col>
           <el-col :span="20">
-            <el-menu mode="horizontal" :default-active="activeIndex">
+            <el-menu mode="horizontal" :router="true" :default-active="store.state.route">
-              <el-menu-item index="1"><router-link to="/">主页</router-link></el-menu-item>
+              <el-menu-item index="/home">主页</el-menu-item>
-              <el-submenu index="2">
+              <el-submenu index="">
-                  <template v-slot:title>个人信息</template>
+                <template v-slot:title>个人信息</template>
-                  <el-menu-item index="2-1">修改密码</el-menu-item>
+                <el-menu-item index="/password">修改密码</el-menu-item>
-                  <el-menu-item index="2-2"><router-link to="/email">修改邮箱</router-link></el-menu-item>
+                <el-menu-item index="/email">修改邮箱</el-menu-item>
-                  <el-menu-item index="2-3"><router-link to="">退出登录</router-link></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(){
+  components: {Home},
-    const activeIndex=ref<string>('1')
+  setup() {
+    const store = useStore()
 
-    return {activeIndex}
+    return {store}
   }
 })
 </script>

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
+      second.value = 10
-      _sendCode(store.state.user.email).then(res=>res.json()).then(res=>{
+
-        if(res.result==='OK'){
+      _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)
+          }, 1000)
-        }else{
+        } else {
-          second.value=0
+          second.value = 0
-          new Message({
-            showClose: true,
-            message: '发送验证码失败',
-            type: 'error'
-          })
         }
       })
     }
 
-    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,

src/components/Home.vue

@@ -2,10 +2,21 @@
   <h1>主页</h1>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import {defineComponent, onMounted} from "vue";
-  name: "Home"
+import {useStore} from "vuex";
-}
+
+export default defineComponent({
+  name: "Home",
+  setup() {
+
+    const store = useStore()
+
+    onMounted(() => {
+      store.commit('updateRoute', '/home')
+    })
+  }
+})
 </script>
 
 <style scoped>

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>

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'

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){
+export function sendCode(userEmail: string) {
-    return fetch(new Request(sendCodeApi,{method:'POST',body:JSON.stringify({userEmail})}))
+    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'
+    })
 }

src/router.ts

@@ -1,22 +1,28 @@
-// 1. 定义路由组件.
+import {createRouter, createWebHashHistory, useRoute} from "vue-router";
-// 也可以从其他文件导入
-import {createRouter, createWebHashHistory} 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: '/home', component: Home},
-    { path: '/email', component: Email },
+    {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)
+    })
+}

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