Dark Horse Headline Project-day03

9. Edit user details page

New user details page src/views/edit_profile.vue

9.1 Data acquisition and personal center use one interface

    // 获取用户详情
    // 接口类型:【GET】
    // 需要验证:【Authorization 】
    // 接口地址:/user/:id
    // xhr.setRequestHeader('Conent-Type','applicatio/x-www-form-urlencoded')
export const getUserInfo = (id) => {
    return axios({
        url: `/user/${id}`,
        // headers: { Authorization: localStorage.getItem('hm_toutiao_56') }
    })
}

9.2 Interface to modify information

// id:当前用户id
// data:你想编辑的数据   修改数据接口
export const editUser = (id, data) => {
    
    
    return axios({
    
    
        method: "post",
        url: `/user_update/${
      
      id}`,
        data

    })
}

9.3 Configure routing

{
    
    
     name: 'edit_profile',
      path: '/edit_profile/:id',
      component: () => import('@/views/edit_profile.vue')
}
// personal.vue修改路由跳转：加上id
<div class="personal">
    <router-link :to="'/edit_profile/'+userinfo.id">
    ...

Edit_profile.vue page operation: encapsulate the header, modify the previously encapsulated mycell: add a type, let the password be displayed as ******

9.4 New head subcomponent: icon

Introduce the font icon main.js, the left and right sides of the above picture are font icons

import { Button, Toast, Icon } from 'vant';
 .use(Icon)

Start of src/components/myheader.vue header encapsulation

<template>
  <div class="header">
    <div>
      <!-- 添加具名插槽，通过name为这个插槽设置名称，后期在使用的时候，可以指定内容放置到那个插槽中 -->
      <slot name="left"></slot>
    </div>
    <div>{
   
   {title}}</div>
    <div>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ['title'] //标题
}
</script>

<style lang="less" scoped>
.header {
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  .van-icon {
    font-size: 18px;
  }
  div:nth-of-type(2) {
    font-weight: bold;
  }
  div:last-child {
    .van-icon {
      font-size: 24px !important;
      color: Red;
    }
  }
}
</style>
------------------------------------------------------
引入个人中心
import myheader from '@/components/myheader.vue'
export default {
    components:{
        myheader
    }
};
<myheader title='编辑个人信息'>
      <!-- 指定图标所放置的插槽，通过slot可以指定 -->
      <van-icon name="arrow-left"
                slot='left'
                @click="$router.back()" />
      <van-icon name="wap-home-o"
                slot='right'
                @click="$router.push({path:'/index'})" />
</myheader>

9.4 Head rendering completed

Avatar, date, username

 async mounted () {
    // 一进来渲染数据：头部头像和日期，用户名
    let id = this.$route.params.id
    let res = await getUserInfo(id)
    console.log(res)
    this.userinfo=res.data.data
    // this.nickname=this.userinfo.nickname
   if (this.userinfo.head_img) {
      this.userinfo.head_img = axios.defaults.baseURL + this.userinfo.head_img
    } else {
      this.userinfo.head_img = axios.defaults.baseURL + '/uploads/image/timg.gif'
    }
  }

9.4 Introducing the cell grid component: mycell

src/components/mycell.vue add type selection, used to set the password box

//修改添加type
 <div class="right">{
    
    {
    
    type=='pass'?'******':desc}}<span class="iconfont iconjiantou1"></span>
 
 export default {
    
    
  props: ['title', 'desc', 'type']
}

Modify /personal.vue: Bring the id in the user details obtained through the url for subsequent editing user requests

<div class="personal">
    <router-link :to="'/edit_profile/'+userinfo.id">

9.5 Realization of page rendering: the same as the personal center

edit_profile.vue introduces the password box component, introduces the head component, and renders the avatar, user name, and date

<template>
  <div class="edit_profile">      
             <myheader title="编辑个人信息">
                <!-- 指定图标所放置的插槽，通过slot可以指定 -->
              <van-icon name="arrow-left"
                slot='left'
                @click="$router.back()" />
              <van-icon name="wap-home-o"
                slot='right'
                @click="$router.push({path:'/index'})" />
             </myheader>

      <div class="userImg">
      <img :src="userinfo.head_img"
           alt="">
      <van-uploader :after-read="afterRead" />
     </div>
            <!---->
            <mycell title="昵称" :desc='userinfo.nickname'></mycell>
            <mycell title="密码" :desc='userinfo.password'></mycell>
            <mycell title="性别" :desc='userinfo.gender===0?"女":"男"'></mycell>
 </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import mycell from '@/components/mycell.vue'
import {
    
     getUserInfo } from '@/apis/user.js'
import axios from '@/utils/myaxios.js'
export default {
    
    
    data () {
    
    
        return {
    
    
            userinfo:{
    
    }
        }
    },
    components:{
    
    
        myheader,mycell
    },
</script>

10. The file upload function of the vant component realizes click on the avatar to upload the file to modify the avatar

1. main.js introduced

import {
    
     Button, Toast, Icon, Uploader } from 'vant';

 .use(Uploader)

2. Add to the page edit_profile.vue

Component: when afterRead is triggered, it only means that the component has already obtained the file object selected by the user, but the upload operation has to be done manually by ourselves

  <div class="userImg">
      <img :src="userinfo.head_img"
           alt="">
      <van-uploader :after-read="afterRead" />
    </div>
import mycell from '@/components/mycell.vue'
import axios from '@/utils/myaxios.js'
import {
    
     getUserInfo } from '@/apis/user.js'
export default {
    
    
  data () {
    
    
    return {
    
    
      userinfo: {
    
    }
    }
  },
methods: {
    
    
    // 触发afterRead的时候，仅仅说明这个组件已经获取到的用户所选择的文件对象，但是上传操作得我们自己再手动的完成
    async afterRead (myfile) {
    
    
      console.log(myfile)
      let formdata = new FormData()
      formdata.append('file', myfile.file)
      // 实现文件上传
      let res = await fileUpload(formdata)
      console.log(res)
      // 重新设置userinfo的head_img的值，以实现预览更新
      this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url
      // 同时还要实现用户头像的编辑
      // 一定要注意这里传递的数据不要拼接基准路径
      let result = await editUser(this.userinfo.id, {
    
     head_img: res.data.data.url })
      console.log(result)
    }
  },
   async mounted () {
    
    
    }

3. Reset the style of the file upload component

Targeted: You have to find a style that controls certain effects first, and then consider how to reset

<style lang="less" scoped>
.edit_profile {
    
    
  .userImg {
    
    
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    > img {
    
    
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    // 重置文件上传组件的样式-使用深度选择器，能够在父组件中影响子组件的样式
    // 大小
    /deep/ .van-uploader__upload {
    
    
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    // 定位
    /deep/ .van-uploader {
    
    
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }
  }
}
</style>

11. Edit user avatar-focus on

Although afterRead does not implement the file upload function, it can obtain the file object selected by the current user

We need to get this file object and upload it to the server

1. Package file upload interface

@/apis/fileUpload.js

2. Call the interface to realize file upload

// 实现文件上传

import axios from '@/utils/myaxios.js'

// 接口类型:【POST】
// 需要验证:【Authorization 】
// 接口地址: /upload
export const fileUpload = (data) => {
    
    
  return axios({
    
    
    method: 'post',
    url: '/upload',
    data
  })

3. Call the interface to realize the update of the user's avatar

Use the afterRead method of the vant component to trigger the text upload, get the file upload path, send the file upload request according to this path, and send the file modification request

import {
    
     getUserInfo, editUser } from '@/apis/user.js'
import {
    
     fileUpload } from '@/apis/fileUpload.js'

 // 触发afterRead的时候，仅仅说明这个组件已经获取到的用户所选择的文件对象，但是上传操作得我们自己再手动的完成
    async afterRead (myfile) {
    
    
      console.log(myfile)
      let formdata = new FormData()
      formdata.append('file', myfile.file)
      // 实现文件上传
      let res = await fileUpload(formdata)
      console.log(res)
      // 重新设置userinfo的head_img的值，以实现预览更新
      this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url
      // 同时还要实现用户头像的编辑
      // 一定要注意这里传递的数据不要拼接基准路径
      let result = await editUser(this.userinfo.id, {
    
     head_img: res.data.data.url })
      console.log(result)
    }