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: () => impo