From f3a09a0cde03b742b1f8531a3b03a1f31d051cc6 Mon Sep 17 00:00:00 2001
From: pan <1029559041@qq.com>
Date: Fri, 19 Feb 2021 18:14:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=9B=B4=E6=96=B0=20?=
=?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BF=AE=E6=94=B9=E5=AF=86=E7=A0=81=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=20=E5=A2=9E=E5=8A=A0mock=20=E5=A2=9E=E5=8A=A0?=
=?UTF-8?q?=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
mock/test.ts | 59 +++++++++++++++++++++++-------
src/App.vue | 28 ++++++++-------
src/components/Email.vue | 53 ++++++++++++++-------------
src/components/Home.vue | 19 +++++++---
src/components/Password.vue | 71 +++++++++++++++++++++++++++++++++++++
src/interface.ts | 4 ++-
src/request.ts | 34 +++++++++++++++---
src/router.ts | 32 ++++++++++-------
src/store.ts | 6 +++-
9 files changed, 234 insertions(+), 72 deletions(-)
create mode 100644 src/components/Password.vue
diff --git a/mock/test.ts b/mock/test.ts
index 9d1f6a3..0fc5799 100644
--- 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[];
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index dbbcc29..6b4c463 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,35 +6,39 @@
直播间状态通知
-
- 主页
-
- 个人信息
- 修改密码
- 修改邮箱
- 退出登录
+
+ 主页
+
+ 个人信息
+ 修改密码
+ 修改邮箱
+ 退出登录
-
+
+
diff --git a/src/components/Email.vue b/src/components/Email.vue
index cfe7e7c..5a76016 100644
--- a/src/components/Email.vue
+++ b/src/components/Email.vue
@@ -26,11 +26,11 @@
- 更换邮箱
+ 更换邮箱
- 返回
+ 返回
@@ -38,9 +38,10 @@
\ No newline at end of file
diff --git a/src/interface.ts b/src/interface.ts
index bfcc396..9ad4ea8 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1 +1,3 @@
-export const sendCodeApi='/api/change/email'
\ No newline at end of file
+export const sendCodeApi = '/api/change/email/code'
+export const changeEmailApi = '/api/change/email'
+export const changePwdApi = '/api/change/pwd'
\ No newline at end of file
diff --git a/src/request.ts b/src/request.ts
index 51c4881..99f5883 100644
--- 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'
+ })
}
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
index 2a8f67f..871d530 100644
--- 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)
+ })
+}
diff --git a/src/store.ts b/src/store.ts
index 6e58590..5708707 100644
--- 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
}
}