从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十二之修改个人信息

本节学习目标

主要是掌握element-plus表单用法

新增个人信息修改页面

views目录下新增personal目录，personal目录下新增index.vue文件

<template>
  <div class="main-body">
    <el-form ref="formRef" :model="user" label-width="86px" class="profile-form">
      <h3 class="title">个人信息</h3>
      <el-form-item label="用户名">
        <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="user.image" placeholder="请输入头像" prefix-icon="message"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="user.bio" placeholder="请输入简介" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email" placeholder="请输入邮箱" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" placeholder="请输入密码" type="password" prefix-icon="user"></el-input>
      </el-form-item>
      <el-form-item label>
        <el-button type="primary" class="w100p" @click="handleUpdateUser">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';
import { updateUser } from '@/api';
import type { UserInfo } from '@/types';
import { ElMessageBox } from 'element-plus';


const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { setUser } = userStore;

const user = ref<UserInfo>({
  email: '',
  password: '',
  username: '',
  bio: '',
  image: '',
});



const handleUpdateUser = async () => {
  try {
    const res = await updateUser({ user: user.value });
    setUser(res.data.user);
    console.log('修改成功')

    ElMessageBox.alert('修改成功', '修改用户', {
      confirmButtonText: 'OK'
    })
  } catch (error) {
  }
};


onMounted(() => {
  if (userInfo.value) {
    user.value = {
      email: userInfo.value.email,
      password: '',
      username: userInfo.value.username,
      bio: userInfo.value.bio,
      image: userInfo.value.image,
    };
  }
});
</script>
<style lang="scss" scoped>
.profile-form {
  width: 60%;
  margin-right: auto;
}
</style>

新增updateUser接口

修改api目录下index.ts

修改路由

修改PageHeader.vue

测试验证