00:00
好,那上午呢,我们把那个路由呢,已经搭建好了。嗯,现在呢,我们去请求一下那个登录,OK,这就是登录的路由界面,当然最终我们是不是要做成这样,那现在呢,我们就要去写这个路由组件,也就是写谁了,我们是不是有一个login的组件。嗯,就这一个文件夹上面的这一个文件是吧,好,那写它写组件首先啊,这整个我们不会再拆了啊,整个我们来其实就是这里面最重要的就是要把布局样式给写出来。我们先看一下这一个静态组件该如何实现啊。这整个是一个div的问题,是不是啊,接着这里面这个上面应该有一个hand或者是一个div都行,是不是啊,这个下面是一个部分。没问题吧,这个上面这部分呢,有一个。吧。
01:00
是吧,接着这是一个H1标题,可以吧,可以,那这个里面呢,这也是一个什么HR或者H2都行是吧,其实最后呢,我们都会重置样式啊,这个是我们自己写的嘛,这就很关键了。这个部分不是我们自己写的,这是它的一个叫什么组件呢?Form组件就是一个表单嘛。这不是个登录表单嘛,是吧,诶这整个这个区域就是用的D的组件,外面是我们自己写。这能听懂吧,能听懂好。那那其实有几个事情,第一个我们要先看一下这里面需要什么图片资源没有啊,有两个图片资源,一个是这个图标。一个什么背景图片,那这两个资源呢,其实我们这里面就刚好就有是吧。
02:01
啊,把这个呢拉过来得,暂时我们应该是放到我们登录组件里面吧,因为说我们登录需要嘛,啊当然如果到时候别的组件也需要,那我就给他再提出去,听懂了吗?啊来我会在这个组件下面。建一个文件夹叫images,专门来放我们组件里面的图片,这能听懂,不好塞进来。准备好资源啊,还有一个啊,我们要去小项之前一一般我们的应用都会引入一个什么文件et.CSS。就重置样式的一个文件对吧,也我们也没必要自己写,而是去哪找了啊get上面去找。能听到吧,啊来。哎,这个地方啊,应该先去,先去那个跟目录啊,跟目再去搜索一下。
03:05
哎,这里面呢,就会去找出来一些啊CS相关的一些匹配的一些啊,别人写好的一些re库啊库这一个我们用这个是基于各种设备的,我们最终用的选择这个小的就是比较简洁的一个实现,我们也就是做一个PC的嘛。来看一下,我把它打开,这个是1.6K可以能超过1000,基本上就没问题了。你如果写一个库超过100,那你找个好的工作应该不成问题啊,你得正常的超过100啊,你不能说找很多人是吧,那你要这么说,我我超过1000都可以。那没必要得正常的,超过100的话还是有意义的啊来。哎,这是一个啊,比较小型的一个cset,那我们这个地方其实就是去不用这个压缩文件,用它就行,对吧,给它打开。
04:01
啊,打开这里面是不是写了一些虫子的样子啊?那我怎么做啊?就把这个代码复制下来,是不是定义成一个文件,甚至把它下载下来是不是也可以,当然这个文件没多大,复制下来是不是可以好这个re是不是全局的呀,来看好了,应该在这一个public下面建一个文件夹,取名叫什么呢?CSS把它什么诶创建在这个里面,再创建一个什么文件叫reset.css,对吧。这能听到吧,把刚才的这些虫子的啊,这些代码给他拿过来。能听懂吧,能听懂当然现在有用吗?没有用到得怎么用啊,在我们的index页面里面给他什么引入来个什么link,点斜杠,CSS下面的。
05:02
点CSS。哎,这样这个时候是不是用相对路径这么写的。这种写的时候很好,因为它有提示。其实这种写法。有容易出问题,后面就有可能出问题,很有可能出问题,不过呢,我为了演饰那个问题,我先就这么故意写错写的看到吧,到出了问题了,我们再回来改,因为我如果现在就改成对的,其实改成对的很容易就把这个点去掉,就不会出问题了,但是到时候大家就看不到问题了,所以我先呢,就用点的形式来写,先的录音形写可以吧,啊好,大家的印象这里面是相当于是啊有意的添加了一个陷阱啊,先放了。暂时不会出问题,后面会出问题好来。那你说现在我们从事的样式就用上了是吧?好,那下面我们是不是要去写我们这个登录的样式和标签是吧?那先去创建一个我们这个组件对应的一个样式文件吧。
06:06
来创建一个,这一次要说一是我们现在应该用什么写呢?用nice来写。能听懂吧啊,用来写啊,现在我们整个环境是支持nice的写法。好,那我就叫login,点什么nice,那也就是说我们当前这个组件的样式是都写在这个里面吧。这能听懂,不能,那我们在写之前先就给他干嘛了,引入进来,免得等下忘了是不是?这个懂,那后面我们是不是编写结构边写样式,来一点点看对吧?好来,那我首先上来给他加一个类名可以吧,啊全局的控制class,什么是class吗?是类对不对,等于他为什么不能用class。
07:01
因为这现在实际上本身上是G,而在GS里面class能直接写吗?不能不,我们的名字不能叫class,对不对,它的关键字,那我就叫login可以吧,那我们刚才分享其实我们整体,我们这样是用呢,整体是不是说上边部分和下面这个部分是吧,也就说白了,这里面应该有一个头部,是不是有一个内容的部分啊,当然我我上面不用的,我用第行不行,行啊,比如说这个用三行吗?可以吧,当然也可以用div,是不是这都没问题,当然我们的样式尽量通过谁来控制了,通过类名,通过类来控制,是不是这个就叫log,杠什么呢?Hand可以吧,好,这一个取一个类名class name等于啊,杠什么呢?
08:02
Content内容部分。看不看懂好,那实际上啊,我们内容里面先不写的没关系啊,我们先把这个结构所对应的样式先写一写是吧?啊整体结构写一写,因为它的nice的编写是不是结构化编码的呀。那我先写个点什么逻,而里面必然嵌套了谁?嗯,点login干什么,以及还有一个什么点login杠。对吗?这个能能看到,那下面我们是不是分别去完成,首先我们login本身这一个,也就这个D本身是不是需要一定的背景,需要一定旷工来,比如说啊,我们的高度应该是宽度应该是多少100%吧。这能听到不100%好,接着高度也应该是什么100%好,那我是不是应该有背景图片这些能想到的就就尽量写啊,想到再慢慢分析是吧?来,我们来一个BG image。
09:18
是什么啊,去引入我们刚才啊用相个路径写就行,Image下面的什么,来看一下我们的这个,我们是不是应该有一个背景图片叫什么,立即连接BG有提示尽量提示补全,听懂吧,尽量提示补全。还有一个那个背景图片,是不是要去让那个图片撑开整个界面啊,这个应该用什么还记得不?Size。是吧,水平方向X轴方向100%是不是啊,Y轴方向也是什么100%能懂不啊,我们马上想到是不是这些啊,当然也可能不够,那到时候再写是不是先看一下,不要先急着写里面的,听懂了吧,先看一下来。
10:13
看现在我们的这个情况来看一下啊,这是我们的那个应用,那现在什么内容没有,现在怎么办。图片没有。是不是得审查一下能听到不,你得审查一下界面,看一下界面的一个情况,这个啊,看一下审查元素吧,去看一下元素的结构,这能听到不好,我们来看一下我们当前的。这有图片吧,但是有一个问题啊,有个问题嗯,大家看的这个高度是多少。你。高度是零,那我就想到我的这个高度零,看我说白了是不是看负极啊,它也是什么零,那这个了。玻璃和啊都是一,那现在实际上是我们在写时,应该是不是把玻璃把HTM的高度设置,为什么是100%的高度啊,也就是说什么意思啊,其实这个东西,那这个时候就涉及到我们需要去往这个里面。
11:13
添加一点内容对不对,这能听懂不啊,HTML玻璃给它指定为什么啊,宽高度100%对吧。这能听懂吧,这应该是难的啊,把高度也搞一下,这个宽度也搞一下啊。美女吧,好,那这好了就好了吗?我们来看一下。是不是还有一个啊,还有一个他对不那个root实际上是不是就是我们的,我们写的这个页面里面的这个,它是不是它是个ID吧?啊,那我们在这里面可以写一个什么井号,诶没空格是吧?井号它啊把这个给他什么。
12:02
是不是复制过来就可以啊,当然啊,这个地方我们再来看走里。是不是有了没问题吧,这个应该没问题啊,好,把这个写好以后,下面我们是不是要写上面那个头部,以及中间的那个表单的那个区域是不是好先写那个上面部分,大家注意啊,这个上面部分应该是有啊,我们先整体看,大家看一下应该是有一个高度吧。比如说整体的高度对不对,80是不是应该还有一个背景颜色吧。能懂不?那我们如果去参照他写的话,那我没有必要去设计颜色,到时候复制一下这个颜色是不是可以懂吧,中间是不是有一个image,以及有一个H1的标签,但也不一定要H1 h2h3也行,是不?嗯,好,来我们来写一写。这时候先把那个结构写一写是吧,啊,一个部分一个分写写它呗,哪一个什么,而image是不是要去找的是这个图片对吧,这个地方他说在这个标签里面不能直接送相对录音,也就是说你不能这么写,在里面不不支持这种写法,哪种写法呢?刚才我们在样式里面是不是通过相对东西引图片呢?但是现在我如果这么写是不行的。
13:27
能听懂吧,他不止这语法得怎么做呢?啊,你得去干嘛呢?去import啊,Logo from先加载进来这个图片模块,那下面这个地方是可以这么写的,能听懂吗?那加载到图片模块以后,接着通过我的这一个S,这个时候是不是动态的值啊,既然是动态的值就得用什么。大括号。能不能懂,能懂,那接着来一个一是吧,来个H1标签内容是不是就是这个内容。
14:07
对,那这个应该是没什么问题的,对吧。OK吧,OK,下面我们来去看一下,我们当前样子肯定是不太好的。是不是这样排开的啊,这个地方我们有些事情我们确定的,可以快速的写一写,什么事情呢,比如说我们这个是不是有个高度啊,Hit为多少了,单词看到了是不是80啊。还是不是有背景颜色啊BG了。背景颜色不是白色吧,啊不是,我这里面为了为了就是省事,嗯,相当于简洁一点,我就直接把它这个复制过来。哎,把这个。把它的这个啊值复制一下。可以吧,可以可以没有问题,好,关键有这个东西不够,主要是现在我们要涉及到涉及到这两个元素的一个定位啊,这个尺寸,这个图片尺寸可以搞搞是吧?啊图片这个比较简单的可以找搞定位可能稍微费劲一点来,那接着是有一个什么啊image标签。
15:17
你懂不啊,这个地方我们比如说我们把宽高改为40可以吧。因为它那个图片刚好也是42高度啊40。那对吧,那这样呢能够好一点的,但是它是不是垂直排开的,而最终我们的效果是水平排开的,而且垂直方向上是不是居中的呀,这个比较好的方法是什么,用什么布局。过去是不是那最简单,怎么做play?为什么flex?这一项是不是水平排开了啊,大家看一下。水平排开了,接着是不是要希望他们垂直居中,垂直居中有一个专门的一个东西啊,叫online items。
16:09
对是吧,来一个什么。是不是居中啊,那啊这个时候我们就要去啊,需要去看一下,这里面还有一些什么问题,就是一个相互之间的一个间隔问题,是不是啊,相互之间的一个间隔问题,比还有我这个文字的颜色和什么。是不是大小的问题,正好颜色大小这种啊,这种比较固定是吧,比如说放在size子。啊,30个加数可以吧,好来,那不写错了,应该是H h1啊,不应该写在这里面啊,写在我们的H1什么H1里面还有什么。那个color为什么白色就写字是吧,OK吧。
17:00
OK,那下面我也要诊断,是不是就让他们有点间距啊,间距我因为左边是不是也要的距离,这个中间有点距离,我就控制谁了。是不是可以控制它。是不啊控它来,那就是需要去给这个image加一个什么marin可以吧,上面和下面应该没什么吧,对不对啊,上面假设是零啊,下面是零,右边整一个啊,我就来一个吧,差不多等会再慢慢调是吧,给定时间调啊,下面也是零,右边右边的大于。右边比较大,比如说我来一个50,可以看一下。是不是有点。差不多是也是吧。当然你这里面可以慢慢的调字体。啊,这里面没对齐吗。字体有点大是吗?还是什么,这有什么问题吗?现在我是不是刚好是垂直方向对齐的吧,这能看到吧,啊能看到那基本上就差不多了,这里面的这个结构,比如说诶这个这个搞个差不多是呃,我看看应该差不多,到时候慢慢再调吧,这东西小细节就可以慢慢后面再调,能看懂吧,这里面主要是有一个水用排开是不是,重点是不要垂直要居中啊。
18:24
嗯,OK,好,那后面一些小记呢,大家后面再慢慢的去调都可以啊,没有什么太大问题,好,那整好以后下面一个我们是要搞什么,是不是下面的这个白色区域,它也是个div吧,也就是一个三啊类似的也就是我们当前这一个。它是吧,它的里面是不是有一个。文字标题啊。N,我来个HR吧,或者HR都行,就是这个把它复制一下。那下面的部分不是我们自己写标签去实现,而是要用D的组件啊,我先示意一下什么意思呢?写个div,这是form组件标签啊,能不懂吗?先我试一下,我先不用那个它啊,我先把这个整个结构先排好,OK吧,OK,好,那下面我们是不是要去控制我的这一个section,以及HR是不是来看着。
19:32
把这个关了不要啦。那在这个里面,我有些东西很容易写的,先写写,比如说我当前这个元素的宽高。嗯,是不是要指定,以及背景颜色是不是可以指定,那这个比较简单,快速的整一下来宽高。啊,我这里面就直接写个差不多合适的,当然开始的时候呢,你可能写的不太合适,再换都行啊,再来一个高度啊300。再还一个是不是背景颜色啊BG color啊,为什么。
20:05
白色是不是这样的吧,啊来先看一下情况,是不是在这个左边了,现在我是不是要让它存在我的水平居中,而且离上面是不是有一点距离,这个用什么。用marin比较简单是不是,那也就是说我们现在啊,可以用一个什么marin来去做。比如说我上下50啊,像素啊,左右是什么凹凸。这样是不是会自动的就给上面有点距离了,当然你要觉得50啊,确实啊,相对这个小一点的话,你就可以再调一调,对不对都可以好。下面我们要做的是它是不是它现在这个标题怎么像看见不像标题的那个文字了。是因为我们什么重置了样式对不对,是要自己去指定吧,啊来指定一下,也就是说我们现在写谁去HG,刚才我是不是写的HR呀,哪一个放的size,呃,也搞个30吧,呃还有一个什么那个。
21:15
呃,需要看大家看一下。最终是不是要有水平居中啊,水平我天是不是有点太大呀,25吧,20啊,身高20,这有点T到啊好,那水平居中应该怎么做?Text a等于什么center,让它居中起来。对吧,这个字是不是现在呢啊,就这么小了,好这个字它是不是是细不是那种纯粗体的对不对,需要你看这个大家看一下能看到吧,啊小了点啊,还是用回30大气点好一点是吧。来把这个移到上面去啊,接着用什么啊,Wait wait啊是一个什么for,来慢慢再看啊。
22:09
而还有一个小事情啊,跟上面要有点什么距离,实际上这个地方啊,不仅它要跟上面这个缝的部分,大家看到是这个样子的。是这个样子的。能听懂我意思看出来了不也就是说我最简洁的搞法其实是给外面的这个D加什么。加利宾玉。同时挤效果,懂我意思吧。你要是给他去加,那是不是下面还好啊,麻烦能听到不啊,能听到大家德克,如果大家去审查的话,就能看出来这个效果,能看出来不。上下是不是有内边距,而左右是不是也有内边距,这样是不是就让里面的对齐了啊,OK,好,那这样做是个什么意思呢?就这一个。
23:03
啊,加个什么pen上下比较空隙比较小一些,我来一个20个像素左右的空隙大一些,我来一个什么呢?啊,40个像素啊,大家看一下。这能听懂不啊,那后面我们就剩下去写我们那个什么form组件的结构了,是不是。这能理解吧,啊,这个后面我们能显示范围,是不是大概是这样一个范围,在这个范围内去显示我们的form主线标签的结构。OOK吧,OKOK,好,那这样的话呢,我们就写好一个基本的,我们先把这个停一下,专门来去写这个form。
我来说两句