用户信息配置

路由配置

目标：配置用户信息组件路由

• 配置路由映射

import Setting from '@/views/setting/index.vue'
{ path: 'setting', component: Setting },

• 配置路由链接

<el-menu-item index="/home/setting">

组件基本布局

目标：实现用户信息组件的基本布局

<el-card>
  <div slot="header">
    个人设置
  </div>
  <!-- 栅格 -->
  <el-row>
    <el-col :span="12">
      <el-form label-width="120px">
        <el-form-item label="编号：">{{user.id}}</el-form-item>
        <el-form-item label="手机：">{{user.mobile}}</el-form-item>
        <el-form-item label="媒体名称：">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="媒体介绍：">
          <el-input v-model="user.intro" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12">
      <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
      >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p style="text-align:center">修改头像</p>
    </el-col>
  </el-row>
</el-card>

显示账号信息

目标：动态填充用户账号信息

• 相关数据

data () {
  return {
    // 提交的用户信息
    user: {
      name: '',
      intro: '',
      email: '',
      photo: ''
    }
  }
}

• 调用接口获取数据

  methods: {
    async loadUserInfo () {
      try {
        const ret = await loadUserInfo()
        this.user = ret.data
      } catch (e) {
        console.log(e)
        this.$message.error('获取用户信息失败')
      }
    }
  },
  created () {
    this.loadUserInfo()
  }

• 更新用户信息

// 更新用户信息
async handleSubmit () {
  try {
    await updateUserInfo(this.user)
  } catch (e) {
    console.log(e)
    this.$message.error('更新用户信息失败')
  }
},

用户头像更新

目标：实现用户信息的

如果el-upload组件有http-request属性，那么就不会采用默认的方式自动上传

那么选中图片后会触发该属性绑定的函数，在这个函数中可以基于Ajax手动上传文件

• 组件布局

<el-col :span="12">
  <el-upload
    class="avatar-uploader"
    :show-file-list="false"
    :http-request="updateUserPhoto"
  >
    <img v-if="user.photo" :src="user.photo" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <p style="text-align:center">修改头像</p>
</el-col>

• 实现头像更新功能

async updateUserPhoto (params) {
  try {
    // 上传头像的图片
    const fd = new FormData()
    fd.append('photo', params.file)
    const ret = await uploadUserAvatar(fd)
    // 更新表单
    this.photo = ret.data.photo
  } catch (e) {
    console.log(e)
    this.$message.error('更新用户头像失败')
  }
},