03-个人设置-修改基本信息
获取个人信息填充表单
src/views/setting/index.vue 中的export default里
created () {
// 获取个人信息
this.getUserInfo()
},
methods: {
//异步获取后台数据
async getUserInfo () {
const { data: { data } } = await this.$http.get('user/profile')
this.userInfo = data
}
}
添加photo字段在修改头像使用:
src/views/setting/index.vue 中的data里声明
photo: ''
// imageUrl: null
src/views/setting/index.vue 中的div盒子里
<img v-if="userInfo.photo" :src="userInfo.photo" class="avatar">
修改后进行数据提交
- 点击保存设置的时候
- 把修改后的数据提交给后台
- 成功:
- 提示
- 本地存储 用户名称需要修改
- home组件 用户名称需要修改
src/views/setting/index.vue 中的div盒子里
<el-button type="primary" @click="save">保存设置</el-button>
src/views/setting/index.vue 中的methods里
// post 请求 post(‘地址’,‘数据’)
// get 请求 get(‘地址’,‘{params:数据}’)
//解构赋值
// 得到 用户 信息 res.data.data res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值:res.data ={data:'用户信息'}
// ES6提供解构赋值语法:{data:{data:data}}
// 函数的返回值 加载await之后 是then接受的数据
// 在使用await之后在 外层函数必须用async 来申明
//await向后台发请求
async save () {
const { name, intro, email } = this.userInfo
await this.$http.patch('user/profile', { name, intro, email })
// 成功
this.$message.success('修改用户信息成功')
// 更新本地存储的用户名称
const user = store.getUser() //拿过来
user.name = name //改名字
store.setUser(user) //设置回去
// 更新HOME组件的用户名称
eventBus.$emit('updateName', name) //第三步:script下引入eventbus包 之后,谁传数据,谁用eventbus触发事件
},
home组件绑定事件:views/home.vue
目的:修改home组件的用户名——>兄弟关系组件之前传值
+ import eventBus from '@/components/eventBus' //第一步:script下引入eventbus包
created () {
const user = store.getUser()
this.name = user.name
this.photo = user.photo
// 绑定事件 接受名字数据 第二步:谁要数据,谁用eventbus绑定事件
+ eventBus.$on('updateName', (name) => {
+ this.name = name //拿到数据后,更新数据
+ })
},