美食杰项目---个人空间

今天继续来写美食杰项目之个人空间，连载哦！！！

 总体思路:

1.显示别人的空间

         a.地址栏中如有userId 则显示对应的用户数据

2.显示自身空间

        a.如果没有userId  则默认显示自己信息

        b.如果在菜谱中 点击自己 也是有userId传递

        c.通过判断是否为自己的 如果是，不需要后端拿,登录时，个人信息已经存在vuex中

个人空间页面效果展示：

 代码展示：

space.vue:

<template>
  <div class="space">
    <h2>欢迎来到我的美食空间</h2>
    <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-lef