vue项目day02

5、个人信息编辑（edit_profile.vue）

1、创建组件

2、配置路由

3、布局

4、实现功能

1、完成个人信息渲染
2、完成头像修改
3、完成昵称修改
4、完成密码修改
5、完成性别修改

1、完成个人信息渲染

用户角度分析：进入页面，就能马上看到个人 信息

程序员角度分析：进入页面，在created中调用接口，请求数据，渲染数据

拆解步骤：

• 1、封装“用户详情”接口函数 ---- 在个人中心中已经完成了
• 2、在页面引入接口函数，并在created中调用接口函数，请求并保存数据
• 3、根据数据渲染即可

2、完成头像修改

用户角度分析：用户点击头像，显示弹窗用于选择图片，选中图片后修改头像。

程序员角度分析：给图片绑定点击事件，然后显示弹窗用于选择图片，用户选中调用接口上传图片，然后修改图片成功。

拆分步骤：

• 1、实现显示弹窗，用于选择图片
  • 直接使用vant组件库中的“文件上传”组件（vant-contrib.gitee.io/vant/v2/#/z…
• 2、实现修改头像功能
  • 1、在成功获取图片对象的函数中，调换用“文件上传”接口，获取图片在线地址
    • 封装“文件上传” 接口函数
    • 在页面中引入接口函数，并在成功获取图片对象的函数中调用，并保存图片在线地址
  • 2、在成功获取到图片在线地址的地方，调用“编辑用户信息”接口，实现修改头像
    • 封装“编辑用户信息”接口函数
    • 在引入接口函数，并在在成功获取到图片在线地址的地方调用函数，实现修改头像

统一设置token - 请求拦截器的使用

什么是请求拦截器？答：请求发送出去之前会触发的一个函数。

因为项目中很多接口都需要传token给后端，因此我们可以把传递token的代码统一封装起来，那么我就可以利用请求拦截器来完成这个功能。

在src/utils/request.js中添加如下代码即可

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 统一设置token 传递给后端
    // console.log(10, config);
    let token = localStorage.getItem("75-token")
    // 当token存在的时候 ，才把token传递给后端
    if(token){
        config.headers.Authorization = token
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});