美食杰(个人主页) 上

逻辑:登录自己的个人主页直接跳转,登录别人的个人主页要id值

登录自己的个人主页,自己的个人主页不需要userId值,直接通过router-link跳到个人主页的页面,数据直接拿vuex的数据,原因是我们在router的index里之前来判断token值是否合法就是请求了用户的信息数据,之后又通过vuex中的事件把数据传给了vuex的state

登录别人的个人主页要调用我们之前设置的api组件的请求,先引入到组件中,调用请求的接口,拿到数据赋值给一个对象,登录别人的个人主页要userId值,来判断登录的是谁的个人主页,这是就要监听路由啦!!

<router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">
//把userId传给别人的个人主页来判断不同的个人主页

 data(){
    return {
      userInfo:{},
      isOne:false,
    }
  },
  watch:{
    $route:{
     async handler(){
        let {userId} =this.$route.query;    //自己的个人主页
        this.isOne= !userId || userId===this.$store.state.userInfo.userId;
        //这个this.isOne是 没有userId或者userId等于vuex的数据的userId
        if(this.isOne){ //如果为true就把vuex的数据重新赋值给data的userInfo
          this.userInfo=this.$store.state.userInfo
        }else{          
          const data=await userInfo({userId})  //别人的个人主页
          //需要请求接口通过传入参数userId来跳入不同的别人主页
          console.log(data)             
          this.userInfo=data.data
        }
      },
      immediate:true //页面初始化立即执行
    }
  },

之后拿到数据渲染即可!!

 

然后判断自己的个人主页有"编辑个人资料",不可以出现关注,别人的个人主页有"关注",不可以出现编辑个人资料

看上面的代码 我们设置了一个isOne:false的data属性,又把this.isOne赋值了等于没有userId参数,和点击自己的作品是有userId值得,我么把呢个userId值让他等于了vuex数据中的userId了,所以这个段代码确定了isOne这个属性他就是自己的个人主页

 this.isOne= !userId || userId===this.$store.state.userInfo.userId;

我们直接拿这个isOne在个人主页的编辑个人资料的标签中加入v-show或v-if="isOne",在关注的的标签里也设置v-if="!isOne",不过要取反,当isOne等于true时显示"编辑个人资料",取反isOne等于false时显示"关注"

关注和已关注

我们先去api的组件中去拿 关注 关注取消的关注 没关注的 要关注 的请求

/**
 * toggle 关注。关注的取消关注；没关注的，要关注。
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.followUserId] - 指定要关注的用户的id
 * @returns
 */
export async function toggleFollowing(params){
  return await http.post('/user/following', params);
}

引入到个人主页的组件中,给关注按钮添加事件,添加之后在事件中用async/await来请求数据,里面必须要有followUserId属性用来指定要关注用户的id

<div class="tools" v-show="!isOne">
          <!-- follow-at  no-follow-at-->
				  <a href="javascript:;"  @click="isgg()"  class="follow-at"
          :class="{'no-follow-at':userInfo.isFollowing}">

            {{userInfo.isFollowing? '已关注':'关注'}}
          </a>
        </div>

这个关注和已关注是通过数据中的isFollowing的true"已关注"和false"关注"来控制的,当我们调用接口并把新的数据进行整体赋值,里面的isFollowing也就变为true,所以就会显示已关注

为什么要整体赋值数据呢??  因为关注后,要更新数据还有粉丝,所有整体赋值数据

 methods:{
  async isgg(){
    const data=await toggleFollowing({followUserId:this.userInfo.userId});
    console.log(data)
    //因为关注后,要更新数据还有粉丝,所有整体赋值数据
    this.userInfo=data.data
   }
  }

继续努力加油!!!!