美食杰(个人主页) 上

逻辑:登录自己的个人主页直接跳转,登录别人的个人主页要id值

登录自己的个人主页,自己的个人主页不需要userId值,直接通过router-link跳到个人主页的页面,数据直接拿vuex的数据,原因是我们在router的index里之前来判断token值是否合法就是请求了用户的信息数据,之后又通过vuex中的事件把数据传给了vuex的state

登录别人的个人主页要调用我们之前设置的api组件的请求,先引入到组件中,调用请求的接口,拿到数据赋值给一个对象,登录别人的个人主页要userId值,来判断登录的是谁的个人主页,这是就要监听路由啦!!

<router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">
//把userId传给别人的个人主页来判断不同的个人主页

 data(){return {userInfo:{},isOne:false,}},watch:{$route:{async handler(){let {userId} =this.$route.query;    //自己的个人主页this.isOne= !userId || userId===this.$store.state.userInfo.userId;//这个this.isOne是 没有userId或者userId等于vuex的数据的userIdif(this.isOne){ //如果为true就把vuex的数据重新赋值给data的userInfothis.userInfo=this.$store.state.userInfo}else{          const data=await userInfo({userId})  //别人的个人主页//需要请求接口通过传入参数userId来跳入不同的别人主页console.log(data)             this.userInfo=data.data}},immediate:true //页面初始化立即执行}},

之后拿到数据渲染即可!!

然后判断自己的个人主页有"编辑个人资料",不可以出现关注,别人的个人主页有"关注",不可以出现编辑个人资料

看上面的代码我们设置了一个isOne:false的data属性,又把this.isOne赋值了等于没有userId参数,和点击自己的作品是有userId值得,我么把呢个userId值让他等于了vuex数据中的userId了,所以这个段代码确定了isOne这个属性他就是自己的个人主页

 this.isOne= !userId || userId===this.$store.state.userInfo.userId;

我们直接拿这个isOne在个人主页的编辑个人资料的标签中加入v-show或v-if="isOne",在关注的的标签里也设置v-if="!isOne",不过要取反,当isOne等于true时显示"编辑个人资料",取反isOne等于false时显示"关注"

关注和已关注

我们先去api的组件中去拿关注关注取消的关注没关注的要关注的请求

/*** toggle 关注。关注的取消关注；没关注的，要关注。* @export* @param {Object} [params] - * @param {string} [params.followUserId] - 指定要关注的用户的id* @returns*/
export async function toggleFollowing(params){return await http.post('/user/following', params);
}

引入到个人主页的组件中,给关注按钮添加事件,添加之后在事件中用async/await来请求数据,里面必须要有followUserId属性用来指定要关注用户的id

<div class="tools" v-show="!isOne"><!-- follow-at  no-follow-at--><a href="javascript:;"  @click="isgg()"  class="follow-at":class="{'no-follow-at':userInfo.isFollowing}">{{userInfo.isFollowing? '已关注':'关注'}}</a></div>

这个关注和已关注是通过数据中的isFollowing的true"已关注"和false"关注"来控制的,当我们调用接口并把新的数据进行整体赋值,里面的isFollowing也就变为true,所以就会显示已关注

为什么要整体赋值数据呢?? 因为关注后,要更新数据还有粉丝,所有整体赋值数据

 methods:{async isgg(){const data=await toggleFollowing({followUserId:this.userInfo.userId});console.log(data)//因为关注后,要更新数据还有粉丝,所有整体赋值数据this.userInfo=data.data}}

继续努力加油!!!!

美食杰(个人主页) 上相关推荐

美食杰(个人主页编辑资料)
逻辑:在保存的时候设置一个单击事件,上面没修改之前直接拿vuex的数据用v-model绑定即可,而在单击保存的时候我们调用我么之前封装的接口的请求,修改成功之后让他跳到自己的个人主页里首先我们先拿到 ...
美食杰(个人主页) 下
逻辑:先实现tab切换在个人主页router的组件中加入子组件,通过绑定单击事件,编程式导航的形式,来跳转不同的子组件中显示不同的内容,之后从api里拿接口封装接口请求,拿到数据通过父传子的形式把请求 ...
美食杰项目 -- 个人主页（四）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现个人主页的效果,和具体代码. 具体实现 ...
美食杰项目（五）个人主页
目录前言具体效果代码思路相应组件具体代码总结: 前言本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂具体效果作品和收藏的具体样式( ...
美食杰项目---个人页和他人主页
美食杰项目-个人页和他人主页跳转个人主页. 跳转他人主页. 点击他人关注或取消关注. 点击他人菜谱,粉丝及关注. 效果图展示点击跳转到个人空间,个人空间没有关注和取消关注. 点击个人跳转如下图: ...
美食杰项目 -- 编辑个人资料（六）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰编辑个人资料效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现编辑个人资料页的效果,和具体代码. ...
美食杰项目 -- 总结（八）
目录前言: 项目效果展示引入插件说明后台请求代码编写 package.json页面代码 main.js页面代码总结前言: 经过大概一周时间的兴勤劳作,美食杰项目的所有代码已经全部编写完成,功 ...
实现美食杰的一点点记录
vue中轮播图的实现通过element-ui设置轮播图的框架然后通过异步请求数据再接收数据最后在框架上遍历 script中的内容 mounted(){getBanner().then(({data ...
vue项目美食杰 -- 发布菜谱
不知不觉间,vue美食杰项目已经实现了很多了,我都有点始料未及呢,今天进行的部分呢,是项目中的发布菜谱功能,在这个页面中,我们会学习到前后端的交互,Element-ui的使用等等... 先看下效果图: ...

美食杰(个人主页) 上

美食杰(个人主页) 上相关推荐

最新文章

热门文章