00:00
来啊,我们写我们的组件呢,我把这个项目运行起来一下啊,把项目运行起来一下m PM star,我们的服务器啊,应该运行起来了吧,看一下啊,也没有是吧,那来一个NPM。还记得我们服务器监听端口是多少,4000,嗯,没问题。好,下面呢,我们来去写我们的主见啊,从哪开始写哪个都行啊,我们先写注册吧,一样啊。来写我们的注册啊,看看他,诶,他应该是要去,我再点一下那个确认,他要启动一个新的端口。因为默认端口3000被占用了。
01:07
好来了,那下面我去请求那个注册是吧,好,那下面啊,我们要做的工作很简单,是一个什么事情呢?就是我输入输入一个用户名,输入一个密码,输入一个确认码啊,指定一个用户类型,点击注册。我最终是不是要去向后台发请求啊,实际上是要想办法分发那个e action吧,E action咱写好没有,是不是写好了。能不懂,那也就是说啊,我们现在我们的这个组件终于要跟re进行交互了。是吧,那要想跟Du交互,靠它不行,它实际上本质上是个UI组件。
02:00
对不,我们得向它里面是不是传那个函数才行啊。听懂吧,那这里面的写法基本上是一个套路。也就是说,我要在当前这个组件将这一个UI组件包装生成一个容器组件。这个能不能懂好来包装生成一个容器组件,那我要怎么包呢,对不对,哎,要引入一点东西。哎,我在这里啊,这个位置不对。嗯,因为我们是第三方的包,所以在这里对吧?嗯,最好讲究一点啊好来from啊react,它里面有一个函数叫什么connect。而且我们这个里面还需要去引入一个异步的X码,因为我们最终不要发请求吗。这能懂吗?我们已经都已经写好了,来,嗯,点点这格redu还不行,还要再配格redu,有了吧,下面的什么action好在这里面引入我们的什么这个注册的E。
03:25
好,那下面的工作就是把它把它挪下来,再收一下,挪下来暴露一个什么呢?写法非常固定,看的括号,再括号右边的话穿什么,其实这个这个套路啊,非常非常明显,好下面。这里面是传两个参数来着,两个,第一个参数是一个什么结构,写写是state箭头,小括号大括,里面是不是指定我要传的数据,那我现在数据现在确定了吗?没有,我不需要,我现在不知道要读什么数据,最后要需要,但是我现在不知道对吧,现在放着。
04:14
啊,相方,当然你可以展示,传个浪也行,但是函数我们是能确定的。就这一个。这个能不能,那也就是说我向这一个UI组件传了一个什么。Register。那也就是说我当我点击看到这地方啊,我不有个按钮吗?注册按钮它是不是调用这个,它自己内部的这个register没关系啊,他们不冲突,他们放的位置不一样,你说我现在干嘛去啊,是不是调用的函数实现注册的功能。
05:00
你说这个里面复杂吗?真不复杂,说实话,大家看着,其实我要做这个事情无比简单,This,时间progress,时间register,需要什么来着?需要什么看什么,看你的action里面,Action if action里面声明的时候,接受是个什么,由着。这不是你的E吗?就是一个什么着,我手里有没有着。其实就是state对不对,对了,不懂啊,这个地方来看一下。Z点。State。能看到吧,来好,这个一说到这个state,这个state里面其实包含了user name password password to和什么type,而我这个地方啊,其实有点不太好,多传了一个数据。
06:02
Pass what two?能懂吗?同学们懂,也就是说你是说什么事情大家看到啊,我们这个这外面其实我先把这数据取一下,应该哪些啊,User nameme password,还有什么password to,还有一个type。等于谁等于这个有结构嘛。而我最终啊,传过去的不应该是这个U的。对吧?而应该是什么呢?把这个password to给什么去了,这样比较好。所以说你把它pass two传过去了,他也没什么太大问题,不会影响,因为他根本就不读。不嘛,但毕竟不好。能不能就不需要传的就不传。能看到吗?啊好。那我这边也就是这么简单一个事情,是不是就搞定了。
07:04
能看到吧。但是我们这个R啊,这个action还写的不太好。为什么写的泡呢?因为这个地方涉及到一个表单数据的前台验证。能懂吧,那也就是说,如果前台验证不通过,得立马显示一个什么。是不是错误的提示信息?那也就是说,一旦验证不通过,那我去立马是不是要分发一个error message。能懂吗?啊,那我在哪里去写代码呢?有两个地方可以写,第一个在这个前面就可以写,但前面写和这里也可以写,在你发请求之前也可以写,其实我们我们在做练习的时候,我们前面做练习就是在这写的。啊,还记得我们那个有一个用户搜索。
08:00
用户搜索有几个阶段,搜索之准备发请求之前,我是要更新为loading的状态。对不,那个时候啊,就类似于我们现在要做的事情。啊,两种写法我给大家写一写啊,大家看着我,如果我在这一个return之前写,那我应该满达到一个什么情况啊,譬如说举个例子吧,啊举个例子,如果说这一个password啊,不等于。他六是不是有问题是吧,那我就立马return一个同关系。这里面必须是,其实到这里为止,它就不是一外形了。它是个什么,同步X线。能不懂,也就是我当前这一个。可能是个同,也可能是个什么100。这是一种写法,还有一种写法呢,就是它纯粹的就是一个。100块钱,我在这里面做,那其实也可以,那这个时候不是为了。
09:01
不是得干嘛呢,得去PA。能到不?啊,那当然在外面呢,可能要好一点点,其实你说差异有多大,也不至于没有特别大的差异啊。我们上次用的这种方式,我们这一次来用,用在外面写的方式。好,那也就是说我们这个时候是不是要一个啊,这一个X。对吗?传什么呢?就是呃,那个密码要一致是吧,两次密码要一致啊,写一下简单写。这个懂不懂啊,能懂啊好,除了这个判断是不是还有别的一些,也就是说这个地方要做的什么事情啊,一定要知道我们在干什么啊,做表单的前台验证或者前台验证啊,那也就说如果不通过干嘛分发一个是不是error message的action。
10:21
的同步action。返回啊,可以说,因为最终我们要分发,其实我们不要亲自分发,只需要什么。是不是?好来,那除了这个比较,其实还有别的啊,我们先其实看一下,我这里面都做的是非常简单的啊,比如说user name的值不太好,是不是空的可以吧,那这个时候我们一样。能不能看懂好。
11:02
那这里写什么?那个用户名必须指定可以吧,嗯,用户名嗯必须指定。那这个地方就是L衣了。是这意思吧?啊,就别写衣服了,你别写这么多衣服了,看到吗?还有什么中间还有可能是密码可能没有是吧,那密码可能就不搞啊,差不多是这个意思就行啊呃,看看还有什么别的吗?啊差不多就现在泰度肯定是有一个值的,我就不太不太去看了,好吧。好。那这一个做完以后啊,到了下面说明什么。说明表单输入数据是合法的吧?懂不?表单数据合法干嘛去?
12:02
那是不是我要去返回一个异步的action,最终里面去发请求啊,返回一个发a Jack请求的什么EE函数吧,EX函数。真的吧,嗯,其实我的注册这么做,我的登录。其实是什么?是不是一样高法对吧?啊,而且它这个地方大家看一下,把这个把这个搬过来啊,因为他们两套说话都一都差不多。嗯,它里面只有什么user nameme passor是吧,那我就直接来一个userme已经好了,接着是什么pass的啊,取个飞能看到吧,啊,这里面去写什么密码必须指定,就这么个事啊,咱就搞简单的啊,没有必要搞特别复杂。
13:05
有没有看到?啊。那就说无论注册登录,我们前面的这个基本检查啊,就已经做好了。好。来啊,那其实你想想看我们的注册怎么做了,你想想登录是不是也在做。是吧,这个这个组件我们刚才其实做的事情很少啊,是先包装产生了一个容器组件,对不对,传入了一个函数吧,注册的函数,注册的action函数,接着我在这里面在点击的时候。点击注册的时候,这不点击注册调用吗?能懂吧,嗯,在这里面我就去调了一下他。啊,但是得说我们如果请求返回以后,有可能是返回给你一个user吧,也有可能返回给一个是存钱了,那无论是成功的失败了,我们的界面是不是要做一点响应。
14:18
但现在我做了吗?没有做任何响应,先我们不做啊,先我们看请求能不能,能不能过去,能不能回来都不知道了,对不对,其实现在不能过去啊,我们来看一下有问题先先搞一搞啊。来刷一刷,刷一刷以后我们先看一下那个Rex,这个很关键。啊,这个其实挺关键的,这不有一个优吗。User里面username tag和me都是初始值。这很正常对吧,那下面的事情就是我来啊。嗯,我们来去搞一搞,在这个里面呢,我们有一个123,有一个,比如说就写12123吧,点击它,那先要做的是什么?先我你说现在比如说假设我这个不输,或者输一个输一个输个一啊现在能发请求吗。
15:12
不然。走一把。你看是什么I message,这是什么?两次密码要一致,完了这个这东西不行了是不是。这做主要是我们显示,其实这个正常的,这个非常好,我们下面是不是要拿着这个message进行显示。真的吧,啊好,我们接着看看我们发请求的情况啊,发请看对不对啊,我们这一次都是对的啊,都对的,来点一下注册。哎,是不是错了,出一个什么错了,这个说404404什么意思。找不到这个人,找不到这个处理的人,说白了,这个地址根本不存在,存在吗?不存在,这个请求的是我当前项目下面的。
16:04
什么不对?地址,地址不对肯定是地址不对,哪部分不对?端口号不对,我们的后台服务器项目是4000。你请求的是什么3000?那是为什么呢?其实非常的简单,我们当前回到我们的API。回到我们这个index,我们现在是不是就写了我们的一个pass,不是写的UI啊。对吧,按道理说应该怎么写呢?Http no的对吧,四节。那你觉得这样又行吗?这样有问题,什么问题?来看哪不会先我们看一下啊,先我们搞一搞啊,随便来一个,只要不出错就行是吧,只要不出错就行来。
17:07
走,你。啊,出现了这个玩意,对跨域请求后台,请求后台其实也处理了。来,我们也可以看一下,我们后台里面有没有存这个信息是吧,看一下呀,很感兴趣。呃,我们当前的是这个吗?我们当前这个应用看一下我们后台的这一个这个modus,我们就是啊是这个吧,是这个好像没有进去,没有进去,那我们去可以去看一下谁,你说我现在。看谁看正。看这这个很关键,真的不因为出错了,我再看一下请求啊,这个懂吗?啊看一下请求来不他吗。
18:04
就返回来整十个,就就给了一个这样的一个文本给我,是不是太搞笑了是吧?啊啊,这个这个请求看起来就不对呀,你看。我们应该是一个什么请求,Post的请求对不对?能懂不啊,这个地方主要还是一个跨域的问题,这个怎么办呢?现在为什么宽裕?先把这宽域的问题先余掉啊,咱们再看有没有问题对吧,现在是端口号不一样,我们前端应用是什么端口3001,而后台应用呢是千,我现在他去请求它必然是跨域啊,对吧,那跨域怎么去解决了。那有两种方式,前面说过对吧?接身p course对不对啊,接P已经不行了,为什么呢?因为它只支持get,我是求是吧,能懂,好下一个办法就是course course了,要改服务器对吧?在服务器里面是不是允许跨域啊,好,这个呢,我也不想用啊,难说的是那不凉了嘛,对吧?啊好,这个地方还有一个技巧是大家没学过的,这个在开发中经常用,基本上都用地,我先说的这种技巧叫代理。
19:36
代理服务器。啊代理服务器,那也就是说我们要通过代理帮我们去请求实现啊,代理这个概念一定要懂啊,就是我们啊当前在前端应用在3001是吧,后台应用在4000,我发现代理服务器其实也是运行在3001,就是前端应用里面里面的就相当于这这假设是一个代理。
20:03
代理服务器,他也是愿意跟我一样,是我里面的相当于一个应用模块,那我呢,先把请求告诉给他那道吧,我告诉他哥们,我要请要你去请求他视线的哪个位置。能不懂,那他就帮你转发请求,诶有个概念叫转发请求,能懂吧,好,接着请求是不是有个返回。好,这个时候是不存在跨域问题的,大家知道跨域问题是谁的限制,浏览器懂不懂,在浏览器看来,他还是发达3001的。这个能不能弄啊,相当于我发了一个3001的,被那个代理给拦截了。他他知道了我这个请求,最后帮我去转发请求啊,对于浏览器来说,他根本就不知道。这个要理解啊,好,接着代理会将反馈的结果又交给我,那我是不是得到我想要的数据。
21:00
对于我的前男友来说,浏览器来说,他知道吗?根本就不知道,他以为你没有发育。对吧。能理解吧,啊,因为我们这个我们啊,说白了,我现在这样一个写法,大家看我这个写法还是这么写。记住,还要这么写。能懂吧,那还这么写,是不是依然请求的三千米?对不对,但是我要配置一个代理告诉他去请求事情。你说老师怎么告诉他了?非常的简单,嗯,来看一下,其实前面呢,有的只是没给大家看啊。咔嚓一下,就是这一个配置。啊,配置的proxy什么东西的。代理。就这里面配这个选项,代理告诉这个代理各位你去请求几千4000,也就说帮我把所有的请求都转向到什么4000上面去,本来我是请求3000,等会大家看一下就知道啊,这个时候我改了这个配置,没办法什么呢,重启一下。
22:16
好,看看这一次行不行。我天,这么快到45了,我感觉这时时间过得好快啊。好来啊,选择A,其实用我们的这个是不是就可以刷一下就可以了。可以吧,好来啊,输入一个A,输入一个123,输入一个123,嗯,好了,来看啊,重点我们要看报,不报错,看一下请求等等啊来吧,走你。什么成功了,对不对?成功了,浏览器看到的请求的端口号是多少?3001,但是我的数据回来没有回来了,同时我需要看一下后台的数据库里面有没有数据了。
23:16
有跨越解决,没有轻不轻松,这不很轻松吗?重点在于大家要理解这个代理到底是怎么回事啊,他帮你转化请求,首先还要知道代理他坚定的那个那个端口还是不是服务器的端口啊,先进的端口还是3001或3000对吧,就前端应用端口对吧,他把你转发到你指定的端口。你想多少就多少对吧,啊,肯定服务器的一个账号了,好,那这样的话还再看一个东西就差不多了,诶。这个数据状态看一下。
24:00
对不对,对了吧,好,我要再点一次了。是不走你。什么意思,此用户名存在,其实数据都有了,但是我的界面呢,还一动不动,这让我受不了啊,这个行不行,主要是呢,有两种情况啊,有两种情况,一种是失败,一种成功,对吧。失败有两种情况,一种前台验证失败,一种是后台验证失败,对吧?好,我们先把失败的情况搞了,失败的情况来啊,失败的情况简单来说我就可以在这个地方。在这里显示一个什么提示文本呢,是吧,就在这里有一个文本提示呗,用红色的字体可以吧,啊,就提示这个麦内容。对吧,那这个该怎么做了,那这个时候也就是说我们的这个组件需要去读状态了。
25:00
是不,那读什么呢?啊,这个地方我就读user吧,User在哪呢?state.user user是的一个属性嘛,这好,那有了这一个信息,那我在render的时候,其实可以去干嘛读一下呀。什么?我想读到的是什么?大家看一下this.props.u的。里面的什么东西?是message啊,他可能有字也可能没字吧,那要有自我怎么办呀,是不是要显示出来,好,我在这里面做一下啊,来一个,譬如说我来一个失败。可以吧,可以,或者来个div都行是吧,来个div好,这里面我要怎么去做呢?看着我这么写这么写啊,看着我。
26:05
我得判断一下什么呢?Message有值吗?对不对?有值就用一个div把它显示出来,没有值呢?那那就不会做任何解释,这个能不能懂啊,好,来下面的问题就是要把它是不是写出来。是吧,来写啊,这个地方就是要把这一个message给它显示出来,同时还需要有一点什么。是样式,那要指定一个什么class name。能听到吧,啊,假设我就叫I message可以吧,错误的信息吗?这个能不能懂,那这个I message在我的登录里面有没有。是不是一样啊?应该有这样一个样吧。因为都需要显示这个效果嘛,这个时候大家开的啊,因为我后面的样式不太多啊,啊前面你看我们在每个应用里,有些应用是不是建了自己的样子啊,这个就没必要了啊,我们后面这样做,看着我我这里有个SS啊,我在这里面呢,专门去建一个文件夹叫CSS啊啊在这个里面啊,在这个里面去再建一个啊文件看我写名字啊,必须写S。
27:26
因为我们的样式写在里面的,这懂不懂好,而我这里面需要去写点样式吧。能听懂不,这里面去指定一些啊,我们的一个错误的样式啊,这里面我就直接拿过来了啊。就是我们现在外面已经写好了是吧,再看一下就这没什么,一个是颜色,一个是居中,再一个什么字体大小。但是现在我的样式起效果了吗?不可能对吧,因为没引入。
28:00
我在这里面引入可不以可以啊,之所以我写在这个外面的啊,是因为我这个样式呢,别的主页也也需要,就重新搞一下就可以了,Import是吧。点斜杠size下面的CS下面的index点。能不能看懂,那也就是说我们如果有了错误信息,是不是就会显示出来。好。来啊,现在看看现在有吗?没有吧,没有很简单,我自己点呗。搜不出来了。可以吧,虽然有点小丑啊,将就一下啊。好,来,这是没法请求的情况吧,我在一种发请求的群啊A123。123可以吧,这个用户已经存在了,对不对,刚才我们好像注册的就是A呀。
29:01
来,走你。这是发了请求的啊,怎么知道他发不发请求啊,Network?是发了请求,那如果比如说你要付出,大家看你可以把这个把这个信息呢,先给它清理掉是吧,记得点一下。发信息了吗?没有,这是不是前台验证呢?错误的情况是不是都好了?好,这是这一个,那下面还有一个什么。假的,我输入AA什么意思。什么意思,那现在实际上已经什么。是不是已经成功了,对不对,那现在这个显示器不好,这个这个Mac已不应该要了,我的成功了对不对,说白了就是我们刚才写的啊,这种东西吧,你得测才慢慢发现你其实写的吧,不是那么好,你在写的时候,你是很难知道你到底写的是不是完美,对不对,也就是说这个信息保留的不太好,不应该要。
30:06
就是他原来状态嘛,原来状态里面是不是有可能有一个message,而现在我的新的状态里面是没有message了,那原来message还要吗?不要了,所以他是吧。不需要了,我就用我们最新的对不对,但是这么改也没意义,他还停在这里,完全没变化,这样不行,你说说了一个事情,我注册成功以后,我应该去哪了。去登录不对,因为我们前面说过,我们注册成功就相当于已经登录了,我们应该去主页面。对吧,主页面的地址不就斜杠吗?对吧,能不懂好。其实那也不一定去主页面,还有可能去哪了,还有可能去啊,如果你是注册就有可能去信息完善的那个界面,对吧,但是如果你是登录了啊,对吧,那也不一定登录,也要看你是前面有没有完善过信息,就要等他完信息又不登,那他又不去完善了,对吧,他是又来登。
31:13
登录一定是完善信息的吗?不一定对不对,所以是有很多种情况的,是吧?啊现在呢,不要想的太厉害啊,我们现在想一个事情啊,也就是说当我。授权成功以后,我是不是应该跳转到某一个路径去。这个能理解吧,至于跳到哪里,先不要想太多,我们先简单的想着去主界面可以吧。那这个该怎么做呢?是吧,哎,这里我有这样一个设计,大家看看啊,看看行不行,我在这里面。添加一个属性。叫rere two。什么意思?React是不是制定重定向到哪去啊?开始了没有值?
32:02
这一个指定什么需要自动啊,需要自动重定向。的路由路径,你要去哪?你在里面指定一个值。那也就是说什么意思呢?大家看懂啊,我在这里在这里给它给定值,指定个什么呢?指定一个这。你去主界面。能不懂我就指定了这样一个值啊,指定了这样一个值,那好了。这个值啊,有可能有,有可能没有吧,有就需要重一项,没有是不是就不需要。看着我啊,这个界面啊,这个我们这个注册的路由啊,组件就很关键了,我这里面引入了user user里面是不是有可能包含了to,有个值,好在这里来看看啊,大家看到我,我不仅要取出message。
33:03
我还要去rere two。我一上来我就判断一下,如果它有值,那我这个界面留不住对吧,能不懂也就下面不用执行了。我直接做个什么事啊,大家看着啊,大看这里我有一个组件标签的。我那个路由器里面有一个组件标签叫什么呢?我先写一下啊。Root叫reredo。有吗?是不是我只要渲染这个标签,它是不是会自动重一下。能听懂吗?那那也就是说我最终返回的它就是这个标签。能不懂,呃,这个里面它有个属性叫什么吐,你说我吐到哪去啊,我是不是吐到这个值里面来。
34:05
啊,你别写成斜杠啊,你别显示了,它指定什么就什么,因为这个值到时候是动态的,能懂不啊,那也就说是不是指它。记住,千万写大括号。能不能懂,因为这是个变量,能懂吧。也就是说这个地方啊,如果这一个有值,那说明我是不是需要从定向到指定的目标去。啊,有值就需要啊重定向到啊指定的路由路径,指定路由。自己是多少我不管,反正你是多少我就转他多少。那也就是说一旦进了if这里面会执行吗?不会,那来我们来看一看啊,看看我们这个写的是不是有意思啊,来啊,我随便输一个ABC。
35:03
123123好了,很关键的啊。走对了。懂不懂为什么到这来?其实非常简单,看一下我们的这个结构你就知道。能不能看到现在不是吗。能理解吧,啊,要能理解啊。那你的注册其实写好以后,我们那个登录其实是什么。基本上一模一样。可以这么说。能不能懂啊,也就是说千一语就能去把那个登录写好啊,说实话。首先呢,我们要去把登录给包装成容器组件。它本来是个UI组件嘛。真不给它包一下,包一下要写的代码,跟我们这里面要写的一些代码呢,基本上是一致的啊,其实吧,你就把这里面的这个东西,把这些玩意复制过来。
36:09
不是引入这个函数,而是引入什么login。懂吗?好,我那个包装包装呢,其实也跟刚才那个是基本上是一模一样的,大家看到我我们刚才不包装一下吗?把它搞过来。啊,因为一样啊,看着这个不用改这个写什么。是吧,能不能看懂,这不是登录的那个E吗。是吧,好。来里面做什么呢?这个干嘛去?This this哪个名啊,这个这个没改是吧,哪个看一下啊,那个也没改,就这个啊,这个当时副主管没一直没改是吧。
37:16
能看到吧,好,那下面下面还有一个就是这个render里面呗,是吧,在render里面跟这个,其实这个里面写法就更一样了,基本就是不用动,你就直接把它什么拿过来写在这里。还有一个小地方。就这一个。拿过来。写在我们的这个历史的这里。完美搞定。下面我们要检测一下,看行不行是吧,就检测一下行不行呗,好来看一下,嗯。嗯,现在我要去哪里去。
38:01
啊罗,过来了吧,过来之后,来我直接点走你。这做的什么前台验证?是不是失败了呀,接着我要输啊,输一个。啊,输个1234行不行,不对,123嘛,是对吧,走你。这说明我已经发请求了,这是后台的提示,看到吗?用户名或密码不正确,真的不干嘛改呀?123是吧,走里。不挺好的吗?啊,那也就是说到此为止,我们的注册和登录的基本功能就完成的差不多了,但我们信息完善的界面还没有写去写啊。
我来说两句