黑马头条项目-day03

9.编辑用户详情页面

在这里插入图片描述

新建用户详情页面src/views/edit_profile.vue

9.1数据获取和个人中心是用一个接口

    // 获取用户详情
    // 接口类型:【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修改信息的接口

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

    })
}

9.3配置路由

{
    
    
     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页操作：封装头部，修改之前封装的mycell:添加一个type,让password以******显示

9.4新建头部子组件：icon

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nPYUfyT-1604040514425)(C:%5CUsers%5Cxiaobaibai%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5C1603346858611.png)]
引入字体图标 main.js 上图左右两边都是字体图标

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

src/components/myheader.vue头部封装开始

<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头部渲染完成

头像，日期，用户名

 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 引入单元格子组件：mycell

src/components/mycell.vue添加type选择，用于设置密码框
在这里插入图片描述

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

修改/personal.vue：把获取到的用户详情里的id通过url带过来，用于后面的编辑用户请求

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

9.5实现页面渲染：和个人中心一样

edit_profile.vue引入密码框组件，引入头部组件，并渲染头像，用户名，日期

<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.vant组件的文件上传功能实现点击头像上传文件修改头像

main.js 引入

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

 .use(Uploader)

2.添加到页面中 edit_profile.vue

组件：触发afterRead的时候，仅仅说明这个组件已经获取到的用户所选择的文件对象，但是上传操作得我们自己再手动的完成

扫描二维码关注公众号，回复： 12835756 查看本文章

  <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.重置文件上传组件的样式

有的放矢:你得先找到控制某些效果的样式,再考虑如何进行重置

<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.编辑用户头像-重点关注

afterRead虽然没有实现文件上传功能,但是它能够获取到当前用户所选择文件对象

我们就需要拿到这个文件对象,上传到服务器

1.封装文件上传接口

@/apis/fileUpload.js

2.调用接口,实现文件上传

// 实现文件上传

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

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

3.调用接口，实现用户头像的更新

使用vant组件的afterRead方法触发文本上传，获取文件上传的路径，根据此路径发送文件上传请求，发送文件修改请求

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)
    }