00:00
那首先我选择我们来去写一下它,这是我们下午重点要写的一个东西。就最后是这样一个东西,大家看一下是这个。这个里面的这个部分是用的它的主键写的。上面是我们自己写的。能听懂吧,来,我们先来把那个这个写一写。找到我们的level,把其他都先关了。那先啊,我们要去分一下先是不是把这个部分给写出来吧,这个是存到原生的啊S这写的啊,没有用组件,这不需要用主键,那这里面是不是可以来个panda可以吧,可以,那最好给他一个什么内名啊,内名叫什么呢啊。我一般取有可能会这种曲名,大家看完了,当然你直接写他也行,这也没什么太大问题。
01:03
小明领导啊,那个大我是怎么想到要这么写的,大家看到那个看到这个东西。其实是有追的,大家看一下这个。啊,我们那个form就是文档上写的吧,他开始的form是不是叫login-form呀,而后面他写的一个button叫什么?里面那个button叫log干什么button。就是写的比较规范。有人看,有人说,老师这不写的太长了吗?长不是问题。能听到不啊好,这是这个。那它除了啊,头部下面是一个单独的组件,我们等会再写啊,下面这个组件再写,我们先把上面的写好。因为这个里面比较简单,我们就直接写了得了,再来一个什么是不是image,以及来一个什么H1可以吧,H1特别简单,直接复制过来得了是一个诶啊硅谷后台自己写吧,叫硅谷后台对吧?好,这里面是不是需要一张图片,那个图片好像前面用过,是不是这个你没用过。
02:12
那你说我另外一个组件是不是也需要,所以放在他的这个登录组件里面合适吗?不合适应该怎么做呢?应该怎么做?在这个里面建一个文件夹,叫images。这能听懂吧,把这一个文件。给他拖过来。应该放在这里面,那如果一旦放到这里面,以前写的这个路径就什么就不对了,听懂不答案是不是稍微改一改就行,主要是有一个缩进的问题,有个退格啊,接着是。对吧。一定要记住啊,你要改这个路径最好,谨慎的话就检查一下,不用点过去。
03:01
能看到吧,好,没问题来,那下面我们是不是要先同理要引入这个图片。为什么?来引入一下import logo from什么要退几个,接着size下面的image下面的logo点偏NG,接着把这个logo给了什么?是不是塞过来就可以,这个再写个logo就OK了吧,那下面我们是不是要写点样式来控制它的一个布局是吧。能听懂吧,那你可以看一下我们当前现在是个这样一个样子。那个字应该是。黑色的老看不见,等会我们是不是要指定样式啊,好,这跟我们前面写的好像很像,咱前面写过水平的排开的一个东西,对不对,也就是在我们登录界面就写过类似的啊,来快速的写一写啊。名字拿到。
04:01
找找他。没问题啊,接着我们说这个地方它是不是有一个看着这应该有个高度吧。有高度把那里面的写写,这里面有不有他吗,干什么。我们是不是有一个干旱的。认懂不啊,哎,刚才我是不是把那个我刚删掉一个什么。看了。我说我开始为什么哦,这个已经现在没用了吧,现在已经控制不到了,对不对啊,说音不大,我刚才还写一个了啊来接着啊里面。里面有什么,是不是有一个。先把不用点多出一个点啊,还有什么是不是H1先把结构摆好是吧,接着去控制它的样子,好总共的高度是多少。
05:03
80是吧,我们找个80吧,当然这个地方你开始了可能慢慢调,或者是根据那个那个说明来去写啊来下面我们要控制它的一个位置关系,怎么做还记得不要看它什么,又是又是那个两个操作干嘛,Display black,接着a line it,为什么center,哎,尽快把这个颜色给改,对是吧,完了看不见,主要是。为什么白色吧,好,接着那个图片是不是有点大呀啊买一个Y的是是四十三十,我们咱写过啊,还有一个什么高度也是什么40。能看到吧,好,那这个字啊,大家注意这个字。是不是有点小啊,还有这一个图片跟左边右边是不是要有一点距离,就咱都整过了,其实嗯。
06:06
那他就来一个什么monkey。上下不用动吧,啊为零左右搞一个15差不多是吧。啊好,这是这一个来下面它呢,要有一个字体大小是吧,哪一个方size为多少呢?搞一个20啊先看一看,其实这个东西要要去整体去调啊,这个东西还是不是还有个背景颜色来着,整体有一个背景颜色是这样一个颜色,跟我们这黑色有点区别,看到吗?稍微有点区别来这个颜色值我稍微的拿一下。021就这个是吧。能听懂吧,啊把这个拿过来一下来啊,把这整个加一个什么卡是吧,为这一个颜色是吧?嗯。
07:00
当然这里面稍微有点问题,这一个这一个F1没有垂直居中,问题在哪里?它应该是有一点小底边距,看有一个marking什么bottom是不是有个值,我可以把它的值给它改为什么改为零,也就写个marin bottom姆为几为零?能看到吧,而且还有一个事情,这一个大家看一下啊,这个这个实际上啊,我比如说我点赞某一个位置。你说这个该这个里面有个什么东西。它实际上不是A链接,这是路由链接,能听到不路由链接怎么生成。是不是有个link?我们现在是不是写了一个div,能懂不?嗯,那我们现在最简单方法是怎么做呢?引入那个宁可组件是吧,From谁了。
08:09
能懂吧,嗯,把它。替代谁?Div只是我这个宁可是不是有一个兔啊,我的兔哪去?写了是可以。什么意思啊,当然我们现在还没,我们主要是现在没有。还没有去写这个相关的东西是吧?啊,其实现在写不写都没有什么太大影响啊,我们先写这个啊,就写这个,到时候到时候也可以改啊,先暂写这个好吧,先暂写这个啊,其实最后呢,会是一个什么值大家大家看啊,我现在这个样子我点一下。这是什么?是不是后呀啊,但是现在写的没关系,到时候我们再慢慢调,现在我们主要是不是测试这个布局啊,这个布局没问题吧,没问题啊,这是这一个是可以写的啊,没问题。
09:02
好,这是这个。那写好它以后,后面的工作是不是就写它呀?写它的话我们是去写哪个部分呢?这个时候得去找一个组件来说一下,这里面有一个组件叫menu,叫什么导航菜单,这没什么难度。打开它。是不是很多事例,我们其实很简单,就是找一个跟我们的样子差不多的事例,是不是啊,来。说一下啊,这一个就跟咱很像,就是它的功能更多一些,它还有这样的功能。懂吧,这个是不是跟我们很像啊,有大家看到有没有嵌套的,也有包含指导航的对不对。相,那二级导航能看到吧,或者二级菜单。那这一个包括它的主题的这个黑色是不是跟我们是一致的,那怎么说呢。
10:01
打开对吧,打开,接着我们来看一下它是不是引入了一些on d的组件,我们先全部捞过来,再去看哪个需要,哪个不需要,听懂不好来,比如说这个menu肯定什么需要吧,这icon需不需要需要,为什么说需要很简单,因为我左侧是不是有图标啊,好,他说有八层,我们这里有八层吗?我们这里有吗?没有,他这里为什么有呢?是因为它上面确实有个按钮,就这个能听到不啊,我们不需要吧,我们不需要好。接着他还引入了一个,还接触了一个东西。啊,就是menu里面内部有一个什么sub menu啊,就是指菜单是吧,这地方区别两个概念,菜单。嗯,菜单和菜单项是两码事。
11:02
啊菜单项,什么叫菜单项呢?就整个菜单的什么某一项,也就是说,比如说这一个是个菜单项。听懂了吗?那这整个是个什么菜单。听懂了吧,啊呃,这个也是个菜单,这个这整个你主要是它是不是有六子集啊,所以这个是一个子菜单。听懂了不啊,OK,这里要注意啊,为什么会有两个,一个是menu,一个sub menu,等会啊,其实你也可以看看代码再说也没关系,你看看代码就慢慢熟悉起来了。好,接着看好了,我需要把它的这个menu给他什么。搬到我那边去吧。到时候再删掉一些,是不是就可以留一些典型的就OK了,对不对,好来把它搬到我们这边来,也就是加到这里来。
12:01
诶,这个是说。要说一个事情。这样写行吗?外面得先套一个什么。这能听懂不?外面得先套一个div,这样才好往下是不是写啊。这能懂吗?啊,能懂好。那这样的话,这个类名就等会要稍微改一改。啊,这个类名啊,因为我们这个,诶刚才这个还真的是写的有点小问题,因为这个这个才是我的头,是不是刚才改的有点小问题,应该把它改成宁才对。能看出来不?嗯,咱改的是不是改的外围啊。啊是应该是这么个啊,咱确实是刚才没注意看啊,我没注意看,就是这整个这个是个div没问题。这开始其实写的没问题,这个里面是个div啊,写出还是应该小心点的,对吧?好,那这一个头部实际是不是一个链接呀。
13:10
它才它应该是个什么link,当然你现在写的它啊,写的看着都行,这也没关系,能听懂不,这个应该是个link。能看懂吧,啊这个这里面它有个什么to to是不是肯定指个例子,我先展示指定为斜杠可以吧,可以在它的下面还去写什么。是不是写了一个menu?没问题吧,啊,刚才没有仔细看啊,不好意思,好来注意观察。这个里面有大家看了,我们看一下最终的结果。这里面是不是三个。一级菜单项。那我删掉两个生一个就够,对不对,搞两个点搞典型的就行,不要搞那么多,把这两个删掉,有一个接着出来了一个什么。
14:03
是不是menu,哎,这个sub menu得留一个。也就说白了,洗面奶不要了,不要了,要那么多干嘛呢?就有两个两种情况。也就是说我这一个menu里面有可能有一个item没问题吧,也有可能有一个什么sub menu,看到懂吧。那some里面是什么?看好了又是什么item?啊,又是好,来看一下我们当前的样子。啊,现在说有错啊,是因为有的代码啊,我只负责一部分,这里面缺东西啊,比如说这个这个是用来去控制它的收缩的,就是水平方向收缩的,控制哪个东西的,说一下它。就这一个效果呢。
15:00
能看到吧,啊,这个不要啊,我们现在不搞这个事情,这两个我们暂时也先不管它,这个是用来去指定谁选中的,先看一下。看一下你就懂了。大家看是不是第一个选中了,为什么是第一个选中了,你看呢,默认选中的K的数组里面是不是指定为一啊,而我的第一个item的K为几为一?看到了吧,他要不为一,比如说它要为零,你说这个还选中吗。肯定不选中了。看懂了吧,看懂了吧,这是这一个事情啊,这些呢,我们现在不干啊,现在不干不干这些我们就搞简单的,先来简单的啊好。能看一下这个整个结构了吧,那现在我们来去写一个大致上这个结构。那首先第一个是不是首页,那也就是说这一个打卡呢,这一个menu item。
16:03
他的这一个东西是什么,首页首页。这能听到吗?啊,首页好了。那这一个应该是不是要指定那个对应的图标的那个类型名称啊,这个我就暂时先不找了啊,暂时先不找了,好吧,先暂时不找了啊好下面。啊,下面下面要写的另外一个呢,就是他啊下面一个,我还有一个,我下面是不是有。二级菜单的呀,那这应该是个上吧。能听懂不,那这个应该名字大家看好了,这个K呢,是它指定的一个唯一的值,接着我这个应该写什么。我应该是不是写商品,也就是我当前看到的这个商品看到了吧,里面是不是有两个子菜单呢?子菜单项应该叫对不对,那我这个里面是不是应该有两个item呀,那这个地方应该写什么呀。
17:05
有一个叫品类管理,一个叫什么商品管理。品类管理,还有一个叫商品管理。嗯,商品啊,商品管理没问题吧。OK,好,但是呢,稍微有点问题,有点什么问题呢,我们来看一下我们的慢慢再看,大家看这个没问题,下一个这个左边是没有图标了。能看到吧,那说明我们这里面光写个文本是不够的吧,光写完得是不是写这个结构。至少得写这个结构吧。能听懂不啊,也是要把这个结构给它捞进来。加上。
18:01
他呗。能不能看到。接着这个类似的吧。能不看到来看一下我们的现在的不就是这个样子吧,只是我们没有去找对应的图标而已,是不是?改换图标是不是就跟这个一模一样的呀,那下面的操作跟这个什么。一样,是不是类似啊,跟这个类似,那其实后面的事情就简单了吧。嗯,当然后面我们会做优化,先先知道我们大概是一个这样的结构是不是。啊,那就说现在啊,我们写了一个基本的左侧导航的结构,但还是不够的,后面还可以写,但这个就没有必要,我们现在没有必要写了。暂时先不写了啊。这个难弄不难弄,这个是没什么难度的。
我来说两句