00:00
好了,另外在上一小节中啊,咱们成功的实现了登录模块,哎,我们登录模块的账号导入到I'm提系中,并且存到自己的数据库中,而且创建了一个直播间啊,并且写入到我们的数据库里啊,所以这些过程咱们都已经实现了啊,那接下来咱们要做的是我们的直播广场这个模块,其实列外一进来,我们的小程序不是每一次都是我们的登录页面,我认为应该是我们的直播广场,而这个时候在直播广场中因为你没有授权,所以这个时候会引导你跳到我们的授权登录页面来啊,这是我们应该走的这样一个流程,所以接下来咱们会用四节课的时间啊,来讲一下直播广场这一个模块啊,客户先简单的把直播广场的哎,这样一个页面跳转的流程图啊,跟大家呀,来说一下啊,这块东西啊,非常简单啊,你看列外咱们在这里也是。
01:00
基于之前这张图想法呀,是这样的啊,虽然我这个画图的这个界面的话,它有点小哈,但没关系,我们在这里把这个直播广场放在这里,我们称之为这个页面的话呢,叫做直播广场这一个页面,哎,一进来直播广场之后,我们应该先做一个什么呀,我们应该先做第一步是判断,判断我们此时拿到我们微信的这个code,然后去换取我们的open ID,得到open ID啊,你去取啥呀,Open ID利用opend利用open ID啊,查询自己的数据库,另外你看一下这一个流程是不是我们一进来之后啊,我们直播广场的GS流程应该是我们应该先通过奥自己写一个方法呗,啊然后我们还依然采用微信的log登录,拿到code再换取open ID,因为open ID是我们此时这个账号。
02:00
的唯一标识,然后我们利用这个唯一标识去查我们自己数据库中是不是这个账号已经存在了,如果已经在咱们的数据库中,就说明这个人曾经授过权,OK,那就留在这个页面中吧,那这样的话呢,我们在这个页面中就会有这样一个布局的什么布局啊,那么这块的话呢,是一些在直播广场中,哎这些人的话呢,我们把这些人给他们列在这个广场中,就这个人的话呢,他们你可以点进去去看他们的一些直播啊,然后在下面这块的话呢,是咱们自己的一个我要开播,诶这个怎么换颜色呢?我要开播的这样一个按钮,咱们放在下面来,在这里我们选一个不同的颜色放在这儿啊,这是我要开播的,所以说如果你授权过之后啊,那我们在查到自己的数据库中有这条数据,那么就能看到直播广场中有我们这些啊,广大的这些用户啊,他们在这里呢啊,有自己的头像,我们可以点进去看他们的一些精彩直播啊,然后我们在最下面的话呢,我们能。
03:00
看到我们这个地方呢,一个我要直播,我要发起直播这样一个按钮,是我自己要直播,这样的话,我的头像也会出现在他们的这一个直播广场列表中,他们也可以来看我的直播,但这一切都是我们想的好的,那万一查到这个东西没在我们的数据库中的话,那直接就是啊,跳转到我们登录页面中,我等了你好久了,我喜欢登录页面,不就是说我们希望你未授权的情况下,经过我登录页面进行授权这里啊,所以我们的思路啊,就是这样的,等授权通过之后啊,我们再返回我们的上一个页面,这一会儿的话,我们就能看到我们的直播广场列表了,诶这样的话,你每一次再重新进入小程序,我们每次看到了就是我们的直播广场,因为它每一次我们就先会查一下是否授权通过啊就可以了,好了位你看这是我们接下来直播广场这一个模块。虽然。
04:00
这个图画呢,很粗糙啊,但是咱们之前也已经演示过了,大家也应该知道课文所说的这一个意思啊,咱们接下来呀,用咱们的代码呀,给它勾勒实现一下,光说不练假把式又来了,我们这一节的内容啊,就是要通过我们微信登录后的code呢,拿到open ID去验证是不是在自己的数据库中,我认为这块的技术站啊,我们已经都走过一遍了啊,所以对于我们就是一个体力活啊,咱们就一步一步的仔细一点啊,别丢东西啊就可以了,来跟客们来到我们的小程序这一个页面啊,来到小程序中啊,我们在这儿首先得创建一个新的页面吧,哎,我们在这里可以基于我们的这个,之前我有一个home文件夹,好像里面有没有东西,咱们这样吧,自己新建一个得了是吧,我们把这个home呀,我们留着,留着将来再用呗,我们在这给他新建一个叫什么叫配置的斜杠live list啊,叫直播列表,直播广场。
05:00
OK,保存之后的话呢,大家可以看一下,我们现在把它调整为我们整个项目的这个首页页,这样我们保存之后重新编译一下哈,有时候它不好用的情况啊,你就点一下重新编译这个按钮啊,因为这块有时候经常有坑啊,咱们在这个类物类似的这个界面中啊,我们就开始想一下啊布局咱们先不着急,因为现在都没有数据,我不买门子局啊啊咱们在内务类似的中啊,一进来也就是说我们一进来大家也知道小程序的生命周期有onload on on show on head on onload这些啊,这咱们常见的生命周期,哎,你说我这个O方法,就是我准得写一个O方法,this4.o我是写在哪呢?你说我写在这儿呢?On中呢?还是写在onload中呢?还是写在on收入中呢,哎,在这里其实你放在哪一个生命周期中啊,我觉得实现这个功能啊都是可以的,只不过在具体的实现过程中会。
06:00
都不一样的,因为咱们再想下,如果放在on low的这一个生命周期中,我们O完了,发现我们没有授权,这个是直接跳转到我们的登录页面,等从登录页面再回来的时候,我们ON6的生命周期啊,却不会再走了,那这个时候我还希望在这个直播带货这一个直播广场页面中拿到我们的授权数据啊,那这个时候你也没法再去发一次这个请求了,因为onlo的将不会再走一遍了,那这个时候有人就说了,我们可以在刚才授权完之后就给它存到APP的user data里面,你看这个是一个思路,对吧?那在这里的话,你放在already其实是一样的,那如果放在on show中的话,如果我们第一次授权通过了之后啊,我们再回到这个页面的时候,On show函数还会再走一遍,那这个时候它会再次的去拿我们此时这个用户的一个个人信息,到时候把那个信息存到本地之后啊,等你下一次再来回切换的时候,我们判断。
07:00
那个ID已经有值了,咱们就不用再让中的那个方法执行了啊,所以我们在这有很多的思路啊,在这里选择的是我们通过我们的昂show这个方法来做我们的这个数据的一个请求啊,条条大路通罗马,列位可以啊,选择自己一个适合的方式,哥们在这里写一个z.o ath这样一个方法,然后咱们在这里把这个O方法给它创建出来啊,在这咱们就就近原则吧,因为在这一块啊,我们小程序是不论说你可以写在哪个位置随便写,咱们就写在这个地方就可以了。好吧,要在这个O方法中列位,咱们要做的工作就是我们进行WX,点我们的log in啊,进行我们的一个请求,拿到的东西是什么什么呀,是不是code的信息啊,所以我们在这里还是一样的data啊,我们拿到我们的code,咱们先打印一下,在这里肯定能拿到这个code的值,对吧?一运行之后拿到这个code的值了,而这个code值是在我们的data.code里面。
08:00
然后接下来我们再请求我们自己的呃,写好的一个get user这样一个接口,因为我说过要用这个code换取open ID,再利用open ID去查咱们自己的那个数据库中有没有匹配的数据,如果有的话呢,就认为这个人曾经被授权过了,是吧?啊是这样的一个流程啊,所以咱们在这儿啊,按照这个思路来,那我在这里就要导入我们的request的这一个方法啊,咱们自己封装的一个非常爱的一个方法,点点上一期U文件夹下的request的,咱们给它导进来,然后咱们一进来之后啊,拿到这个值,我们就利用我们的request,虽然我这个方法呀还没写,但是我敢大胆的往下去写一写这个流程对吧?在这里是get user,看来我一会啊要写一个get user这样一个接口了啊method了,方法的话呢,还是咱们的postose的方法好不好,然后接下来再用我们的head部分。
09:00
那咱们还是给它做成这个content type,按照application啊,膝盖ization的格式来做的啊,当然我们按照这种格式发poose的请求,一定要把这个数据给它带上去,你不带数据你就玩嘛,对吧?好,拿到我们的data code,等我们的成功回调就可以了,然后我们在这个request中等我们的成功的回调,我们在等这个值,将来这个值是什么呢?啊,肯定是我们将来要查到这个用户的这一个数据信息的列外,那接下来咱们就可以来去写一写我们的get user这一块,来get user这个接口,咱们来到我们之前的啊,在本地创建的note服务器,我们在这里新的建一个文件叫get user.gs文件,然后咱们这个get user这个GS文件其实跟我们的这个注册中啊,会有很多代码是相似的,所以我认为我们可以站在巨人的肩膀上来。
10:00
把这个活儿给干完,大家不用每一次啊,都从零开始啊,Ctrl a ctrl c,咱们来到我们的get userrl这里面,咱们把之前的代码给它干掉,好咱们来看一下来在这里我认为咱们不需要的东西呢,就是这个签名部分列外,因为签名这部分是跟咱们的即时通讯R'M相关的啊,咱们直播广场呀,还是真正跟咱们即时通讯这块没有太大关系啊,所以我把这一块给它删掉了啊,安格四和mysq two肯定在用的呀,把这个地方咱们给它改成get user啊,都统一一点嘛,然这个地方咱们拿到这一个code这个值,这还用说吗?啊,结构拿到code值,然接下来这块是咱们的进行换取我们的open ID的,哎,留着吧,点第2OPEN ID换取,换取成功之后,来咱们把这个地方呀,都给他干掉,这些地方都不需要,因为这是跟咱们存我们的即时通讯的体系有关系的,那咱们为了这个好用哈,咱们也别。
11:00
一下子全部写完啊,我就怕中间再出什么岔子,所以我这样呗,我先把这些代码先做一个注释啊,只给咱们的前端的话呢,返回我们的open ID,还有action OK这样一个字样,然后接下来再就把这个地方咱们给它改成我们的get user,另外你看这个小模块我们有没有成功了呀,哎,一个小模块只是拿到前端posts过来的code,然后获取完open ID再给它send回去就完事了啊,然后再把这个小模块在我们的这个路由中啊,给它注册一下,哎,导入我们的get user这个模块导入从膝盖API get user导入进来,然后再进行AAPP点什么呀,Post啊,我们在这里写好我们的get user get user啊注册好了,那接下来列外咱们可以呀,从我们的小程序端咱们来测试一下子了,好,我们在这里要想测。
12:00
这个流程,因为只要每次售就能走这个流程,对吧,我们只需要在这个地方点一下这个变异,重新再执行一遍呗,诶,直接就拿到了我们这个吃的,看来我们拿到我们的open ID这个事啊倒是非常的简单的,那接下来的话呢,咱们再去去查一下就可以了,我去查一查,哎,在get user这个方法中,我们去查数据库,数据库这块也一样,首先咱们在获取数据库的配置,创建数据库的连接池,然后最关键的一步就是这里了,哎,这个地方咱们要走的这个方法列外,是不是我们应该去select,哎,我们的数据从咱们的U4这张表中,然后我们的判断是VID啊,通过这样一个条件,然咱们把这个获取的open ID给他传进去,能拿到的值就行了啊,所以在这里应该是写一个什么方法就行了呀,是不是我们通过一个select。SE啊,我们把所有的字段信息啊,From user,然后咱们在这查了这个字段是where ID,所以我把这一块给删了,改成这一个ID等于个好空字符串啊,咱们咱们的一个问号,然后咱再把这个open ID给它传进去,写在数组里面来列位看一下记住的代码,咱们这个意思表示我们要通过我们的这个数据的连接池啊进行查询什么呀,查询我们的user中的哪个ID正巧等于open ID的,所以列位可以想一想,如果查回了这个数据中,哎,在这里咱们还真能写一个啊,查回了这个数据中,如果它里面有东西的话呢,哎,就说明呀,咱们是已经存在这个用户了啊,只不过这个USER4大家需要注意一下哈,在这里的话呢,那么拿到了这个数据中啊,这个USER40才是他拿回来的,我们的查回来的这个数。
13:58
组啊,如果里面有数据,那这个数组不为空,如果里面没有数据,这个数组是为空的,对不对?在这里user这一块啊,它返回的是一个数二维数组,二维数组的第零个元素才是我们想要的这一个数据,好吧,所以在这里的话,大家要注意一下啊,当然如果在这你不放心,你就跟课文再查一下试一试呗,运行看一眼就行了啊,咱们试一下查一下,看看这块是不是课文所述的,来走一下。
14:28
啊,点击这个编译之后,咱们在这里正常的执行完了,看一下控制台里边可能打印出老多东西来了,大家可以看到哇,咱这打印出来是什么呀?看见了吗?它给你返回的是一个二维数组,二维数组第零个元素这个空数组,而二维数组的第一个元素是咱们这个数据库的一些字段,相关的一些信息啊,所以咱们在这里要的只是中括号零,大家说怎么是个空数组呢?啊,那是因为坑们好像把数据库的数据好像都给删掉了,来我看一下运行之后打印出了中括号零,确实是一个空数组,我检查一下我的数据库中的数据,确实我的房间还有我的USER4,我都给它全部清掉了啊,那这样的话呢,那就没有呗,那正巧咱们就接着往下去做呗,那就说明在这里,如果咱们判断if,判断U4中块零,它的这个点Les这个长度,如果等于等于这个零的情况下,哎,你怎么去处理啊,然后的话呢,如果不等于零的情况下,你又怎么去处理来列。
15:29
对,如果这个U4的中号零的长度等于零,咱们就在给前端返回什么呀,RES4的,给它返回一个错误码吧,咱们在这给他返回一个code,比如说等于一个负二,然后在这里告诉他这个错误的信息是user not exist哎这样一个信息,那再把当前的这一个open ID,咱们再给它返回出去啊就可以了,好了,Open ID好吧,然后这样的话呢,啊,如果是等于零的情况下,如果不等于零的情况下,咱们就把这段代码给它剪过来不就行了吗?另外剪过来啊,剪过来之后啊,我们不要再传这个open RD,咱们传点有意义的这个信息呗,所以我在这里传了这个信息应该是我们的什么呀,User啊,我们的当前的这一个用户这一个信息,User,然后我们在这里写一个冒号user z,中括号零,要注意中括号零拿到的只不过是查出来的这唯一的一条数据。如果将来。
16:29
有的话呢,但他给你一个数组,所以你再取一个中括号,零才是那一条唯一的数据,能来这一块的话,一定要弄清楚了啊,这是咱们这一块在写的时候很容易犯了这个数错的一个地方,就是我通过这个查完之后,优色的它返回的是一个二维数组,甭管那个下标唯一是什么,我只知道user色零是咱们最终的话呢,查回来的这个数据能查到的话呢,这个数组里面它只会有一个元素,我说的是能查到,为什么呢?是因为opend作为咱们的唯一的啊,索引主键的它只有一个,而且不可能重复的,所以查回来这个数组也只能是有一个元素,对吧?哎,所以U4的零,它要不然是一个空数组,要不然就是只包含一个元素的一个数组,所以我来这就判断中和零等于这个长度等于零的情况下,咱们就返回根本没有这个用户啊,如果这个的话呢,是这个不等于零的,那只能咱们把这个什么user。
17:29
中括号零,中括号零,哎,给这个值给它返回出去,大家知道这个是一个对象,那咱们保存之后,咱们来测一下,那一开始的话已运行对吧,那这个时候是没有数据的呀,很明显哎,咱们就返回了这个Q的等于个负二就出错了,而我们在这里锁住的这个下一步的这个逻辑就是我们判断这一个等于个负二的情况下,咱们应该有进一步的处理吧,我们可以在这里判断判断什么呀,来判断res点我们的这个code,如果等于等于这个负二的情况下,咱们就引导这个用户navigate to到哪里去呢?是不是我们的斜杠pages,然后的话呢,我们的斜杠,我们的log in这一个页面来列外看看,就是这样一个代码,如果这个等于这个负二的情况下啊,我们就引导的到这个log in中啊,如果不等于负二的情况下,咱们就打印我们。
18:29
获取了这个res这个结果呀就可以了,你看这里来咱们来看一下,我们现在好像已经好用了哈,一点击这个编辑之后,由于返回的是这个负二,所以他就直接引导我们跳转到log中,咱们log代码呀也得改一改,要不然光授权通过了之后呀,就得卡住了,就啊咱们怎么改呢?咱们是不是来到这个log音语中,咱们看一下,等我都创建完事之后,Group完了啊,在这里咱们是不是在这个最后的这个点,在这个成功中,咱们在做点什么吧?啊另外你不觉得在做点什么吗?啊,就是我们如果真的成功之后,我们可以引导用户往回推wx na back这个方法。
19:12
来个那个办个这个方法,咱们引导用户往回推啊,他可以在这里跳转啊,这个层级咱们就往回推一层就行了啊,这是咱们小程序的一个小接口的一个用法,Navi get back,当然有人说客隆可以在这里把当前登录的授权信息再存一份在这啊,这都可以啊,都没有问题,好吧,好,咱们在这里的做法就是我们进到这个页面中,最后授权通过了,我不是只打印一个log啊,那可group也完事了,咱们应该引导他再往回退,这样来说又回到了我们的live窝,类似的这一个啊,这一个广场直播广场一个页面中了,好了,咱们在这里来保存之后来跟客户来测试一下,看一下好不好用,咱们重新编一遍,一开始呀,啊,因为是啊扣的等于负二啊,出问题了,没有存在,咱们就点击登录啊,登录之后让我授权允许,我允许了之后呢,他就给我来到这个页面来,大家也能看到,等我来到这个页面来之后。
20:12
我们来到了我们的live list.gs这个页面来,因为on show这个方法会重新的让它再走一遍这个生命周期是吧,所以奥斯又走了一遍,这样的话,我就拿到了我们的这一个扣的这一个尺,在这打印了两次啊,给大家感觉好像是调用了两次一样,诶你看是不是就这种感觉呀,所以我们在这里哈,如果啊,这个再次编译之后,大家会发现他拿到了就是我们此时这个用户的一个真正的这个信息呢,你说这块还不承认我们已经成功了嘛,所以咱们只拿这个user就可以了,这就是我们当前登录用户的他的这个直播间的一些信息啊,在这里啊,包含他的头像啊,个人信息啊,不是直播间的信息,个人信息啊,在这里他的一些头像信息,创建时间,还有他的ID,将来我们通过这个ID去匹配,匹配什么呀,匹配这个直播啊,列表中需不需要显示他自己的,因为直播列表一下拿回来所有数据,咱们自己就没必要再看到自己的直播列。
21:12
表了对吧,所以我们就把这个给过掉,所以我们可以通过这个ID去匹配它,所以这个信息很重要,所以表示我们当前授权通过的,哎,这一个登录用户啊,拿到了我们的这个登录信息的,就这里啊,这是咱们的奥似这一个小的模块的写法,诶列微在这里去写的时候呢,稍微的也得注意一下啊,你每一次进来昂show都重新走一遍,好像也不太合适啊,咱们可以把这个信息啊怎么样呀,咱们给它存起来啊,存起来,存起来之后呢,再每次回到数的时候,如果这个信息是存在了的话呢,咱们就不走奥斯方法了,因为你想我将来这个地方,哎,我在这个地方可能会有很多人的直播列表,那我肯定想点进去看下,我点进去看来到这下一个页面中,那我再回来的时候,是不是这个方法又会再走一遍,其实我觉得没有必要了,这个方法再走一遍啊,所以我们可以在这里啊,拿到我们这个当前用户信息给他塞。
22:12
Data啊send data给它存起来之后啊,我们再判断一下这个O方法还有没有必要呀,在执行啊,所以我在这里可能会做这样一个处理,就是我写一个么use data来存呢,我此时的这个数据use data我们在这里啊,进行一个set data的一个调用,咱们把这个use data咱们放在这里啊,把里面的这个user信息给它同步到user data里面来,然后咱们在这个on show中执行的时候呢,我们每一次我们可以做一个判断,If this.user呃,Data啊先在data.user data对吧,这块得注意的,然后再点那个ID啊,就是咱们此时这个返回的这个ID信息,如果这是假的话呢,你想想这点user data.id在一开始的情况下,这个空对象,所以已定是一个甲,那这样的话,咱们就正常的调用奥斯啊,如果你在这里啊,它已经有数据了,咱们就没必要再走这个奥斯了。
23:12
所以这样这个流程我觉得就比较合理的列位来,咱们在这里最后简单的总结一下这个过程啊,其实就是在我们的呃,直播广场这个页面中一进来啊,咱们在这里先判断了一下,此时当前登录用户啊,里面是不是已经有值的,在一开始是个空的对象,所以没有,所以点ID为然,那这样的话曲板就为帧,所以奥斯一定会先走一次,那这样的话,奥斯走的时候,他走到这里,最终拿到我们后端返回来的第一次嘛,后端返回来扣的肯定等于负二,所以我们引导用户到了我们的log in页面去,那在log页面总算成功了,成功了之后咱们就往这个页面中退回来,退回来之后列外它一定也是这个值,还是为什么呀,为假的啊,因为咱们还没有设置上去,所以奥斯会再走一遍,再次去拿到我们的这个凭证信息,拿到之后,此时这次点set data,我们把这个信息存到我们的UC。
24:12
德这一个呃状态里面,那这样的话呢,假如说列外啊,咱们再去干啥呀?呃,往login页面虽然跳不过去了,好像那这样往其他的直播这个页面中去跳,点的谁的头像往直播去跳,你跳完之后再回来,再回来之后这个已经判断他已经不再为我们的假了,所以他就啊不再为我们的真了哈,所以在这里on数函数会执行,但是这个O不会再被处罚了啊,你看这样这个流程就比较合理了,假有人说我把这个数据我直接放在APP data中,可们我早在log的时候,我就放在这个我们整个小程序的一个APP啊,获取APP实例挂在他身上,那这样的话,我在这个页面中,我也没必要放在on show中,还要再给你做做判断呀,我直接在loging中存好了,放在APP实例中了,那我在例如类似的中,我就放在UN ready中去发一次奥斯,那我将来直接啊再次昂数进来,我用那个APP那个实例存的那个值也行。
25:12
就是,哎,所以这都是一些方法和思路啊,一开始课上就说了,你on show去写,奥斯认证还是咱们的onload on ready去写,我认为都没有问题,最终啊,能实现你的功能的话呢,不就好了吗?好吧,好,这就是关于我们验证用户是否已授权的这个功能,咱们这一小节就到这儿。
我来说两句