【第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)}
}
总结
回到顶部