美食杰项目---个人空间(2)

上篇笔记我们写了个人空间的上半部分今天我们就来完成下半部分吧

思路:

点击tab切换,然后通过路由跳转把不同的数据渲染到不同的页面中

1.在router文件里面配置路由,使用路由重定向,然后配置二级路由,让路由跳转到相应的组件

import MenuList from '@/views/user-space/menu-list.vue'
import Fans from '@/views/user-space/fans.vue'
{
   path:'/space',
   title:'个人空间',
   name:'space',
   component:Space,
   redirect:{
        name:'works'
   },
   meta:{
        login:true
   },
   children:[
        {
           path:'works',
           name:'works',
           title:'作品',
           component:MenuList,
           meta:{
               login:true
             }
        },
        {
           path:'fans',
           name:'fans',
           title:'粉丝',
           component:Fans,
           meta:{
               login:true
           }
        },
        {
           path:'following',
           name:'following',
           title:'关注',
           component:Fans,
           meta:{
               login:true
           }
        },
        {
           path:'collection',
           name:'collection',
           title:'收藏',
           component:MenuList,
           meta:{
               login:true
            }
        },
                    
     ]
}

2.使用v-model获取切换的值, 给四个属性添加单击事件


<el-tabs class="user-nav" v-model="activeName" @tab-click="tabClickHandle">
      <el-tab-pane label="作品" name="works"></el-tab-pane>
      <el-tab-pane label="粉丝" name="fans"></el-tab-pane>
      <el-tab-pane label="关注" name="following"></el-tab-pane>
      <el-tab-pane label="收藏" name="collection"></el-tab-pane>
</el-tabs>

3.点击切换tab时改变路由参数并且显示对应的数据

tabClickHandle() {
      // 2.问题:因为各个二级路由接收的字段,全是info,所以会造成数据重复
      //   解决: 第一次保存到数组中时,没有问题,所以每次保存前,都清空一下数组
      this.list = [];

      //1.问题: 切换tab时，路由传递的参数没有保存下来，所以无法给接口传参，拿到对应的数据
      this.$router.push({
        //跳转路由
        name: this.activeName,
        // 解决方法:
        query: {
          // 把原本query传的参数再传一遍
          ...this.$route.query,
        },
      });
    },

4.以对象的方式封装请求


const getOtherInfo = {
  // getMenus(params)后端参数
  async works(params) {
    //给参数
    let data = (await getMenus(params)).data;
    data.flag = "works"; //收到返还数据
    return data;
  }, //封装完成

  async following(params) {
    let data = (await following(params)).data;
    data.flag = "following";
    return data;
  },
  async fans(params) {
    let data = (await fans(params)).data;
    data.flag = "fans";
    return data;
  },
  async collection(params) {
    let data = (await collection(params)).data;
    data.flag = "collection";
    return data;
  },
};

5.单击哪个tab按键拿到对应的数据

async getInfo() {
      let data = await getOtherInfo[this.activeName]({userId: this.userInfo.userId });

      // 3.问题:切换tab过快时,依然报错key重复.并且数据显示不正常
      //   原因:因为ajax返回数据快慢的问题,显示的是最后一次ajax返回的数据,无法识别对应的请求
      //   解决:在请求中定义一个标识,在返回的数据中添加标识,如果返回的数据和当前的标识相同再渲染
      if (this.activeName === data.flag) {
        this.list = data.list;
      }
      this.list = data.list;
    },

今天的内容就到这里啦有什么问题可以在下面评论哦

如果没看懂的小伙伴就参考下面的代码吧!

<template>
  <div class="space">
    <h2>欢迎来到我的美食空间</h2>
    <!--{{userInfo}}-->
    <div class="user-info">
      <div class="user-avatar">
        <img :src="userInfo.avatar" alt="">
      </div>
      <div class="user-main">
        <h1>{{userInfo.name}}</h1>
        <span class="info">
          <em>{{userInfo.createdAt}}加入美食杰</em>
          |
          <router-link :to="{name:'edit'}" v-if="isOwner">编辑个人资料</router-link>
        </span>
        <div class="tools" v-if="!isOwner">
          <!-- follow-at  no-follow-at-->
				  <a href="javascript:;"
            class="follow-at"
            :class="{'no-follow-at': userInfo.isFollowing}"
            @click="toggleHandler"
          >
            {{userInfo.isFollowing ? '已关注' : '+关注'}}
          </a>
        </div>
      </div>


      <ul class="user-more-info">
        <li>
          <div>
            <span>关注</span>
            <strong>{{userInfo.following_len}}</strong>
          </div>
        </li>
        <li>
          <div>
            <span>粉丝</span>
            <strong>{{userInfo.follows_len}}</strong>
          </div>
        </li>
        <li>
          <div>
            <span>收藏</span>
            <strong>{{userInfo.collections_len}}</strong>
          </div>
        </li>
        <li>
          <div>
            <span>发布菜谱</span>
            <strong>{{userInfo.work_menus_len}}</strong>
          </div>
        </li>
      </ul>
    </div>


    <!-- v-model="activeName" -->
    <el-tabs class="user-nav" v-model="activeName" @tab-click="tabClickHandler">
      <el-tab-pane label="作品" name="works"></el-tab-pane>
      <el-tab-pane label="粉丝" name="fans"></el-tab-pane>
      <el-tab-pane label="关注" name="following"></el-tab-pane>
      <el-tab-pane label="收藏" name="collection"></el-tab-pane>
    </el-tabs>


    <div class="user-info-show">
      <!-- 作品 & 收藏 布局 -->
      <!-- <menu-card :margin-left="13"></menu-card> -->
      <!-- 粉丝 & 关注 布局 -->
      <!-- <Fans></Fans>   -->
      <router-view :info="list" :activeName="activeName"></router-view>
    </div>


  </div>
</template>

<script>
import {userInfo, toggleFollowing, getMenus, following, fans, collection} from '@/service/api';

const getOtherInfo = {


    async works(params){
      let data = (await getMenus(params)).data;
      data.flag = 'works';
      return data
    },
    async following(params){
      let data = (await following(params)).data;
      data.flag = 'following';
      return data
    },
    async fans(params){
      let data = (await fans(params)).data;
      data.flag = 'fans';
      return data
    },
    async collection(params){
      let data = (await collection(params)).data;
      data.flag = 'collection';
      return data
    }
    
}


export default {
  name: 'Space',
  data(){
    return {
      userInfo:{},
      isOwner:false,
      activeName:"works",
      list:[]
    }
  },
  watch:{
    $route:{
      async handler(){
        //判断是否有值
       let {userId} = this.$route.query
       //判断有没有数据,有数据就是自己的空间
       this.isOwner = !userId || userId === this.$store.state.userInfo.userId;
       if(this.isOwner){   //自己的空间
        this.userInfo = this.$store.state.userInfo;
       }else{   //别人空间    //多发一次网络请求
        const data = await userInfo({userId});
        console.log(data);
        this.userInfo = data.data
       }
      
      this.activeName = this.$route.name;//保留当前路由的信息,获取当前路由的name赋值给activeName


      this.getInfo();
      },
      immediate:true //深度监听 立即执行 
    }
  },
  methods:{
      async getInfo(){   //可以知道我拿的哪个按钮                 
        let data = await getOtherInfo[this.activeName]({userId:this.userInfo.userId})
        if(this.activeName === data.flag){
          this.list = data.list;
        }
      },


    //async await  将异步转换为同步
    async toggleHandler(){
        const {data} = await toggleFollowing({followUserId:this.userInfo.userId});
        // console.log(data);
        //因为关注后,要更新的数据还有粉丝,所以整体赋值数据
        this.userInfo = data;
     },


     //点击按钮,点击谁传过去,路由传过去
     tabClickHandler(){


       //问题1: 因为各个路由接收的字段,全是info,所以会造成层数据重复
       //解决:第一次保存数据到数组中,没有问题,所以,每次保存前都清空一下数组
       this.list = [];
       this.$router.push({
         name:this.activeName,
         query:{
           ...this.$route.query
         }
       })
     }
  }
}
</script>

原文链接：https://blog.csdn.net/L1993746181/article/details/123509910