00:00
下面呢,我们通过一个搜索的一个小例子啊,来学习API点方法的使用。我们来搜索一下get up,那么关键字是javascript JS里面最受欢迎的哪些仓库?那么我们接下来完成一个小功能。首先呢,我们告诉大家,咱们的这个文档上哪找啊,我们去百度上搜k up API关键字啊,那么就可以搜到k up的文档,那么我们用的是他那个restful API的这个文档。好啊,拿到文档之后呢,我们接下来就要找啊,它的这个restful API的文档了,点击它。好,点击到API呢,那么在左边呢,就是它API风格的这些接口,我们找到搜索相关的往下走,下面呢,有一个叫search关键字啊,那么这里就是搜索相关的一些接口文档,我们找到search rebaries,那么这个呢就是搜索仓库。除了搜索仓库以外呢,可以搜索代码,搜索评论,搜索这个提问啊,Request等等,对吧,还有主题,还有user,那么我们搜索仓库。
01:03
好点进去之后呢,那么他就会告诉你,咱们的这个请求方式是get,这是请求地址啊,所有的请求地址呢,在发请求的时候都需要加那个什么hps,然后api.com啊这样的一个地址。然后呢,它这里就会写,就是它可以携带的请求参数。求参数的话呢,需要写在QQ呢,就是搜索的关键字啊,Q就是query对吧,你要搜索什么东西,那么我们在这里呢,要填写的是javascript,这样它就会搜JS相关的内容了。那么sort就是咱们搜索内容按照什么方式进行排序,它有按照点赞量对吧,按照folk和一些和这个更新的一个程度去这个排序啊,那么order呢,就是指的是排序是升序还是降序对吧?它默认是这样的一个从大到小的一个顺序啊,是个降序。然后以及每页多少条当前页码和每页条数这些选择。好,下面我们可以测试一下,因为它是一个get请求,所以我们可以直接在浏览器端这里测试啊。
02:06
来呃,我们先随便找一个地地址,找个地址呢,这里可以复制前缀啊,这个前缀我就不用写了,所有API这些风格的接口呢,它的前缀都是固定的,就是api.up com。然后呢,后面跟着我们要操作的内容是search rey,那么我们建议还是复制啊,别写错了。好,整个呢,就是re风格的这个API呢,它就具备非常好的语音化,前面是咱们整体的一个这个域名,那么后面这个表它要做的是是搜索,搜索搜索什么呢?搜索是咱们的这个仓库啊仓库,那么它这里写的是负数,也就代表我们可以搜索多个仓库,然后呢,GA get请求的话呢,需要写带的是查询字符串,查询字符串参数呢,通过问号连接K等于Y的形式去写啊。I于。然后呢,多个参数用N符连接,那么我们在排序,排序呢,我们选择是SARS,就是按照点三点排序,这样呢我们就会搜索啊,它默认的返回数据就长这个样子,Item就是它搜索到的数据一共有30条,那么总共数据是有137万多条。
03:14
啊,当然它不会能全部返回给你,所以说我们目前只能搜索到30条数据,点开这个it呢,那么这里就是一条条数据的啊,那么第一条永远是这个这个免费的一个代码训练营啊,第二个第二受欢迎的呢,是咱们的现在一个非常流行的框架,就是6GS框架啊,它现在呢,大量非常非常高了啊,排名第二了。然后呢,后面就是我们的前端的第二框架,对吧,RA框架也是非常受欢迎的一个前端框架,然后面呢,有不对吧,咱们的一个框架,还有你不知道JS,那么对于新手来讲呢,这本书呢,是非趁好的去提高你的JS能力的啊等等,它有很多很多内容。这我们就不一一看了啊。我们以这个文件为例呢,我们待会呢想便利展示,展示什么呢?展示它的这个图标,它这里呢,肯定会有个图标的,我们来看一下是哪个啊。
04:06
它有一个图标,我们来写,要展示它的这个仓库的一些内容。我们来看一下在哪里是不是。Owner呢,这里面有个al u,我们点击啊,那么这个就是它的一个logo,我们呢,想展示它的logo,想展示它的名字啊,名字就是那个log,然后呢,再展示点击的时候啊,能够跳转到这个网址去,那么这个网址的地址呢,就是HLUL,就这个地址点击啊我们来看它就会跳转到这个get up的S的这个仓库。好,所以呢,我们就想通过一种列表的形式啊,我们来展示咱们的这些数据,那么数据呢,我们发请求得到再去展示。OK,接下来我们一起来操作一下。我们呢,新建一个我们来到之前过去的这个DEMO仓库,在这下面呢,我们新建一个文件夹,是我们第五章的练习chapter five。好在这里面呢,我们写我们的这个代码。
05:05
来一。我们先来发请求,然后再来考虑数据展示啊,发请求的话呢,我肯定在API ready里面发,但是我们不着急啊,先把一些准备工作做一下。对吧,这样式呢,我们暂时待会再写好在API ready里面我们来发请求啊,API点。它的第一个是个对象,对象里面放请求的参数,请求的参数数据对吧。可些数据什么的都放在这,那么我们要指定什么呢?URL要指定,这是请求地址。请求地址就是。啊,我们复制一下啊,别写错了。OK,复制好了。我们把整体都复制一下吧。来啊,这前面这部分呢,这个地就是请求地址,好,接下来还要放请求参数,对吧,这是请求地址啊,我们写清楚。
06:00
我们还要放请求参数,这里就要说一下啊,Get请求它的参数就是位于地址栏后面,叫做查询字串,所以这里不单能写请求地址,还能放置get请求的查询注册参数。或者说直接写查询注册参数。我们也叫query stream嘛,那么后面这部分就是查询做饭直接放到地址栏中。所以这这个练习呢,大家也能知道啊,咱们将来只要是get参数呢,都可以直接在地址栏这里拼串就可以了。好,然后接下来再来啊,请求方式,Method。那么是get代表我是get请求,那么如果将来你要泛指什么请求头啊,就可以在heads里面写请求头,对吧?然后呢,还有就是将来你有POS请求的话呢,需要携带数据,可以在data里面携带。好,这里是请求头,当然我们目前还用不上啊。然后data呢,就是一些请求体参数。
07:01
当然目前我们用不上,我们因为是GA请求,所以写地址和方式就好了。好,接下来呢,我们还要继续来啊,不是光这样写就结束了,我们呢还要写一个回调函数。在回调函数里面呢,我们才能拿到我们想要的这个数据,回调函数呢,建议写成箭头函数,这样呢,它的this指向才会指向这个API ready,也就是当前组件时对象。里面呢有两个参数it,第二个参数是这个L。那么通常我们写的时候就是这样判断if it有值,说明请求成功了。对吧,我们可以API点咱们的这个。请求成功的这个数据。然后呢,L呢,说明请求失败了,那么我们就是这个失败的L失败的原因,哎,所以这样呢,我们去判断到底请求是成功还是请求是失败。好了,那么这样呢,我们就写好了咱们的这个基本练习啊,现在呢,我们只要打开我们的这个真机测试,那么我们就能看到我们这个基本效果。
08:10
来吧,我们来看一下手机有没有连上啊,我们请大家更新一下。OK。这时候我们还需要把这个代码忘记调了,要调成我们的CHAPTER5。然后呢一对吧,保存,然后再次更新一下啊。好,更新成功之后呢,我们就可以看一下咱们的这个效果。其实已经更新了,诶你看因为请求需要时间啊,所以说我们需要耐心等待,你看数据不就到位了吗?是不是好,但这样去整没任何意义啊,我们接下来要操作,要操作,我们要的是这个items里面的数据,所以是ret.it其他数据我们用不上啊,那么这个数据呢,我们更新过去。
09:02
更新过去,而且更新的时候注意啊,我们呢,只需要用上这个ID,便利的元素需要ID嘛,还有这个log以及ever URL和这个HLUL,这四个数据咱们需要,而剩下所有数据我们都用不上。但是用不上的话,如果你更新到data里面的这个数据量太大了,这样的内存也非常多,非常的不合适,所以我们这里呢,在最终啊去更新数据的时候,我们要对数据做一层处理啊,接下来来看。我们搜的是reports啊仓库,然后呢,在更新之前呢,我们这里就是更新数据啊,贝塔的report等于。Ret。点it,但是我不要所有数据,所以通过map我们去对数据做一层处理啊,我们要什么数据呢?我们要的是ID等于item点。Owner。点ID,然后呢,接接着再来啊,还有这个logging logging呢,就是咱们的这个名称啊owner.log。
10:04
以及al ul咱们的头像。以及咱们的HLUL是他的点击的这个网址。这样的话呢,就能够保证啊,咱们数据是最少的,不要太多了,太多数据咱们也没法去更好的展示啊,好这样就完事了,是不是数据更新好了之后呢,接下来我们就可以在上面进行便利展示了。编辑展示呢,我们可以用那个。呃,组件啊,去操作啊。来,我们可以设置样式。这叫配置,还是要写配置?好用无人的组件的话呢,其实我们这个更新数据这一块,对数据赋值倒是不需要了啊。然后呢,列呢,我们就两列啊,然后呢。呃。我们就直接写了,因为比较简单,还有这个收收咱们的这个SC办啊,我们不要写是SC办,然后呢,它需要调样式啊,我们去给个ID,它就叫就叫缪吧,咱们也不用多写了啊。
11:14
它的高宽呢,也是百分百。OK,然后呢,我们在这里就可以继续对他操作了,请求成功对吧,请求成功之前我们先获取到这个这个容器。获取到这个容器之后呢,我们也不用更新数据了,我们就把数据。定义一下,然后呢,通过咱们的view点漏的方法,我们可以加载我们小的这个贝塔数据,就是这个。那么我们就不需要定义这数据了,直接加载,加载完之后呢,它就可以在里面展示,当然展示的方式呢,我们要通过C来指定啊,通过cell指定。啊,四号要展示的内容非常简单,整体呢,我们是点击是可以做跳转的,待会点击跳转,然后呢,里面的上面是一个图片。
12:02
对吧,上面是个图片。啊,他的地址,他的地址就是我们的item。蝶。Al ul,然后下面是一段文字。里面写阿点。H me,然后点击呢,它要跳转对吧,哎呀勾。去哪里呢?长item店?啊,H内这里刚刚这里写错了,应该是它显示的名字是login啊。好去这个高配置啊,高配置去这个页面,那么这个方法也定义好了。Go page。然后呢,接收一个地址,我们在这里去完成跳转。调整的方法呢,又是api.opening方法,它可以开一个新的窗口,那么新的窗口呢,名字呢,我们就是get up就好了,好,关键是地址,地址就是我们传过来的这个ULUL呢可以是本地的一个文件地址,点开可以打开这个文件,也可以是个在线的地址,它就会打开一个新的新的窗口来渲染这个在线地址网页的内容。
13:14
好了,下面我们就可以看效果啊,整体内容呢,就是一上来呢,我们就发请求获取数据啊,请说获取完数据之后呢,我们将数据进行的一次格式化,因为我们只需要一部分东西啊,不需要所有格式化之后呢,把数据加载到我们的这个great view组集中,那么接下来就可以渲染了,下面我们全量更新一下。然后呢,打开我们的这个内容,它一下就会发请求啊,然后请求成功就会展示,诶你看前面呢,就是logo,下面就是名字,通过两列渲染全都出来了啊,咱们最近比较受欢迎的内容,咱们的这个。免费代码训练营view呢,还有Facebook推出的这个JS对吧,还有等等,那么点击图标的话呢,我们就会跳转到这个指定网址,然后加载现在内容,诶,这是view的一些网址了。
14:04
好了,到这里呢,我们就给大家演示了一下咱们的apidl方法的一个基本用法。后续呢,我们等学完那个数据语音搭建起来服务器之后,我们再来学习API点的一些发送其他请求的一些方式。
我来说两句