美食杰(个人主页) 下

逻辑:先实现tab切换在个人主页router的组件中加入子组件,通过绑定单击事件,编程式导航的形式,来跳转不同的子组件中显示不同的内容,之后从api里拿接口封装接口请求,拿到数据通过父传子的形式把请求的数据传给子组价

布局的话就使用element-ui组件的布局,这里注意使用的是element-ui组件绑定单击事件的时候,用@tab-cilck="事件()"

<el-tabs class="user-nav" v-model="activeName" @tab-click="myclick()"><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>

在data设置activeName:"works",初始值设为works,利用v-model="activeName",点击不同的tab来改变activeName中的值,值为tab中的name属性,之后绑定事件利用编程式导航实现router跳转

myclick(){this.$router.push({  //编程式导航,跳到不同的子组件中name:this.activeName, query:{...this.$route.query}})}

问题:为什么要在写编程式导航是要传query参数? 因为当我们访问别人的个人主页的时候首先都知道是需要userId值的,当我们在别人的个人主页,tab切换是会把之前的userId给覆盖,会直接跳到我自己的个人主页,所以要传query参数目的是为了你访问别人的个人主页,tab切换数就算把之前的userId的参数给覆盖,但我们又通过query传了userId值,就可以在别人的个人主页,实现tab切换啦!

/*** 拿到用户发布的菜谱，可做筛使用选* @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});
}/*** 获取指定用户的粉丝* @export* @param {Object} [params] - * @param {string} [params.userId] - 指定的用户id* @returns*/
export async function fans(params){return await http.get('/user/fans', {params});
}/*** 获取指定用户关注的人* @export* @param {Object} [params] - * @param {string} [params.userId] - 指定的用户id* @returns*/
export async function following(params){return await http.get('/user/following', {params});
}/*** 获取指定用户的收藏的菜单* @export* @param {Object} [params] - * @param {string} [params.userId] - 指定的用户id* @returns*/
export async function collection(params){return await http.get('/user/collection', {params});
}

拿到我们数据的接口引入到个人主页的组件中,因为接口较多,所以我们可以吧接口进行封装

import {getMenus, following, fans, collection} from '@/service/api';const getOtherInfo ={async works(params){return (await getMenus(params)).data},async following(params){return (await following(params)).data},async fans(params){return (await fans(params)).data},async collection(params){return (await collection(params)).data}
}

有两种方式请求数据tab切换中不同的数据一.自定义一个事件,在事件中进行请求数据,之后在之前watch监听$route中直接调用先这个事件二.直接之前watch监听$route中,进行数据请求---具体代码如下:

 async getinfo(){  //自定义事件//调用不同接口let data=await getOtherInfo[this.activeName]({userId:this.userInfo.userId})//  问题2:切换tab过快时,依然报错key重复,并且数据显示不正常//  原因:因为ajax返回数据的时候 快慢的问题,显示的是最后一次ajax返回的数据,无法识别对应的请求//  解决:在请求中定义一个标识,在返回的数据中添加标识,如果返回的数据和当前的标识相同,再渲染// console.log(data)if(this.activeName === data.flag){this.list=data.list}}this.getinfo()  //调用自定义事件 在监听路由中调用

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}this.activeName=this.$route.name;// 还有一种方式:直接在这里调用封装的接口数据,来获取数据let data=await getOtherInfo[this.activeName]({userId:this.userInfo.userId})console.log(data)this.list=data.list},immediate:true //页面初始化立即执行}},

之后数据就请求出来了,在data设置list的一个空数组来接收数据,之后通过绑定自定义属性名值为我们请求的数据list,在子组件中通过props来接收(父传子) ,在各自的子组件中渲染数据即可,也把activeName也通过(父传子的方式) 传到子组件中(后说原因) -----------这里啰嗦一句:(父传子),在子组件中props中接收的格式有两种 1.props:['list'] 2.props:{type:'指定类型',default:'默认值' }

<router-view :info="list" :activeName="activeName"></router-view>

之后判断如果请求的数据有值得话直接渲染,没数据就提示如图:

这个是没数据的时候的提示,有数据的渲染页面即可 !!! --------- 这是就要进行判断通过(父传子)的数据在提示的标签中用v-if来判断传过来的值是否有长度,也就是判断是否有数据 v-if="!info.length" 判断他如果没有数据就显示提示标签,我们的作品页和收藏页是同一个页面,我们之前把activeName传过来过,在不同的标签中也用v-if判断代码如下:

<div class="info-empty" v-if="!info.length"><div v-if="activeName==='works'"><p>私房菜不要偷偷享用哦~~制作成菜谱与大家分享吧！</p><a href="">发布菜单</a></div></div><div class="info-empty" v-if="!info.length"><div v-if="activeName==='collection'"><p>还没有收藏任何的菜谱，去搜自己喜欢的菜谱，收藏起来吧。</p><a href="">菜谱大全</a></div></div>

之后就完成了,不过有bug!!! 当我们tab切换的时候会提示我们一个这样的报错 vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '5d613120ac558b4d879824ba'. This may cause an update error. -->意思是检测到重复的键,可能导致更新错误 -----> 解决方法:我们发现我们进去的时候是不会报这样的错误的,当我们在tab切换的时候,才会报错,所以我们在他每次拿到数据渲染保存玩之后,把list里的数据清空

   //点击切换tabmyclick(){//问题1：因为各个二级路由接收的字段，全是info，所有会造成数据重复//解决：第一次保存数据到数据中时，没有问题，所以，每次保存前，都清空一下数组this.list=[]this.$router.push({  //编程式导航,跳到不同的子组件中name:this.activeName, query:{...this.$route.query}})}

之后还有一个bug!,就是当我们过度使用tab切换时,还会报上面同样的错误,解决办法

async getinfo(){  //自定义事件//调用不同接口let data=await getOtherInfo[this.activeName]({userId:this.userInfo.userId})//  问题2:切换tab过快时,依然报错key重复,并且数据显示不正常//  原因:因为ajax返回数据的时候 快慢的问题,显示的是最后一次ajax返回的数据,无法识别对应的请求//  解决:在请求中定义一个标识,在返回的数据中添加标识,如果返回的数据和当前的标识相同,再渲染// console.log(data)if(this.activeName === data.flag){this.list=data.list}},给每次请求的接口数据,设置一个标识,当他等于这个标签才会拿到数据,这样就不会出现重复的键的错误啦!
const getOtherInfo ={async works(params){let data=(await getMenus(params)).datadata.flag="works"return data},async following(params){let data=(await following(params)).datadata.flag="following"return data},async fans(params){let data=(await fans(params)).datadata.flag="fans"return data},async collection(params){let data=(await collection(params)).datadata.flag="collection"return data}
}

这里在啰嗦一句:在函数作用域中var是局部变量,函数销毁var也会更这销毁,var除了在函数中声明是局部的,在其他的地方声明的都是全局的,因为var可以跨块访问!

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

美食杰(个人主页编辑资料)
逻辑:在保存的时候设置一个单击事件,上面没修改之前直接拿vuex的数据用v-model绑定即可,而在单击保存的时候我们调用我么之前封装的接口的请求,修改成功之后让他跳到自己的个人主页里首先我们先拿到 ...
美食杰(个人主页) 上
逻辑:登录自己的个人主页直接跳转,登录别人的个人主页要id值登录自己的个人主页,自己的个人主页不需要userId值,直接通过router-link跳到个人主页的页面,数据直接拿vuex的数据,原因是 ...
美食杰项目 -- 个人主页（四）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现个人主页的效果,和具体代码. 具体实现 ...
美食杰项目（五）个人主页
目录前言具体效果代码思路相应组件具体代码总结: 前言本节给大家讲的是美食杰项目的个人主页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂具体效果作品和收藏的具体样式( ...
美食杰-发布菜单（完整版）
一,效果展示二,效果概要 1.获取数据 2.数据渲染 3.赋值数据 4.点击提交审核三,技术掌握 1.熟悉element组件库 2.掌握vue-cli脚手架 3.掌握vue-router路由 4. ...
实现美食杰的一点点记录
vue中轮播图的实现通过element-ui设置轮播图的框架然后通过异步请求数据再接收数据最后在框架上遍历 script中的内容 mounted(){getBanner().then(({data ...
vue项目美食杰 -- 发布菜谱
不知不觉间,vue美食杰项目已经实现了很多了,我都有点始料未及呢,今天进行的部分呢,是项目中的发布菜谱功能,在这个页面中,我们会学习到前后端的交互,Element-ui的使用等等... 先看下效果图: ...
vue——超详细的美食杰项目—菜谱大全
vue--超详细的美食杰项目-菜谱大全效果介绍 1.家常菜谱Tab切换: 2.筛选: 效果介绍下面我们实现的效果就是图一中的.点击'家常菜谱'下的其中一项时背景颜色改变并向路由中显示参数.在点击' ...
vue项目美食杰菜谱大全实现（二）
接上篇,vue项目美食杰菜谱大全实现效果图分析: 整体分为三大部分 1.先实现菜谱分类头部实现 (1)先实现家常菜谱中华菜系和各地小吃的实现,通过后端获取到数据,渲染页面(2)再实现第一部中的每一 ...

美食杰(个人主页) 下

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

最新文章

热门文章