个人中心 (二) 03-编辑资料-修改信息-F12打开控制台查看数据-API使用步骤

个人中心-编辑资料-修改信息-F12打开控制台查看数据-API使用步骤

• 绑定事件 src/views/user/profile.vue

    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料" right-text="保存" @click-right="save()"></van-nav-bar>

• 实现保存 methods里

    // 保存
    async save () {
      // 1. 封装API
      // 2. 获取需要提交数据
      // 3. 提交数据
      await updateUserInfo(this.user)
      // 4. 成功提示
      this.$toast.success('保存成功')
    }

• 封装API src/api/user.js

/**
 * 修改个人信息
 * name ,gender, birthday
 */
export const updateUserInfo = ({ name, gender, birthday }) => {
  return request(`/app/v1_0/user/profile`, 'patch', { name, gender, birthday })
}

src/views/user/profile.vue中script里导入：

import { updateUserInfo } from '@/api/user'

注意：

F12打开控制台，

1. network 查看数据请求
2. vue 查看vue文件中的data数据

API使用步骤：

1. 在src/api/user.js文件中，封装API
2. 在目标vue页面组件中的script里导入 api接口文件名字
3. 在div相应位置绑定事件
4. 在methods里异步获取数据