00:00
接下来呢,我们要开发这个首页的功能,我们一起来看一下啊。这个呢,就是我们现在目前开发的首页,但是首页的下面这个食品列表部分啊,我们目前是写死的数据。那么接下来呢,我们要做的就是发送请求请求数据,然后再进行展示。我们一起来看怎么做。那么发送请求的话,我们就要去看接口文档,接口文档呢还是一样打开我们的这个。控制台对吧,然后点击这个数据模型,进入到我们这个模型中,再点击开发云函数。那么开发云函数这里右上角随便点击一个函数啊,点击global也行,点击啥也行,有一个接口链条的按钮,点击接口链条就会跳转到这个文档地址。所以说我们建议啊,就是这个文档呢,大家把它保存一下,方便后后续去访问是吧,就是我们存起来。喂,我存在这个里面啊,这里面是我保存的一些文档,好了,在这里面呢,我们要请求服负的列表,所以找到这个负的,在这里面呢,就有这个请求地址啊,需要这里呢,他说可以传递一些请求,参一些查询参数,但是我们查询呢,就查询所有啊,就不不查询一部分了,我们点击试一试啊试一试呢,它直接就返回我们的查询的数据,所以我们可以直接用这个接口。
01:24
注意,请求完整地址在这啊。好了,下面我们就可以进行这个数据的开发了。回到这个页面啊,回到页面。我们呢,在页面中我们去发送请求。来到后面页面一上来要发请求获取负的列表,我们可以在这个home负的例子这个组件中去完成,因为是这个组件,需要渲染这个数据。来到home的例子,啊,好了,这里面的视频列表呢,就是一个个这样的一个view组件,我们呢,删掉保留其中一个就好了。好了,那么我们一上来发请求,在哪发呢?我们要在这个install的生命周期函数中去发。
02:06
而API呢,不行啊,API ready呢,它必须是我们最外层的这个页面,它才能够触发那个生命周期函数,如果是主机的话,那么必须要用这个。这一点呢,在文档中是有体现的啊,我们还是大家看一下不着急。找到am的文档,往下走一走,可以看到组界的一个生命周期,其中,呃,这里面呢,就是组界被挂载的时候触发的啊,而API ready呢,它是页面的时候触发的,这里要注意啊,那么我们这是一个组件,不是个页面,我们是当前组件,是属于home组件的一个子组件,这个组件所以得用installed。在这里去发送邮箱。那么发请求的地址呢?我就复制完这就请求地址,那么怎么去发请求呢?我们来给大家介绍一下啊。
03:00
这是请求地址。请求方式是get。好了,那么我们来到这个还是可以看到接口文档,来到看到API对象的文档。在API对象中有一个method代表API对象的方法,方法中呢,有一个叫网络通信的address方法,它是专门用来发送请求的方法。好,这次呢,接收两个参数,第一个参数是请求的参数,第二个呢,是发请求触发的一个回调函数,不管成功失败都会触发这个call back call back,第一个参数是成功的数据啊,第二个参数是失败的原因。啊,如果失败了,那么他自然就会有原因啊,就是error,如果没有失败,那么第一个参数就是请求成功的,我们可以看到的这个数据。好,其中第一个参数呢,它这个对象啊,对象里面写ul代表请求的地址,Method代表请求的方式啊,如果要get请求的参数呢,直接在ul后面拼串就好了,如果将来是POS请求的话,POS请求的参数呢,要放在这个data里面。
04:11
放在data里面。好了,下面我们来去发请求啊,整体呢,就是使用API的这个LJS方法对吧,第一个是请求地址放入我们的整个地址啊,没有参数,所以就不需要加参数了啊method的是请求方式是get。好了,然后后面呢,跟一个回调函数对吧,那么我们可以把它变成一个接头函数啊,或者这个普通函数都行,第一个是我们请求成功的这个数据,那我就要复意思吧,第二个是失败的原因啊,所以说我们要判断一下,如果失败了,那么说明如果没有失败啊,对吧,或者说第一项有值啊,如果第一项有值说明请求成功了,那么他这里其实都有例子啊,下面都有例子。
05:02
就是如果有值啊,如果第一个有值说明请求成功了,那么我们啊去操作的数据好了,如果请求没有值,那说明就失败了,所以说我们判断这个判断这个负有没有值就好了,有值说明请求成功,Else就说明失败。呃,失败的话呢,我们通过api.alert这方法去提示这个失败的具体的原因就是error,那么请求成功的话呢,那不用说,就是要把数据进行展示啊,那要把数据展示呢,我们把数据更新到data里面才能展示,所以在data中我们定义这个福利数据,它初始化呢是个数组,然后在这里呢,我们就进行赋值啊。This点等于这个负。好,所以一旦发送请求成功,我们负的绿子就有数据,一旦有数据,我们就可以在上面进行V-for遍历了。
06:05
对吧,负的变出来的叫负的。同时呢,电离的每项元素呢,可以添加一个唯一的key属性,用负的ID啊。来一点一起啊,这是附子的一个卡图片。那这里呢,我们用上了V杆的语法去设置。然后呢,这是一段它的一个标题负的title,这里呢,我们用上它的一个语法去指定它的title。好频率的话呢,是负的的叫。呃,这个单词比较长,我们看一下接口文档啊。看一下文档。看一下请求回来数据啊,好评率的话呢,叫price rate。然后呢,月兽的数量是叫。Total sales。
07:00
OK,那么这样呢,我们就可以展示成功了,下面我们来一起看效果。打开这个我们的这个真机设备啊,接下来呢,我们要测试的是首页,所以说我们可以把P的这个index又调回零。那么它就会在首页这里刷新了。好,这个时候他就会发请求,诶你看请求成功的数据。那么我们往下一直翻,也能看到这些所有的数据的一些内容,对吧,没有任何问题啊。那么最后这里我们看一下是不是还有一些小的小的需要调整的啊,没有全都调整完毕,没有任何问题,好了,那么这个就是我们整体的一个发请求的流程。呃,接口呢,它一上来就会定义好啊,只要你生成接口文档,它自然就会生成增删改查的几个操作,如果你只需要获取普通的操作,就不需要再开发这个云函数了,如果像我们之前一样,要获取店家数据的同时还要获取,还要进行列表查询,做各种操作,那么就建议你啊,整一个咱们的这个。
08:03
呃,数据整一个这样的一个专门的一个远程函数去操作。好了以上呢,就完成了我们想要的这个需求。
我来说两句