vue3:十六、个人中心-修改密码

一、页面效果

页面展示当前用户名(只读)，展示需要输入的当前密码，输入新的密码以及确认密码的提交表单

二、初始建立

1、建立密码修改页面

在个人中心文件夹中写入新页面UpdatepwdView.vue

2、新建路由

在路由页面中写入修改密码页面

3、新建菜单

在菜单布局菜单页面中写入修改密码的子菜单

三、添加apifox接口

1、新建接口

这里新建接口/updatepwd/edit，需要传递参数旧密码oldpwd,新密码newpwd，传递旧密码是为了判断旧密码是否是用户对应的旧密码

2、新建期望

新建两个期望，主要是测试旧密码是否和账户对应的密码一致

四、创建修改密码页面

1、视图层

视图层中首先定义一个卡片div，然后在定义一个专门存储表单的div,并写入表单以及参数

• ref="formRef"：用于和表单子组件通信
• :formData="formData"：表单数据
• :submitUrl="submitUrl"：表单提交执行的接口方法

2、样式层

设置边距，宽度，对齐方式，对齐等样式

3、定义表单提交接口

直接定义变量submitUrl，其值为开始apifox新建接口

//重置密码的后端接口
const submitUrl = "/updatepwd/edit"

4、 密码规则封装到工具函数

(1)工具类函数定义密码规则

(2) 将涉及到的页面的密码规则更改为封装的变量

①忘记密码页面ForgetPwd.vue

引入方法

注释之前的规则定义

②登录页面LoginView.vue

引入方法

注释之前的规则定义，并更换为引入的变量

5、修改密码页面引入方法

• 引入vue的方法reactive,ref
• 引入表单Form
• 引入获取账户信息的userStore
• 引入封装的密码规则psdrule

6、定义必要变量并写入表单数据

• 定义用户信息：userstore
• 定义formRef：为了获取表单组件的数据：为了获取输入的新密码并判断新密码和再次输入的新密码是否一致
• 将获取的密码规则psdrule分别写入到每一个密码文本框
• 表单数据包含用户名(只读，其值为获取的账户信息)，当前密码oldpwd(类型为password)，新密码newpwd(类型为password)，确认密码surepwd(类型为password，并需要判断两次输入的密码是否一致)

7、表单中写入默认数据

在表单中，初始进入时，将获取的数据写入到表单中(主要写入用户名信息)

8、表单中写入密码框

如果类型是password时，就显示为密码框

9、表单组件将组件内容暴露给父页面

只有将组件内容暴露给父页面，父页面才能获取需要得到的首次输入的新密码

五、完整代码 

1、修改密码页面

src/views/PersonalCenter/UpdatepwdView.vue

<template><div class="card updatepwd_main flex flex-center"><div class="updatepwd_content"><Form ref="formRef" :formData="formData" :submitUrl="submitUrl"></Form></div></div>
</template>
<script setup>
import { reactive,ref } from "vue";
import Form from "@/components/Form.vue";
import { userStore } from "@/stores/user";
import { psdrule } from '@/utils/tool';const userstore = userStore();
const formRef = ref()
//表单数据
const formData = reactive([{label: "用户名",field: "username",readonly: true,value: userstore.username},{label: "当前密码",field: "oldpwd",placeholder: "请输入旧密码",type: "password",rules: psdrule},{label: "新密码",field: "newpwd",placeholder: "请输入新密码",type: "password",rules: psdrule},{label: "确认密码",field: "surepwd",placeholder: "请输入密码",type: "password",rules: [...psdrule,{validator: (rule, value, callback) =>{//如果这里输入的密码和子表单中的输入的新密码不一致if(value != formRef.value.ruleForm.newpwd){callback(new Error("两次输入密码不一致"))}else{callback()}},trigger: "blur"}]},
])
//重置密码的后端接口
const submitUrl = "/updatepwd/edit"
</script>
<style>
.updatepwd_main {margin: 15px 10px;
}.updatepwd_content {width: 70%;
}/* 提交按钮居中 */
.updatepwd_main .el-form-item__content {display: flex;justify-content: center;align-items: center;
}/* 标题 */
.updatepwd_main .el-form-item__label {width: 100px;text-align: right;/* 右对齐 */
}
</style>

2、路由

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import { getToken, setToken, delToken } from '@/utils/token';
import { userStore } from '@/stores/user'
import { getuserinfo } from '@/api/user';
// 引入路由
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [//将子项全部存入一个大的路由中layout/index.vue，页面刚进入时调用的时layout/index.vue，在为导航条，默认显示页面/home的内容{path: '/',name: 'main',component: () => import('@/layout/index.vue'),redirect: '/dashboard',children: [{path: '/dashboard',name: 'dashboard',component: () => import('@/views/DashboardView.vue'),},{path: '/category',name: 'category',component: () => import('@/views/CategoryView.vue')},{path: '/role',name: 'role',component: () => import('@/views/RoleView.vue')},