00:00
下面我们一个要做的是登录注册的那个静态组件,什么一个意思呢?来看一下我们最终的效果。在我们的这个个人中心的这个界面。啊,有这么一个部分。能看到吧,这个部分一点就是进入什么。我们注册登录的这个界面对不对,也就是我们的另外一个组件叫什么。Login。就这吧,啊,就叫login。我们的页面其实已经写好,静态页面早已经写好了,那现在呢,我们要把这个组件创建出来,并且实现这样一个跳转。那么懂,前面我们已经分析过了,这个是一级路由还是二级路由,一级路由对吧。好,那我们把这个组件呢,先整体的创建出来啊。看着,那也就是说我现在去哪个文件夹里面创建组件。
01:02
哪个pages对吧,来吧,创建一个文件夹,取个名字叫罗对吧,好。接着啊,去创建一个VI文件,也叫login,没问题是不是。没啊没有啊,那下面呢,先不要写里面内容,甚至说你先直接在这里写一个。对吧,把这个路由组件,我们说路由组件先定义组件,接着干嘛去。应付。是不是映射成组,映射成那个什么路由,对不映射成路由,我们的一般的组件是不是要映射成标签呢?而我这个路由组件要需要译成什么路由。不在这吗?对不对,是不是再加一下就行,这能懂吧,再加一下啊,从这里加Y啊,复制一个能不看到,但是呢,我们先得什么,是不是引入啊,被引入的是谁呢?Login啊,这都没有什么难度啊,现在都是做一些普通的事啊,把这个写写,把这个写写,把这个变成小写。
02:20
运好了吧,那下面怎么样跳转我这一个当前这个路由组件是从哪个位置跳过去,是不是从这一个部分跳过去,所以我需要去干嘛去了,需要去写一下哪个组件。个人中心对不对。听什么呢?好说一下这一个部分大家看呢。大家可以审查一下,它看一下是哪个部分啊,这个部分能跳过去部分,这一部分挺大的,就这整个部分,它实际上现在是一个什么呢?现在是个A标签。看着吧,就这个。
03:02
能不能?啊,这个A标签呢,我们现在不用写A,我们应该是个路由链接才行。这个能不能懂,也就是说啊,用谁来去代替这个A标签呢?Root杠什么宁去代替A标签,而且来一个to。斜杠什么罗?啊,现在你不要管我已经登录啊,按说来说要考虑你是否已经登录。如果没有登录,那是去落地。对不对,那已经登录了,还是去落地吗?不是,那应该去个人中心的一个页面对不对,这是我们还没做那个啊。现在不要考虑登录的情况啊,不要考虑已经登录的情况,那也就是说我现在我的这个标签最终是不是也会转换A标签了。我是不是用它来代替A标签,但是我是直接把这个A干掉,换成这个杠吗?大家看我的这个写法是吗?大家觉得。
04:07
他也就是说我这个地方的时候,我准备去把A标先干掉,把这个里面搬过去,你说这样行不行。那要怎么写?缺什么或者说怎么不行。这个入钢筋就会生成A标签啊,对不对,对,插个累嘛,你要把这个class不能丢了呀。这样子啊,你样子怎么能丢呢,对不对,难道不?看到吧,啊。好,那也就是说我们现在啊,我们能够去跳到登录页面了,我们来看一下是不是真的跳过去对不对,好,这边有个小事情大家看到。我都当我滑到下面的时候,他也滑到下面了,这样不太好是不是。
05:01
我怎么让它不滑到下面呢?知道吧。啊,其实也非常简单啊,步划到下面,只需要让我整体的这一个div啊o through,为什么?为什么?就说白了就是他没混动了嘛,你看。看着啊,我是不是划到下面了,手里还有划到下面去吗?没有能看到吧,好。没问题,下面我干嘛?点下它能过来不。可不可以,可以,那说明是没问题了吧。啊,整个路由跳转没问题了,下面我做什么。还有一个小问题,有一个小问题啊,这个。对不对啊,这个我们等会再做啊,怎么样实现它的显示隐藏,这个是最后要做的,对吧?我们现在先把这个登录的界面先给他搞出来,我们等会再搞这个啊,这个需要单独的去做。
06:04
这个登录界面就是我现在是不是要去从那个静态页面里面,把我的登录界面是不是拆出来呀。先拆我的页面。实际上是哪个呢?来看一下,不就这个吗,登录的。能不能把它看成C?来猜到我当前的这一个log里面来。这个能不懂啊,好,这个里面啊,这个里面说一下会用到一张图,SVG的图片。SVE的图片是那个什么呢?验证码图片,我这个验证码图片呢,我是有的。我有。啊,大家看到resource images,我这里面一共有三个SVG的图片啊,现在我用的是看,就是验证码的意思啊,也是验证码,大家看看。
07:03
能看到吧,啊,就是这样一张图片,现在是个固定的,到时候我们要动态生成,因为现在写静态图片嘛,现在我提前给大家准备了一张这样的一个SVG的图片,看下C,那我要将我当前的这一个。哎,这个啊,这个文件是吧,来在我当前的这个里面创建一个什么images对吧,接着给他拷贝过去这个路径就对了吧。哎。应该对的,对不对啊,写错了吗?错哦,贴错地了,这搞错位置了,我说怎么搞搞不过去来,呃,应该放在我的什么log里面,把它拖一下,搞错位置了是吧。这可以吧,嗯,可以啊,好来啊,下面要搞程序什么样子啊,样式,那就是我去搜索这个类所对应的样式呗,啊搜索这个类名所对应样式,那也并不难啊,这我们都搞好了。
08:20
诶,因为我刚才是选中了啊,所以。他长大。有吧,那我怎么样去负责,你别你别这么去这么这么去这么去刷,这样的话,那你有可能搞错位置对不对,怎么办呢。搜索看到不啊,大家注意啊,掌掌握技巧,说白了看见C啊,回到我们这一个登录界面来把这一个搞上啊,这个面肯定会用到那个mixing啊,所以我要引入一下。这好做是吧?
09:01
认不好,我们先来看一下我们的这个界面啊,有没有变化啊。是可以了。能懂不能懂,好,那我们的这一个界面变化以后,下面我我可以过去可以这么做吧,当然我是应该是点他是不是回去啊。对不,这是交互性的啊,你也可以做这个,其实很容易,我们可以简单的快速做一下,这也没问题,来我们先把这个最最简单的搞一下,那也就是说我们现在是不是要找到刚才那个向左滑动那个箭头,实际上它是一个什么东西,我们来看一下,找一找。应该是个字体图标对不对,虽然谁了不就他吗。对,不能懂,那我要给他搞一个什么艾等于。
10:01
不用写,你说肯定就不对了,因为这个模板里面不可能写this多了什么,多了root.back吧,其实很简单,对不对。对吧,好就缺水了。就觉得这个。是不是,那这个怎么做了,这个其实就是大家要知道啊,在整个里面。这个只有在这四个路由组件才需要显示,对不对,比如说啊,大家看啊,我显示登录的时候是不显示吧,还有一个一级路由,我还有一个一级路由是谁呢?是商家详情也是一级路由他显示吧,诶。啊,现在是一个静态页面,我打开的是一个静态页面是吧?呃,我应该去。应该是8081吧。
11:02
对吧。能看到吧,你看我们现在啊,进入这一个商家详情显示吗?这也是一个也是个一级路由。对吧,那正常情况下面会去显示这个底部的,但它需要写什么,不需要,只有这四个需要,就这四个路由组件需要,其他都不需要,我怎么去知道他到底要不要写字啊,说白了吧,是一个这样的事,就是我的大家看到回到我们的APP。说白了就这这这这个这个呢,应该有个显示条件,或衣微衣或者微秀对吧,都行,就怎么懂啊,用微秀也没问题,那关键的就是就是什么问题呢,就是我怎么知道要不要显示呢。是不大家知道啊,路由组件要不要显示是不固定的,确定的,应该说不能叫固定,叫确定,什么叫确定啊,就是我的这个,譬如说我们M3要不要解示要是吧,三要不要要这叫确定的,能不能啊,这四个是不确定都有,都要显示,而登录了不要。
12:23
对不对。好,大家知道。知道一个什么事呢?我们有一个属性叫多了福,代表什么?多了代表什么叫当前路由对不对,当前路由能懂不代表当前路由啊,这里面其实可以说到一个在配置路由的时候。在配置啊,路由的时候,其实它还有一个属性可以去配置啊。还有一个什么属性呢,叫。
13:02
麦卡语言数据啊,说白了就是给我这个路由器路由添加一个属性。就叫me,而这个me呢,我通过我通过这一个,我们刚才的在APP里面通过这个多就能得到。也就是说我后面就可以写一个什么呢,点什么买吗,这个不。你说下一步你说我怎么办啊,我这个值它是个对象啊,这个值需要配成对象,它的值就是个对象,我往这个对象里面加一个什么。加一个标识属性。一个对不给他一个值啊,譬如说啊,我这边就有个属性叫什么数。那你说你看我们现在能不能做了啊,小case。大家看现在这一个给它加一个什么配置来看,这不随便瞎写啊,只能是他指定的名字好,它的只是个对象,就对象里面写什么,那就你就是了,对吧,我们是不是想去控制是否显示谁对吧,它显示么显示对不对。
14:19
能不懂好,那后面的事情就很简单了,我是不是就是把我这四个都加上。那可能就问老师,那这个要不要加呢。不用。不用。你说老师为啥不用呢?因为它是force。Matter这个值默认就有,只是它是个空对象,你没指定是个空对象,空对象去取这个属性值得到什么force?老师我就想配一下,那你要你要配那你就配,那但是配的时候必须配什么值。
15:01
但是我们还是基于一个原则,能少写一点代码就少写一点。对吧,这很正常的,那也就是说我们现在要做到这一点非常轻松,点麦点什么。秀,只有他是醋,我才显示完了。是这样的吗?这个啊,这个再问一遍,这个代表什么。当前路由。当我去点击不同的table选项底部的选项的时候,是不是这个会变化呀,啊,这个会变化的,好,我们来去看一看,看看行不行,已然是可以了啊,这是他的是吧,不是我的啊。可不可以好,下一步还有一个是我回去应该什么。显示出来。
16:03
O不OK。OK了吧?可以吗?这不是可以的吗?对吧,这四个是不是都有。这个都有,很简单,就是因为它配置的可以显示吗?对吧,而我这个是没有配置,没有配置它就隐藏吗。但实际上我们用的微数,微数是不是概念,现在有没有它?有这个复盖的只是什么?只是什么隐藏了,没显色对不对?说白了动物元素生成没有,有动物元素对象都有,在内存里面是有对象的,但只是没有什么显示出来。能理解吧,啊,就是这么简单,嗯。那这样我们的登录的静态组件不就做好了吗。
我来说两句