美食杰项目（五）个人主页

前言

• 本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式，希望我的代码能够帮助到你，也希望你能够看懂

---

具体效果

• 作品和收藏的具体样式（作品和收藏的具体样式都差不多）
  
• 粉丝和关注的具体样式（粉丝和关注样式一样）
  

代码思路

在总组件将数据请求出来，并传给各个分组件
各个组件完成各自的功能
通过watch监听属性监听是自己的个人主页还是别人的主页
监听完成就能完成其他的功能

---

相应组件

• 这些就是具体的组件
  • space为总组件
  • fans为粉丝和关注的组件
  • works为作品和收藏的组件
    

具体代码

• space组件实现的功能就是将个人的基本信息渲染出来，再根据tab切换切换对应的子组件
• space总组件

<template>
  <div class="space-head">
    <h2>欢迎来到我的美食空间</h2>
    <div class="individual">
      <img :src="userInfo.avatar" alt="" />
      <div class="individual-cont">
        <div class="guanzhu">
          <div v-show="!isOwner" @click="guanzhu">
            {{ userInfo.isFollowing ? "已关注" : "关注" }}
          </div>
        </div>
        <h3>{{ userInfo.name }}</h3>
        <p>
          <span class="jion">{{ userInfo.createdAt }}加入美食杰</span> |
          <router-link :to="{ name: 'edit' }" v-show="isOwner">
            编辑个人资料
          </router-link>
        </p>
      </div>
      <div class="Information">
        <div class="Information-concern">
          <div>关注</div>
          <span>{{ userInfo.following_len }}</span>
        </div>
        <div class="Information-fans">
          <div>粉丝</div>
          <span>{{ userInfo.follows_len }}</span>
        </div>
        <div class="Information-collection">
          <div>收藏</div>
          <span>{{ userInfo.collections_len }}</span>
        </div>
        <div class="Information-publish">
          <div>发布菜谱</div>
          <span>{{ userInfo.work_menus_len }}</span>
        </div>
      </div>
    </div>
    <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>
      <router-view :info="list" :activeName="activeName"></router-view>
    </div>
  </div>
</template>

<script>
import {
  userInfo,
  toggleFollowing,
  getMenus,
  following,
  fans,
  collection,
} from "@/connector/api";
// 封装的请求接口，data.flag是为了判断点击的是否相对应，防止报错
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 {
  data() {
    return {
      userInfo: {},
      isOwner: "",
      list: [],
      activeName: "works",
    };
  },
  // 通过watch监听属性监听路由跳转
  watch: {
    $route: {
      async handler() {
        // 将用户的id结构出来
        let { userId } = this.$route.query;
        // 判断是个人主页还是其他人的主页
        this.isOwner = !userId || userId == this.$store.state.userInfo.userId;
        if (this.isOwner) {
          //判断当前登录的用户
          // 若为自己的个人主页则将vuex里面存储的个人信息拿出来
          this.userInfo = this.$store.state.userInfo;
          // console.log(this.userInfo);
        } else {
          // 若为他人的个人主页利用接口将数据拿出来
          const { data } = await userInfo({ userId: userId });
          // console.log(data);
          this.userInfo = data;
          // console.log(this.userInfo);
        }
        // 每次请求将请求地址保存
        this.activeName = this.$route.name;
        // console.log(this.activeName)
        this.getInfo(); //请求二级路由
      },
      // 立即执行
      immediate: true,
    },
  },
  methods: {
    // tab切换
    // 点击切换看你点的是哪个,利用点击事件
    tabClickHandler() {
      console.log(this.activeName);
      // 将list置空
      this.list = [];
      // 将tab切换值传进路由
      this.$router.push({
        name: this.activeName,
        query: {
          ...this.$route.query,
        },
      });
      console.log(this.list);
    },
    async getInfo() {
      // 点击哪个哪个的数据请求出来
      let data = await getOtherInfo[this.activeName]({
        userId: this.userInfo.userId,
      });
      // 给组件赋值
      // 如果点的相同则将值赋值给list
      // console.log(data);
      if (this.activeName === data.flag) {
        this.list = data.list;
      }
    },
    // 点击关注
    async guanzhu() {
      //将数据请求出来
      let { data } = await toggleFollowing({
        followUserId: this.userInfo.userId,
      });
      // console.log(data);
      // 将data赋值给userInfo,方便写关注未关注
      this.userInfo = data;
    },
  },
};
</script>

• fans组件完成的是粉丝和关注页面的主要功能由于粉丝和关注的内容大致相同所以都写在了一个组件里根据tab切换穿进来的切换值进行改变
• fans组件（粉丝和关注）

<template>
  <div class="fans">
<!-- 利用v-if判断是否有数据有的话显式数据，没的话就显示相应的提示内容 -->
    <div class="fans-empty" v-if="!info.length">
          <!-- 利用v-if判断点击的是哪个组件 -->
      <p v-if="activeName == 'fans'">
        还没有被关注哦！多发布菜谱，更容易被找到。
      </p>
      <p v-if="activeName == 'following'">
        还没有关注别人哦！可以预览菜谱，找到别人
      </p>
    </div>
    <ul v-if="info.length">
      <router-link
        :to="{ name: 'space' }"
        tag="li"
        v-for="(item, index) in info"
        :key="index"
      >
        <img :src="item.avatar" alt="" />
        <div class="fans-Information">
          <h4>{{ item.name }}</h4>
          <p>
            <span>粉丝</span><span>{{ item.follows_len }}</span
            >|<span>关注</span><span>{{ item.following_len }}</span>
          </p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  // 利用props接受父组件传过来的值
  props: {
    info: {
      type: Array,
      default: () => [],
    },
    // 这是点击的那个组件名
    activeName: {
      type: String,
      default: "works",
    },
  },
};
</script>

• works组件完成的是作品和收藏页面的主要功能由于作品和收藏的内容大致相同所以都写在了一个组件里根据tab切换穿进来的切换值进行改变
• works组件（作品和收藏）

<template>
  <div class="works">
    <div class="works-empty" v-if="!info.length">
      <div v-if="activeName == 'works'">
        <p>私房菜不要偷偷享用哦~~制作成菜谱与大家分享吧！</p>
        <router-link to="">发布菜单</router-link>
      </div>
      <div v-if="activeName == 'collection'">
        <p>还没有收藏任何的菜谱，去搜自己喜欢的菜谱，收藏起来吧。</p>
        <router-link to="">菜谱大全</router-link>
      </div>
    </div>
    <!-- 将值传给封装的商品列表 -->
    <getmenu :list="info" v-if="info"></getmenu>
  </div>
</template>

<script>
import getmenu from "@/components/getmenu.vue";
export default {
  props: {
    info: {
      type: Array,
      default: () => [],
    },
    activeName: {
      type: String,
      default: "works",
    },
  },
  components: {
    getmenu,
  },
};
</script>

总结：

以上就是 美食杰项目中个人主页的具体样式和实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。点我的主页来观看吧