Vue美食杰项目个人主页

时间: 2023-08-22 admin IT培训

Vue美食杰项目个人主页

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},
}