美食杰个人主页编辑个人资料，小白必看！！！

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

实现效果:点击登录的用户时，可以进行跳转和发布菜谱

 这是第一张图，我已经注册登录了,下一步我们点击用户哪里，直接进行跳转.

 第二张图，此时我们已经进来了，点击编辑个人资料

此时我们就可以编辑个人资料然后进行保存了

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

需要在router下的index.js文件中进行路由配置实现路由跳转功能
代码如下：

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.到编辑页进行对头像，名称，个人简介进行修改点击保存获取信息后发送给后端。

在edit.vue中写代码如下：

注意：

代码中所有已'el'开头的，例如</el-col> 和</el-carousel-item>都是Element.UI
进行安装： npm i element-ui -S