前言：

本文给大家讲解，美食杰项目中 实现个人主页的效果，和具体代码。

---

具体实现思路：

1. 判断是否是本人，获取用户详情信息
2. 关注，取消关注
3. 点击跳转，显示（发布，收藏，粉丝，关注）
4. 判断是否是跳转页，是则显示内容
5. 根据示例图进行渲染

---

步骤：

1. 展示美食杰菜谱大全效果

---

2. 引入element-ui

点击跳转至 element-ui 中 Tabs 标签页使用方法：https://element.eleme.cn/#/zh-CN/component/tabs

---

3. 代码

• 个人主页

跳转至（发布，收藏，粉丝，关注）页可以使用 element-ui 中 Tabs 标签的方法。

<template>
  <div class="box">
    <p class="title">欢迎来到我的美食空间</p>
    <div class="top">
      <div class="left">
        <img :src="userInfo.avatar" alt="" />
      </div>
      <div class="center">
        <p class="one">
          {{ userInfo.name }}
          <!-- v-if="isLogin" 判断是否是本人 -->
          <span
            :class="{ action: userInfo.isFollowing }"
            v-if="isLogin"
            @click="follow"
          >
            {{ userInfo.isFollowing ? "已关注" : "未关注" }}</span
          >
        </p>
        <p class="two">
          个人简介：{{
            userInfo.sign ? userInfo.sign : "这个人比较懒，还没有简介"
          }}
        </p>
        <p class="three">
          {{ userInfo.createdAt }}加入美食杰<router-link
            :to="{ name: 'personal' }"
            v-if="!isLogin"
          >
            | 编辑个人资料</router-link
          >
        </p>
      </div>
      <div class="right">
        <p>
          关注<span>{{ userInfo.following_len }}</span>
        </p>
        <p>
          粉丝<span>{{ userInfo.follows_len }}</span>
        </p>
        <p>
          收藏<span>{{ userInfo.collections_len }}</span>
        </p>
        <p>
          发布菜谱<span>{{ userInfo.work_menus_len }}</span>
        </p>
      </div>
    </div>
    <div class="centers">
      <router-link :to="{ name: 'works', query: { ...$route.query } }"
        >作品</router-link
      >
      <router-link :to="{ name: 'fans', query: { ...$route.query } }"
        >粉丝</router-link
      >
      <router-link :to="{ name: 'following', query: { ...$route.query } }"
        >关注</router-link
      >
      <router-link :to="{ name: 'collection', query: { ...$route.query } }"
        >收藏</router-link
      >
    </div>
    <div class="bottom">
      <!-- 父传子事件 -->
      <router-view :activeName="activeName" :info="list"></router-view>
    </div>
  </div>
</template>

<script>
import {
  userInfo,
  toggleFollowing,
  getMenus,
  collection,
  following,
  fans,
} from "@/connector/api";
// 封装请求接口
const getaxios = {
  async works(params) {
    return (await getMenus(params)).data;
  },
  async collection(params) {
    return (await collection(params)).data;
  },
  async following(params) {
    return (await following(params)).data;
  },
  async fans(params) {
    return (await fans(params)).data;
  },
};
export default {
  data() {
    return {
      // 用户信息
      userInfo: [],
      // 传递参数
      activeName: "works",
      // 是否是本人
      isLogin: "",
      // 用户自己的
      list: [],
      // 用户自己的 用来判断
      queen: {},
    };
  },
  watch: {
    $route: {
      async handler() {
        // 获取query值
        let { userId } = this.$route.query;
        // 请求当前用户数据
        const { data } = await userInfo({ userId: userId });
        // 判断是否是本人如果是则获取本人信息，如果不是则获取用户信息
        this.userInfo = userId ? data : this.$store.state.userInfo;
        // 判断是否是本人
        this.isLogin = userId ? true : false;
        // console.log(this.userInfo);
        // 传递参数
        this.activeName = this.$route.name;
        this.getaxiose();
      },
      immediate: true,
    },
  },
  mounted() {
    // 获取用户信息
    this.userInfo = this.$store.state.userInfo;
    // console.log(this.userInfo);
  },
  methods: {
    // 点击关注
    async follow() {
      const data = await toggleFollowing({
        followUserId: this.userInfo.userId,
      });
      // console.log(data.data);
      // 因为关注后，要更新数据，所以要整体赋值
      this.userInfo = data.data;
    },
    // 获取跳转子组件时需要传递的参数
    getaxiose() {
      (async (activeName) => {
        // 获取跳转子组件时需要传递的参数
        let data = await getaxios[this.activeName]({
          userId: this.userInfo.userId,
        });
        // 根据 activeName 的值进行赋值
        this.queen[activeName] = data.list;
        // console.log(activeName, this.activeName);
        // 判断当前的 activeName 是否等于显示的 activeName
        if (activeName === this.activeName) {
          // 把值赋值给 list
          this.list = this.queen[this.activeName];
        }
        // 判断失败则不赋值，直到判断成立为止
        // console.log(data);
        this.queen = {};
      })(this.activeName);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 990px;
  margin: 0 auto;
  .title {
    text-align: center;
    margin: 30px 0;
  }
  .top {
    width: 100%;
    background-color: #fff;
    display: flex;
    position: relative;
    img {
      width: 250px;
      height: 250px;
    }
    .center {
      margin-left: 20px;
      p {
        color: gainsboro;
        font-size: 14px;
        padding: 5px 0;
        margin: 0;
      }
      .one {
        color: #333;
        font-size: 20px;
        margin-top: 20px;
        span {
          display: inline-block;
          position: absolute;
          right: 250px;
          background-color: red;
          padding: 5px 10px;
          border-radius: 5px;
          color: #fff;
        }
        .action {
          background-color: grey;
          color: #333;
        }
      }
      .three {
        a {
          text-decoration: none;
          color: gainsboro;
        }
      }
    }
    .right {
      width: 160px;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      margin: 20px 20px 0 0;
      right: 0;
      p {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        border: 1px solid #333;
        font-size: 12px;
        margin: 20px 10px;
        text-align: center;
        line-height: 40px;
      }
      span {
        display: block;
        line-height: 10px;
        color: red;
      }
    }
  }
  .centers {
    margin: 30px 0;
    a {
      margin-right: 35px;
      padding-bottom: 10px;
      text-decoration: none;
      color: #333;
      &.router-link-exact-active {
        color: red;
        border-bottom: 1px solid red;
      }
    }
  }
}
</style>

---

• 收藏发布页

也可以把发布页和收藏页，分成两个组件来写，在一个组件中需要进行判断，那部分显示，那部分不显示

<template>
  <div class="box">
    <!-- 判断是否有内容 -->
    <div class="info-empty" v-if="!info.length">
      <!-- 判断是否是 发布页 -->
      <div v-if="activeName == 'works'">
        <p>私房菜不要偷偷享用哦~~制作成菜谱与大家分享吧！</p>
        <router-link to="">发布菜单</router-link>
      </div>
    </div>
    <!-- 判断是否是 收藏页 -->
    <div class="info-empty" v-if="!info.length">
      <div v-if="activeName == 'collection'">
        <p>还没有收藏任何的菜谱，去搜自己喜欢的菜谱，收藏起来吧。</p>
        <router-link to="">菜谱大全</router-link>
      </div>
    </div>
    <div v-if="info.length">
      <!-- 使用主页时定义的组件 -->
      <Roll :menus="info" :id="5"></Roll>
    </div>
  </div>
</template>

<script>
import Roll from "@/views/home-page/roll.vue";
export default {
  components: { Roll },
  props: {
    // 接收数据 activeName
    activeName: {
      type: String,
      default: "fans",
    },
    // 渲染至页面的数据
    info: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      info: "",
    };
  },
  mounted() {
    this.info = this.$store.getters.islogin;
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  //   height: 300px;
  background-color: #fff;
  .info-empty {
    width: 100%;
    text-align: center;
    display: block;
    line-height: 80px;
    padding: 0 0 20px 0;
    a {
      text-decoration: none;
      padding: 20px 30px;
      border-radius: 15px;
      background-color: red;
    }
  }
}
</style>

---

• 粉丝关注页

也可以把粉丝页和关注页，分成两个组件来写，在一个组件中需要进行判断，那部分显示，那部分不显示

<template>
  <div class="box">
    <!-- 判断是否有信心 -->
    <div v-if="!info.length">
      <!-- 判断是否是 粉丝页 -->
      <p v-if="activeName == 'fans'" class="activeName">
        还没有被关注哦！多发布菜谱，更容易被找到。
      </p>
      <!-- 判断是否是 关注页 -->
      <p v-if="activeName == 'following'" class="activeName">
        还没有关注别人哦！可以预览菜谱，找到别人
      </p>
    </div>
    <ul>
      <!-- 渲染数据 -->
      <li v-for="item in info" :key="item._id">
        <router-link
          :to="{ name: 'MyHomepage', query: { userId: item.userId } }"
        >
          <img :src="item.avatar" alt="" />
        </router-link>
        <div class="title">
          <router-link
            :to="{ name: 'MyHomepage', query: { userId: item.userId } }"
          >
            <p class="name">{{ item.name }}</p>
          </router-link>
          <p class="follows">
            粉丝：{{ item.follows_len }} | 关注：{{ item.following_len }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    // 接收数据 activeName
    activeName: {
      type: String,
      default: "fans",
    },
    // 渲染至页面的数据
    info: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    // console.log(this.activeName);
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  //   height: 300px;
  background-color: #fff;
  .activeName {
    width: 100%;
    text-align: center;
    padding: 100px 0;
  }
  ul {
    li {
      display: flex;
      padding: 10px 0;
      list-style: none;
      img {
        width: 120px;
        height: 120px;
        margin-right: 20px;
      }
      .name {
        color: red;
      }
      a {
        text-decoration: none;
      }
    }
  }
}
</style>

---

总结：

总结：
以上就是 美食杰项目 中 个人主页的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog