一、页面效果
页面展示当前用户名(只读)，展示需要输入的当前密码，输入新的密码以及确认密码的提交表单
二、初始建立
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')},
