00:00
大家好,在首页的页面完成之后,那么我们来请求首页的API,把这个数据啊,切换成从API获取的这个数据,那首先我们来看一下首页的API是这个API,那找到我们的代码,那我们的API是在啊common的这个里面统一管理的。好,这里呢,我们已经定义了首页的这个API,好,所以呢,我们直接调用这个方法就可以获取到首页的数据,找到我们的首页的这个GS,那我们在这个script里面,在他这个生命周期里面,我们先请求一下这个API,看一下这个数据能不能拿到this.do u.API那我们的统一啊管理的这个API呢,都是在这个API上面挂载的啊,所以这里面我们有一个index啊,可以获取到所谓的数据啊,它的返回结果是一个promise,所以我们可以在这里面拿到这个数据。那关于它的这个异常情况,我们在这个拦截器里面啊,已经做了统一的处理,所以呢,我们再请求API的时候呢,就不用再去做单独的一个处理,那我们来打一下re。
01:04
Log。来看一下这里就拿到了这个数据对吧,好。那拿到这个数据以后,哎,我们要把这个数据啊,给它定义到date中,然后在模板中去使用就可以了,好,那接下来我们来定义,首先这个手链它返回的是三个数据啊,有个分分类,分类呢。啊,我们暂时用不着啊,那主要用到的是这个商品和这个。啊,轮播图啊,所以呢,我们定义这两个啊,一个是Li,默认呢是一个空数组,就暂时没有数据,呃,再往后是一个啊商品故也是一个空数组,那我们在拿到这个数据之后,就可以对这个sli和这个故S进行一个设置啊,那我们拿到数据是在这个RS里面拿到的,所以我们在这里面进行设置啊this.sli等于re点啊Li啊,This点故等于re点。
02:07
好,那这样的话,哎,这个呃,数据就有了,我们就可以去循环这个数据,我现在循环一下这个云波图啊。呃,我们来看一下啊,这个轮播图呢,他要的是啊这样的一个形式就是啊,里面是直接有图片啊,有图片的这个地址。但是我们API返回的数据啊,大家来看一下它里面啊是一个对象,对象里面呢,有这个呃名字,然后呃有这个图片的地址是这个1GR,那所以呢,大家是不是就想到了我们对这个数组进行啊啊再次的一个处理啊,处理成这样的形式,对吧?其实啊没有必要,那我们来看一下啊S它这个组件啊来往下找一找。在这个位置。你直接搜索吧,好weper,而且上面那个呃,它应该有属性是支持这种形式的啊,所以大家在用一个组件的时候,应该看一看它的这个属性啊呃。
03:07
来这里我们看一看啊,基本的一个使用。啊,这里说了啊,如果我们从服务端获取数据,它的这个数组的这个属性啊,不一定是这个啊image啊,所以呢啊还要去修改,但这是不是很不人性化啊,所以呢,提供了一个内部属性,可以指定我们对象里面的某个字段,所以我们加上这个属性,可以那么往下看。他的这个例子啊。好。往下找。它的这个API,我们找到它的这个内幕属性。啊,Name可以就是让组件读取内部历子这种参数中的一个属性名啊,上面也说明,那我们把这个name给配置一下就可以了。哎,这里呢,我们给他一个内部属性name,我们用谁用这个,呃,Image_ul就是我们刚才看的API的这里面的这个字段,那这个是图片的文件名,这个我们不需要,我们要完整的图片的这个啊UR才能去显示这个图片,那我们这个,呃,他要的这个数组呢,肯定也不是用它了,那这个我们就不用了,就删掉了,之前是页面遗留的,对吧,那用这个。
04:17
哎,把它改成sli好保存,我们先看一下效果好,轮播图是不是就有了。但是我们发现一个问题啊,这个图片的这个高度我们也是有问题的啊,那通过检查元素,我们发现这个图片它的这个高度是啊,3752125啊,也就说是250RPX,那我们来看一看它的属性,就是这个组件属性,它有一个啊head,它的是组件高度啊,就轮播组组件高度,它的默认就是250,也就是说这里是用的这个默认值,所以明显是不符合我们的需求的,我们要根据实际的图片的高度来去修改一下这个值,我们先把这个属性给加上,然后去看一下啊图,图片的一个高度,图片的一个高度。嗯,这里呢,我就直接写吧,大概就是300啊,300多点,300多啊,实际上的话,你应该根据是图片的这个比例进行换算啊,它的一个宽高比进换算。
05:07
好,那轮播图我们处理完了,接下来呢,处理一下这个商品,商品我们只需要啊,在这里循环的时候呢,去循环这个商品就可以了。那这里我们改成。用item in裤子好那名字我们来看一下这个商品的属性啊,里面有。都有什么,看一下找到这个柱子。啊,你可以在这里面看啊,如果这个呃,这个属性的话,你不清楚的话呢,可以去文档里面看啊,注意这个商品它里面啊,最外层是有一些分页相关的数据,然后数据真正数据是在data里面,Data里面。啊,比如说呃,我们这边不能循环这个字啊,应该是。这里不能直接给这个故字,应该是故字点贝塔贝塔,所以这里我们少给了一层,少给了一层好。这里呢,继续循环估置就可以了,那它里面的属性呢,如果你不太清楚啊,你不太清楚可以去看这个文档,文档里面说的非常清楚啊,说的非常清楚,比如商滚商品相关的这个,哎,这个说明都有,那我们就看着这个来,嗯,首先显示标题是这个开头对吧。
06:16
那这里我们就换成艾特多了一个。It店。那同样的这个价格呢,item.l。然后是它的这个销量啊,Item这样,因为我都知道,我就直接写了,还有就是商品的这个图片。来图片我们就不用这个默认的啊,那因为我们要在这个组件的里面去写这个属性,它的这个语法呢,是view的语法,所以诶这里呢,我们要加上这个啊冒号,然后这里面就不要加,不要加这个双方括号了啊,这是唯有的一个view基本语法,然后这里面我们就直接写item点啊cover等于L。
07:02
啊,商品的一个主图好保存,我们再来看看效果。哎,这样的话,我们的商品的图也有了,对吧。但是我们看到这个名字啊,它没有哦,就说超长了对吧,就原子长品显示完就换行,换行导致这个card就比较高,哎,所以呢,我们可以呃给这个名字啊,给它加一个诶超过一就超出一行的话,显示这个省略号的一个样式,那在那个呃U为的后里面那个样式里面也有的。我们来看一下,就是这个U来杠一,那我们给它加一下,找到商品的名字这里啊,我们给它加一个U杠来杠一啊,这时候咱俩保存看一看好。它的就会出现这个视频号对吧,那整个高度就是对齐的。好把这个给取消掉,那商品呢,我们就。基本写完了啊,那我们做一个简单的一个优化啊,就之前给大家讲这个API的时候说过啊,我们尽可能的不去使用这种回调啊,这种回调函数的形式,因为如果你的这个需求啊,你的业务比较复杂的话,你会一直嵌套的话,就比较麻烦,尽可能的推荐大家使用这个ES7的这个,呃,Think和awake对吧。
08:08
也就是说我们把这个异步的这种啊方式变成同步的方式来写,就是你要在这个函数啊前面去写一个这个think,因为A必须得写在这个啊异步的一个函数中,我们来改造一下啊。哎,我们可以呃定一个啊常量啊,就是is我们请求到的这个数据,那它的这个结果呢,就是诶到这里就可以了,对吧?那这个is是我们和我们在这里面拿的is一样,都是服务器访服务器访问的数据,对不对?诶,那这里呢,我们要给一个这个啊外诶这样的话,它就会变成一个同步的请求,当我们拿到数据之后,再对这个数据进行设置就可以了,那这个我们就不写了,好,这样话我们可以把异步变成同步的方式来写,哎,注意这个A它一定要写在这个异单一函函数中啊,写在think中,那我们来保存看看效果。是不是像我一样的,对不对。好,那这节课呢,我们就把这个所谓的这个数据啊,轮播图啊,以及商品的数据给填充完了。
09:05
好,那这小节先到这里。
我来说两句