大事件项目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,进行提交一下就行


相关文章
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
54 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
4月前
|
JavaScript
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
若依修改---白名单怎样添加,怎样在初始化页面初始为自己的页面
|
4月前
|
监控
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
若依修改-----其他功能,包括参数设置,通知公告,日志管理,验证码控制开关在参数设置里,若依的注册页面是隐藏的,在src的login.vue的97行注册开发,修改成true,通知公告,促进组织内部信
|
5月前
|
开发工具 git
大事件项目19_个人中心_基本资料调接口更新保存
大事件项目19_个人中心_基本资料调接口更新保存
支付系统40------定时查单-订单未创建,支付宝登陆前在支付宝端创建还是没有创建,不知道,之所以打印警告日志,是因为创建的时候更容易看到它
支付系统40------定时查单-订单未创建,支付宝登陆前在支付宝端创建还是没有创建,不知道,之所以打印警告日志,是因为创建的时候更容易看到它
|
5月前
|
存储 API
大事件项目09---布局,获取用户信息
大事件项目09---布局,获取用户信息
|
5月前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
44 0
|
6月前
|
前端开发 Java Maven
属性编辑器未在PropertyEditorManager中注册?
属性编辑器未在PropertyEditorManager中注册?
|
6月前
|
JavaScript 前端开发 Java
若依框架---选中某值 其他值自动回调填充
若依框架---选中某值 其他值自动回调填充
198 0
|
JavaScript API
更改redux 数据,页面未重新渲染
更改redux 数据,页面未重新渲染