00:00
哈喽,大家好,我是郭长亮,非常高兴和大家继续通过视频的方式沟通与分享,那么咱们这节课要跟大家聊的是关于。APP对吧,那么上一节课呢,我们已经实现了关于这里的一个。啊,一个导上之前我们讲完了这个顶部的导航,然后也讲完了,这里有一个呃,滚动的一个选项卡,对吧,那下面呢,我们就需要将。选项卡的内容进行一个动态化,什么叫动态化呢?静态就是指我们现在都是写死的,对不对,咱们在这里。说天猫超市啊,京东啊,拼多多,苏宁都是写死的,那么咱们之前讲过有一个。Unlo一个云,那么云里面的云存储,云数据库和云函数,我们呢,现在就是要把这里的内容和咱们的云数据库相结合,用一个云函数将它们实现一个挂钩啊,也就是说咱们后期。
01:06
软件写好了,给用户装上了,那不能说我们改一个字,然后就让用户ID更新一下,那用户类对不对,那我们呢,可以直接用这里调用咱们的云数据库,咱们到时候只要在数据库里面更改了用户呢。用户端不需要。怎么样,不需要升级软件也能够看到更新之后的内容对不对。这个呢,就是我们这节课所要实现的一个效果。好,首先呢,我们。看一下这里啊,这个呢,我们已经是关联过了啊,如果没有关联的啊,你自己去注册,然后去认证,然后不知道怎么去创建的,看一下我们前面的课程啊,大概就是两节课三节课之前啊,我们都讲过了,好我们把这勾打开,这里呢,我们有这个数据库的表,然后呢,我们还需要建立一个云函数,对不对,然后我们打开控制台。
02:05
进来之后啊,这个页面咱们应该不陌生了,咱们之前已经整了这个云数据库,对吧,咱们一开始为了做测试随便导入了几个啊,就是在创建的时候选中了几个。然后呢,我们现在要研究的是关于这个。云。函数啊。云函数域名绑定删除,批量删除云函数刷新啊,因为我们现在呢,还没有云函数,所以说我们需要先创建一个云函数。那么怎么创建呢?非常简单啊,我们进来这里,然后下面不是数据库吗?我们可以新建数据库,那上面呢是函数,我们就可以新建云函数,对不对,我们在这里点击新建云函数,然后啊,你自己起一个名字,你自己记得住就行啊,像我们比如说我们现在是想获取它的这个,呃类目,或者叫做获取选项卡,对吧。啊,比如说我们就像。
03:06
Get get get什么呢?然后我们点击这里的件。之后在下面就会多了一个get label的一个文件夹,然后点击进来是一个ID加点JS啊。那么在这里呢,就是一些默认的一个数据啊,去默认代码就是对客户端上传参数返回客户端。到这对吧,你就记住所有跟数据库挂钩的第一件事,你就得先连接数据库。然后咱们就来一个DB啊,这个也是一个变量啊,命名为DB之后。
04:00
你。连接数据库。Database。你就记住了,所有跟数据库挂钩的原函数,第一句话全都是它,对吧?你想啊,你想控制这个数据库里边的内容,你得先选择是哪一个数据库,选择完了哪一个数据库,再选择是哪一个表,对不对?那么选完了咱们的数据库,就要选择数据库的表,我们回过来看一看,这里呢,是咱们之前给大家演示创建数据库表的时候啊,它有几个模板。呃,我们直接选择的模板,但是我发现好像不是特别满意。就是用户。这个是文章ad。这个这个是文ID,这个是用户,这个是分类。但是我们看到其实有很多是我们用不上的啊。
05:03
我们要不要重新写一个?看吧,我们重新写一个吧。比如说我们叫。然后我们见。之后咱们在数据里面添加几个。咱在这小吧。因为要跟语法里边进行配套啊,虽然说这个名字你可以自定义,但是咱们用这个呢,可能在后面写的时候大家更好理解一点。那越着急越写作rap。
06:02
之后我们在这手动,我想一想啊,我是手动添呢,还是咱们使用下面这几个导入的。使用它们吧,省点事,但是不是我们想要的一个效果。
08:08
淘礼金首单礼金天猫超市还有什么?京东苏宁拼多多超市买板选购。苏宁。拼多多。方向。行吧,咱们暂时呢,就先用这几个做来用来用来做演示啊,后期呢,你可以自己再加。
09:02
然后呢,我们现在数据库表表名称有了是吧,那么我们就需要在这里面添加一个数据库的表。在这个时候啊,我们怎么跟这个表进行连接呢。这个时候啊。给它命名一个。那我们是四。看一下LALA。
10:12
DB啊,这个DB呢,就是是上面命名的这个DB,然后点。这个呢,就是数据集合的应用,也就是我们所说的数据库的表。啊,这里呢,就写这个表名。然后。啊。这还没有是吧,为什么没有呢?因为我们需要同步一下啊,我们在这边同步一下。下载。就可。啊,这个时候应该就有了刚才那个label对吧。那么现在呢,我们也已经获取到了这个表。
11:04
之后别忘了最后的点get啊,之前都讲过,你不来点get,它就不会进行一个连接啊。好,那我们现在呢,来一个。输出啊,咱们直接在这啊来返回吧,因为这个是传参嘛,你们是上面传参,但是我们实际上到这里呢,还没有用到参数啊,没需要传单。好,我们现在保存一下。之后我们上传并运行。这个函数。
12:13
啊,稍微有点慢,OK,现在已经出来了,那么现在呢,就已经得到了我们想要的这个结果,对吧,就是京东啊,淘冶金啊,拼多多啊,就证明我们这个云函数能够正常的衔接,已经连接上了,没有问题。但是其实到这儿呢,你看看着挺乱的,是不是我们也不需要这么多,咱们呢。请求成功了,咱们给他返回,那肯定不能光是一个OPPO对吧,你这玩意儿东西太多了,你你你知道人家想用啥呀,是不是,那我们想返回什么。咱们来个大括号。这里边儿先来一个常规的啊,比如来个状态码。
13:00
比如说咱们获取成功了,高点200。然后呢,再来一个MSD,就是说获取的消息。数据请求。数据请求。成功啊,我们甚至可以再写的详细一点。获取。选项卡或者叫菜单啊之类的啊,获取显项卡菜单之类的都可以获取成功,然后呢,这个时候我们可会有一个date。啊,注意是date的啊,因为我们之前一不小心写成了data data是日期啊。那时候我们花了十多分钟检查找错。好,我们现在呢,Date这个时候呢,我们。可以写一个啊,我现在已经把它给复制给log logo变量对吧,那就好办了。
14:09
我们看一下啊,我们这里面有一个date对吧,我们只要这里面的date。那我们现在保存一下。这样的话,我们就是。给。这个参数给它返回,返回再返回一个状态码200,返回一个MSD信息,然后再返回一个代。OK,那么我们这边呢,就是这个云函数。获取到了我们想要的结果,给他传了出去,传了出去之后,那咱们在这头是不是还得来一个接收啊。对不对。我们在这边还有一个接收,那这个接收写在哪里?介绍写的呢?啊,我们可以写在方法里面啊,写在这里。
15:04
然后呢,这个函数。可以给他命名一个。那个。然后。一个括号。一个大符号。这个就是label的一个。函数啊,然后呢,我们下面要调用的是云函数对吧。好的。点function function function几个有吗?那就靠放啊放。之后这里面就是有成功失败还有完成,对吧,因为我们。所要最重要的是这个date这个数据。
16:01
对不对。首先呢,我们在这里需要先输入一个name。这个呢,是。固定的对吧。我们内部先保存一下。然后保存之后我们再。啊,没有出来呢,正常的话应该会出来这些可选的一个原函数啊。虽然说我们直接打也行,但是不习惯的,为什么他这里没有呢,我们在。是因为我们有上传部署啊,我们上传一下。好,那我们在这里再重新敲一下name。然后。
17:01
还是没出来,你们没出来,那我们稍打一下吧。那么这个的意思呢,就是说我们现在要调用的就是这个get label这个函数。还是觉得不方便呢,这里为什么还是要我们手打呢,应该他他自己出来。这样我们看一下云端。啊,我们来看一下云端,这个云函数咱们整进来了没有。没有问题啊,这个函数。既然有,你为什么还让我手打呢?你应该直接能够给我一个可选项,行了,咱们不管了,既然都已经打到这儿了,咱们就接着手打吧,正常来说啊,这个名字咱们只要敲一个G,他这里后边就能都出来啊,就这个那就能都出来,但是我们现在还是需要手打了一下。
18:10
没事,咱们先不管它手短手打吧,好,我们继续往下,那么在这呢,就是说你可能会有多个函数,然后呢,你需要选择你到底想要调用哪一个函数啊,那么我们现在想要调用的是它,对吧,我们就能进到这个里面来了。然后呢,调用函数,就像我们刚才展示的,有成功有失败,对吧,啊成功啊这个它出来了。成功,然后我们可以输出个日志。嗯。调用。原函数。成功。然后二一这个呢,我们需要把它也可在前面展示一下。
19:07
对不对。好,我们现在保存一下,然后呢,我们这边再来。要不要把失败也写一下?然后我们上一次讲一函数的时候,咱们是建立了一个按钮,对吧,然后点击按钮的时候调用,但现在呢,咱们这个位置咱们不会说让用户点击按钮来显示是吧,咱们可以说让它加载到这个页面,然后就显示,所以说我们在这个位置可以在加载里面也整一个这个云函数。啊,不用这么麻烦,咱们直接。这样的话就相当于是启动就加载这个页面的时候,然后就会调用这个函数,这个函数呢,就是下面对吧,我们。
20:08
可以获取到一个日志啊,咱们可以试一下点击保存。然后返回结果200。对吧,这里边儿就是详细的条目。然后调用一个函数成功,这个日志怎么没有看出来呢?呃,我们在网页里面看一下。元素啊,咱把它拖出来。因为小的话不利于他们观看。太。对吧,或者在里面咱们把没用的先清清空。之后呢,我们刷新一下。
21:03
对不对,这个时候我们就看到这个日志啊,当然说呃,这个报错呢,咱们暂时先不管它啊,咱们现在主要看的是这个原函数,这边调用原函数成功对吧,就是这几个。然后也还是成功的内容。对不对。这些就是我们的一个基层的一个数据。这个呢,看着有点别扭啊,这是方法ex的不存在啊,没有定义这个方法。然后我们看一下它是。它是指的是哪里代词应该。配置。这个文件夹里,在这个文件里面。首先是我们上一节课的遗留问题,上一节课咱们和你代相关的一个设计。
22:02
那就是他对吧。我们没有对它进行一个定义。应该是这里对吧,我们这边出现了,但是我们前面这没有,咱们给它加上。然后把这个这里边,然后加上咱们的in。啊,这个呢,就是我们之前也说过嘛,相当于是索引序号啊,就1235就是那个意思,然后我们现在点击一下保存。这回我们把它清空。然后这边还是刷新一下。对吧,这次呢,就没有刚才的那个报错了,然后我们还是可以看到这是我们想要的一个数据,对不对。那么我们现在已经获取到了这些信息,对不对?我们怎么把它填充过来?咱们现在所看到的这些呢,都是我们上节课讲的就把它写死的,对不对,那么我们现在呢,需要把它变成一个活的啊,用云数据库来调用。
23:09
咱们还是需要定义一个数组。在这里啊,咱们定义一个数组,比如说叫做列表list。来波。拍子,然后也是一个。好。数组是一个中括号对吧。然后呢,我们用一个。点份。应该这个函数。那么这个函数是什么意思呢?我们可以看一下咱们给大家准备的幻灯片的资料。点Z的方法,它呢是指E不执行,意思就是说当点前面的方法执行完之后再执行。
24:08
内部的程序,这样就避免了数据没有获取的问题。说白了呢,就是我们得等它前面这个函数执行完了,然后才会执行点次里面的内容,你想啊,如果说上面还没有获取成功呢,还没有获取完呢,那你下面执行什么对吧?你得有了这个数据,你才能够利用它,对不对?然后我们这个是写习惯了这个大括号的,应该是放在它的里边。应该是这个样子,那么这个点Z之后,我们是要接收的是res,我们是要用它。对不对。
25:55
我们先在这里获取到这个结果,对吧。
26:00
我们要的就是它。我先要获取到这个结果。RUT。嗯。Ret,没打错吧,Re UT?然后等于我们的race。点。啊,不用啊,咱们现在获取的就是这个瑞啊,给它赋一个值。然后呢,我们在result里面,我们就可以取到它的这个对应的对应的date。
27:53
啊,好的,那么我们现在把这个,呃,这点table list的输出啊,如果正常的话。
28:01
它应该只会显示这些。对吧,就不会再显示什么扣200之类的了,咱们输出试试。好,我们现在点击报错啊,然后又有一个报错,我们看一下啊。嗯,这种包括。这种报错看看啊这。战备电力。不能发现在。应该啊,我们直接这里不是有吗。好,那有没有可能是因为我们在上面也有了一个21S,对吧,会不会跟他冲突了。
29:04
呃,很有这种很有可能啊,然后我们现在呢,把这里边的res给它屏蔽掉。之后呢,我们再来保存一下。然后这头我们再来运行刷新一下。对吧,那么现在呢,它就没有刚才的那个报错了,而且呢,我们现在检查我们只要date啊,像刚才里面还有200之类的,咱们现在呢,就已经把date过滤掉,咱们只要有用的date。好的,然后呢,我们现在呢,已经有了这个。的啊,这个数组咱们就已经能够获取到了,之后呢,把这个获取到的数咱们。放在table里面给它传进去。
30:12
那么现在呢,咱们只是传了进去,但是这边还有没有接收的呢?啊,我们现在保存一下。好,我们现在再到table里面对吧,人家外边,人家外边给你传了一个进来,那你从里头是不是也得有一个接收的。对不对,然后我们在里面也得有一个接收的。PPS啊,后面也有一个简单的介绍,可以是数组或者对象,用于接收来自负组件的数据,对吧,咱们呢,就是用它来进行一个接收。之后呢,我们能确定啊,这里呢,肯定是一个数组对吧。
31:05
我们先写个大括号,把它接收进来,然后接收的呢是一个list。冒号。再打开,那么这里面呢,我们就要写一些,比如说是类型啊之类的。那么这句的意思就是说,我们所接受的这个对象,它的类型是什么?是一个数组。这应该是是个括号。
32:02
然后呢,我们来个。然后接收到的这个数组,我们再把它返回。也是一个数组对不对,那么到这个时候呢,其实我们在这边的这些return就已经没有用了,对吧,那么我们现在这些例子其实就是上面这个例子,只不过呢,这里呢,我们走的就相当于是一个。本地啊,就相当于是静态的,然后这里呢,是一个动态的,它所调用的是这个咱们的云数据库,对吧。这边呢,我们就可以把它们删除或者屏蔽掉了。暂时屏蔽吧。然后我们保存一下。这又有一个报错,这种报错十之八九是少逗号的。嗯,我看一下哪里少了逗号。
33:25
24号。这里啊,那显然就是上面少了个逗号,我们加上这个逗号,然后我们再来保存一下。对吧,这个时候已经没有报错了,然后我们来看一下淘礼金,首单礼金天猫超市京东苏宁拼多多淘抢购,那是不是就是我们在网页中。咱们在网页的数据库里面写的这些。淘礼金首单礼金对吧,那我们现在呢,再重新再添加一个。淘礼金,首单礼金,天猫超市苏宁。
34:02
来一元购。然后我们保存这个时候呢,多了一个一元购对不对,然后我们这边我们刷新一下。对吧,这里也多了一个元购,所以说我们现在就已经非常完美的实现了通过数据库来调用啊,那么这个逻辑呢,其实非常的简单,只是刚刚开始写这套程序啊,刚刚开始介绍这个云数据库,可能大家还不太熟悉啊,没关系,慢慢来啊,或者这套课程呢,就这节课呢,大家可以再多看一看,多复习一下啊,那么我们现在呢,再给大家捋一捋这个思路啊,咱们上一节课的说这个排版布局,这个前端UI呢,咱们就不整了,咱们就不说了,咱们就说。
35:02
呃,从。调用云端开始对吧,在这头我们呢,在这边先建立了一个自定义的一个组件啊配组件。然后呢,在这里面我们所给它传入的。是一个table list对吧,就相当于是一个数组。那么传入之后,这边传,那么在组件里边就有收的,咱们用什么收啊,用它收,用它收。收到的也是一个绿的。对吧,然后呢,这个list的类型,这个数组,然后我们把它进行一个。返回。像我们上一节课,你直接的是返回的这些东西,然后这节课呢,我们返回的是你收到的这个数组。对不对,那你收到的是什么?收到的是它是传进来的,这个数字是从哪传进来的,咱们这个东西。
36:01
前边有冒号的,后边就相当于是一个变量,我们在变量里面date里面找这个变量就是它对吧,这是一个数组,到这呢还是空的对不对,那什么时候不空,当你加载的时候。怎么样会执行一个get label的一个函数,那么这个get label的函数是什么东西?我们在方法里面找,哦,Get label,那么这个函数是干什么呢?它先连接了这个。云云函数啊,那么云函数有很多有可能啊,有可能会有很多,然后呢,它究竟说连接的是哪个云函数。我们在这边原函数,这边我们找,哦,这里有一个get label的原函数,那么我们跳转到get label的原函数。开始执行这个云函数,那么这个云函数是让你干嘛呢?第一件事先是连接了一个数据库,第二件事啊,这就是默认的代码的,不用管它,这个是输出日志,也不用管它,第二件事儿就是咱们在数据库里面。
37:08
你想啊,数据库里面它有很多个表对不对。你看里边一个表,两个表,三个表,四个表,有很多个表,那么你在这呢,就需要选择一个表。对吧,这个呢,Light啊,这就是一个固定的格式。然后这个DB是在这个数据库里面选择表是哪个数据库是DB,这个数据数据库这个DB哪来的,是我们上面给他进行的一个赋值,对吧,咱们给它起了个名字叫DB啊。那么我们这句话的意思就是说,我们现在要在DB这个数据库里面,然后找它的表,找哪一个表,找名字叫做lal的这个表,然后执行找表这个操作,把这个表找完之后,把整个表的这个返回的值,就是这个表里边所有的内容赋值给这个label。
38:04
等到这个过程执行完了,咱们也给它复制完了,对吧,得到这个label,那么就要把它返回去,执行之后返回什么呢?返回的return啊,咱返回了一个操码啊,返回了一个MSD信息,就是说我这个事儿干完了,已经请求成功了,最后呢,咱们。返回一个data label.data那为什么我们不直接把整个label都返回去啊,因为整个label里边东西挺多的,咱们不是每个都用得上啊,它可能会有一个啊影响的数量对吧?是这六个是七个的,咱们只把这label里面的date这个数据是我们有用的,把它给返回去,对吧。对头。我们。传进来了。啊,对吧,就执行这个函数,诶执行完了人家给你一个返回对吧,那返回的这个数据,咱们一个Z函数进行一个下一步处理啊Z呢,咱们这边也有写对吧?它呢是一个异步执行,也就是说你前面的方法执行完之后再执行内部的程序。
39:11
防止就是说你上班还没完事呢啊,然后下边就动了,这样的话肯定是不行的,等到不震的话,就是你得等上班都完活了啊,这个咱们以后通过这个函数把date取到了,对不对。之后再执行在里边的,然后这个呢,就是一个箭头函数啊,我们主要是对它进行处理,处理什么呢?咱们先做一个变量对吧?啊,把这个raise赋值给这个东西。之后我们再从这里面找出它的date。对吧,这个date就是我们想要的数据库表,这个时候咱们可以把这个日志打印出来。对不对,那么我们到这一步。
40:02
数据库表就是这个表就已经就是这个就是这个数组,我们想要的幻灯片就已经有了,对不对。好,那么有了它之后。原先默认是空的,那现在就不空了,那么在上面。在这里。对吧。他就有东西了。是不是,然后呢,我们就像一开始所说的,有东西之后咱们就要给他传,传进来,这相当于一个传单给他传进来table导致。然后你传进来的是一个什么东西,咱们给他再进行一个。展示啊。那么怎么展示的?
41:02
对吧,它不是一个。一个数组嘛,对吧,咱们呢,就把这个数组给它做一个循环。对不对啊,把每一个都给它循环输出。对吧,那么我们循环输出的就是这个这几个词,这些词。明白了吧,啊大概呢,就是这样的一个逻辑啊,咱们这节课呢,它是比较重要的,因为它涉及到一个连接数据库,然后把这个数据库里边的内容怎么给它渲染出来,怎么展示出来啊。好的,那么今天也不早了,已经一点了,呃,我的预计呢,就是每天呢,录制大概五到六节课啊,然后争取在一个星期到两个星期之内把这整套课程录制完毕,好的,那么最后呢,还是感谢大家的关注,我是霍常亮啊,这是我的QQ qq群,微信网站啊,如果说大家对于淘宝客呀,对于这个APP啊感兴趣,欢迎加我的QQ微信啊,期待有更多的机会与大家一起共同学习,共同进步,好,拜拜。
我来说两句