VUE - super detailed food items - personal data

Brief introduction

The last one was about food Jay Login and registration Today, we will continue to write personal data, get the changed information on the back end, and render it to the personal information

Edit profile

edit.vue component

In the edit.vue component of editing personal data, imgMaxWidth in the upload img sub component is the width limit of the uploaded image, and res URL is the custom event transmitted from the upload img sub component to receive the uploaded image

<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">Modify Avatar</span>
      <upload-img
        imgMaxWidth="210"
        action="/api/upload?type=user"
        :imageUrl="avatar"
        @res-url='chang'
      ></upload-img>
    </div>
    <div class="edit-item">
      <span class="label">Modify name</span>
      <div>
        <el-input
          v-model="name"
          class="create-input"
          placeholder="Please enter the content"
          >{{ name }}</el-input
        >
      </div>
    </div>
    <div class="edit-item">
      
      <span class="label">Personal profile</span>
      <div>
        <el-input
          v-model="sign"
          type="textarea"
          class="create-input"
          placeholder="Please enter the content"
        ></el-input>
      </div>
    </div>
    <div>
      <el-button class="send" type="primary" size="medium" @click="save"
        >preservation</el-button
      >
    </div>
  </div>
</template>

const userInfo in dat is to obtain the userInfo data of state in vuex, and return is to obtain the back-end picture avatar, name, and personal profile sign

import UploadImg from "@/components/upload-img";
//Is api.js under the service folder
import { userEdit } from "@/service/api";
export default {
  components: { UploadImg },
  data() {
    const userInfo = this.$store.state.userInfo;
    console.log(userInfo);
    return {
      avatar: userInfo.avatar,
      name: userInfo.name,
      sign: userInfo.sign,
    };
  },
};

Customize an event to save the edited profile. if it is judged that the saved profile is successful, jump to the space profile display page. The chang e function is used to obtain the modified back-end data and display it in personal information

methods: {
    async save() {
      let data = await userEdit({
        avatar: this.avatar,
        name: this.name,
        sign: this.sign,
      });
      console.log(this.avatar);
      if (data.code === 0) {
        this.$router.push({ name: "space" });
      }
    },

    chang(ss){
      console.log(ss);
      console.log(typeof ss);
      this.avatar=ss
    }
  },

upload-img.vue component
The current component is a sub component of the edit.vue component for editing personal data. The bound property in the code is element UI Upload the user's image upload. Just copy it and use it,

<template>
  <el-upload
  class="avatar-uploader"
  :action="action"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  >
  <img v-if="imageUrl" :src="imageUrl"  class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>

The following is how to use the $emit sub component to transfer the data to the parent component after the image is uploaded to judge the size and type of the uploaded image
Refer to the following links for component parameters: Parameter transfer mode in six components

export default {
  props:{
    action:String,
    maxSize:{
      type:Number,
      default:2
    },
    imageUrl:{
      type:String,
      default:''
    },
    imgMaxWidth:{
      type:[Number,String],
      default:'auto'
    }
  },
  data(){
    return {

    }
  },
  methods: {
    // After uploading the picture
      handleAvatarSuccess(res, file) {
        console.log(file);
        console.log(res);
        
        this.$emit('res-url',
          URL.createObjectURL(file.raw)
        )
         console.log('Upload succeeded');
      },
      // Before uploading pictures
      beforeAvatarUpload(file) {
        console.log(this.imageUrl);
       // Limit the type of picture
        const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
         // Limit picture size
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('Upload avatar pictures can only be JPEG PNG format!');
        }
        if (!isLt2M) {
          this.$message.error('The size of the uploaded avatar image cannot exceed 8 MB!');
        }
        return isJPG &&isLt2M
      }
    }
}

Show personal information

After writing and saving the data, the saved information will be displayed in the personal information page
index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
    userInfo: {},
    token:[]
  },
  getters:{
    isLogin(state){
      return !!Object.keys(state.userInfo).length;
    }
  },
  mutations:{
    chageUserInfo(state, data){
      state.userInfo = data;
    }
  },
  actions:{}
})

export default store;

space.vue component
Get the userInfo data in the above picture and use it to render the data

computed:{
    userInfo(){
      return this.$store.state.userInfo
    }
  },

Then you can use the obtained userInfo data to render the picture, name and personal profile, and display the information in the personal data

<h2>Welcome to my food space</h2>
    <div class="user-info">
      <div class="user-avatar">
        <img :src="userInfo.avatar" alt="">
      </div>
      <div class="user-main">
        <h1>{{userInfo.name}}</h1>
        <div style="color: #999;">
          Personal profile:<span>{{userInfo.sign}}</span>
        </div>
        <span class="info">
          {{userInfo.createdAt}}
          <em>Join gourmet Jay</em>
          |
          <router-link :to="{name:'edit'}" >Edit profile</router-link>
        </span>

summary

Before we upload images, we use the upload in the element UI framework. It is different from the official website code, because our parent-child components use each other, and the official website code is used in the same component. Not clear. You can see the relevant code above

This is the end, perfect sprinkling

Tags: Javascript Vue.js html

Posted on Sun, 26 Sep 2021 19:14:24 -0400 by bfuzze_98