内容：个人空间分为‘基础信息’和‘发布、关注、粉丝，收藏这些’。
步骤：
- 1.首先获取数据进行渲染，监听路由变化。
- 2.因为下面的tab切换需要配置路由，因为作品和收藏的布局基本一样，粉丝和关注的布局基本一样，所以用的是同一个组件。
- 3.给tab切换的地方添加一个点击事件tabClickHandler，让他点击的时候进行路由跳转。因为是使用的element渲染的，所以绑定点击事件需要使用@tab-click
- 4.监听路由时也在监听此方法，（根据上面定义的activeName标志）

内容：个人空间分为‘基础信息’和‘发布、关注、粉丝，收藏这些’。

代码如下：

<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-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){//作品return (await getMenus(params)).data;},async fans(params) {//粉丝return (await fans(params)).data;},async following(params) {//关注return (await following(params)).data;},async collection(params) {//收藏return (await collection(params)).data;}
}
export default {name: 'Space',data(){return {userInfo:{},isOwner:'',activeName:'works',list:[],queen:{}}},watch:{$route:{async  handler(){let {userId}=this.$route.query//如果没有userId，或者userId等于仓库中储存的userIdthis.isOwner=!userId||userId ===this.$store.state.userInfo.userIdif(this.isOwner){//当前登录用户this.userInfo = this.$store.state.userInfoconsole.log(this.userInfo)}else{const data=await userInfo({userId});this.userInfo=data.data}this.activeName=this.$route.name //留存上一次的访问（例如：上一次访问的是收藏，下一次打开，还在收藏）this.getInfo();},immediate:true}},methods:{async toggleHandler(){const data= await toggleFollowing({followUserId:this.userInfo.userId})this.userInfo=data.data},tabClickHandler(){// console.log(this.activeName)this.list = []//每次点击，清空数据，防止key 重复this.$router.push({name:this.activeName,query:{//留存query 避免覆盖...this.$route.query}})},async getInfo(){//问题：如果tab 切换过快，会报错key重复，并且数据也显示不正常//原因：因为Ajax返回数据快慢的问题，显示的最后一次Ajax返回的数据，无法下是对应的数据//如果接口名不同的情况下，可以用第一种方式，如果相同或者过于繁杂，可以使用本方法//原理：使用闭包的形式存储每一次请求的标记，复制时选取当前的标记进行对比，防止混乱(因为请求Ajax需要时间)(async (activeName)=>{let data=await getOtherInfo[this.activeName]({userId:this.userInfo.userId})this.queen[activeName]=data.list;//取当前路由的name对应的数据console.log(activeName,this.activeName)if(activeName===this.activeName){this.list=this.queen[this.activeName]}this.queen={}})(this.activeName)}},
}
</script><style lang="stylus">
.spaceh2text-align centermargin 20px 0.user-infoheight 210pxbackground-color #fffdisplay flex.user-avatarwidth 210pxheight 210pximg width 100%height 100% .user-mainwidth 570pxpadding 20pxposition relativeh1font-size 24pxcolor #333line-height 44px.info  font-size 12pxline-height 22pxcolor #999acolor #999.tools position absoluteright 20pxtop 20pxvertical-align top;adisplay inline-blockpadding 3px 0width 50pxcolor #ffftext-align centera.follow-atbackground-color  #ff3232a.no-follow-at background-color #999.user-more-infowidth 190pxoverflow hiddenpadding-top 20pxliwidth 81pxheight 81pxborder-radius 32pxborder-bottom-right-radius 0margin 0px 8px 8px 0pxfloat leftdivdisplay blockheight 81pxwidth 81pxbox-shadow 0px 0px 6px rgba(0,0,0,0.05) insetborder-radius 32pxborder-bottom-right-radius 0span color #999line-height 20pxdisplay blockpadding-left 14pxpadding-top 14pxstrong display blockfont-size 18pxcolor #ff3232font-family Microsoft Yaheipadding-left 14pxline-height 32px.user-navmargin 20px 0 20px 0.user-info-showmin-height 300pxbackground #fffpadding-top 20px.info-emptywidth 100% min-height inheritdisplay flexalign-items centerjustify-content:center;p text-align centerfont-size 12pxa text-align centerdisplay blockheight 48pxwidth 200pxline-height 48pxfont-size 14pxbackground #ff3232color #ffffont-weight boldmargin 0px auto.el-tabs__item.is-active color: #ff3232;.el-tabs__active-barbackground-color: #ff3232;.el-tabs__nav-wrap::afterbackground-color: transparent;
</style>

步骤：

1.首先获取数据进行渲染，监听路由变化。

监听路由变化，来判断路由是否有userId。
如果有则代表不是自己的空间，则通过api调用后端获取数据。
如果没有数据，则代表自己的空间，获取vuex里的userInfo信息进行渲染。
在data里面创建一个名为userInfo的对象，然后把获取到的数据进行赋值。

 watch:{// 监听路由变化，来判断路由是否有信息，从而分辨是否为自己的空间$route:{async handler(){let {userId}=this.$route.query//如果没有userId，或者userId等于仓库中储存的userIdthis.isOwner=!userId||userId===this.$store.state.userInfo.userIdif(this.isOwner){ //当前登录用户this.userInfo = this.$store.state.userInfoconsole.log(this.userInfo)}else{const data=await userInfo({userId});this.userInfo=data.data}this.activeName=this.$route.name //留存上一次的访问（例如：上一次访问的是收藏，下一次打开，还在收藏）this.getInfo(); //监听变化则触发该事件},immediate:true}},

通过判断isOwner的值来进行对userInfo赋值，和对‘编辑资料’这条信息。
对数据进行渲染

2.因为下面的tab切换需要配置路由，因为作品和收藏的布局基本一样，粉丝和关注的布局基本一样，所以用的是同一个组件。

在js中声明一个：

const getOtherInfo={async works(params){//作品return (await getMenus(params)).data;},async fans(params) {//粉丝return (await fans(params)).data;},async following(params) {//关注return (await following(params)).data;},async collection(params) {//收藏return (await collection(params)).data;}
}

3.给tab切换的地方添加一个点击事件tabClickHandler，让他点击的时候进行路由跳转。因为是使用的element渲染的，所以绑定点击事件需要使用@tab-click

tabClickHandler(){this.list = []//每次点击，清空数据，防止key 重复this.$router.push({name:this.activeName,query:{//留存query 避免其它路由覆盖...this.$route.query}})},

4.监听路由时也在监听此方法，（根据上面定义的activeName标志）

async getInfo(){//问题：如果tab 切换过快，会报错key重复，并且数据也显示不正常//原因：因为Ajax返回数据快慢的问题，显示的最后一次Ajax返回的数据，无法下是对应的数据//如果接口名相同或者过于繁杂，可以使用本方法//原理：使用闭包的形式存储每一次请求的标记，复制时选取当前的标记进行对比，防止混乱(因为请求Ajax需要时间)(async (activeName)=>{let data=await getOtherInfo[this.activeName]({userId:this.userInfo.userId})this.queen[activeName]=data.list;//取当前路由的name对应的数据console.log(activeName,this.activeName)if(activeName===this.activeName){this.list=this.queen[this.activeName]}this.queen={}})(this.activeName)}},

根据标记取得当前路由数据，然后渲染。

若有疑问，及时提出哦

小作者在努力持续更新中…

《美食街》项目（个人空间篇）相关推荐

M5(项目)-01-尚硅谷谷粒商城项目分布式基础篇开发文档
M5(项目)-01-尚硅谷谷粒商城项目分布式基础篇开发文档分布式基础篇一.环境搭建各种开发软件的安装虚拟机: docker,mysql,redis 主机: Maven, idea(后端),Vs ...
美食杰项目 -- 个人主页（四）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现个人主页的效果,和具体代码. 具体实现 ...
美食杰项目（五）个人主页
目录前言具体效果代码思路相应组件具体代码总结: 前言本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂具体效果作品和收藏的具体样式( ...
美食杰项目---个人页和他人主页
美食杰项目-个人页和他人主页跳转个人主页. 跳转他人主页. 点击他人关注或取消关注. 点击他人菜谱,粉丝及关注. 效果图展示点击跳转到个人空间,个人空间没有关注和取消关注. 点击个人跳转如下图: ...
北京最受欢迎的十大美食街
越来越多各具特色的美食街早已成了北京的美食符号.不管它是时尚还是古朴,都是北京人生活中不可缺少的一部分. 街道是一个城市的符号.如今,越来越多各具特色的美食街早已成了北京的美食符号.不管它是时尚还是古 ...
基于koajs的web项目构建-心得篇
2019独角兽企业重金招聘Python工程师标准>>> 根据基于koajs的web项目构建-入门篇所描述的,建立了项目的基本目录结构,接下来的工作便是编码,编译,测试,发布.做为 ...
android 测试工具,Android开源项目第四篇:开发及测试工具篇
本文为那些不错的Android开源项目第四篇--开发工具篇,**主要介绍Android开发工具和测试工具相关的开源项目**. Android开源项目系列汇总已完成,包括: 1.Buck faceboo ...
CriminalIntent项目开发--后篇
CriminalIntent项目开发--后篇为Criminal Intent应用添加对话框创建DiaologFragment,使用FragmentManager管理对话框,可以灵活的显示对话框. ...
从零开始写项目第七篇【搭建Linux环境】
tags: 从零开发项目, title: 从零开始写项目第七篇[搭建Linux环境] 使用SSH连接Linux环境经过十多天的时间,我的网站备案终于完成了...接下来我就收到了阿里云的邮件.它让我在 ...
阿里Android p6准备,项目经历准备篇——如何准备阿里巴巴P6/P7前端面试
项目经历准备篇--如何准备阿里巴巴P6/P7前端面试在上次的校招文章之后,有很多同学问有没有社招相关的东西可以写一篇,现在它来了.比起校招,社招更加看重项目经历+项目经历反应的思考.本文针对的是想进 ...

《美食街》项目（个人空间篇）

目录：