ダークホースヘッドラインプロジェクト-day03

9.ユーザー詳細ページの編集

新しいユーザーの詳細ページsrc / views / edit_profile.vue

9.1データ収集とパーソナルセンターは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を変更します：タイプを追加し、パスワードを******として表示させます

9.4新しいヘッドサブコンポーネント：アイコン

フォントアイコン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
 <div class="right">{
    
    {
    
    type=='pass'?'******':desc}}<span class="iconfont iconjiantou1"></span>
 
 export default {
    
    
  props: ['title', 'desc', 'type']
}

/personal.vueの変更：後続の編集ユーザーリクエストのために、URLから取得したユーザー詳細にIDを含めます

<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コンポーネントのファイルアップロード機能は、アバターをクリックしてファイルをアップロードし、アバターを変更することを実現します。

1. main.jsが導入されました

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

 .use(Uploader)

2.ページにedit_profile.vueを追加します

コンポーネント：afterReadがトリガーされた場合、それはコンポーネントがユーザーによって選択されたファイルオブジェクトをすでに取得していることを意味するだけですが、アップロード操作は自分で手動で行う必要があります

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