个人空间的编辑个人资料案例（简单介绍 仅供参考）

1.本次效果会用  Element UI  Vue脚手架来完成

2.看一下本次的效果展示图：

             

 下面这张是保存后的状态本次主要说上图的效果

 3.对用到的组件进行一个简单说明

 补充：

上传图片的效果在项目中还有别的地方用所以要放到公共组件中方便复用

还有平时项目遇到有两个地方及以上都要用的就放到公共的文件夹方便区分复用

以上是对本次效果简单介绍下面来说如何实现

---

4.大家在个人空间中点击编辑个人资料肯定要跳转路由下面是跳转路由如何跳转及路由配置

4.1

 <router-link to="/edit" >编辑个人资料</router-link>//点击跳转到adit

4.2

  {
     path: '/edit',
     name: "edit",
 //  component: edit//普通跳转方式用这种上方要引入要进入的路径注意
     component: () =>import ( /* webpackChunkName:"create"*/ '@/views/user- 
     space/edit.vue'),//路由懒加载的方式无需在上在引入
  },

5.从vuex获取储存的数据vuex的数据也是从后台请求的

vuex的代码

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

Vue.use(Vuex);

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

export default store;

6.打开个人空间获取vuex从后端获取的数据也就是编辑个人信息里储存的数据

export default {
  name: 'Space',
 data(){
    const userInfo =this.$store.state.userInfo
    console.log(userInfo)
    return {
        avatar : userInfo.avatar
    }
  }
}

7.编辑个人资料页代码我会在代码中进行简单的说明

​
<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
          <!--在ElementUI中拿头像上传中代码  -->
      <upload-img
        imgMaxWidth="210"//对头像宽度限制
        action ="/api/upload?type=user"//传输接口的路径？后对类型进行限制
        :imageUrl="avatar"//绑定传输图片
        @res-url="(data)=>{avatar=data}"//监听上传图片
      ></upload-img>
    </div>
    <div class="edit-item">
      <span class="label">修改名称</span>
      <div>
        <el-input v-model="name" class="create-input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="edit-item">
      <span class="label">个人简介</span>
      <div>
        <el-input  v-model="sign"  type="textarea" class="create-input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div>
      <el-button 
      class="send" 
      type="primary" 
      size="medium"
      @click="save"//设置点击事件的函数名点击保存数据
      >
      保存
      </el-button>
    </div>
  </div>
</template>
<script>
import UploadImg from '@/components/upload-img'
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//个人简介
    }
  },
  methods:{
       //向后端发送数据
      async save(){
       let data= await userEdit({
          //传入当前页面的数据
           avatar:this.avatar,
           name:this.name,
           sign:this.sign
       })
        //保存成功跳转到个人空间页
       if(data.code === 0){
          this.$router.push({
            name:'space'
          })
       }
      }
  }
}
</script>

​

8.这一步就是对上传图片页进行限制代码参考Element  UIElement - The world's most popular Vue UI framework

中的upload上传

<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>
<script>
export default {
//接受编辑个人信息传入的数据并对类型进行限制
  props:{
      action:String,
      maxSize:{
         type:Number,
         default:2
      },
      imageUrl:{
        type:String,
        default:''
      },
      imgMaxWidth:{
         type:[String,Number],
         default:'auto'
      }
  },
  data(){
    return {
  
    }
  },
  methods: {
    //图片上传成功之后
    handleAvatarSuccess(res, file) {
      console.log(file)
       this.imageUrl = URL.createObjectURL(file.raw);//把图片上传到本地
       //对图片上传是否正确
       if(res.code===1){
          this.$message({
             message:res.mes,
             type:'warning'
           });
           return
         }
         this.imageUrl=URL.createObjectURL(file.raw)
         this.$emit('res-url',{
           resImgUrl:res.data.url
        //自定义事件把拿到的路径传给父亲也就是编辑信息页
       })
       this.$emit('res-url',URL.createObjectURL(file.raw))
    },
    //图片上传之前
    beforeAvatarUpload(file) {
      //限制图片类型
      const isJPG = file.type === 'image/jpeg';
      //限制图片内存大小
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

好了这就是以上步骤今天的总结完成我们明天见

拜拜