vue项目美食杰 -- 个人信息展示与修改

       今天是项目的第三部分，个人信息的展示与修改，在此，笔者只想说，做个项目真的是费劲，但是，越困难的东西写着不是越有意思嘛，毕竟伟大的哲学家‘沃兹基硕德’（我自己说的）：学习就要学不会的东西，要不然学什么习。开个玩笑，步入正题。

老规矩先上效果图，让大家明白今天要写点啥

 实现步骤开始了，注意听讲

 1.个人资料空间进入

我们登陆之后，头部展示的就是个人信息，要点此进入到个人空间，要使用到路由跳转

 <router-link :to="{name:'space'}">
              <el-avatar style="vertical-align: middle;" 
              shape="square"                          
              size="medium" 
              :src="userInfo.avatar"></el-avatar>
 </router-link>
            <router-link :to="{name:'space'}" class="user-name">{{userInfo.name}}</router-link>

to属性里的space就是我配置的空间路由，去到的是空间的模板，至此就可以进入了

      进入之后展示的就是第一张图里的效果，有个人头像，个人名字，个人的其他信息，等等。。

      在此有个问题，就是我进的是别人的空间，还是我自己的空间呢，这个挺重要的，因为空间不同，我们其中的效果也有不同的地方，来看

自己的空间

别人的空间

        不同的地方，我已经给大家圈起来了，进入自己空间的时候是可以修改资料的，进别人空间不行，反正我是没见过能改别人资料的，再者，自己的空间没有关注板块，毕竟自己关注自己有点奇怪，别人的空间有吧。

       有了问题，就得解决问题，解决办法就是用id来区分呀，我的思路是在进入个人空间时在路由里传递参数，有参数的就是别人的，没有参数的就是我自己的，ok问题解决，具体实现请看：

<router-link :to="{name:'space'}">
              <el-avatar style="vertical-align: middle;" 
              shape="square"                          
              size="medium" 
              :src="userInfo.avatar"></el-avatar>
            </router-link>
            <router-link :to="{name:'space'}" class="user-name">{{userInfo.name}}</router-link>

//这是从自己信息跳转的路由，我就不发参数了，



<router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">
            作者：{{item.name}}
            </router-link>
//这是我从别人信息处跳转，要携带参数

2.自己空间 的资料修改 

点击修改资料进入修改模板，使用路由跳转

 进入之后，模板如下

 使用ElementUI组件库实现布局

<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        action='/api/upload?type=user'
        :imageUrl='avatar'
        @changeImgUrl='changeImgUrl'
      ></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>

 可以看到，在图像板块我使用了图像组件，因为图像不止一处使用，因此可以复用。

图像模板组件

<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">
  </el-upload>
</template>

3.修改图像

在修改资料组件中，我得先拿到原来的资料，才能去修改，直接改有点怪怪的，就是在实例中定义数据，在通过vuex来获取用户资料的，vuex中的数据是我们已经处理存放好的用户信息数据，上一篇里有，我就不过多阐述，不懂请移步vuePC端项目 -- 美食杰_Im_xiaopei的博客-优快云博客

data(){
    const userMsg = this.$store.state.userInfo
    return {
        avatar:userMsg.avatar,
        sign:userMsg.sign,
        name:userMsg.name
    }
  },

定义完成就可以在模板中使用数据，图像因为我使用了父子组件，所以我需要把数据传递给子组件使用，

（1）.绑定action属性，是element-ui组件的参数，就是图片上传的地址，就是我们要发送给后端的地址，值就是地址，“/api/upload?type=user”，解释一下，/api是处理跨域问题的配置，upload发送的接口，type是参数的类型，就是在哪个地方用

 （2）.绑定图片地址，就是定义好的数据

（3）.在子组件中通过props来接收，用到父组件向子组件传递参数，这里我用的是对象类型来接收

props:{
      action:String,
      maxSize:{
        type:Number,
        default:2
      },
      imageUrl:{
        type:String,
        default:''
      },
      imageMaxWidth:{
        typeL:[Number,String],
        default:'auto'
      }
  },

（4）.接收完，在子组件身上使用

（5）.修改图片，点击选择图片，触发上传成功的函数  :on-success="handleAvatarSuccess"，使用的是element-ui中此组件的参数

（6）.在handleAvatarSuccess定义逻辑处理来改变图片并渲染

handleAvatarSuccess(res, file) {
        console.log(res);
        this.$emit('changeImgUrl',URL.createObjectURL(file.raw))
      },

 图片上传成功

4.名称和简介的修改

这里逻辑比较简单，就单纯的使用表单的v-model双向数据绑定就可以了

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

//实例中定义v-model绑定的属性

data(){
    const userMsg = this.$store.state.userInfo
    return {
        avatar:userMsg.avatar,
        sign:userMsg.sign,
        name:userMsg.name
    }
  },

当编辑内容输入完毕后点击提交触发事件向后端发送请求来修改内容

<el-button 
      class="send" 
      type="primary" 
      size="medium"
      @click="save"
    >保存</el-button>


在methods中定义函数
async save(){
          let data = await userEdit({
              avatar:this.avatar,
              sign:this.sign,
              name:this.name
          })
如过发送成功，跳转到个人空间页

          if(data.code == 0){
            this.$router.push({
              name:'space'
            })
          } 
      },

这里有个细节，后端参数中的数据为什么使用this，而不是像上面那样使用userInfo呢，因为我向后端发送的是我当前编辑好的内容，就是我当前页面的内容，ok

提交完成之后，数据就修改完毕了

修改前

修改后

至此个人空间资料修改 完成了，鼓鼓掌！！！

5.别人空间关注与取消

进入别人空间无非就是看看人家的资料呀，发布的东西呀，再就是给人点关注和取关，今天要做的就是给人关注和取消的功能，上面我已经说过，自己和别人的区别了，先实现模块的不同吧

<div class="user-main">
        <h1>{{userInfo.name}}</h1>
        <span class="info">
          <em>{{userInfo.createdAt}}加入美食杰</em>
          |
          <router-link :to="{name:'edit'}" v-if="isMyself">编辑个人资料</router-link>
        </span>
        <div class="tools" v-if="!isMyself">
          <!-- follow-at  no-follow-at--> 
				  <a href="javascript:;" class="follow-at"
          :class="{'no-follow-at':userInfo.isFollowing}"
          @click="toggleHandel">
             {{userInfo.isFollowing ? '已关注':'+关注'}}
          </a>
        </div>
      </div>

其实大致的布局都是一样的，我只需要在data中定义一个数据来判断我进的是别人还是自己的空间，这里我用的是isMyself，使用v-if来切换显示和隐藏，利用我上面讲的不同来绑定不同的地方。

 正题来了，我进入别人空间实现的功能就是关注和取关

所以我需要定义事件来触发 

<div class="tools" v-if="!isMyself">
          <!-- follow-at  no-follow-at--> 
				  <a href="javascript:;" class="follow-at"
          :class="{'no-follow-at':userInfo.isFollowing}"
          @click="toggleHandel">
                 这里我通过三元表达式来判断是否已关注
             {{userInfo.isFollowing ? '已关注':'+关注'}}
          </a>
        </div>



data(){
    return {
         用户数据，从api接口文档中获取
         userInfo:{},
         
         isMyself:true
    }
  },

通过事件处理逻辑给别人点个关注，然后别人的粉丝是不是得加一，让人家高兴高兴，所以就得通过接口修改数据，首先改变关注状态，然后改变用户数据，

  async toggleHandel(){
        const data = await toggleFollowing({followUserId:this.userInfo.userId})
        this.userInfo = data.data
      }

至此，功能完成 。

          总结来说，今天的大体，难度属于中等吧，难的地方就在于获取到的数据过于庞大，容易混淆，注意分清楚。再就是参数的携带方面，别忘了哦。笔者遇到的最大的问题就是修改头像时，在子组件直接更改图片，我的天呢，一直报错，给我搞得心态都崩了，最后发现问题，恨不得给自己几个大嘴巴子，子组件不能直接操作父组件中的传递的数据，望各位引以为戒。

再见!!!!