00:00
我们先来看这个用户信息完善界面的一个实现功能的这个实现。呃,首先呢,我们去把那个把那个静态组件先写一写。是吧,那我把那个最终的效果给大家演示一下,比如说我们现在去注册啊,先注册注册输入一个用户名啊,譬如说啊,先来个老板的吧,啊老板老板级了老板七啊啊密码呢,123密码123选密码来点一下老板接着点击注册。哎,我们就做这个,先把这个静态组件先做出来,我们在后面慢慢再写功能,好吧,因为这个比较简单,那这一个做了,大家要知道我们相当于现在我要去写两个组件吧。一个是关于老板信息完善了嘛,大家看一下这个例子。
01:01
是他能不能,其实还有一个,除了这个刚才也跟大家说过了,我们还有一个界面嘛,在这里面不有所有界面的截图吗?还有一个最后面啊,有一个什么大神的。那大家看一看啊,我们这个地方啊,我这两个应该对应的就是两个路由组件,这个能不能懂啊,那我先把它们创建出来啊,把他们这些结构先创建出来再说。那我把它放在哪个地方呢?有两个位置可以放对不对?一个是UI组件,一个是容器组件,我会把它们放到容器组件里面去,因为这里明显需要跟后台进行交互。因为我要点击保存的时候,不就要去交互了吗?对吧,啊这个地方来看到我。创建一个名字,我们叫什么呢?比如说老板呢,叫老板大家看啊,我们的这个,看到我们这个例子,这个路径是不是老板应付呀,那我这个地方,我这个名字该怎么写呢?这是两个单词。
02:14
宝,嗯,好,这样的话呢,更好一点,那接着呢,我们在这里面再创建一个GSX文件。对吧,来说一下,写个注释。啊,这个是什么呢?嗯,是老板啊陆游。组建路由容器组件吧。啊,老板信息完善的路由容器组点,嗯,说的详细点好,下面写的代码是固定的,先把那个模板搞出来是吧?啊接着呢,来一个嗯,大写的好吧,这里面弄,而且我们知道我们这里面肯定会将他包装成什么。
03:09
容器组件的对不对,其实那个包装容器组件的代码也可以把它写好。先把它模式写出来,后面再慢慢填,其实都可以完全可以啊,这样写你就会更更有感觉一些啊import我需要有一个函数叫什么connect,咱写多了啊,对吧啊,那个action就先不引入了啊,我们先只是去写这个那个样子出来。呃,Export default对吧,看括号括号传,哎,这个这个名字写的不对,应该是老板什么in four。这弄吧,啊这个里面啊,我先写好那个样子出来,State箭头小括号大括号,你们放手,我先不管。
04:07
能看懂吧,好,下面再写个什么呢?大号放在这里,准备去放action函数对吧?嗯。这就是结构打好了。那我的老板的衣服是这样,那我的那个大神的衣服是不是也是一样的,那也就是说看C看位置太简单了啊啊大神。这个改一改。这个呢改一改啊,这个就是大神啊姨夫对吧,啊,这个呢也改一改。能懂吧,好,那这个里面其他的就不用弄了,结构摆好了是不是来。
05:02
啊,还有一个小事情,还有一个小事情,我先不要去写里面的内容啊,我们是路由组件,记住我们是路由组件,路由组件就有一个操作叫什么。注册成路由。能不懂注册成路由,那我去哪注册成路由了?来,回过头来我们回想一下我们前台路由的一个一个整体的一个结构,我们一级路由就三个,有没有看到我们现在要写的是哪两个呢?这两个对吗?能不能懂,也就是说它们俩是这个主界面路由的什么子路由,对不对,所以我应该在哪去将它们映射啊是main.gxx,那也就是说我需要去里面也去在这个main里面。
06:02
是不是去处理这个能不能懂,要能懂啊来我们在这里面数量我们先就就整一个简单的,我就在这里面要处理的话,这里面是不是有两个路由要去注册,而且我们只显示其中的什么某一个,诶这个时候我得引入一些什么东西了,对吧,来写上大话再说是吧,React ru do。首先应该有一个Switch对吧,Switch里包着两个路由,是不是来个什么?对吧,啊,路由器在外面用一个就够,里面不需要用路由器。子路由,这个路由器只需要在最外层。用一次就足够了。里面的就不用再用了,能懂吧,啊好,那这个时候呢,我在里面其实非常简单,搞一个什么Switch,而Switch里面是root呀,而这里面需要去指定两个东西,一个是pass等于多少是吧,这是个字符串嘛,再一个是什么啊,不是component嘛,组件,那我要把刚才那两个组件给他什么引入。
07:22
能理解吧,啊一个叫什么啊,老板来啊。这个关系啊,回退一下,接着是看有没有老板衣服,有吧,老板衣服OK。好,来这里是来。从这边开启啊,这样一个提示,这叫什么大神啊,跟这个呢是一样的,好,下面这一个稍微的改一改啊,改一改能不看懂啊,能看懂以后下面的事情我们就是要去将他们译成路由路径了,是吧?那这个是路径是多少了,是这样的,我就把它们都写成什么呢。
08:16
小写。能看到吧,好,下面还一个就他呀就他呀是吧,改成小写,这是一个快捷键啊,就是用快,大家大家写切换的快捷键吗。Ctrl shift加X。好,那这样的话呢,我们在两个啊路由的界面就映射好了啊,你可以先来展示测试一下,你可以稍微测试一下,等一下它接着呢,我们还有一个这个这个呢,也先让他看看能不能切是吧。嗯,好,我们写好它,我们来去把我们当前应用呢运行起来啊,把我们当前这个应用运起来,N PM start。
09:10
还有一个我们服务器的应用是不是也要跑起来MPM?好,没有太大问题啊,应该是没有太大问题,好起来,好起来以后确定一下。好,现在呢,他就去启动我们的前台的应用啊,并且访问它的这端号呢,是3001,因为3000已经被占用了嘛,那现在是3001,那最终呢,我那看一下现在啊老板付一,我是没改吧啊没有改名字在我们的妹里面。什么来?我哪个没改,大大神的没改,组建里面没改啊,啊就这个。
10:05
对吧,嗯,好来现在呢,显示不了任何东西,主要是我们现在没有一个匹配的路由,来看一下现在我们的这个妹,我们显示的实际上显示妹啊,妹里面现在有什么界面吗?没有,这个妹里面现在你看就一个D,关键你要跟他的某一个匹配才会显示出来界面。扔了不,那现在我应干嘛去,是不是访问这某一个路径就扔了,我来试一下呗,走可可可以,当然你是可以切换到移动端的模式去访问,还一个是什么来着,嗯,叫大神啊,应付是这个吧,没有问题。好,那下面我们的工作呢,就是把这一个,把这个界面结构给它搞出来,整个界面结构给它写出来,它写出来还有点小小麻烦,为什么呢?我们先要去分析一下这两个界面啊,这两个界面啊,为什么分析了这两个界面有相同的结构。
11:14
能看到吧,有相同的结构,哪个部分呢,这个部分。叫头像选择能不懂?那。也就是说有两个相同数,那我们应该干嘛呀?对,我们应该去抽取一个组件出来。这个能不能懂,我们抽取一个组件出来,那我们这个组件可以叫什么名字呢?头像我们是不是用汉字来表达的是吧?我们用的这样概念叫hand,还记得我们那后台有一个字段就叫hand的啊,用来存头像的名称啊,那我们现在是一个头像就叫hand的吗?这样不太好,我们是选择hand对不对?那我要hand的什么呢?Select。
12:05
Select啊,叫select什么意思,Select不知道吗?选择器啊,那翻译过来叫什么头像选择器,就我们就选择头像的一个组件嘛。这名字可以吧。哎,你要觉得这个名字不太好,那我就没辙了啊来,那下面呢,也就是说我们要为我们刚才的这两个路由组件是不是抽取一个共同的一般组件就可以能不懂啊,它也就是说它是个什么呢?UI主页,我们要去建一个文件夹啊,这个过程很重要啊,就大家需要一个分析的过程啊,我们叫它什么hand gun select这么两个单词吗?接着,别看着效果都很简单,但是要写还是不那么容易的。
13:02
能看懂好来,这是用来干嘛呢?选择啊用户头像的UI组件,能看懂好再写一个my component。接着写成什么叫hand select?可了吧,那我先啊简单的做啊,先不去做具体的东西,写一个表意一下啊,表意一下后面再来去写这个部分啊,我们先把譬如说我们现在去做那个老板呢,那你说我现在要干嘛呀。我要去写界面了,我一上来看着上的时候,首先啊,这个地方是有一个头部哦。对不对,头部接着下面呢,就是我的hand什么select,接着这个里面啊,是一个列表啊列表,列表里面是不是很多项啊,这不都是input。
14:15
还记得吧,啊,接着最后是一个什么八。啊,当然大家也可以去啊,如果你不太清楚,大家可以去看一下结构,因为毕竟大家是刚开始做,可以去看一下整体的结构,大家看一下,这不是我的老板硬货吗?是吧?老板疑惑,接着整个外面是一个div对不对,整个外面是,接着上面是。来八,接着是我们的hand,什么select,接着下面好几个是我的什么input item,好,这个职位要求。它不是item,它是什么呢?Text area item,诶,这个用来干嘛的?
15:02
其实很简单啊,用来显示多行的输入框的多行。能不能,你看他这不占了,应该占了三行。啊,最后是一个什么八,这个应该没什么太大问题吧,好,那我们现在呢,就来去写它。写它的时候呢,外层是div啊,我们先把那个先这样把那个我们需要的一些。组件先给它引入进来对吧?D mobile哪些呢?首先最上面是叫来八是吧。来欧巴接着啊接着这个先不用管它,这是个整体是吧,下面是呃,直接也没搞大家看呢,也没搞什么历史的,直接来的什么。Input item,那我们直接就搞input item啊,就搞了个简单的啊input item,接着还有什么呢,Textem。
16:05
应该是这个吧。好像是小写的是吧。是吧,OK,好,下面还有一个什么。不多吧,啊不多啊好,那下面工作就是我们需要去啊写它,诶我们中间还有一个组件,就是我们自定义的这个组件叫handle select,把它引入进来吧。来这个时候要退两层,接着进入我的component下面的hand select下面的hand select,这个应该是没什么太大难度了啊,来我们的div首先一上来来一个什么来吧,好,这个level吧,是不是有一个标题啊。
17:00
就写在这里面,是不是来,我们现在当前是叫什么,嗯,老板,嗯信息完善吧,啊就这差不多好接着是谁是不是他。对吧,接着是一些什么input item,对吧?Input item指定这个里面的内容啊,这个里面不就它了吗。啊,大家看呢,不招聘职位吗?复制一下。能不懂啊,这就是不就这了吗。不在了吗?放在什么没有可以不一定啊,就是这里面大家刚刚不看的那个结构吗?啊啊,你也可以放历史的里面也可以啊,可以放好在这里面啊,在这里面还可以稍微稍微显示一个,显示一个文本试试是吧,叫please。
18:06
后的等于啊,心情输入十位啊,对啊,大概是这个意思啊,好,默认它类型是什么还记得吧。默认类型T是等于T的嘛,包含输入框对吧?好这个其实可以不指引,因为它默认就对了是吧?好还有一个什么公司名称的,这不类似的吗。也就是说再来一个啊,在里面搞,搞上他公司名称,那请输入嗯,公司啊名称得了啊,请输入招聘职位,字写都写的一样,这样能能对齐,尽量对齐。多了一个吧,好,还一个。这不一个薪资吗?其实跟我们那个注册登录很类似,说实话。
19:08
好,接着下面这个不太一样,因为他是一个什么呢?多行输入,不懂这个多行输入来。看到吗?呃,它的名字叫text error item,好,它的用法呢,跟这个有料不太一样啊,我们这次呢,就直接去看一下它得了啊,啊,我们去找一下我们的这个老板信息完善,我们看一下我们的这个是大概是怎么用的,大家看一下跟刚才的那个input item有一点小不一样,它那个标题怎么指定的。是通过title属性来指定的,而我这个标题怎么指定的?标题不左侧那个文本吗?是不是通过了标签体啊。能懂吧,嗯,这个有点不太一样,还有一个小事情。什么意思?
20:00
啊,行数是多少行对吧?啊,就一上来你的这个行数出行是多少行,因为老师我这三行不够了,你只要按一下回头键,或者再按一下,它就能够去再输入啊往下去走,它是默认的行数是多少行啊。把这个给他拿一下,这我就不一点点写了啊。好,这个直接来个这个,这个能不能看到,好,最后是一个什么八呢。对吧,啊,这个button我们显示的是保存吧,对吧?啊保存,而且是一个绿色的,那我应该怎么做呀。加一个type等于还记得什么primary,如果想保存中间空,那叫NBSP啊,可以稍微搞三个这个意思啊。能看到吧,能看到,那能看到以后,下面我们稍微的去看一下我们当前的这个,我们是现在写的什么,不是这个老板一步走你。
我来说两句