[JavaScript知识库]Vue美食杰项目实现个人编辑资料效果

1.需求介绍：

（1）先点击编辑个人资料跳转到个人编辑页。
（2）到编辑页进行对头像，名称，个人简介进行修改点击保存获取信息后发送给后端。
（3）后端拿到数据进行页面渲染。

2.效果展示

1.先点击编辑个人资料跳转到个人编辑页。

（1）需要在router下的index.js文件中写路由配置实现路由跳转功能 （2）导入edit.vue文件：import Edit from ‘@/views/user-space/edit.vue’

(3)在路由表里进行路由配置:{ path:'/edit', name:"edit", title:'编辑', component:Edit },
(4）实现跳转：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
import {userInfo} from '@/service/api';
import Store from '@/store'


import Home from '@/views/home/Home.vue'
import Login from '@/views/user-login/index.vue'
import Space from '@/views/user-space/space.vue'
import Recipe from '@/views/recipe/recipe.vue'
import Detail from '@/views/detail/detail.vue'
import Edit from '@/views/user-space/edit.vue'
const router = new Router({
    mode:"history",
    routes:[
        {
            path:'/',
            name:"Home",
            title:'首页',
            component:Home
        },
        {
            path:'/edit',
            name:"edit",
            title:'编辑',
            component:Edit
        },
        {
            path:'/detail',
            name:"detail",
            title:'详情',
            component:Detail
        },
        {
            path:'/login',
            name:'login',
            title:'登录页',
            component:Login,
            meta:{
                login:true
            },
        },
        {
            path:'/space',
            name:'space',
            title:'我的',
            component:Space,
            meta:{
                login:true
            },
        },
        {
            path:'/recipe',
            name:'recipe',
            title:'菜谱大全',
            component:Recipe,
            meta:{
                login:true
            },
        }
    ]
});
const isLogin=true;

2.到编辑页进行对头像，名称，个人简介进行修改点击保存获取信息后发送给后端。

(1)向后端拿数据引入：import {userEdit} from ‘@/service/api’

(2) Element详情链接

（2）在edit.vue中写代码如下：

<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        action="/api/upload?type=user" :imageUrl="avatar" @res-url="(data)=>{avatar=data.resImgUrl}"


      ></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
    return {
      avatar:userInfo.avatar,
      name:userInfo.name,
      sign:userInfo.sign
    }
  },
  methods:{
    async save(){
      let data=await userEdit({
        /*
          为啥用this，而不用userInfo的数据
          return '',return true/false 的返回会对当前函数有啥影响
        */


        avatar:this.avatar,
        name:this.name,
        sign:this.sign
      });
      if(data.code === 0){
        this.$router.push({
          name:'space'
        })
      }
    }
  }
}
</script>
<style lang="stylus">
.edit
  background-color #fff
  padding 10px 0 20px 20px
  .edit-item 
    display flex
    margin-bottom 20px
    .label
      margin-right 10px
</style>

（2）在upload-img.vue中进行头像上传限制图片类型等…

maxSize进行对图片的修饰
type:Number限制类型，必须是Number
default:默认值

maxSize:{
        type:Number,
        default:2
      },

<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>
    >
    <img src="url" />
  </el-upload>
</template>
<script>
export default {
  props:{
      action:String,
      maxSize:{
        type:Number,
        default:2
      },
      imageUrl:{
        type:String,
        default:''
      },
      imgMaxWidth:{
        type:[Number,String],
        default:'auto'
      }
  },
  data(){
    return {


    }
  },
   methods: {
     //图片上传成功之后
      handleAvatarSuccess(res, file) {
        console.log(file)
        //存图片地址以参数的形式传递
        if(res.code===1){
          this.$message({
            message:res.mes,
            type:'warning',
          })
          return ;
        }
        this.imageUrl = URL.createObjectURL(file.raw);
        thsi.$emit('res-url',{
          resImgUrl:res.data.url
        })
      },
      //图片上传之前
      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>