前言
这里来学习用户信息的修改。
一、界面搭建
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.更新pinia
userInfoStore.setUserInfo(userInfo.value)
}
}