Vue美食杰项目个人主页

条件：

登录自己的个人主页(可以不需要传入id)

登录他人的个人主页(需要传入id)

登录自己的个人空间时，只需要路由跳转到指定的个人空间的页面，数据拿vuex中的数据即可，因为之前在router的index里之前来判断token值是否合法就是请求了用户的信息数据,之后又通过vuex中的事件把数据传给了vuex的state

<router-link to="/space" class="user-name">{{userInfo.name}}</router-link>

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

<router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">作者:{{item.name}}
</router-link>

监听路由：

data(){isOwner:false,userInof:{}
},
watch:{$route:{//async handler(){//当前路由中结构赋值给idlet {userId} = this.$route.query;console.log(userId)this.isOwner = !userId || userId === this.$store.state.userInfo.userId;//如果为true，就把vuex的数据重新赋值给data的userInfoif(this.isOwner){this.userInfo = this.$store.state.userInfo;}else{//否则就是别人的空间//得请求api里的userinfo同步请求const data = await userInfo({userId})//请求到的数据通过传入参数userid值来跳入不同的别人主页this.userInfo = data.dataconsole.log(this.userInfo)}this.activeName= this.$route.name;this.getInfo()},// 深度监听,立即执行immediate:true}},

拿到数据渲染即可：

到这一步就可以判断

在自己的个人主页中出现"编辑个人资料"，不可以出现关注

在别人的个人主页中出现关注，不可以出现"编辑个人资料"

data中设置了一个isOwner：false的属性，又把this.isOwner赋值给没有userid参数，和点击自己作品是有userid值的，可以把userid值等于vuex数据中的userid了，所以这段代码确定了isOwner这个属性他是自己的个人主页

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

直接拿这个isOwner在个人主页的编辑个人资料的标签中加入v-if=”isOwner“,在关注的标签里页设置v-if=”!isOwner“,这里要取反，当isOwner等于true时显示”编辑个人资料“，取反则显示关注

关注和已关注api接口：

/*** 拿到用户发布的菜谱，可做筛使用选* @export* @param {Object} [params] - 不填写，则获取所有的菜谱* @param {string} [params.userId] - 指定用户的菜单* @param {string} [params.classify] - 按照菜单分类，进行筛选* @param {string} [params.property] - 指定菜单属性进行筛选* @param {string} [params.property.craft] - 按工艺筛选* @param {string} [params.property.flavor] - 按口味筛选* @param {string} [params.property.hard] - 按难度筛选* @param {string} [params.property.people] - 按人数筛选* @param {string} [params.page] - 指定页码* @returns*/
export async function getMenus(params){return await http.get('/menu/query', {params});
}

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

<div class="tools" v-if="!isOwner"><!-- follow-at  no-follow-at--><a href="javascript:;" class="follow-at":class="{'no-follow-at ' :userInfo.isFollowing}" @click="toggleFollowing">{{userInfo.isFollowing ? '已关注':'+关注'}}</a></div>

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

methods：{async toggleFollowing(){const {data} = await toggleFollowing({followUserId:this.userInfo.userId})this.userInfo = data},
}

Vue美食杰项目个人主页相关推荐

美食杰项目 -- 个人主页（四）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现个人主页的效果,和具体代码. 具体实现 ...
vue美食杰项目之菜谱大全实现效果（一）
目录 recipe.vue 注意:因为用到了element-ui组件,所以需要先安装element-ui组件,进入项目根目录后执行 npm i element-ui 思路: 1.找到对应的组件进行数 ...
vue 美食杰项目登录验证
登录验证是我们在进入页面中必须要进行的操作. 1.登录验证我们要先在路由中(router),设置一个路由守卫来判断你进入的页面需不需要进行登录, 然后在进行判断是否已经登录,在然后验证你的登录是否合法 ...
美食杰项目（五）个人主页
目录前言具体效果代码思路相应组件具体代码总结: 前言本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂具体效果作品和收藏的具体样式( ...
VUE——超详细的美食杰项目—菜谱详情
VUE--超详细的美食杰项目-菜谱详情效果介绍 detail.vue detail-header.vue detail-content.vue comment.vue 效果介绍实现页面数据渲染,还 ...
vue——超详细的美食杰项目—菜谱大全
vue--超详细的美食杰项目-菜谱大全效果介绍 1.家常菜谱Tab切换: 2.筛选: 效果介绍下面我们实现的效果就是图一中的.点击'家常菜谱'下的其中一项时背景颜色改变并向路由中显示参数.在点击' ...
美食杰项目---个人页和他人主页
美食杰项目-个人页和他人主页跳转个人主页. 跳转他人主页. 点击他人关注或取消关注. 点击他人菜谱,粉丝及关注. 效果图展示点击跳转到个人空间,个人空间没有关注和取消关注. 点击个人跳转如下图: ...
美食杰项目 -- 编辑个人资料（六）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰编辑个人资料效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现编辑个人资料页的效果,和具体代码. ...
美食杰项目 -- 总结（八）
目录前言: 项目效果展示引入插件说明后台请求代码编写 package.json页面代码 main.js页面代码总结前言: 经过大概一周时间的兴勤劳作,美食杰项目的所有代码已经全部编写完成,功 ...

Vue美食杰项目个人主页

Vue美食杰项目个人主页相关推荐

最新文章

热门文章