00:00
好了,各位做完了todo list这个案例之后呢,我们按照课件上的顺序啊,继续呢,往下推进,我们进入第四章的学习,叫做react adjust啊,诶,我开一下画笔啊,走,也就是研究一下在react里边如何发送adjust请求,我们读一下这几句话啊,首先第一句,React本身只关注界面,并不包含任何发送adjust请求的代码,或者说不包含任何关于adjust请求的封装,也就是说你别指望着它有这种API react.get然后你传递一个URL啊,好像你就能发送网络请求了,没有这种封装根本不存在的。好,我们再读呢,第二句话,前端应该通过adjust请求与后台进行数据的交互。React,没有封装adjust,你还确实需要写adjust啊,请求去进行前后台的数据交互,那你觉得接下来怎么办呀,你想用它没有,那就得诶要么引入第三方的adjust库,要么呢,你自己封装一个啊说老师那第三方的呀,我都知道有各种的是吧,各种各样的都能用,那么自己封装怎么写呀?哎,同学,这是之前的一个课程,如果想了解的小伙伴呢,可以去鼓励学院看一下我们上硅谷所出的adjust请求的那个课程啊,单独看一下,那里边呢,有老师带着大家写了一个封装,那么说一下啊,同学,如果在公司里边真实开发呀,没有人自己去封装,因为一呢耗时,二呢你封装的也不一定完善啊,已经有了一些成型的第三方库,专门去解决这个问题了,对不对啊,那常见的有哪些呢?首先第一个大家学过的是JA query,但是特别不建议大家在react里边使用JA query发送网络请求啊,或者说这请求为什么呢?同学你想一下你为什么学react。
01:47
是不是尽可能的减少自己去操作DOM呀,对吧?咱在react这个课开篇的时候,是不是就跟大家说了,尽量减少自己去操作DOM,你只是更新状态,改数据,React呢,帮你转成虚拟盗墓,进而转换成真实盗墓,然后放到页面对不对?同学你想啊,React的核心就是你别自己操作盗墓,你却在react里边引入了一个专门用于操作DOM的库,这query你觉得合适吗?
02:15
啊,这是第一个问题,第二个呢,就是JA query它比较重,JA query这个库呢,其实挺大的,哎,所以说不太建议呢,你去用它,OK啊说老师那建议用谁呢?用这个人A,如果说听视频的各位对HS根本没有了解,那么我给你一个建议,可以把我现在react的视频呢暂停,你先停到这一章节,你把前三章学好了就行,先停下来去,我们鼓励学院把ares这门技术相关的视频呢都给它过一遍,你必须得掌握,咱们接下来呢才能愉快的玩耍,OK,毕竟现在是在讲react是吧?哎,不可能在这儿呢,哎,穿插着给大家,哎讲好长时间的,对吗?啊在开篇的时候也跟大家说了,是我们要求的一个前序的技术站,你必须得会了才能再听,OK,好,Anxious呢,就比较轻对不对,我们建议使用,那学过A的小伙伴呢,都知道,其实呢,也是对叉mlhttp request这个对象的封装对不对,然后呢,最主。
03:15
主要的是啊呢,它可以使用promise,也就是本身它就是promise风格的API,它返回的时候不是把真正的数据给你,给你返回了一个promise实例对象,对吧?那关于呢,不知道听视频的各位还能不能记起来了,必须得对promise特别熟,OK,要不你也玩不了啊,然后再读第三个啊,可以在浏览器和服务端双端运行啊,也就是说呢,在服务器端能不能用啊,也是可以的,哎,所以说一句话,同学在react里边,我们建议大家呢,用as去发送网络请求,OK,好,那咱就发一下吧,那么这样注意了,接下来呀,我的操作可能会比较多,我速度呢也慢一点啊,然后呢,大家呢,也可以一步一步的跟着我操作啊,首先打开src,东西都准备好了,这是APP组件里边没有用到任何的组件,对吧?哎,这是一个index啊入口文件,好了同学,接下来我要干嘛呀,我想发。
04:15
发送网络请求对吗?好了,12A用谁呢?X安装它走起。也不大啊,也很快就安装完,稍等。稍等好嘞,安装完了对吗?那我是这么想的啊,同学,我在APP组件里啊,我直接写东西,同学,注意,现在我们想练习的并不是什么组件化编码,知道吧,我现在想练习的是as的使用,主要其实想给大家讲什么呢?讲脚手架里边如何去配置代理,慢慢来啊,有一个按钮叫做点我获取数据,获取什么数据呢?获取一些学生数据,或者把一些删掉,精简点写点我获取学生数据,那么就得给他来一个on click对吗?走this.get student啊,Date学生数据嘛,是吧?复制定义这个方法啊,走复制语句箭头函数,那在这怎么办呀?是不是发送网络请求啊,那你得用谁发呢?所以说引入I from好嘞,那。
05:31
发请求吧,As,我想发送一个GI请求,那我得怎么写呀?是不是点GI就可以了呀?这是不是得配上一个地址啊?哎,就是往哪发送请求对不对?请求如果发送成了,同学,你要知道的是X发送完请求返回给你的是一个promise实例,你想取到它成功的值啊和失败的原因,你是不是得用点Z呢?哎,然后里边是不是指定两个回调函数,我这有代码片段,直接写了第一个叫做成功的回调,成功的response响应以及失败的arrow错误,对吧?那如果成功了,我来一个colo输出,叫做成功了,然后输出谁呢?Response,那我们也都知道H的封装并不是把服务器返回给你的数据全放在response里了,而是放在response.data这个属性里,对吗?
06:22
哎,所以说各位A如果没学呢,没有办法接下来继续的玩耍了,OK啊,来consolo如果走到这儿呢,那我就说失败了对吧?那为什么失败了呀?哼,为什么失败了呀,来在这儿是不是得输出一下错误呀?好,那同学问题来了,我给谁发请求啊?是的啊,请求发给谁呀啊?同学是这样的,注意啊,接下来请求发给谁呢?给一个服务器发,这个服务器呢,我提前给你准备好了,那么声明一下啊,接下来你看到的代码都是node.js相关的代码,如果之前学习过node JS,小伙伴呢,是能看懂的,如果没学过node JS啊,老师我没有学过那些,比如说什么a price呀啊,这些框架的使用也没关系,你只是按照我所说的步骤,能把服务器启动就可以了,也就是说目前我们面临一个问题,我想发请求,但是我不知道给谁发是吧?啊说老师给百度发给谁发,不不不给我们自己的服务器发,那么问题是那个服务器在哪?你一定看好了,同学注意啊,我把VS扣的最小化,我把课件最小化好。
07:39
在哪呢?在这儿react全家桶给大家的资料啊,这里边有一个其他,注意不是所需服务器在这儿呢,其他有一个测试的服务器,专门用于测试代理的服务器,什么是代理?咱还没跟大家说呢,是吧?别急,打开这个文件夹,这是一个用node JS哎,加上谁呢?Express这个框架为大家搭建的一个服务器,如果你有之前node和a price的功底你能看懂,如果没这功底没关系,你知道怎么启动就可以。这里边你需要关注的只有两个文件,一个叫做server1.gs,一个叫做server2.gs。
08:24
那么他们的里边分别写了什么呢?同学,我们先看SERVER1 server2,目前我们不用,OK,好,那我把这个文件夹呢,用Vs code打开。好,这个VS扣的呢,我不全屏,哎,我想让你呢区分一下,让你知道一下啊老师我知道是吧,目前这个没有全屏的VS扣的打开的是什么代码啊,是服务器那边的代码,而不是我们的这个。哪个呢,这个东西。诶,不是我们的这个,哎,前台的这个东西啊,脚手架,而是这个,哎,这是服务器里的东西。好,来同学首先看SERVER1,它里边干嘛了?代码其实非常的少啊,这个目录呢,我关一下来,引入了a price这个框架,创建了一个APP服务对象同学,接下来我在这个文件里所说的东西,就算你一句也听不懂,同学也不耽误你去学习react里边如何发送adjust请求,以及配置代理,好吗?啊,说一下这儿只要有人请求,服务器一就会输出这句话。
09:28
啊,代码呢,可能有些同学看不懂对吧,那同学为了演示问题,我得写服务器吧,那你又没学过服务器相关的东西,所以说呢,同学不用去考虑代码是怎么个情况,你听我口述明白哪一句是干嘛的就可以了,OK,由于这个文件呢,叫做SERVER1。哎,那所以说呢,我就称之它,为什么呢?服务器一,只要有人请求服务器一,这句话必须输出,如果懂的小伙伴知道我在这儿呢,其实用了一个全局的中间件,对吧?咱不提这些晦涩的概念,只要有人请求服务器一,OK,这句话必须输出。好,那服务器一呢,有一个后端配置的路由,哎,如果你学过express,你也明白什么叫后端路由对吧?哎,你如果访问的是students,那么他就会给你返回一些学生的信息,我创造了一些学生的数据,Tom Jerry Tony,对吧,18 19 20id也有,然后呢,通过这句话就把数据交出去了。
10:31
啊,然后这是干嘛的呢?这是启动服务器的代码啊,服务器一启动了,如果成功了,就会输出这句话,然后后边跟上一个地址,说请求学生信息的地址,为我怕大家呢,没学过服务器,不知道这地址怎么得到,我直接给你输出了OK local house的5000STUDENTS就能得到学生的信息,说老师那我请求一下呗,是吧,我试试老师,那这是什么请求啊,说一下,由于我这配置的是get,哎,所以说是get请求应该叫做get啊,咱学那个版本控制叫做get,这个请求方式叫做get OK啊说老师那我试一下吧,我去请求同学,不行的,因为你的服务器还没开启呢,那怎么开启这个服务器呢?非常简单,来到终端,目前你是不是在这个文件夹里,你是不是想执行SERVER1这个点GS呀,随着接下来看我的操作nodeserver1.gs回车,恭喜你服务器开启成功请求。
11:31
学生信息的地址为local host 5000students来我们测试一下,同学复制,我想测试一下这个地址好不好用,同学,人家要的什么请求啊,Get请求,所以说浏览器默认发送的请求,你在地址栏里边敲一个东西,敲回车,同学,我问你发送的是不是就是get请求?OK,好,而且我刚才还说了,只要有人请求服务器一这块是不是得输出东西叫做有人请求服务器一了,对不对,好了,我们试一下啊,在这呢,我敲一下回车。
12:03
同学,人的数据是不是回来了,001TOM啊,Jerry还有TONY1089啊,这写个一百二是吧,哎,说老师你这数据咋这么好看呢?因为我用了一个插件叫fe helper前端助手,它有一个功能,就是能够帮我们自动的整理这种Jason格式的文件,如果你不用它呀,你看到的样子很有可能是这样的,来,我把这插件呢,给它停一下,然后呢,你再刷新一下啊同学,我先不刷新啊,我先不刷新,我没点刷新呢,我刚才请没请求服务器一请求了,给没给你学生的信息给了,回到这儿,同学怎么样,是不是说有人请求服务器一了,说老师那怎么两次呢?啊,那是这样的,有的时候呢,你用这个东西去请求,他可能会给你刷一次,那我们最后来测试一下,同学,现在刷新没有那插件了,对不对,也没有人帮我整理这一堆Jason了,是吧?好了,那你看着啊,我停掉服务器1CLS清空重新运行服务器一同学有人请求服务器一吗?没有,接下来注意了,我刷新数据是不是新回来的,看是不是有。
13:03
有人请求服务器一了啊,我建议大家呢,把这个插件给它装上,叫fe helper OK啊比较好用,来你刷新一下,你看就能帮你整理好格式,那我又请求了一次,是不是有两次呀,哎,有的时候呢,他帮你整理格式,哎可能发现格式不对,他可能哎又帮你请求一次是吧?哎,好了,数据是不是能回来,同学也就证明我的服务器是不是可用的接口,是不是可以返回数据的,对不对,好了,服务器开在几千呀,5000你得访问什么呢?Students你访问别的不行啊好嘞,同学来注意看啊,接下来呢,我做一件事,我把这服务器停掉,我重新再开启。那截止到目前,我问一下有人请求服务器一吗?没有啊没有好,我把这地址呢,给它复制过来,浏览器啊,我关掉。好同学,谁已经就位了呢?服务器一已经就位了,服务器一能给你提供什么信息呀?一堆学生的信息,OK,那服务器一我也是启动的状态,地址呢,我还给你了,我们也测试了对吧?一切的准备性工作是不是都做好了呀?那回到我们前端的代码里边,同学,这地址咱有了,之前没有,这回有了,来吧,往哪儿请求这儿对吧,请求5000,然后得到什么呢?一堆学生的信息,好了,同学保存一下,那接下来呢,启动我们的,哎,脚手架走看效果啊。
14:28
稍等浏览器会自动打开的啊。来,注意控制台呢,我也给你打开,同学,我们回到服务器里,注意回到服务器里有人请求服务器一吗?没有对吧,没有好来同学,接下来我点这个按钮,注意我还没点呢,点的时候我会告诉你,接下来我点这个按钮的时候,你说是不是会触发get student date,是不是就会as.get发请求,对吧?哎,然后点I这些对不对?好来我们试试啊,看看行不行呢?来到这儿走,首先注意观察,报了一个错误,你都见到这个东西了,明晃晃的写在这儿了,同学,你发生了什么问题,你跨域了。
15:11
那么关于跨域,不知道听视频的各位能回忆起多少?对吧?哎,那跨域的本质是因为同源策略的限制,那么同源策略到底规定了什么呢?如果在座的各位忘了一定看一下我们之前啊所出的视频啊,也是在adjust那个课里边讲的关于跨域问题,好吧,简单说,同学,你目前所处的位置是不是local house的3000对,你想给谁发请求呢?你是不是想给local house5000发请求,那我就问一下吧,我就问你一下啊,你所处的位置是3000,你给5000发请求,你觉得adjust引擎能允许这事儿吗?不能允许,那我想多问一句同学,到底是因为跨域我的adjust请求不能发送,还是说因为跨域我的adjust请求能发送,但是数据回不来?
16:01
你这一定得说明白了,到底是发都不能发,还是说其实发是能发的,你的请求已经送给服务器了,但是回来的时候啊,加引擎不让你的数据回来,那说一下答案是发是能发的,但是数据回不来,怎么证明能发呢?同学,咋样?是不是有人请求服务器一了,如果发都没发出去,我问你那这个输出是哪来的呢?对吧,同学。哎,OK,那么这问题怎么解决呀?是吧,同学,只要你所处的位置是3000,你只要给5000发,不说别的端口号都不一样,这个请求不可能让你回来数据的,那怎么解决呀?那说一下同学,我们在react脚手架里呢,通过代理去解决。那代理是什么东西呢?我们怎么理解这个代理呢?同学,你所处的位置3000哈,好了,我详细的给你说一下啊,这么写,这是你的客户端,英文名叫clint啊,然后呢,这是服务器。
17:02
哎,英文名呢叫做server,你客户端所处的端口是3000对吗?好,服务器所处的端口是5000对吗?好,当你发送adjust请求的时候,由于你的CT啊,你这个客户端是浏览器,那所以说同学们注意看啊,当一个请求被送出去的时候。你肯定要会经历adjust引擎,Adjust引擎呢,看了一下说,哥们,你在3000啊。你找5000是吗?行,我让你去,其实是放行的。是放行的,到达了服务器,但是当响应往回回的时候,你的adjust引擎直接就把本次响应拦在外侧了,说你别回来,你走开,为啥呢?因为你跨域了。哎,你在3000,那你访问5000不能让你回来,那咱说说怎么解决啊,所谓的代理呢,就是出现一个中间人,哎朱莉啊代理中间人。
18:05
哎,我写一个中代表中间人,那么这个中间人呢,你注意啊,它也是开在3000端口的,这个是一个特别重要的点,同学中间人也是开在3000端口上的。你3000端口跑着一个脚手架,3000端口其实也开着另外的一台非常微小的服务器啊,微小的服务器,然后呢,是这样的,你所处的位置是多少啊,3000,那你给谁发请求呢?你注意。你所处的位置是3000,你还刚好就给3000发请求,那么加引擎一看,哎呀,你所处3000给3000发行啊,然后这个代理服务器注意了,就把你刚才的请求转发给了5000,然后呢,5000给他的东西他也会收到的,说老师那这一步怎么允许收了呢?这不也是所处是3000给5000发,那这一部数据怎么能回来呢?因为这个代理啊,就是咱说这个中间人,他没有adjust引擎。
19:03
你产生跨域本质问题是adjust引擎是吧,把你的响应给拦住了,那么中间人呢,他是通过请求转发的形式,没有adjust引擎,所以说也不存在跨域这个问题,同源策略压根儿不限制它,所以说数据A就回来了,回来之后呢,他再把东西哎交给你的浏览器,那么浏览器的adjust引擎呢,是在这个区域的,他发现哎呀,你所处3000,你给3000发,那3000还回来数据了,OK,放行同学,这就完事了。啊,同学,你觉不觉得其实就是这么一回事,你自己办不到的事儿,你托别人把这事办了对吗?啊,举个例子,你直接找5000,哎,他也理你,但是就是不给你办事儿,但是呢,哎,你找了一个人,哎中间人,你说你去帮我谈吧,诶好了,所以说这就是代理啊好了,那怎么去开启这个中间的这个中间人代理服务器呢?啊那在react里边呢,有两种方式,我先给大家讲第一种,最简单的一种,然后再给大家讲第二种,OK,好吧,同学来第一种配置的方式就是。
20:15
同学注意啊,来,我服务器一是不是开着呢,停掉清空一下,重新开启,我为了让它干干净净的啊,干干净净的好,同学注意看啊,复习一是不是开启了,好。把这个呢最小化,接下来呢,我把这关掉,我告诉大家如何去配置代理,有一个最简单的方式啊,你注意关掉,来到package.jason中,package.jason呢,你那个东西一打开呢,可能是这个样子的啊,你注意看就都打开的特别乱,你这样把能折叠的呀,这种子选项全都折叠,全都折叠,你在最后呢,同学注意补一个小逗号,然后加一个东西叫做proxy,这个东西本身就有代理的意思啊,然后呢,这么写,想把请求转发给谁,直接写http local host转发给谁,5000,因为我的服务器是开5000的,对吗?千万千万不要再往下写了,老师转给5000的students,不要这样写,不要这样写,这样写就写死了。
21:21
啊啊dent是吧,啊den啊students不要这样写,这样写写死了,同学们,你想一下,5000如果你返回的不仅有学生的信息,还有老师的信息,还有课程信息,还有寝室信息,那你在这一写死,那不就只是学生了吗?所以说千万不要在这儿啊说再往下写,只写到服务器的地址,Local house 5000只写到端口号就停好说老师,那接下来呢,那我说一下你这句话一加不要紧,你听我说。你所有发给3000的请求啊,就都转发给谁了呢,5000。好,我们试一下啊,同学关掉,说,老师现在是不是就能用了呀,不能,同学你是不是改了package点儿Jason文件呀,必须把脚手架停下,必须停下。
22:09
然后呢,重新开启你刚才写的这句话,它才奏效,等着让他开启浏览器。稍等开启了吧,好,来到这儿,如果说能发请求我再发一下等等,现在不能发,同学,你现在发了依然有跨域的问题,为什么呢?你回到你的代码当中来,我问你,你所处位置在哪儿是吧?3000 OK,你要给谁发?嗯,你要给谁发5000同学,呃,Just,引擎能让你这次响应回来就怪了。你不还是站在3000吗?你不还是给5000发吗?那问题不依然存在吗?是吧,所以说就看你理没理解,刚才我所说那图,这是客户端来,刚才咱客户端呢,用的好像是蓝色的,说哎,客户端cleanlint,哎,这红色的谁呀?服务器对吧?中间那个代理同学是开在几千的呀,代理呀,是不是开在3000的,也就是说兄弟你得站在3000给谁发呀,给3000发完了3000再给你返回数据,那3000的数据是哪来的呀?其实也是服务器那边给的,对不对?所以说同学你应该把五改成几啊三,哎,这回就对了,说老师我就不改,我就写五,那你看一下吧,数据能回来那是不可能的啊走,这不还是挂域吗?那如果说你不写五,你写3A来吧,同学看一下效果,走学生数据啊,是不是回来了,OK。
23:41
哎,那咱说一下啊,说老师是不是我要这么写,就是所有的请求都发给5000呢,是吧,老师我这么写,你看我写的是3000,完了,经过了代理服务器,是不是所有的请求都转发给5000呢?不是同学,那我问你啊,如果我的服务器收到请求了,是不是得输出这个东西,有人请求服务器一了呀,好,你注意观察,我停掉服务器,清空,让它干干净净的,然后我重新开启服务器,一有人请求,这是不是就得有输出好嘞。
24:13
那您注意看啊同学。3000STUDENTS哈,哎,来123走,学生数据是不是回来了,回到服务器的控制台,有没有人请求?诶,还真有啊,同学你注意啊。我接下来写这么一个东西,你注意看我请求3000下的index.html保存。大家注意啊,服务器上的输出是不是还是刚才我请求的那次的输出,没有新的输出对不对?好来注意看啊。清掉控制台上的东西,刷新一下,接下来点我获取学生数据走,同学,你获取的是学生数据吗?啊,是吗?不是,同学,你觉没觉得你把啥拿到了?觉没觉得你把脚手架public文件夹下的index atl拿到了呀?
25:04
那看一下吧,你说这个index.html是找5000那台服务器要的吗?啊,是吗?根本不是,你回到5000这台服务器,你看同学有第二个输出吗?没有,那我的请求也是成功的,也是回来数据,那这数据其实是请求哪回来的呀?看你的代码是不是3000下的index.atml啊。诶,你需要注意的是,这个public文件夹其实就是3000这台服务器,也就是脚手架帮你开启的那个DV server那个服务器的跟路径,你请求index.atml同学,3000有啊,3000有的资源,3000就不会再转发了,你不发请求了吗?OK啊,你请求的是3000有的,OK 3000就不转发给5000 5000这也收不到东西,但是如果说老师我请求的是index2.atml来吧,你现在看效果啊,服务器这是不是还是一个输出呢?好来走。
26:07
回到页面。点击获取学生数据,走同学这报404是正确的,因为你想啊同学你回到这3000下有index,但是它有INDEX2吗?没有对吧,没有好了,同学没有那3000没有INDEX2 3000就得把请求转发给谁说哥们你看这不行了,我这没有了,你得问谁去,是不是问5000。那我问一下,理论上5000是不是得收到一次请求,那你瞧吗?收没收到,收到了说老师,那为什么不给我东西呢?因为5000也没有INDEX2 OK,所以说同学们你配置了这个东西,回到你的前台代码,你配置了这个东西,并不是说所有的请求都转发给5000,一句话3000没有的再转发给5000老师,那我想问一下,刚才你请求学生数据students。那为什么就转发给5000了呢?很简单呀,因为public里面没有students,如果public里边有students,那也不转发给5000了,直接就拿3000的那个students OK,好同学,那么刚刚我给你讲了脚手架里边第一种配置代理的方式,配置代理解决跨域,OK,你不配置就没有办法解决这个问题是不同学不用做笔记,我单独给大家已经写好的笔记,一会儿马上在下一小节你就会看到写的非常详细,这小节呢,我们先停一下。
我来说两句