Vue 移动端 实战九 编辑用户资料、修改呢称、生日、性别、头像、以及头像的剪裁器依赖使用、Content-Type 要求的 multipart/form-data 格式

编辑用户资料

1.0 创建组件并配置路由

1、创建 views/user/index.vue

<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow right-text="保存" />
    <van-cell-group>
      <van-cell title="头像" is-link>
        <van-image
          round
          width="30"
          height="30"
          fit="cover"
          src="http://toutiao.meiduo.site/FgSTA3msGyxp5-Oufnm5c0kjVgW7"
        />
      </van-cell>
      <van-cell title="昵称" value="abc" is-link />
      <van-cell title="性别" value="男" is-link />
      <van-cell title="生日" value="2019-9-27" is-link />
    </van-cell-group>
  </div>
</template>

<script>
  export default {
   
    name: "UserIndex"
  };
</script>

2、将该页面配置到根路由

{
   
  name: 'user-profile',
  path: '/user/profile',
  component: () => import('@/views/user-profile')
}

2.0 页面布局

<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell class="avatar-cell" title="头像" is-link center>
      <van-image
        class="avatar"
        round
        fit="cover"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </van-cell>
    <van-cell title="昵称" value="内容" is-link />
    <van-cell title="性别" value="内容" is-link />
    <van-cell title="生日" value="内容" is-link />
    <!-- /个人信息 -->
  </div>
</template>

<script>
export default {
   
  name: 'UserProfile',
  components: {
   },
  props: {
   },
  data () {
   
    return {
   }
  },
  computed: {
   },
  watch: {
   },
  created () {
   },
  mounted () {
   },
  methods: {
   }
}
</script>

<style scoped lang="less">
.user-profile {
   
  .avatar-cell {
   
    .van-cell__value {
   
      display: flex;
      flex-direction: row-reverse;
    }
    .avatar {
   
      width: 60px;
      height: 60px;
    }
  }
}
</style>

3.0 展示用户信息

思路：

• 找到数据接口
• 封装请求方法
• 请求获取数据
• 模板绑定

1、在 api/user.js 中添加封装数据接口

/**
 * 获取当前登录用户的个人资料
 */
export const getUserProfile = target => {
   
    return request({
   
        method: 'GET',
        url: '/app/v1_0/user/profile'
    })
}

2、在 views/user/index.vue 组件中请求获取数据

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

  created () {
   
    this.loadGetUserProfile()
  },
 methods: {
   
    async loadGetUserProfile() {
   
      try {
   
        const {
    data } = await getUserProfile()
        this.user = data.data
      } catch (err) {
   
        this.$toast('获取数据失败')
      }
    }
  }

    <van-cell class="avatar-cell" title="头像" is-link center>
      <van-image
        class="avatar"
        round
        fit="cover"
        :src="user.photo"
      />
    </van-cell>
    <van-cell title="昵称" :value="user.name" is-link />
    <van-cell title="性别" :value="user.gender === 0 ? '男' : '女'" is-link />
    <van-cell title="生日" :value="user.birthday" is-link />

4.0 修改昵称

一、准备弹出层

<van-cell title="昵称" :value="user .name" is-link @click="isUpdateNameShow = true"/>

    <!-- 修改名称弹出层 -->
    <van-popup v-model="isUpdateNameShow" position="bottom" style="height: 100%">
      <update-name 
      v-if="isUpdateNameShow"
       @close="isUpdateNameShow = false"
       v-model="user.name"
      ></update-name>
    </van-popup>

二、封装组件

<template>
  <div class="update-name">
    <!-- 导航栏 -->
    <van-nav