00:00
好的,我们继续啊,那上一节课呢,我们是去把这个排行榜,咱们的静态页面搭建完了。那这节课呢,我们去把里边的数据呢,给它写成动态的。对吧,那要成动态的,我们需要看一下我们的接口档3.3朋友如何去对调拿到的数据。OK,那么对应的接口地址呢,是这个啊,起行方式是get,然后呢,有一个B选的参数叫idx,就是index的缩写。那么这个ids是干嘛的呢?大家看一下啊,我们我写好这个项目里边,你看它分不同的种类的排行,你比如说哎热胳膊。什么啊原创包括什么飙升。对吧,那网易也许啊,网易云云音乐呢,针对于这个排行榜呢,它做了很多的分类,一共有多少种呢?一共有零到20也是21种。那最终如何去标识哪一种呢?就是通过IDX来决定的。
01:04
好,那这是这一个,那看完这个接口呢,我们去测一下这个接口啊,那现在呢,来到我们的浏览器里边这儿呢。来,来一个local host 3000把这个地址贴过来。那现在呢,我先用一个一啊走。用哪个都可以啊。那这个时候大家看啊。光是一的数据量就很大,大到什么地步呢?大到我的前端助手呢,都没有办法自动给它格式化,所以呢,我去全选一下啊,然后呢,打开我们的这个F1助手的格式化。把它接进来。来,让他去格式化一下。格式化一下,我们好看一点啊,那我给大家收起来啊,那这个数据量呢比较大,稍等一下。收起来以后啊,你看我们最终拿到数据,这样,那当前页面我们要显示的数据呢,是在这个play list这个对象里边,所以呢,我把它展开。好,展开了以后呢,里边同样有很多的数据,我需要先给大家收一下啊收一下。
02:07
那还有这个tracks,还有一个track ID,好的大家看啊,在这个please的这个对象里面呢,首先我们要用到一个字段呢,叫name。哎,云音乐热歌榜,那这个呢,对应的就是我们当前上面这个标题。光有标题不够,我们还需要一个关于歌曲数据的一个列表。对吧,那么这个列表数据呢,在哪?在上边这个track这个数组里面。那这个数组啊,大家看它的个体是200个。其实我们最终显示的,你看一共就几个歌曲啊,一共就三条。对吧,所以我们要对当前这个数组呢去截取,拿到它里面的前三条就好了。那这个数组我给大家展开一下,你看它里面都是对象。啊,一个对象呢,是一条数据啊,是一个歌曲的数据。
03:01
对吧,啊,你比如说下午再展开啊,那这个呢,就稍微有点慢了,这这个数据量有点大。把它呢展开啊,刚才那首歌叫它只是经过啊,那么这个对应的应该是我看第二个是这个云月热歌榜里面是他。OK,没有问题,那看完这呢,大家要分析一下啊云数据,因为它的数据量太大了。那我们很多数据我们用不了。那你就要想,我们当企业说,我们要拿到的最终数据应该长什么样,你得去设计。对吧,首先我们能想到的是啊,因为它的分类有好几个,而官方的分类呢,这显示了五个,所以我们最终呢,也针对于这个啊,我们去给他显示前五个就是零到四的分类。既然有五种,所以最终的数据应该是一个数组。数组里面的每一项应该是啥?
04:00
你想想看啊,就这一项数据。首先,我们是不是需要一个标题name字段?然后呢,我们还需要一个跟这个歌曲列表相关的字段,所以里边的每一项应该是对象。对象里面有一个跟标题相关的name,还有应该有一个tracks,只不过这个tracks我们不需要它的200个。我们整三个是不是就够了?哎,那外边是一个大的数组对不对。OK,那这是这个啊,那分析完以后呢,我们来到我们的GS。我们去动态拿一下这个数据。要拿之前呢,我们是不是应该先初始化一个top list啊,我就叫叫他了,那这个呢,是。什么呀啊叫排行榜数据。对吧,然后啊,我们继续在的下面呢,在这里啊,我们去获取。啊,我们的排行榜数据来let一个什么呀,Top list data。等于request。
05:03
对吧,啊,那这就多了个空格啊来,那对应的接口地址呢,我们拿过来就这个呗。就是它,哎,我给他放过来,那这个时候你要注意啊,这个参数我们还是以对象的形式啊,还是以对象的形式来放到这,那问号去掉1IDX对应的这哎为冒号,这个时候你要注意啊,这现在我是不是写死了。现在我们写个一不够,我们说了我们要取前五个,那这个idx的取值范围应该是零到四。而且你针对不同的参数,你每发一次请求,是不是要拿不同的数据?所以我们能想到的是,我们要发几次请求,一共发五次。对吧,而且每次的ids的值应该不一样。哎,那针对于这个情况,我怎么去设计呢?啊,我先给大家说一下这个需求啊。
06:05
那那需求分析啊,现在呢,第一个我们需要根据什么,根据这个idx的值啊获取啊对应的数据,那第二点这个IDX的取值,那范围啊,它呢是零到多少呢?20对吧,我们啊需要多少啊零到四倍。就这个。啊,所以呢,我们需要发送几次请求啊,发送五次请求。没问题。好,那接下来如何去设计呢?我这样去写啊,Let index。嗯,然后呢,我给它一个初始值啊,等于零,那这个呢,就是去标识我们IDX的值。因为要发五次请求啊,那这哥们不能一直是一,它对吧,它应该是累加,每发一次去累加一,一直到四,所以呢,大家看我这样去写Y循环,哎,那这儿呢,应该条件是啊IDF。
07:06
对吧,小于多少,你比如说小于五,然后在这个里边,最起码我们能想到的是index要干嘛加加。对吧,那这个循环肯定是有效的,那这个一代加加的值不就是我们想象的吗。啊,大家看啊,我这这样写,我把这个拿过来。然后那这里边index的取值不就应该是它。对吧,来注意啊,我现在用的是后加加,那在这里呢,我需要啊问大家一个问题啊,那就是啊我们说这个呃,前加加对吧?啊它呢和啊后加加的区别。你们是如何去记的?啊,我是这样去记的,很简单嘛,你看你啊,先看到的是是什么啊,是运算符还是值对吧?啊,如果先看到的哎,是用算符就先用算,然后呢再赋值。
08:11
嗯,如果哎,我们先看到的是值啊,那么就干嘛,哎,先赋值再运算。OK,那现在大家看啊,我这为什么要要用后加加,那后加加的话,先看到的是值,所以第一把进来它的值应该就是零。然后加加一用酸,那是不是在原有基础上给他累加一啊,而且这个时候如果说我要取零到四的话,你这还不能用氢加价。用钱加加的话,那第一次是不是就为一了呀。哎,不行,好的,那这是这一个啊,那现在呢,我们请求发了以后。注意,这个是官方提供的那个数据量特别大的对象,我们是不是要整合一个自己的对象?
09:03
对吧,所以呢,这我来一个top list item,它呢应该等于个对象,那么这个对象里面的字段有个name。这个name就应该在这个大的对象里面去取啊,这个对象长什么样,刚才我们看了。就这个大的对象呗,首先咱是不是要找到这个play。对吧,我们要找到啊,我先把这个起来。找到它以后呢,再去找它下边哪个字段叫name,那这那反而好写了,这应该please下边的name。对吧,那我们还应该有一个叫,叫什么叫tracks。速度呗,那这个呢,也应该从他身上的play list去学。对吧,哎,取谁呢?取的就是这个T数组里面的前三项呗。那那这个时候数原数组有了,我们要取前三项啊,那现在呢,我们应该用什么方法。
10:06
啊,在这呢,嗯,就要说了啊,大家要对数组的方法要很熟悉。要从数组里面往出结的话。呃,首先大家能要能想到哪些呢?比如说我们的spli对吧,还有什么slice。用哪个呀。那你要注意啊,它呢是会这个会干嘛会修改我们的元数组对不对。修改元数组,那这个呢,是可以对指定的数组啊进行什么啊,真删改都可以啊都可以。但是就是会修改元素组,那这个呢,它呢是干嘛不会。啊,修改元数组对吧,那现在你要注意啊,我们拿到一个数据要对它去截取,你最好不要动元数组,那万一这个数据你之后还要用呢。
11:01
所以在这呢,我选择用啊slice截取呗,从哪开始写第一位截几个,截三个呗。解,三个的话,那下边是不是到三就OK了,它最终结的就是012倍。哎,那它的特点呢,是包含起始的位置,不包含结束的位置,对不对。OK,那这个对象有了。那最终他们发一次请求,拿到的对象是不是最终应该被一个数组管理啊,所以啊,大家看我在外面呢,在初始化一个result和re吧,等于空数组。哎,那么接下来呢,你每收集一个对象,我就把它呢放到这个数组里面。对吧,啊,把这个top list item,哎,这应该是item丢进去,那这样的话你循环结束了,那我这个数组里面是不是就有五个对象。然后啊,我在它的循环体外面呢,我去更新什么,更新这个top list的状态值,嗯,this.set data。
12:10
我们要更新的是谁?是这个top?对了吧,哎,要更新呢,数据呢,那不就是它吗。来,那这个时候呢,咱来看一下,来到咱的项目。来到APP data。大家看有对吧,而且我们确认一下我们收集的对不对啊,Names的还有tracks ls为三。热胳膊,新胳膊没有问题。对吧,那数据有了啊,那接下来呢,我们去给他动态的显示出来。那这个时候呢,外item留一个是不是就够了,同时里边的这个music item留一个也够了,因为它最终都是循环便利的呗。来,首先我们便利生成多个waem,那这呢应该是top of list对吧?啊,微信K,那我们去找一个唯一值。
13:07
那现在啊,我们的唯一值找啥呀,其实找这个就够。Name本身就是不同的分类啊,所以呢,我们可以用它。对吧,因为不同的分类,它这个标题不一样嘛,所以相当于这个唯一的字符串啊,那这个时候呢,我们可以把这个name丢过来。紧接着啊,那这个东西你应该会改了I点。对吧,然后啊,那这个东西我们是不是又要循环便利生成了三个呀,所以这应该是微信啊微信号。我们要便利的是HM点儿。什么呀,哎,刚才收集那个速度叫。对吧,对应的微信K,哎,找找看。啊,这个T里面我们看一下有没有什么遗址,来我给大家展开啊。呃,有什么有ID。对了吧,啊,所以呢,在这里我们放一个ID址。
14:01
那对应里面的东西呢?画一画。哎,那这个时候一换,你要注意啊,如果说我们什么不管的话,那这是不是还得用HM呀,因为默认的个体就叫HM,但是不太好,你想外边已经有了。那这个时候我们可以通过什么呀,我们的微信啊,我们之前有个放杠H对不对。啊,我们,诶叫H吗?嗯,是他吧,我们可以指定一下,那这样呢,我们介绍它music。I back。嗯,因为这个呢,上面啊,我们之前在哪在。嗯,我想想啊,咱们刚才是不是用到了。这是不是可以指定这个个体。OK,那这是这个啊,那现在呢,来,那这应该是那个歌曲的。什么呀,地址我们找找看。呃,在这呢,点O下面的picture URL。我直接就写了,我们不浪费时间去找这个,那这个排序呢,它从一开始啊,所以这我可以这样index加in。
15:08
啊,最后一个歌名来music item点。歌名应该是上边就叫内啊,所以呢,这写个他们。来,那这个时候啊,来到咱的项目,我们看一眼。看能不能出来啊,往上翻。出来是出来了,没有问题,那这个时候大家看看,这其实有点小bug。啊,为什么呢?因为这个歌曲名太长了,它是不是换和换上了。换行换下来了,所以啊,我们要去干嘛,要去设置一下这个歌曲名。那要去设置一下它。没有问题,这不是挤压了吗?相当于那这个时候来找到我们这个钥匙。要是那个歌曲。
16:01
Music,那这儿呢,我们应该是去给他设一个max,给他来一个最大的宽度呗。啊,比如说呢,我们来个400RPS,如果超出的部分呢,我们可以干嘛呢。Right phases。对吧,No rap啊,这其实就是单行文本溢出嘛,我们来个overflow hidden,然后text overflow。我们给它来个隐藏一下,对了,不来,那这个时候我们看一眼。哎,大家看啊,正好这是空白,然后突然一下数据都出来了,先说这个问题是不是解决了。没有问题。好的。OK,把这个问题解决了以后啊,刚才突然一下。这之前是白屏,突然一下全部出来了。那其实如果说用户的网特别差的话,你会发现用户长时间看到这是白屏。那这是为什么?想想看。
17:05
啊,刚才你看我们这儿写的逻辑啊,我们在慢循环里面呢,发五次请求。只有五次请求全部结束,我们是不是才去更新这个数组?那只有数组有值了,页面才能显示,所以我们现在这种写法呢,会导致五个请求发送的过程中,页面它就是白屏,这样做用户的体验比较差。也就是说呢,我们放在这个,呃,此处更新的话啊,放在此处更新啊,会导致什么,会导致这个发送请求的过程中啊,页面啊长时间白屏。对吧,啊,那这样的话呢,那就是用户体验差呗。如何让用户体验好一点呢?
18:01
大家看,我把这个放到这里面,循环体里面。放到这儿可行。发到这更新的好处,我们一起来琢磨一下啊。首先万循环进来发请求。发请求拿到数据,拿到数据我更新到这个数组,进而去更新到贝塔,那是不是就显示到页面了?说白了,我这发一次请求,拿一次数据,然后我就渲染到页面上。这做的好处是不需要干嘛呢啊,等待五次请求啊,全部结束。才更新。对吧,啊,那这样的用户体验呢,较好啊,用户体验较好,但是呢这呢渲染的次数会多一些。哎,那就看你的取舍嘛,用户体验好一点呢,还是说我费点劲呢,多去渲染一下。啊,这里呢,建议大家啊放到里面,要不然你长时间白屏的话不太好。
19:02
啊,那这个时候呢,我去把这个改了一下啊,放到这里啊。肯定要比刚才好一些。哎,那这个呢,如果说网差的话,你的体验会更强烈一点。哎,会更强烈一点。好的,那在这儿呢,就是大家要注意啊,我们不光要考虑如何去实现,那还要考虑我们的用户体验,以及我们的项目性能。OK,那这是这个啊,这是这个,那这节课呢,我们先讲到这里。
我来说两句