大事件项目23---个人中心—更换头像——调用接口保存,并让Vuex更新

简介: 大事件项目23---个人中心—更换头像——调用接口保存,并让Vuex更新

1、更新的是用户头像,我再这里找一找

2、请求的方式叫做PATCH

3、理所当然,我还得带上token,告诉后台我是谁

4、弄好之后,你也可以提前看一下,他返回的响应

5、写一个更新用户用户头像的API方法:接下来,我们调用,我们统一的axios函数,看请求地址,我们来到,接口文档

6、这里token,我们能不能上传

7、body体就一个avator选项,就传一个字符串

8、只需要一个参数,就不用解构赋值了

9、参数的写法

10、我们先把方法请过来

11、这个是为了点击,文件选择窗口,这里是用户选择文件,我们来接收结果

12、接着用户点击这个按钮,就可以实现点击头像

13、绑定一个点击事件

14、uploadFn叫做上传

15、这里要的是一个base64的字符串

16、请求传参结束,然后打印一下结果

17、我们看一下后台返回的数据,提示你后台更新成功了,我还要通过后台的keyValue的值来进行一个判断

18、不等于0,证明后台数据是有问题的,现在我要提示消息,表示反馈错误

19、成功之后,也给他一个更新用户头像成功的消息

20、接下来,我们把头像给改一下,他的头像地址究竟改在哪里呢?

21、我如何让Vuex让他更新一下呢?前面我们保存到了用户名,让他传给了后台

22、我们调这个axios,让Vuex重新获取一下这个axios,里面让Vuex请求一下后台

23、最后,我们git,进行提交一下就行


相关文章
|
10天前
|
JavaScript
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
|
10天前
|
监控
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
|
16天前
|
开发工具 git
大事件项目19_个人中心_基本资料调接口更新保存
大事件项目19_个人中心_基本资料调接口更新保存
|
11天前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
12 0
|
1月前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
24 0
|
2月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
187 2
|
2月前
uni-app 76聊天类封装(十一)-更新会话列表(二)
uni-app 76聊天类封装(十一)-更新会话列表(二)
28 1
|
2月前
|
前端开发 Java Maven
属性编辑器未在PropertyEditorManager中注册?
属性编辑器未在PropertyEditorManager中注册?
|
2月前
uni-app 75聊天类封装(十)-更新会话列表(一)
uni-app 75聊天类封装(十)-更新会话列表(一)
27 0
|
2月前
|
JavaScript 前端开发 Java
若依框架---选中某值 其他值自动回调填充
若依框架---选中某值 其他值自动回调填充
109 0