【第26章】Vue实战篇之用户信息修改

本文主要是介绍【第26章】Vue实战篇之用户信息修改，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

前言
一、界面搭建
- 1. UserInfo.vue
二、更新用户信息
- 1.绑定用户信息
- 2.更新接口
- 3.更新事件
- - 3.1 添加事件
  - 3.2 触发事件
总结

前言

这里来学习用户信息的修改。

一、界面搭建

1. UserInfo.vue

<script setup>
import { ref } from 'vue'
const userInfo = ref({id: 0,username: 'zhangsan',nickname: 'zs',email: 'zs@163.com',
})
const rules = {nickname: [{ required: true, message: '请输入用户昵称', trigger: 'blur' },{pattern: /^\S{2,10}$/,message: '昵称必须是2-10位的非空字符串',trigger: 'blur'}],email: [{ required: true, message: '请输入用户邮箱', trigger: 'blur' },{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]
}
</script>
<template><el-card class="page-container"><template #header><div class="header"><span>基本资料</span></div></template><el-row><el-col :span="12"><el-form :model="userInfo" :rules="rules" label-width="100px" size="large"><el-form-item label="登录名称"><el-input v-model="userInfo.username" disabled></el-input></el-form-item><el-form-item label="用户昵称" prop="nickname"><el-input v-model="userInfo.nickname"></el-input></el-form-item><el-form-item label="用户邮箱" prop="email"><el-input v-model="userInfo.email"></el-input></el-form-item><el-form-item><el-button type="primary">提交修改</el-button></el-form-item></el-form></el-col></el-row></el-card>
</template>

二、更新用户信息

1.绑定用户信息

从pinia中获取用户信息

import useUserInfoStore from '@/stores/userInfo.js'const userInfoStore=useUserInfoStore()
const userInfo = ref(userInfoStore.getUserInfo())

2.更新接口

export const userUpdateService = (userInfo)=>{return request.put('/user/update',userInfo)
}

3.更新事件

3.1 添加事件

<el-button type="primary" @click="submit">提交修改</el-button>

3.2 触发事件

import { userUpdateService } from '@/api/user.js'
import { ElMessage} from 'element-plus'const submit = async () => {//1.调用更新接口let result = await userUpdateService(userInfo.value)if (result.code == 0) {ElMessage({type: 'success',message: '更新成功',})//2.更新piniauserInfoStore.setUserInfo(userInfo.value)}
}