00:00
好的,我们继续啊,那上一节课呢,我们是去把这个,哎,热搜网的静态页面我们也搭完了,那这一节课呢,我们去把它里边的动态数据呢,哎,展示一下,好的,那首先呢,我们先去做这个搜索框,这个please holder的呃,数据动态展示啊,大家看一下啊,其实这呢,现在显示的数据呢,它是一个动态的数据啊,是个动态的数据啊,那对应的呢,我们需要去访问我们的接口文档去看一下来,我们来到第11个接口啊,默认搜索关键字的接口,那么对应的地址呢,是这一个请求方法get啊,也不需要什么参数,所以呢,我们直接通过我们的浏览器啊,去访问一下对应的啊local host的3000,然后呢,访问一下这个地址啊,那在这个拿到的对象里边有个data。Data里边呢,有个叫show keyword,那么对应的这个呢,其实就是我们默认显示的那个please hold的文字,那对应的接口呢,测试了没问题以后呢,来我们来到我们的GS里边啊。
01:03
嗯,过来。到咱的页面下边search,找到我们的GS。好的,那么GS这一块呢,我们可以先初始化一个对吧?啊,我们来一个啊,我们来个please holder吧,嗯,Content啊搜索内容默认为空串啊,默认为空串,嗯,那这个呢啊,我们就叫它啊,它呢是please hold的什么呀?啊,默认内容啊,Please hold的内容吧,嗯,没问题,那默认值有了以后呢,我们要发起求拿一下这个动态的数据啊,所以呢,还是要把这个呢拎过来啊,在上一集U下边的request。那request有了以后啊,我们要去发请求了,对不对,呃,发起就拿这个数据呢,我们可以这分装一个方法啊,那这个呢,是获取这个初始化的初始化的数据,嗯,初始化啊的数据啊,来叫一个啊get in it吧。
02:04
嗯,In the data,好的,那对应的方法啊有了,那在这里边呢,我let一个这个please hold啊吧。嗯,等于什么呢?啊,Request对吧,对应的地址呢啊,我们去粘过来。使它。来我们把这个丢进来,那以后呢,这哎老套路啊,Think对应的方法呢,我们在这呢去调用一下,那这个呢,是就是获取这个初始化数据,嗯,来Z点它,它一调用是不是就可以了,那么拿到这个数据以后呢,我们要去更新我们data塔中的数据啊,所以呢,这this.set一个data,嗯,在这里边呢,我们要更新的是这个,呃,Please holder,呃,这个什么呀,叫content对吧?那这个对应的数据我们应该是要干嘛来看这点data里边的show keyword对吧?啊所以呢,我们这儿呢,应该是用这个呃,Data点嗯,Data点收keyword就是最终的数据呗。
03:12
那么这样的话呢,动态的数据有了以后呢,来到我们的页面啊,找到我们的头部,在这个里边,Please holder这的内容我们应该有一个变量去给它显示出来,然后啊,来到我们的页面,大家看这就是一个动态的数据了,没有问题,好的,那这是这个,那么呃,头部这个啊也是搜索框这啊我们做成动态的,那下面的热搜榜我们也也给它啊来成动态的啊啊对应的这个热搜榜的接口呢啊在这一侧,在这一侧。啊,对应的是这个地址啊,也是不需要参数,方法是get来直接去测一下它的接口啊,丢过来走热搜榜的数据。在这个data塔中啊,是一个数组,默认的有20个个体,那么每一个个体呢,对应的是一个对象啊,这不是有什么偏啊,对应的还有iqone呢啊URL啊URL好的,那这个时候啊,接口测试没问题了,以后呢,我们因为上来要显示啊,所以呢,我们发起求的动作呢,还是放到这这个初始化的数据里面。
04:22
那发请求之前呢,我们可以先去初始化一个hot list啊,它是一个数组,那这个呢,是啊,我们呃,热搜榜数据呗,嗯,接着啊,来let hot of list in个等于啊request对应的地址往前一丢啊就好了。那么拿到的数据。有了以后我们去更新一下这个hot list,哎,从它里边我们要找谁呀,找这个data是不是就可以了,好的,把这个呢,我们也丢过来。来来到我们的项目里边啊,打开我们的调试器APP data中我们确认一下啊,Hot list有数据对不对啊,这有个报错是什么。
05:08
呃,期望是一个冲肯啊,那这个呢,应该是没有编译出来啊,之前呢啊,我没有写完的时候,他报的错啊,来我们再刷新它就好了。AB内塔中大家看啊,Hot list数组是不是有,那接下来这个便利啊,对于咱来说已经是小儿科了,过来。啊,对应的个体呢,我们留一个就够了啊,所以下面这些呢,我们就都删掉了,嗯,现在啊,有一个hot item,我们通过微信啊for循环去循环便利一下这个hot list呗,那对应的微信K我们是不是要设一个唯一值啊,找找看啊,它里面每一个对象中有没有什么是唯一值。啊,什么搜索的关键字呀,对吧,啊这个关注的量呀,内容呀,Source呀,这其实这些感觉都不应该是。
06:03
唯一值。啊,其实有一个啊,我们可以认为是唯一值search word,那你想每一首这个搜的这个关键字呢,它肯定是不一样的啊列表里边,所以呢,我们可以把这个作为我们的,哎,K,那这个时候呢,只不过啊大家看哎,我们刷新一下。嗯,出来了。啊,没有问题啊,这也没有提示啊,那其实之前的话,如果说把那个search key作为K的啊对应的值的话,这会有个提示啊,说看上去不像一个唯一值,那现在呢,没有问题啊,那更好啊,那我们可以直接去用了,好的,那现在呢,我们把里面的东西呢,搞搞动态的啊,首先这个序号从一开始对吧,我们可以这样去做,那就是index加一。对吧,用它的下标加一嘛,因为它下标默认是不是从零开始呀,没有问题,而下边这的内容。
07:00
换掉,嗯,那这个呢,应该是I点什么呀,我们看一眼。啊,就是这个search word呗,丢进来再编译一次,我们再看,嗯,那这样的话呢,这是不是就是动态的了呀。好的啊,那这是这一个,那么除了这个啊,除了这个大家看我写好这个里面有一些这个heart,或者说是这个向上的图标,还有什么new。啊,还有什么六,那这些东西是哪来的呢?看着在我们的数据里边,它有的对象中有这个IQURL,有的呢,IQURL为now。对吧,啊,那其实呢,我们就是显示的是这个。图标呗,那么这个图标的话呢,来首先啊,我在我的这个结构中呢,我们加一个图片,嗯,它是一个图片的地址,来一个src。那对应的呢,应该就是什么呀,就是这个im.iq啊URL,如果说大家想写的好一点的话呢,我们可以这样去做。
08:07
嗯,可以这样去做,那这个图片什么时候显示呀。你注意啊,它一定是IQURL是不是有值呀,但是IQURL有时候是不是now呀,啊所以啊在这呢,我们可以这样去做来啊微信if对吧,做一个判断,嗯,如果说它为处我们再加载。啊,再加整就好了,好了,那这样的话呢,哎,我们可以去写一下这个对应的啊这个。图片的内容你看啊,这些东西进来这太大了,那肯定不行啊,所以呢,我们可以给这个图片,这呢来一个class呗,就叫它一个IQ image。好的,那这个时候呢,我们来到我们对应的样式这啊,我们继续往下写一写,嗯,是它呗,啊,保险起见啊,我们用它来往出理一下。
09:01
对吧,那这个呢啊,我直接就写了,宽的话呢,我设一个35RPS啊,高的话呢,我们来一个20啊同时呢,我们跟左边留点距离啊啊我们来个work left啊,比如说来十个像素的外边距,我们再看一眼效果。嗯,大家看就进来了啊,那该有的就有了啊,该有的就有了,嗯,没有问题好了,那这样的话呢,哎,热搜榜的数据我们也动态的显示出来了,那其实这里呢,主要是用到了两个接口对吧?好的,那这节课呢,我们先讲到这里。
我来说两句