00:00
嗯。那啊,我们就接着上一次课讲的东西呢,继续往下写是个什么意思呢?比如说我们现在啊。再给他过一遍,去注册一个新的账号啊。啊,随便来个TT吧啊,密码是123123,就老板吧,点击注册应该进入什么界面啊,是不是应该是老板的信息完善界面对吧?啊这个没问题啊,这里面有一个debug啊,我给它去掉。是些什么,那好了,那下一步我们下一步是不是就完善信息,选择一个头像指定是不是一些相关的一些信息,我这里面就随便写一下啊。好,接着点击什么保存呗。是吧,那点击完保存以后应该。请求一个什么路径?
01:00
老板是吧,也是它的一个对应的一个主界面。但现在呢?是空白的,是因为报错吗?不是,而是我们没有写。对吧。这个登录吧,那下一步呢,我们就是要去写,那最终呢,实现这样一个类似的一个列表啊,因为现在大家当前登登录的是大神啊,差不多是吧,好来啊,这个时候有我们这一次呢,要去写好几个路由主页。啊,好几个路由组件,哪几个呢?我们来看一下,先来看一下我们在写啊,先写的是简单的,所以呢比较好写。我们下一步呢,要写的main路由的一些子路由有哪些呢?老板啊,就比较简单的。以及什么呢,大神的啊,再接着我们那个整体界面是不是有有些导航的呀,消息列表message,接着是个人中心。
02:10
我还写了一个。什么意思not啊,就类似于404的页面。因为他有可能随便写一个写一个叉叉叉,我有对应的吗?没有没有对应的,是不是默认就是一个空白的呀,那样不太好,对不给他一个not found1404的页面。啊,抱歉找不到该页面,接着再来个按钮,让你回到什么首页?这个怎么弄啊?好,嗯,具体的情况就这样一些啊,下面先不完啊,这个应该是没有什么难度的。能理解吧,好,那下面呢,我们就来去洗啊,这些都先干。
03:06
啊,看这里啊,我们现在呢,需要去创建一些路由组件,而且这些路由组件呢啊,我们说过一般的路由组件都在哪里,Contain下面啊,因为都会涉及到跟redu进行交互啊,一般的都是啊,但后面是有特例的,等会再说一个特例。来先来两个用户相关的啊,老板。对吧,而这个老板里面啊,是不是应该。有一个GSX文件对吧,老板点GSX。而且呢,这里面有一些固定代码,我们来给大家写一写,大家看懂啊啊这叫啊老板可以吧,好老板好,接着啊,它是一个那个容器组件,必然会有一些固定代码,我也给他写了。
04:06
写了,等会就复制粘贴了。能不懂啊,哪些呢?我这里面要包装生成容器组件,需要引入一点东西,是不是啊,引入一个函数嘛。叫什么?听不懂而最终向外暴露的。是谁调用connect产生的容器组件?那包装谁了?老板是吧,里面啊里面。这么起来的。是这箭头小括号大括号啊,我不管他要要我先搞好结果再说可以吧,来。如果再搞得好一点,应该在这里面对整个模块进行一个简单的说明,对吧,OK,这是我们的,嗯嗯,老板吧。
05:14
嗯,主界面啊,路由主页。路由容器组件。能不能看懂计划应该能看到吧,好,那下面下面的不有一个对应的吗。CTRLCCTRLV叫什么呢大神。稍微的把这个里面代码文件名改改,代码改改,这是不是老板的,是大神的对吧?啊大神的这上面不用动,把这改改改什么。来,我如果想一起改。
06:02
看看这个能不能改啊叫。嗯,大神。试试。是不是一起来了?能看到吧,啊,就这么个事啊好。那这个这玩意还有一个,诶这里面没改是吧,他这个不知道不知道有有有这个,因为他们俩是同一个引用,这只是刚好的名字跟他什么一致啊好下面那下面还有那个我们的消息。叫名字叫什么?找message。是吧,那就叫消息界面。路由容器组件,这个都不用动啊,只需要把它改成什么message。
07:05
问题吧。还有一个个人中心。嗯,个人中心我是用的一个名字叫什么呢?你可以用user也可以啊,我用那个名字叫personal,个人的意思就是。来改一下文件名。改一下注释。哎,这什么路面,刚才是不是写错了?界面是吧。刚才这个就有问题啊,就要露面去了。叫界面。嗯,界面这是界面是吧,没问题啊。
08:01
啊,那界面少了个是吧啊。来,还是尽量的给他写好一点。啊,行啊。呃还嗯,现在我们已经写好了几个啦。是不是四个,也就是我们那个table选项一共是不是有四个。元素老师,这不就三个吗?他有一个是不是两个切换隐藏的呀,啊,有一个是老板,那有一个对应的是什么,是不是大神。吧,还有一个我们前面说过了,有一个什么代表404的一个界面的一个路由,对不对,这个404的。说一下这个404的这个界面不需要跟reduction交互。虽然说它是路由组件对吧,但它很简单。
09:03
不会进行交互,那我们就不能写在这个里面,就不应该写在这里面,也不能说不能。对吧,你写在这里面也不犯法。因为这都是一些规范性的东西,你你不按规范做,他其实你说有多大问题也不至于,那就是不太好。这个论懂,那也就是说我们会在那个components下面去建一个文件夹,叫什么呢?嗯,我就叫他not fun可以吧。Note放好,再建一个接手X文件。好,这个里面代码呢,我就我就把它稍微的复制一下。
10:04
这我就不再去写了,因为太简单了,这里面主要就是有一个标题,有一个什么。按钮,点击这个按钮干嘛去了。是不是请求根路径,请求根路径还记不记得,我们前面是有逻辑的。当我请求的是跟路由路径的时候,它是不是根据当前用户来去判断是进入哪个界面。还记得吧,啊,这个要知道。啊,前面我们逻辑分析过,我就不再一个一个去说了,就提醒一下。好。那这一些都写好了以后。下一步要做的事情是什么?现在路由组件都定义好了。是不是将它映射成组件,映射成路由,对不对,将路由组件映射成路由,那我去哪个里面去映射啊main吧。
11:06
因为这些路由都是命的什么?子路游。这能理解吗?好。来在这个里面呢,那也就是说我们刚才一共写了几个路由组件。几个五个四个导航的嘛,一个not found对吧,Not found需要写在最后。也就是说前面都不匹配。那就自动找not found。这个能不能理解啊,当然我们在这里面先要把那些路由组件先给了什么。是不是引入进来?来引入一下啊。首先呢,是我们有四个导航的啊,导航的来。
12:02
有大神的。那就叫大蛇卖。对吧,有大神啊,必然会有老板。大写的啊,手这么大写。还有一个message。写啊,一定要提示,尽量提示啊,别别写差了。啊,Message,接着还有一个什么。叫叫什么东西,叫什么概念?什么概念,个人中心,对啊,你需要去说一下这个概念啊,个人中心。对吧,好没问题,这是这四个还一个跟这个路径不太一样。嗯,叫他什么呢?Not fun from啊,这一次呢,它不是一个容器乳液,所以退一层肯定是不行的。
13:01
啊,至少要退两层,你先看看对吧,好接着去找。Components。下面的。Not found下面的not found。是不是这个概念,这个应该能懂吧,好能懂以后啊,下面我们先把这个简单的先搞定了。好,那也就是说现在呢,我需要怕什么。不需要,我只需要一个什么呢。Component。能不能看到。啊,相当于配置一个404的界面啊好。在这之前,是不是还有四个导航的路由组件需要配置?啊,这个时候啊,就得先说一说了。大家看啊,每一个导航的啊,路由组件有一些相关的信息。
14:05
比如说每一个导航呢,是不是有它对应的一个路径。有没有这是pass对吧,还有它对应的组件是吧?组件肯定啊,这不是最基本的吗?最基本的是两个这两个信息吧。一个是路由路径,一个pass吗。一个是组件是吧,这两个除了这两个。还有一些对应的信息是固定的对应关系。比如说每个都有自己的标题。对吧。Title,还有每人都有自己的什么呢?图标。是吧,每人还有自己的图标,下面的这个标题,这个内容,这个文本。能不能看懂?那也就是说我这个导航的路由,每一个都包含几个相关信息。
15:00
行吧。五个这个一定要先看懂,能不懂。哎,他们是是不是一都是一一对应关系的,对吧,那为了更好的管理。为了能够更好地管理他们。我们得做点事情。你想看每一个都包含五个信息。对吧,我们一共有几个。一共四个对不对啊,每个里面又包含五个信息,那你说该怎么办呢?是吧,大家知道一旦数据多了。就应该用数组或者用B项来存对不对。好,那先问。我每一个路由都有这五个信息,你说用什么容器来存?用对象来存,因为它每一个信息都有一个概念,这没有什么先后啊,这哪有什么先后,这五个信息。
16:06
能懂不?这五个信息没有什么先后顺序啊,Pass组件标题。啊,图标在图标下面的文本对吧。这怎么弄?有人可以说,老师我就想用数组行不行,这也不是不行,你用数组,那你就要确定谁是零,谁是一,谁是谁三谁四。那种感觉是不太好的。因为不能建名字。这个能不能弄。好。这是说的是。每一个路由里面包含了这五个信息,用对象来存是吧?那我一共有几个导航的路由?四个对不对。我一共有四个导航路由。但是我显示只显示其中的某一个吧,对不对,先别管显示其中的哪几个,我先想着显示四个也行。
17:08
对吧,那现在就说我这四个,那也就是说我一共有四个对象呗。对吧,每一个路由不都是一个对象吗。包含五个信息嘛,对吧,那这啊四个对象。又用什么结构来存呢?啊,这地方可以用数组,为什么呢?因为他们这一个出现的就是有先后顺序的,可以用数组吧,可不可以就左边的撇着,左边的为零,接着为一,接着为二可以吧。这是完全没问题的。好,那当然你用对象也是可以做的啊,只是我们用数组到时候可以便利产生。来最终啊,这是一个分析,这一个分析整好以后就会产生一段代码,这段代码我是不会写的啊,因为写起来没有什么太大意思,分析好了再写,其实就很简单的事情,我们来看一下。
18:17
在这里面,我在我的main组件里面。定义了一个,给组件对象定义了一个属性。叫level level什么导航,导航的列表,导航的数据列表,整个是一个什么类型数组,那数组里面的每一个是什么对象,来我把这个呢,给它复制过来啊,我跟他说过了,我这个我就不去写。看见C。放在我当前的main组件里面,而且放在这个类里面。
19:01
那也就是说这一个是谁的,这个通过谁来访问嘛,我要知道是谁的,才能知道通过谁来访问。我们说过,这里面可以加,也可以不加,加与不加是有区别的,对不对。那不加是给谁添加属性,给组件对象添加属性对不对,那加了给件内添加属性对吧?啊给组件对象添加属性。对吧,而这个属性里面存的数据是什么?数据包含所有啊导航组件的相关信息,数据懂不懂,而这一个是不是就对应一个导航的路由。
20:02
看它包含这么几个信息,看看跟我们刚才分析是不是一样的。Pass以及component。这是最基本的。路由不就这两方面吗?还有三个相关的数据,这个用于干嘛呢?显示顶部的标题。对吧,这个呢。底部的图标,这里面有一个图标的名称,我们图标等会给大家看啊,是有一些图标文件的,下一个是什么图标,下面有一些什么文字。大家注意啊,我这个路径代表我是一个是不是一个什么老板的主界面嘛,但老板主界面显示的是谁的列表。大神的列表,所以我这个是什么大神列表能不能看到。那么啊,这里面显底部显示的标这个文本也叫什么大神。
21:04
好,这一个不能随便瞎写,这一个不能随便瞎写,这个得说一说,找到我们的课件资源,找到。找到这个resource,找到images,好,我们这里面是不是有一个level呀,打开它能看到这个里面这个图标是不是都有一些名字。而每一个图标是不是有选中和不选中的两个图片,对不对,样子是一样的,只是颜色不一样,而且它的名字稍微有点区别。有一个基础名能看到吧,就是如果你是选中那个图片是不是有一个杠是吗?Select,那也就是说我只要知道这一个名字,这个基础名字是不是就可以了。
22:00
这个能不能懂,能懂吗?好,现在呢,我暂时不引入,为什么呢?因为我这个图标,这些图片并不是放在我的这个main里面的。不是放在我的这面里面。是什么意思呢?因为我们这个底部的导航的这个还是有一点难度的,所以我需要给他什么。单独抽取成一个什么。组件就我需要不断的给大家去练习抽取组件,定义组件的这种搞法。因为我们最终有一个概念很重要的地方,叫组件化编码。对吧,就要根据实际情况去抽取组件。这个人不懂。好,没有问题啊,那下面。这看懂以后,下一步我们就要做了啊,这个能看懂吧,来啊,我们就一个一个不写了,下面很重要的事情我要干嘛去。
23:07
是不是映射路由对吧,映射路由,在映射路由之前,我这一次啊,要给大家去分析一下这整个界面,这个命主界面是一个什么样的结构。大家看着啊。它实际上是这样一个情况。是一个上中下的结构。这个是上面。一个固定的。这个中间的是什么呢?我四个导航。路由组件显示的部分。能不能?导航路由组件直接这块没不包含这个底部,不包含这个底部啊,当然自然也不包含这个底部。这个怎么能找吧?这个地方得啊,这个这种分法只是针对于我的四个导航路由主页。
24:10
四个导航路由组件,他们都有一个共同的头头部标题,而一个共同的底部中间是它的路由组件部分,但是这一个并不适用于谁呢?其他的,比如说我们的这个。老板应付我们的这个大型应付,为什么呢,你要看呢,他自己就有头部。对不对,对,同学看到啊,他们自己就有头部。那怎么样做到了,是不是啊,怎么样做到看这里。啊,看着啊,我们整个刚才啊,先不要想那么多,我们先想着就大家都有头部和底部该怎么做,再去想着怎么样控制。
25:00
啊,也就是说在这个Switch的上面是不是应该有个头部。这个能不能懂,应该头部叫什么?是不是来我爸?是吧,只是我现在引入了吗?看一下。我一怒吗?还没有吧,所以我需要干嘛去引入一下呀,Import大号level from on d mobile是这个吧,啊这个B是大写的来,那我们这里呢。是不法里面啊,里面是一个标题。对吧,但是这个一定显示吗。不一定。不一定显示,什么时候才会显示呢?是不什么时候才会显示了,对不对啊,是不是得看我当前请求的路由路径跟他们中的某一个是不是匹配啊。
26:09
那我先是不是得得到他们,要不要,要得到他们吧,要二来得到他们。在这之前,在return之前先去取一下啊来取一下。看这个呗。是吧,啊接着。是吗?还真不是啊,它本来就在里面对不啊,OK,所以我这里面是不是写个大括号就可以。可以吧?可以啊,好。那可以之后啊,可以之后我们继续的往下看,那也就是说我们现在啊,要想去整啊,我们可以这样。可以去到有一个概念啊,我来说一下叫什么呢?叫current level。
27:06
当前的导航这个可能能找到,也可能什么呢?找不到,我要找了才能知道找不找不到啊对不对,这个能不懂好,那我找的条件是什么,得先准备好条件数据。是我当前请求的pass。能懂不,我不当前不有一个请求的pass吗?这个咱取过。咱整过的this.pro.location点他这个你要不用背你去那个啊,主件里面看是完全可以看得到的,我这就不看了。这是我的一个条件对吧,我这个pass是不是需要跟这个数组里面每一个元素的pass进行比较啊去查找,那你说我现在要到数组中找一个元素,我应该用数组的什么方法。
28:06
啊,前面也说过这个东西啊叫。没说过吗?说过肯定是说过的,我还跟大家专门出过一个题啊。查找,那查找这里面啊,它是一种生命式的语法,也就是说只需要给他传一个回调函数,告诉他了那个回调函数的不值是to还是for,如果是true,那就找到了来。下面每一个都是一个level是吧?啊来接着呢,啊,箭头这个值很重要,如果是触得到的是谁。第一个是不是得到第一个,这个能不能懂啊,如果是处得到的是第一个,这个搞清楚啊好,那下面啊下面下面的情况就是我不能这么写了,对不对,我应该写什么呢?never.pass等等于pass,这个是我请求的路径吧,请求的路请求好,那也就说最终这个结果大家知道啊,相当于得到当前的对吧,得到当前的一定有嘛。
29:28
记住啊,可能什么。没有,那也就是说有,是不是说明我当前请求的是四个导航中的其中某一个?对不对,那此时是不是才需要显示这个标题?懂不懂,那也就是说这个一定存在吗?不一定得干嘛去了。判断呢,Current never有值吗?是吧,有值写这个对吧,而且我还能知道这里面显示什么文本呢。
30:11
Current level。是不是有一个title对吧。我刚好存的信息,这个信息存好了是不是很好用啊好,否则呢,那那不会做任何显示,但你还不能不写。你们不玩的话,你这个语法不不完整了。能不懂能懂,中间还没做好,中间我们现在是不是要将那四个。导航路由组件给它映射上。对吧,这个什么懂。能理解吧,嗯,来吧,那就去映射,怎么个映射法呀,那这个地方是不是要根据这一个去便利产生多个。
31:03
变产生多个root嘛,是不是,那这里面是不是要写GSM了。真的不也就是说我现在我本来不是这里面就是有数据的数组啊,我现在是不是要产生这样四个的标签,那我应该调用数组的什么方法,Map这个咱做了好多遍了。对吧,来一个level箭头返回的应该是什么东西。返回来就是我需要产生的东西,我需要产生什么呀?不这个吗?对吧。能不能理解?就我最终说白了,我我当你说我一个一个写,那也是没有问题的,那多low啊。
32:03
你一个人写可完全可以的,你第一个取定下边为零的第一,第二个取下边为一的,一样可以取。当然我们不能这么做,因为我们现在做动态化的编程,没必要写死了,就那个我封装的这个封,封装的这个数组对象就没有意义了,那意义就缺乏了,本来我封装起来就让你动态去取了。好,改一改,改一改,路径是多少动态的。Never,点什么是吧?好,我的主见是谁呢?来,我是叫这个名字吧,看一下。是吧,没有任何问题,那也就是说我现在就通过这张代码映射了几个路由,是不是四个。
33:03
这个懂不懂,加上前面的下面这三个一共七个吗?能看到吧,啊,但是这里面说一说啊,这一个这一个LEVEL8。那好吧,只在我有一个概念,叫我有当前啊导航的时候才会去显示,因为这几个它不需要能不能。好,下面还有一个什么。是不是还有一个底部,对不?而且这个底部一定会有显示吗?不一定什么时候才显示。也跟这一样的。懂不懂,也就是说这这三个界面需要导航的那个推广吗?需要底部导航嘛,它不需要啊,你把它显示出来,那不就多余的吗。就这一个大家看一下。
34:05
啊,我们得去注册一个,随便来一个。这面应该已经报错了吧,再来一个啊,ABCCBA啊,CC啊,随便来一个,尽量不让它重复。现在后台我们的后台是不是有点问题了。开了吧,刚才不都不好起来了吗?嗯,应该是有点小问题,把它堵住了还是怎么着,有时候。干。呃,看你看有时候可能会被会被堵住了。也就是说我们这一个界面,它需要那个底部导航吗?他不需要导航,又不导航他的对不对。这个能不能懂,一定要理解,所以我们的这个底部。
35:03
啊,那也就说下面这个是写我的底部的那个结构吧,那但是我们说过底部结构等什么单独的是不是抽取出来对不啊,单独的抽取出来,这是我们啊下一个下步要去做的事情,就是单独的把我们的这个这个下面我先我先先写一个是个意思啊。这能看到吧,应该能看到啊。我们整个结构就是这样一个结构,那下一步我们需要把那个谁做出来?是不是底部导航啊,啊,把这个底部导航读出。好,先把这个来停一下。
我来说两句