00:00
好的我们继续啊,那在做完这个推荐歌曲的静态搭建的,那这节课呢,我们去把上面这些数据呢,给它写成动态的啊,你比如轮播图啊,包括下面这一个区域。那这样的话呢,就涉及到前后端交互,哎,那大家在上班的时候呢,前后端交互的话呢。第一步要干嘛?那肯定要看那个由后端为我们提供了什么叫接口文档。那现在呢,我去打开这个接口文档啊。OK,那这是这个,那么以上呢,是呃,我们硅谷音乐的接口文档,那在这儿呢,我给大家写了一个接口文档的说明。我们当前的项目呢,用的所有的接口呢,它都是网易云乐提供那个开放的API接口。然后啊,我们在项目中请求的地址呢,是我们自己用note GS搭建的服务器。那么最终的流程呢?它是这样的。其实网易云乐呢,有开放的API接口,那也就是说我们客户端呢,是可以直接请求的。
01:01
可以直接请求的,但是呢,它这个接口呢,比较啊就说不是特别统一,所以呢,我们去加了一个中间层,就是我们的NOEGS。那之后的流程呢,是我们的客户端发请求给我们的note GS,而note GS呢,再发请求给网易云院的服务器,然后呢,返回数据给noe,由node哎,转发给我们的客户端。呃,加了这一层呢,呃有什么好处呢?第一点我们自己写node的话呢,呃,那就说我们有用node呢去规范啊。我们前端的接口。这是一个啊,那再有就是在企业里面呢,大家也能看到啊,很多的项目这样去搞,就是说我们客户端呢,不是直接跟我们的服务器端去对接,而是去请求中间层啊,就是note GS,那么他扮演的角色呢,就是分发我们的路由。
02:00
啊,为什么这样做呢?这样做的好处是减轻我们主服务器的压力,来减轻我们主服务器的压力,而且呢,大家看你像淘宝京东那些呢,他们现在因为用户量越来越大了啊,一台服务器呢,肯定是搞不定这么大的请求量,访问量,所以呢,他们在主服务器的下面呢,又搭建了几个子服务器。然后用到了呢,也是子域名啊,那这样的话呢,我们有的用户啊,访问有的页面呢,它是主服务器的,有的页面呢,是由子服务器来处理,或者说是我们先请求子服务器,它能处理就处理,处理不不了的再转发给我们的主服务器。那最终的目的就是为了响应快,然后呢,减轻主服务器的压力。好,那这呢,我也说了啊,是为了我们接口规范统一化。那我们当前这个接口呢,是适用于所有的音乐类的项目啊,都可以去用。
03:04
那下边啊,第三章接口列表呢,就是我们项目中呢,要请求的对应的接口。那么对应的服务器啊,我这儿呢,已经启动了啊,已经启动了,并且呢,我写好这个项目呢,已经在访问这个服务器了。那如何启动这个服务器呢?也很简单啊,大家来到我们的代码里面,找到我们的server,哎,这个服务器啊,进来以后呢,在我们项目的根目录下面,你们CMD进去。然后我们n PM start启动就好了。哎,启动就好了,那么当前我们note GS服务器啊,它对应的接口呢,哎,端口号呢,是3000,哎是3000。那这个呢,对应的在这个接口文档里面呢,我们也有说明啊,呃,在接口文档这儿呢,我给大家写了一个接口使用说明,找到我们这个目录执行,在目录下呢,执行n PM start对应的地址是这个,比如说我们要请求龙波图的地址,那就是第一个呗。
04:06
好的,那这是这个啊,不熟的同学呢,你可以看一下我这个接口的使用说明。OK,那么服务器也启动了,接口文档呢,我们也打开了,那大家上班以后啊,要去请求服务器端的接口,第一步就是看我们的接口文档。那么接口文档里面呢,通常是去告诉你这个接口是干嘛的,然后呢,对应的接口地址是什么啊,请求方式是什么,有没有参数啊,参数怎么去携带,包括服务器返回的例子啊,在这里呢,我是又给大家加了一个啊调用的事例,你怎么去访问他。注意啊,在当前的接口文档里面呢,我这儿告诉你是这个啊,那么我们完整的地址呢,应该是要加上什么,我们的local host3000。
05:00
啊,这个应该能懂,那在看懂我们接口文档以后呢,下一步啊,不是说直接去请求,我们应该去测接口。啊,就是说在,呃。正式编写代码之前呢,测试一下你的接口到底能不能用。测接口的方法呢,也有很多啊,大家看啊,现在因为是get的请求,所以呢我可以直接用浏览器去测试啊,比如说我在这呢,去访问一下这个local host,然后呢对应的接口是3000,我们把这个banner拿过来一回车。他正在请求。嗯,这么慢吗?再请求一下,那这呢有可能是服务器卡住了,我敲回车,你看果然是卡住了,那敲回车那这边呢,数一就能够正常的拿到了,那么这个bes呢,就是我们想要的数据。好的,那刚才呢,我是用哎浏览器的URL地址栏呢,去给他测的接口,那么在正式的企业开发当中,如果说POS的请求啊,或者其他的请求,那你就不能用这个地址了,对吧,因为这呢只能发get请求。
06:11
那那个时候我们怎么办呢?啊,对应的工具呢,嗯,大家可以使用什么,推荐你们使用这个啊叫postman。哎,用它来测接口也很方便,哎,这个postman呢,你可以在哎我们谷歌的这个应用商店里面去下载一下,也比较好用啊,比较好用,OK,那现在呢,我就用它来测啊,用它来测。呃,接口没有问题了,那下一步我们要真正的去访问这个接口,那首先来到我们小程序的官网,在他的API里面。点击过来。嗯,我们要发起球的话呢,需要看一下网络上啊,在这里呢,有一个啊,第一个就是微信点request。使用它呢,去发请求。
07:00
方法调用里面传一个对象,那么这个对象对应的参数呢如下。啊,这些呢,其实都是常规的用法啊,像什么URL地址啊,参数对吧,请求头是否超时啊,请求的方法等等。跟我们之前用过的act,包括说我们说呃,JA query里面那个Dollar附件用法特别像。好的,那现在啊,我说一里,大家看一下这个参数这一块它呢支持呃,字符串对象还有buff,就是二进制的方式,那很明显我们常用的呢,常用的啊是字符串和对象。而接下来为了我们项目统一啊,我就统一用对象的形式呢,去携带我们的参数。好吧,哎,那这是这个OK,那对应的方法也有了啊,我们接下来呢,要去发请求。在主页对不对,我们在哪发呢?那肯定在GS里面。啊,在这里去发,那因为allno的执行的最快啊,我们可以在这儿发,当然了也可以在这在already里面去发,因为他俩都执行一次啊,那我就先在这儿去发。
08:11
好的,那在这里呢,我们要用到的是微信点request那里边的必选参数,你把URL。对吧,我这呢写一个杠banner,那是我们对应的接口啊,Data的话呢,我们说了统一有对象啊有对象,那这个时候呢,我们看一下啊,要不要参数对吧,这说了有个可选的参数,注意啊,它的呃字段呢叫type默认的值的为零。零对应对应的是PC端的数据,一对应是安卓啊,那这里呢,我就用二了,就是iPhone的数据,OK,那。那这个时候参数呢,我们应该写一个啊,Type字段对应的是二对不对,那除了URL和data啊,那method呢,那也是方法,我们现在呢是get啊,因为它默认的方法是什么呀。那一般来说,大家用任何的发起警度库,它默认的method等等,它都是get,所以这里我们是不是不用写啊,那接下来呢,我去把这个写写啊success哎叫成功的回调,嗯。
09:15
哎。对吧,啊,那这成功的回调来,那再往下,这应该是个费用啊失败的回调好了,那如果是成功的话呢,我们把这个成功的数据呢,啊打印一下,那这儿呢,是请求成功对吧,同时。啊,我们去把这个re输出一下这整个冒号。那这样呢,如果失败的话呢,我们consolo啊,去把这个打印一下啊,那这个呢是请求哎失败同时来把这个error输出一下。好的,那我就写成这样啊,我们来到我们的项目,看看有没有什么问题。打开对应的调试器,大家看啊,走的是请求失败。然后我们看一下这个error message,注意啊,他说失败了,为什么失败呢?In va URL com。
10:08
说你是一个什么,是个非法的URL,那人家也告诉你了,这个根本不是一个完整的URL。那这是为什么呢?你想想看啊,我们一个完整的URL,它应该有什么呀。对吧,那现在呢,我把这个整体啊,URL地址呢,我复制一份啊,我随便贴一个地方嘛,比如说我去贴到这个URL旁边大家看。一个完整的URL应该有协议、域名以及端口号。包括你有请求的地址。而现在我这故意只写了一个杠ner对吧,那小程序这也提示了,说这个不是一个完整的地址在这里呢,我想说一下啊,如果说啊,我们发请求是在H,也是在浏览器里面去发,就不会有这个问题,因为浏览器的话,如果检测到你的URL前面这些没有写。
11:03
哎,那么你在哪个环境下,你比如说你在这个环境下去发的,他就会帮你把这个地址补齐。啊,自动补齐,而在我们的小程序里边,它是不会这样的,所以大家看这写成这样不行。那也就是意味着我们需要去写一个完整的URL地址是atvv对吧,啊local啊host,然后呢,3000。哎,那这呢是一个完整的URLOK,那来到我们的模拟器里边,咱们再看。好的来,那这个时候呢,大家看一下啊,在这里呢,好像报错更多了一样。啊,这里说了啊,说你这个地址呢,不在以下的request合法域名列表当中。啊,那这是啥意思呢?注意啊,在我们的小程序里边,你要发请求的话。
12:03
那么你对应的服务器的域名呢,必须要先去备案,就是在他的域名列表里边去注册,否则的话他认为你就不合法,那如何去注册呢?来,来到我们小程序开发后台的主页,诶这个页面就是登录进来这个页面。那么在这里呢?往下我们还得来到开发啊。找到我们的开发设置往下翻大家看啊,这里呢,有一张叫服务器域名。然后呢,在这里呢,我们可以去配置一下,开始配置,那你要配置的话呢,你需要去验证一下你的身份啊,那这个时候呢,我还是用我的手机微信呢,去扫一下码。OK,那现在呢,进来以后大家要注意哎,其中第一个就是request合法域名列表,那现在呢,是后期又改版了,之前的话它是一个纵向排列的,那么现在呢,如果说你要配置多个域名的话呢,你需要用分号去分割。
13:04
那这一点呢,特别像我们WIN7里边去配置那个环境变量一样,对吧,用分号去隔开。好,那如果说啊,我们接下来要请求的服务器是这个local host3000,那我们就应该把这个加进来。只不过现在我们加也没用啊,这儿说了该域名协议头非法,为什么呢?来来到刚才我们看到这个微信的request,这大家看啊,这个方法呢,只能发起HTTPS的网络请求。啊,那在这儿呢,给大家说一下啊,小程序。请求的一些注意事项,那么对应的相关说明呢,在这里我们可以访问一下啊过来。啊,这里面的东西比较多啊,我们没有时间呢,一句话一句话去看,我直接给大家挑着动重点的去说,啊先往下放来,我们去找一下这呃,这一句话。
14:04
先来看这这里面的几个注意事项啊,那在这。第一个我们用这些方法,你比如说发请求要上传或者下载文件,他们的域名呢,只支持HTTPS,那这个呢,是因为它为了安全。HTTPS协议,我们都知道它比HTTP要更加安全,因为它加密协议,那么除了这些呢,还有就是每个接口呢,最多可以配置20个域名。啊,也就是说你在这一次配置的时候不能啊。啊,没有上限的去配置啊,最多配置20个,还有啥呢?还有一个比较重要的啊,注意啊,这些方法的最大并发限制是十个。那也就是说你同时发送请求的个数千万不要超出十个,否则的话,那肯定会有一呃一部分请求呢,它会失效。
15:02
OK啊,因为它呢比较重要啊,我也给大家总结在我们的呃,课堂笔记里面啊,来打开我们的课堂笔记。OK,那现在呢,已经启动了啊啊,我们在这个小程序相关里面啊,在这里我去给他去总结一下。好,那现在呢,应该第三个就是企业后端交互对吧?啊企业后端交互。嗯。第一点啊,那我们用到的语法呢,是微信点request,然后呢,我们说一下这个注意点啊,那首先我们的协议,那它呢,必须是什么叫HTPS协议对吧?然后呢啊,它最多也说一个接口呢,嗯,最多配置多少呢?配置20个域名,就是刚才我们看到的。
16:00
那么还有什么呢?啊,就是它的并发限制啊,上限是多少呢?上限啊,啊是十个这一点呢,咱们都要注意。好的,那这个我们知道了以后啊,那回头再看,那现在我们在这儿配置没啥用,因为我们本地的服务器用的是HTTP协议。嗯,那这个大家不需要担心啊,因为你们在企业里面开发,如果要做小程序的话,你们的后台人员一定会给你提供什么HTPS的接口。哎,那就是这个在这儿呢,它有一个小细节做的挺到位的啊,大家看,即使说你忘了写分号,它会自动给你加一个去隔开。OK,现在既然配的没用啊,没用,那我们要干嘛呀,我们就没有必要配了,那回到我们当前的下法,如果说我没有必要配了,那我的请求是不是就发不出去了呢?对吧。哎,那这个时候呢,大家看啊,他也考虑到这一点了,在我们开发过程中啊,如果说后台的接口没有完善的话,或者不能为我们提供attps协议,那我们要发请求怎么办呢?注意在我们的详情这找到我们的本地设置,这里呢有一项叫不叫业合法域名,哎,也就是说我们告诉我们的开发工具,我发请求的时候,你别帮我叫业这个地址是不是合法。
17:30
这个应该能懂啊,我们需要将它勾选上啊,注意那这个时候呢,它会重新去编译,而且大家看啊,再次发请求呢,就成功了,并且呢,我们已经拿到了这个数据啊,你看data里面,哎,这不有balances吗。OK,那现在啊,我们已经成功的进行了一次前后端的交互,那对应的注意事项呢,大家看。我这给大家列出来了,那还有一点呢,就是啊,我们开发过程中啊,可以干嘛呢,去设置啊,不校验我们的合法域名,那么对应的在哪呢?就是开发工具啊,然后呢,我需要大家去找到什么,找到这个详情。
18:16
啊,右上角的什么啊详情,嗯,然后啊,点击什么,你看我们找一下详情里面的本地设置对不对。来给大家列到这儿。嗯。嗯,然后呢,设置这个不叫液。即可,OK,那这是这个啊,这是这个,那这个呢,要注意啊,可能有的小伙伴上来时候不知道咋弄了,发不出去,请求你就看这那我给加粗一下。好的,那这节课呢,我们主要是去进行了一下这个企业后台的交互啊,并且呢,我们成功的拿到了数据来,那本节课呢,我们先讲到这里。
我来说两句