00:00
好嘞,各位githup搜索呢,静态的这个组件呢,我们实现了,接下来呢,加交互,那着手点应该在这儿对吗?点击搜索这个按钮,获取用户的输入,然后呢,发起网络请求,你去问giitth HUB啊,比如说用户输入的是ABC,你就问giitth HUB,关于ABC相关的用户都有哪些呢?他就给你了,给你之后呢,诶,你就展示到下边这个列表,这是不是就可以了呢?好,那我们先做点事啊,我把这些呢,想给它改成中文的啊,咱不用英文去写,那么回到我的代码当中,找到search组件,来到这儿啊,这儿呢来走叫做搜索github用户啊,然后呢,再往下看它,这应该有一个提示对吧?哎,叫做输入关键词,点击搜索,然后这呢,不叫search啊,叫搜索就看起来能好一点啊,回到页面看效果,OK,都改了是吧?嗯,来吧,同学,是不是得从按钮的点击事件开始聊起?
01:00
那回到代码当中,找到那个按钮在这呢,是吧?哎,回车,那给它来一个on click走方法,起个名字吧,就叫search可以吧,哎,this.search定义好这个search走复之语句加箭头函数,那在这里边干嘛呢?其实就做两件事,第一件事儿,获取用户的输入啊输入啊输入好,那么第二件事呢,就是发送网络请求。好,来吧,首先获取用户的输入input在这呢,是吧?同学啊,给谁绑定的click事件呀,Button,但是我却要获取谁的数据input,诶,那么接下来你抉择一下子,要么你用ref,三种写法你都能写,要么你不想ref,你做成受控表单或者受控组件是不是也行?我在这儿呢,我先简单写一下,我写ref,嗯,但是呢,同学注意了,我不写字符串类型的ref啊,我写什么呢?回调形式的怎么写了?还记得吗?C箭头,然后this点写吧,往this身上挂那个属性叫什么名字,这是你自己起的啊,比如说呢,输入的毕竟是关键词,所以说我就叫做keyword,但是不想写到这就结束。同学,你在这写了个keyword就容易误导人,人家就以为this身上放的那个keyword本身就是关键词,其实不是同学,它是关键词的那个节点,对不对,哎,如果你想拿到值呢,还得点value。
02:32
那所以说呢,同学我不叫keyword啊,我叫keyword element或者叫nod也行,嗯,Element就代表它是一个节点,OK,那所以说来吧,获取用户输入怎么获取啊,Costa结构赋值等于this点你是不是放的叫keyword element,或者说我先不解构赋值,同学我就想输出用户所输入的关键词,你就告诉我怎么写吧,this.keyword element点是不是value啊,OK,那这回呢,我们试一下啊,回到页面看效果,用户输入的是123,点击搜索a andde find来吧,你说这问题出在哪了呢?啊,回头来看看走啊,点value值,首先你得确定啊,你用的确实是回调这种形式,那确实得点value啊,发现这啊,Value是吧?哎,好了,那这回呢,咱再看一下输入123走哎,你看怎么样?所以说啊,你小心着点,来这稍微放大一点啊,你别写了一堆代码,一点都不点是吧,哎,点一点说不定哪。
03:32
都有问题及时更改啊,好了,刷新这是没问题的啊,123走OK了,那接下来呢,那就发送网络请求呗,但是别急,同学在这儿呢,我给你讲一个哎,比较有意思的写法,同学你告诉我啊,我想通过解构赋值的方式拿出Y怎么拿。啊,是不是得这么写呀,各位cost走this.keyword element拿谁呀?啊拿value,然后我再输出谁呢?Value可以吧,这么写也没问题的啊,回到页面看效果,我输入456走,456是不是也能出来啊,是没问题的啊,你整体刷一下它也没问题,456走是吧?可以的啊,那回到这儿说老师这结构赋值谁不会呢?哎,你注意看啊,同学。
04:21
我想解构赋值连续写。也就是说,把好几个结构赋值连在一起写。你看着啊同学,首先this是一个内置的对象,它身上有一个keyword element这个对象,这个对象身上还有一个value属性,我这么写就是常规结构赋值,明白不常规结构赋值,结构赋值能连起来写的叫连续结构赋值,怎么写呢?瞧着。我这么写大家能看懂吧,从this身上结构赋值是不是拿出keyword element,那你想输出值,你是不是得这么写啊,Keyword element.value啊,是不是还得再拿呀?啊,那看一下啊,能不能用刷新123走是不是也可以啊,还可以用好我想连续写怎么写呢?从this身上结构赋值出来的这个keyword element,它还可以继续解构赋值怎么写啊,看着在这直接写冒号,画括号,写上Y6,然后你在这儿呢,就直接能用这个Y6了,直接就能用这个Y6了,来再看一下啊,刷新输入qwer,点击搜索行不也行?哎,这就是解构赋值的连续写法。
05:35
啊,那我想问一下同学,你说value能输出,这个keyword element还能不能输出了,也就是说它在解构赋值的时候,是最终定义了一个value这个变量,还是说keyword element也定义了,Value也定义了呢?对吧?啊,你要是直接写到这儿的,那我可以说非常肯定的说怎么的,你肯定定义了keyword element这个,如果this身上还有别的,你比如说有target给等等这些是吧,那肯定也是定义这个变量的了,但是刚才我是连起来写的,你瞧吗?是吧?那这个keyword element它到底是有没有定义呢?是吧?有两种情况,一呢是把这个也定义了,这个也定义了,第二种情况就是这只是一个写的过程,并没有定义它。好了,我们用事实说话,回到页面里边刷新走,他说keyword element is not DeFined啥情况?
06:26
同学都已经出现这个提示了,你说啥情况就证明这个人他没有定义,OK,所以说结构赋值连续写法,嗯,那就是这么写。如果你的value还是一个对象,你可以继续的写下去,来那给大家呢,临时写一个啊demo.hdml来,我们试一下写一个简单的小例子,写一段小脚本啊同学看一下let OB BJ啊,它本身就是一个对象,对象里边呢有一个A啊,A的值呢,它又是一个对象啊A里边呢,这个对象里边有一个B啊B的值呢,又是一个对象里边有一个C,然后呢,是一好同学,我想把那C取出来,咋取呢?正常写法OBj.a.b.c是吧?哎,点a.b.c好了,右键看一下走,这就不跟脚手架发生关系啊,我就直接自己写了一个点atml右键打开的对不对?好能取到C,那如果我想用结构赋值的连续写法,我怎么拿到这个C呢?等于走不是Z思了是吧?是OBBJ拿谁拿B,但是B里边还有A里边啊拿AA里边还有谁,还有BB里边还有谁。
07:37
诶,C,好,你这么写,再来Co log c,那当然我得把这块呢给它注掉,防止它产生干扰是吧?来回到代码当中刷新是不是也是一,哎,OK,这就是属于连续结构赋值,好同学,那既然都聊到这儿了是吧,那就再进阶一下来同学啊,这叫连续结构赋值,然后呢,连续结构赋值还可以再改名,啥意思呢?举个例子啊,同学,我不给你套这么多层,我再来一个叫OBJ2,那叫OBJ2,然后呢,我这么写啊,OBJ啊,它本身就是一个对象,对象里边有一个AA的值是个对象,对象里边有一个BB的值是一,那同学我想连续结构赋值把那个B拿出来,我得咋写?首先结构赋值取到A,对A进行继续的结构赋值,是不是拿到B了?好,那你说我接下来是不是可以colo这个B啊,嗯,邮件。
08:37
打开控制台上键啊,刷新一波一是不是拿到了?好了,回到代码当中,同学,我不喜欢B这个名字,我想让B这个名字换一个叫date,数据说老师那你就不要写B嘛,你写date那就完了。同学,因为你看OJR结构赋值拿到A这个对象,在结构赋值拿到date,不好意思,A这个对象里边没有data那个属性,对吗?那有谁呀,有BA,但是我还不想用B这个名字,哎呀,那怎么办呀,你可以连续解构赋值的同时再给它重命名,你比如说我想让B叫什么叫data,注意了,冒号写data好,这输出谁呢data。
09:20
啊,来,我们看一下啊,回到页面当中刷新是不是也是可以的一是不是也能拿到,哎,这就属于连续结构赋值,然后再加上什么呢?重命名哦,可能有的同学知道啊,有的同学可能不知道,那不知道的同学呢,可以拿着小本本记上对吧?这叫连续解构赋值,并且加上重命名的这种写法,OK,好,右键,那我给它先删掉对吧?这简单就不给大家留下了,我就在这写啊,获取用户的输入,这我得写一个括号,叫做什么呢?连续结构赋值,连续啊,结构赋值啊,然后加什么呢?重命名啊同学,比如说我从this身上拿到了keyword element,它也是一个对象,我想拿到里边的value值,但是我不喜欢value,我想把value改个名的冒号,改成什么名呢?啊,叫做keyword啥意思?关键词,Keyword是keyword keyword element是keyword element。
10:21
OK啊,说老师你为啥非得故意绕我呢?不是故意绕你,因为公司里边啊,有的时候比较有经验的程序员,他会写出这种代码,OK啊,那你这就简单了,你直接输出谁就得了,是不是keyword呀?哎,好了,这是一个小点啊啊回到我们的页面里面,当然不看这个了,看我们脚手架的页面啊,刷新一波来输入123,点击搜索,OK是不是能拿得到?好嘞,回到代码,接下来呢,发送网络请求,那走起用谁呢?H对吧?From哪呢?嗯,H好啊,引入了,那接下来发呗,走问题是往哪儿发呀,对吧?给谁发请求?
11:02
然后呢,发送请求的方式是什么?对不对啊,我带着什么东西过去是吧?同学你想想发送一个请求无非就这么几个事儿呗,一给谁发URL对吧?还有一个啥,用什么方式发对吧?还有一个PAR带着什么参数过去对不对?哎,好说老师呢,回到课件里边啊,在这呢,同学请求地址已经给大家了,在这呢啊,你只要请求这个地址get have就能给你返回对应关键词的用户信息啊说老师什么请求没说呀,那直接告诉大家,是get请求,不是post get请求好了,接下来呢,这样咱先别发请求,测试一下这个地址好不好,用CTRLC啊来到这儿粘过来,既然是get请求,那我是不是可以借助浏览器的地址栏测试一下,因为地址栏发出去的不就是get请求吗?这个Q等于叉叉叉什么意思呀。
12:00
Q,等于叉叉叉就是你搜索的关键词,你比如说我搜索的关键词是at硅谷对吧?好了,你敲下车走。哎,Getthu就给你返回信息了啊,哎,信息就都在这儿呢,咱们现在呢,先不用观察这些信息里面代表的都是什么意思啊,你就比如说说老师这URL at ul,咱现在先不用关注这些,同学我问你这请求是不是发了,Giitub是不是给咱数据了,对那我说一下啊同学就这个地址吧,有的时候啊,你如果写代码的时候,你连续啊请求多次,可能gihab认为啊,你这就属于非法请求啊,可能就会,哎要把你这个本次请求就驳回了,就你发现有的时候可能存在一种情况,就是你写着写着刚才还能发的,后来再发I github就不让咱发了,是老师那咋办呢?啊,也有解决方案啊,那什么解决方案呢?那我说一下啊同学如果说呀,你不考虑这个问题,说老师我就直接拿这个,我就复制回到我的代码里,不就是盖的请求吗?那就走是吧,哎放在这。
13:07
啊,我写的模板字符串啊,注意母板字符串,这我不能写死是艾德硅谷啊刀了符画括号,我这里写什么呢?哎,拿到的那个关键词是吧,这输出也不要了啊,我就知道老师这玩意儿发完请求回来的是promise实力,我得拿到成功的response和失败的arrow啊那行在这colo如果你能进入这就说成功了啊,成功了,然后这呢,输出谁response.data a发请求数据不是在data上的吗?啊老师如果到这儿,那我就靠lo输出,我就说失败啊什么的,呃了是吧,哎,逗号,然后是呃,Response,不是response了是吧?哎,是IR行,老师来这回我试试,那你试试吧,其实能发没说不能发啊,回到这儿走,注意了啊,刷新一下页面,我搜索的是艾特硅谷啊,点击搜索等会儿啊,他可能速度会比较慢,同学是不是成功了啊,给没给数据返回返回了,那你就接下来用数据呗,是吧,行,但是我说啥意思呢,就。
14:07
就是可能你练习的时候,你点点点多点几次B直接就变成了一个401啥意思呢?未授权didh不让你请求了,就是你这不玩了吗?你这么短时间内请求这么多次,那不行,你这非法请求是吧,那我们怎么解决的呢?来同学我们这么解决的,就正常来说呢,这个呀,是你的这个。脚手架项目对吧?哎,就是端口号在3000上的这个,然后你刚才发请求联系谁去了,同学,你刚才发请求联系谁去了,是不联系github去了啊,然后你找github要github说啊行对吧,哎,那我就把数据呢,我我给你,但有的时候呢,他可能哎就不给你了是吧?那我们这么解决的,我们单独给大家写了一个服务器在这儿,这服务器开在几千呢?注意这服务器开在5000,哎你去找5000要数据,完了这个服务器呢,哎,5000就去请求github github给5000的呢,哎5000再给咱明白不是这么一个逻辑,说老师,那如果5000频繁的请求github,那github不就也不让了吗。
15:11
哎,那也确实是啊,如果5000这台服务器如果也频繁的请求github,那github不是也给他拒绝了吗?没事儿啊,5000这个服务器我给大家设计了两个接口,第一个接口那是真实的数据,就是确实5000请求了github,真真正正去问github哥们儿,跟艾特硅谷这个名字啊,或者说这个关键词相关的用户有哪些,你告诉我这是第一种是真实接口。啊,还有第二种选择,就是如果有一天githhab拒绝你了,说不行了,你问这么多次我烦了,我不能再给你信息了,没事儿,5000,我写了第二个接口,啥意思呢?我伪造了一些数据,啥意思?比如说举个例子,同学你搜艾特硅谷,正常来说你得问github跟艾特硅谷这个关键字相关的用户有哪些,是不是给我,但是我还有第二个接口,就是我不管你搜索啥。
16:00
我都返回固定那两个人的信息是吧?同学,我们不是为了哎说打造一个真正的这个搜索这个引擎,我们只是说为了练习这个发送网络请求,明白不一句话,GIHUB给咱返回数据,咱就用真实接口,用它给咱的,他如果有一天不理咱了,没事儿,咱5000有一个模拟的接口,对不对?哎,那所以说现在怎么办,你得找到这个5000是吧,我提前给大家写好了,由于呢,这个课我们不是讲解noe和express,所以说直接拿到我的服务器你运行即可,OK,哎,那我说一个细节上的问题呗,同学,我问一下啊,你现在所处的位置是哪?是不是local house3000。哎,你所处的位置是不是3000,对,那我有的时候也这么说啊,不说所处的位置是3000,我说你站在3000,哎,就接地气点说,不说所处的位置,说你站在3000,那我问大家你是不是站在3000,那我问你啊,你刚才给谁发请求了呀。啊,你给github了,同学,你站在的位置是local host3000,你发出去的请求是给api.github.com同学,我问一下是一个网站吗?
17:12
不是,主机名是也不一样,端口号是也不一样,同学,那我问一下怎么没有产生跨域问题呢?那正常来说,我站在3000给5000发都不行,那你站在3000给api.gi发,那怎么就行了呢。那就看你能不能想到这个事儿了,同学,之前咱讲跨域的时候,是不是说了一种后端解决跨域的一劳永逸的办法,是不是叫做cos解决跨域只需要加上一个特殊的响应头是不是就可以了?哎,所以说同学一句话,Giub这个服务器它后端用courses直接解决了跨域,你想一下同学,如果GIHUB这个服务器它不用cos去解决跨域,那就意味着。只有giit HUB他家的网站才能访问这个,那其他编码人员还怎么用呢?是吧,你你创建这个api.giitub本身就是为了方便程序员呢,本身就是给大家用的,那大家可能站在任何的地址给你发请求,对不对啊,今儿可能3000,明天可能3001,那几个程序员可能还6000的,对吧?所以说你必须得用cos解决这个问题是吧?哎,所以说没有产生跨域这个问题,好啊,那咱们就继续聊,说说刚才所提到那个5000在哪儿呢?对吧?同学,我先声明一下,不用5000能不能写这案例,当然能。
18:31
而且还方便呢,因为人家这个服务器用cos解决跨域了,对吧?哎,好了,那说说那个5000在哪儿呢?同学,那5000呀,在这儿呢,你看啊,最小化最小化课件呢也最小化,给大家的资料里边有一个所需服务器,A同学,就这一台服务器,就是我们练习giub搜索这个案例时候所用到的服务器,OK,就在这呢啊双击进去同学不用看里边的东西啊,依赖呀,什么这个包的说明书啊,都给大家准备好了,你需要做的就是CMD。
19:07
打开命令行窗口。啊,这关掉,然后怎么办呢?启动这台服务器,那怎么启动这台服务器呢?N PM start走,那你看这个时候同学他说服务器启动成功了,你瞧啊,给大家准备好的请求github真实数据,请你访问local house的5000SEARCH下的users,说老师那你这个不也是5000返回的数据吗?那你怎么说它是github真实数据呢?因为一旦你请求了这个接口。你5000这台服务器就会找github要真的数据,再把真的数据给你带回来,明白不?哎,如果有一天github不理你了,你只需要在这个请求地址后边加个二就可以了,那你这回请求来的数据你注意了,同学就不是说getit HUB给你的真实数据了,而是我们伪造的一些数据啊,是吧?你就比如说举个例子,同学你搜索ABC,哎,返回这六个人,哎,你搜索q weer也返回这六个人,因为模拟的数据嘛,对吧?哎,好啊,你看请求本地模拟数据,所以说来咱试一下啊,看能不能用了它这玩意儿啊,复制回到网页当中,刚才我们用这种方式测试的谁github真实地址是否可用,那这回呢,测试一下5000这个是否可用,对吗?朱老师呢,也得传参数,也这么传问号,Q,等于艾特硅谷对吧?走,别忘了那个问号啊,走回车同学,你请求的虽然是5000这台服务器,但是5000你看是不也?
20:38
也是找github把数据要回来的,所以说你观察这俩东西同学其实是一模一样的,对吧,只不过这个是你直接找github,这呢先找5000 5000再找github对吧?哎,说老师呢,如果有一天gith HUB不理我了呢,不给我了,也不给5000了,你把users替成USER2,这时候你发现啊,同学我先不在这写,我新开一个,这时候你就发现返回的东西特别快,因为它是一个模拟的数据,你不管搜索啥,它返回的都是这些是吧,来敲回车走,你看瞬间回来啊,说老师那你这里边少东西呀,人这里边这么多呢,那我说一下同学他这里东西再多,我们用的也是那三个,那所以说这呢,其实我给你准备好这三个了,那我又给你配了个ID啊OK。
21:21
好哎,而且它的接口吧,其实有的时候也挺不稳的,你比如说同学我换一下啊,我搜拼音上硅谷,那你这回你看着啊走,同学你看转啥意思,一直在请求中,哎,你看才回来,有的时候还很慢,哎,所以说同学你只要有5000在手,你什么也不怕是吧,所以说把这个复制啊来回到这儿啊走。然后呢,把东西粘过来啊,那当然这样哈,这个问号Q我就不再粘了,我就粘到这儿是吧?I复制来到这儿呢。走是吧,I user问号,哎,这回访问谁了?5000,那你说这回行不行呢?来咱试试啊,回到页面中刷新输入q weer,走,我点搜索了啊,哎呦喂,同学,啥问题呀,是不是跨域了呀?你站在哪啊?3000你给谁发呀?5000说老师,那你那台服务器,你那5000那台服务器你没用cos解决跨域啊,我当然没有啊,同学,我跟你讲啊,用cos解决跨域确实是可以解决,而且加上这个特殊的响应头之后,同学是不是所有的网站都能请求你了?那我和大家讲,其实上线的网站呢,很少有用cos去解决跨域的,知道吧,因为这东西呢存在一定的问题,一旦你加上了这个,那就意味着很多的网站都能访问你了,是吧?老师,那怎么办呀?那你看之前的东西不能白讲啊,站在3000给5000发5000咋的,他不给你数据浏览器不让。
22:55
忘了,那怎么办?配代理呗,是不是啊,来吧,那咋配代理啊同学。
23:02
反正有两种方式,第一种方式你去package.jason中,哎,是不是加上这么一个东西,或者说呢,你用之前讲的比较复杂那种方式啊,那咱不用这简单的,咱用用复杂的是吧?哎,折叠折叠折叠找到配代理这一块,找到这个setup prox,把它复制,然后呢,来到咱们的这个里边粘贴好了,你得改一改了,我也不需要多台服务器,我只需要一台,对吧,确实是转发给5000的API1API1好嘞,完事啊,那给这个关掉啊,那这个也关掉,那同学我问一下你再请求的时候,这是不是就可以写3000下的了,站在3000给3000发3000有代理转发给5000对吗?你只要写了这个文件,必须得把脚手架停一下,完了再启动脚手架啊。稍等。好了,启动了,那控制台呢,我准备好输入点东西,Qwer点击搜索,哎呀,有问题说404,哎呦,这什么情况啊,琢磨琢磨啊,回到这儿,首先确定同学你的5000是不是开着的,必须得确定你的5000是开着的啊,开着的好了,那回头检查吧,啊,3000下的啊,Search啊,完了user s,那你看这他让你访问的是search user4啊,也对,也没问题啊,Local host呢,3000来到这儿呢,检查一下,Local呢,5000啊来到这儿,诶,什么问题呀,同学他咋说404呢?哎,你是不是忘了加这个杠API1呀,一定要注意说我是加在哪了,我加在这儿吧,哎,不行啊不行,一定要跟在3000的后面知道不?哎,必须得写在这儿,然后后边再写你那些东西。API1啥叫前缀儿啊,必须得放在前方,朱老师,要不我放在这儿。
24:52
是吧,那你不行,前面那不是主机名和端口号吗?是吧?紧随这个端口号好了,这回呢,我们再试一下,来刷新一下,输入q weer,点击搜索等会儿,这是网络请求的,比较慢,同学,我问一下数据是不是回来了啊,那你看搜索回来的这些人的都是跟诶q we相关的对不对,这是gih给我返回的真实数据,那再说一个小技巧啊,同学,就是你站在哪,你是不是站在这http local house的3000,你站在这儿还想给这儿发请求。
25:25
你就可以写的再精简一点,同学你看啊,你刚才是不是站在3000,哎,对,你给谁发请求呢呀,你是不是也给3000发请求呢呀,所以说前边这些呢,其实都可以省略了,如果你站在的位置就是你发请求要发的位置,其实这一堆你都可以不写,直接杠API search其实也行,来,我们试一下刷新,再输入艾特硅谷,然后点击搜索等着,诶,数据是不是也能回来,哎,OK,好了,那这一小节呢,我们先停一下,我们只讲了一个事儿,就是发送网络请求,而且这里边儿给大家带出来一个点,就是解构赋值,连续写,加上重命名,好了,这一小节呢,停掉。
我来说两句