00:00
下面我们重点来做这个组件,金融商品里面。先我们来做一个东西啊,商品分类管理,今天我们要把这一个组件给它全部功能做完。这里面啊有哪些功能,我们大家看一下,首先它是不是有一个概念叫一级商品一级分类列表的展现,而且是不是有一个这叫什么。这什么效果,分页效果。能懂吧,分析效果好,它不仅有一级分类,还有什么呢?查看子分,那也就是二级分类呗。认懂不,那也就是说我们的某一个商品啊,可能是一级列表下来,也可能二级分类下面的对不对,先创建分类是不是才能创建商品。那种包,当然大家第一次访问的时候应该是一个分类都没有,因为你的数据库没东西。能听懂吧,大家开始可以通过那个final的前台项目去添加一些,你写项目过程中是不是直接可以去查询显示啊。
01:07
你开始啊,直接去查询显示肯定是一个都没有。那可以通过是不是这样的方式去添加呀,如果没有的话,是不是可以添加的啊,我这里面就随便写一些名字啊,随便写一些名字他谁。啊,那我在哪去看呢,应该添加了什么,最后最后了吧。哎。有点小问题是吧,大家看我那个太岁是不是没没有看见呢?能看到不肯定是多少有点问题,等会我们再来看,我们把它做好就行啊,最终的版本我们到时候再去看一下,为什么会啊不行。按来说应该是要应该是要有的,但是确实没有啊,再来写一遍啊。啊,确实有问题是不是是吧,等会我后面后面再实现啊,我们实现功能就行,就这一个,还有一个呢,是我们这个分类的功能比较简单啊,修改分类,修改某一个分类的什么呢?名字啊,比如说我给它改成BB。
02:12
能看到吧,大概是这个样子吧。这能懂吗?能懂啊行,就基本的功能呢,就是这样一些,有一个列表展现,有一个添加,有一个什么修改,当然它有一个一级分类和二级分类的概念,是不是。就能听懂吧,啊一级分类和二级分类,哎,我这一打开里面空白了,说明什么,说明这一个一级分类下面没有什么二级子分类,是不是这能懂不来啊好,那我们就来去做一下。那你说我们去写是要写哪个组件?我们是不是有一个category的这样一个路由的主页,那我们先做先实现一个什么效果呢?大家说先肯定要是相当于把这个静态组件界面是不是先搞出来。
03:09
啊,先搞静态的,再去搞一些动态的,对不对,好来,那我就告诉大家,跟大家说一下,这一个组件会涉及到。啊,哪些D的组件,因为主要都是用D的组件写的,没有写任何自己的样式。能懂吧,好,我来说一说整体这一个是一个什么呢?啊,有一个组件叫cut是个卡片啊,是一个卡片的结构,好,那我把反正我们要打开了,也刚好我已经收到这个卡片了,大家看一下。这是一个卡片式的一个结构,它还分为上面的左侧和右侧,还有下面的内容区域。我刚好就是这个结构,你看大家看我的这个我要做的页面啊,刚好就是这个结构。整体是个卡片,这是左侧,它称为标题,听懂,不在右侧,它为额外信息。下面是它的主体内容部分,而这一个部分又是一个什么呢?
04:13
表格也就是什么table上面,外面看,里面是个table,就能把这个事情搞定,而table自己可以去带分页。也就是他是一个带分页的推广。能听到吧,当然这个右侧是不是还有八台,还有一个什么。这是什么呢?是不是icon啊,是个小图标对不对,这能听懂不?那得。那我们怎么做呢?先把那些我们刚才分析过的那些安D的组件给他什么先引入一下是不是。From来写一写第一个最外围是谁了,接着里面有一个非常重要的叫什么table,最主要就是两这两个,当然有一个小的比较简单了,But icon,这就比较简单了。
05:16
能懂吗?能懂好,那我整体不是一个div,我直接上来来一个什么呢,看了,关键是看了怎么用呢,不用你太太去自己背啊,你要有一个能力,就是能够去根据文档来去写效果的能力,你复制粘贴都不丢人。能听懂不啊,当然你光复制粘贴你就不改,你能实现你的效果吗?不能,所以说你在复制粘贴只是省一些力而已啊,好,打开它。这不看什么,那我们就用第一个吧,行吗?把第一个给他什么呢?是不是拿过来就行。好拿过来就行啊,那拿过来之后,你现在我们来看一下,我们当前的已经是个什么样的,大家看一下。
06:06
那这个时候我们就要访问品类是不是。好,等会我们再来聚集这个这个宽度宽度的问题啊,对吧,好。那现在啊,现在我是一个card,那card的话,我这里要什么呢。是不是一个标题,那标题我们就按照这个效果做呗,是不是现在就写成这个样子,那我啊我最后啊,我到时候我最后大家看着啊,一定是这个样子嘛,也不一定可能还是这个样子,对不对。啊,所以这个结构相对说有点复杂吧,我们先不做这个复杂的结构,我们说句简呢,什么意思呢,我先给它定义到外面,这样好扩展,也就是说我们先来定义卡的右侧啊,右侧标题右侧有一个什么抬头,暂时我最短的时间是不是就显示这个正串。
07:07
这能听懂不能好了,那接着有一个什么呢。额外信息,它这个里面说style为是不是指定宽度啊,不用指定,接着有一个额外信息,这个额外信息写在哪一边呢。右边。啊,我也把这个定义出来。啊,我先暂时写个串啊,我来说一下这个是看的什么啊,刚才是左侧是吧,写错字了啊,这是左侧,这是右侧的对吧?啊这个右侧来。定义好以后把它塞进来,这没有吧,关键我这个是个字符串吗。不是,是一个什么button按钮,那我得来看着啊,这个里面得写一个什么button,而且button内部是不是包含的是一个图标和一个文本,那也就是说先来一个什么icon,接着再来一个。
08:09
是不是有一个概念叫添加的文本?听懂了,不只是这个icon需要指定什么属性,不知道还记不记得是不是有个太啊,这个地方我就不去翻了啊,我直接写结果了,类似不是个加号啊,加号在如果你去找那个icon的那个文档的话,就能看到它的名字叫class,当然我们完全可以看文档去找对不对,找到合适的是不是就可以。啊,这个背景颜色是不是有点小不对,背景颜色是因为我的这个type没有什么指定,为什么。还记得吗?有一个概念叫primary,我们的primary的颜色是不是现在都统一指定,为什么绿色的是不是看一下我们的。能看到吧,那现在我的宽度是不是刚好合适啊,这个效果就比较舒服。
09:06
没写多少代,没写多少标签,也没写什么,不叫没写什么样子,是没写样子。这个效果还可以,是不是好,那下面这部分显示什么这一个横线啊,是他部分有的听到不,他下面上面是个头部部分,下面是不内容区,我这个内容区我们刚才说过是用的是一个什么东西做的table,那table用起来就很复杂了。那不是一个,刚才我之所以这个不看,是因为它太简单了,没什么太大好看的,听懂不?那下面我们是不是要去写table了,那你自己去想,那你没法想出来。听懂意思吧,这个时候是不是得找一个合适的table来写一写,能听懂不能好,那这个时候我们是不是要去翻到什么table的位置来找到table。
10:07
打开黑。在另外一个页面打开一下,诶,这是table table下面呢有一些说明,大家可以去看啊,我就不仔细看了,这个table表格大概要知道,诶,这里面它是一个例子,看到了吗?那我不敢参加C。我把这个例子先给它什么呢?用上一下就来,那我就稍微快速点呢,它先其实定义了两个速度,我把它定义在扔在这里。等会我们再来看他的东西,好吧,接着定义了我们想要定义的那个哪个标签呢?Table。而这个table是不是传入了刚才我定义的两个数组变量?能看到吧,一个叫source source什么意思?翻译过来叫数据源,也就是说。
11:02
大家要知道我们最终表格是不是要显示一个列表数据啊,而这一个就是那个要显示的什么列表数据,我们前面定义的这个列表数据。是不是几个人两个人的信息,一个胡彦斌一个吴彦,怎么胡彦祖啊,我还以为是吴彦祖了,认懂吧,那个吴彦祖以前很帅的,现在好像啊,谢顶啊,突然间感觉好像不是怎么回事了,是不是啊,要也是很帅是吧,主要是咱要求有点低,是不是好好了好看一下吴彦祖还是很帅的来。啊,这是这个啊这个,那下面另外一个,他还指定了一个什么columns叫字段什么意思呢。也就是说大家想想看啊,我们最后显示的是不是这一行是不是对应的是某一个数据,那多行是不是就对应的一个数组数据,但表格它还有一个概念叫列。
12:06
你要不要对列进行描述啊?也就比如说哪一列显示对应的是哪个属性,哪个属性数据是不是得说明清楚,也就是说大家想啊,我这个地方,我这个分类名称显示的是不是都分类内容。能听到不能好来,我们先来大概看一下啊,它也是个速度,我们等下来看一下效果,再慢慢的去看一下来。你看现在。这个表格就显示出来了。也就是说我就把代码复制来是能看到效果了,但同时你是不是需要去把这里面代码给他看懂。下面这个汉指定的是列的一个数组,那你说我们这里面有几列?是不是分别这是第一列吧,描述的是第一列对不对,这个描述的第二列,这个描述的意思嘛,三列一共有三列呗,那列每一列是不是都有一个标题了。
13:05
这能看到吧,这个姓名吗?好,接着说,Date index等于name,好,现在为什么是为name?我要为name are什么?为什么刚好是内部呢?你看现在性命没了。那说明这一个date应该去指定的是什么?我是不是每一列是不是要找这个数组每一个元素对象里面的某一个属性的值,哪个属性的值啊。是不是要指定那个属性啊。这能听到不?可以吧,可以。好,再一个他在看时呢,需要有个K,其实后面呢,我们会说啊,这个K也可以布指定,到时候再说啊,也是对应的这个类,每个人的内是不是都每个人的K都不太一样啊,其实这个K呢,到时候可优化了,我们到时候再说,至少这两个应该懂了吧。
14:05
能听懂,能听懂啊好。那对于我们来说,我们要说一下我们的一个分类啊,我们现在最终是要显示的是个分类的信息。是吧,分类列表吧,我们稍微的改一改啊,稍微的改一改,我们来先说一下我们那个分类,一个分类有哪些信息。啊,这个打开,至少我们现在我们在外面显示的就看到一个信息,就是分类的什么。名字吧,当然一个分类不仅只有名字,它应该还有别的信息,对不对,我们大概需要去看一下。通过什么看呢?我们有接口,那我们是可以访问接口,查询一下数据,来看某一个分类,它应该有什么信息,是不是来,比如说这个地方就有一个接口。
15:01
叫获取什么呢?分类列表。是这样一个地址,大家看一下,是这样一个地址,这里有个地址的,等会我们再来看,我们先请求一下,得到的就是一个分类列表,大家看一下。这里面不有个date吗?Date值是不是数组啊?而数组的每一个元素什么类型?对象,而一个对象代表一个什么意义?什么意义的对象,对呀,就一个分类嘛,你得知道啊,一定要知道什么意义的,不然的话你都不知道怎么操作了,好我们来看一下它有哪些信息。有内容吧,将来我是不是要显示这个,而这一个下划线ID是不是就是每一个分类的唯一标识数据?这一个可用它做K。听懂了吧,这个是不是特别适合做配好下面这个。派力为几为零?这个得说一说,我们是不是有一级分类和二级分类的概念?
16:07
现在我查询的是parent ID为零的所有分类列表,其实就是一级分类列表。当我们某一个一级的下面是不是有二级分类,是不是,那此时我怎么得到的呢?也是用的这个接口,只是判断ID是等于它。那你说这个时候我是去查谁的子分裂数。是不是家用电机的子分类列表?发个请求啊,必须点一下,大家看着,那此时ID还为零吗?不是零的吧,而是家用电器的那个它的下划线ID的值吧,也就它的ID值是不是它自己本身这个某一个二级分类项是不是也有自己的ID。
17:03
有自己的名字吧。当然,同时是不是也需要有一个派来,我怎么判断某一个分类是不是一级分类还是二级分类?看什么?看判来的,我是个一级分类的话,判断D应该为几为零。记住啊,是零字符串对不对,因为我们的那个ID是不是都是一个字符串格式。能听到吧,一定要把先把他的基本的这个逻辑搞清楚啊。好。那也就是说啊,这个地方我们现在啊,先是要去显示二级分类啊,先选一级分类,先不搞二级分类,咱先把一级分类显示再说,是不是我先我来自己搞一个假的数据可以吧,来看好了。看好了,这是一个对象,哎,其实也不用自己自己搞了。把它指定为零。
18:01
发,这不就有吗?何必要搞假的呢?这不挺多的吗,对吧。哎哟,我的天稍微有点多,有点吓人,搞几个是个事是吧,别搞太多了,太多了有点。看来反倒不舒服,搞个嗯六七个吧,差不多了,就这么多好看C替换掉这一个,这里说什么,里面这个值是不是好,缺一个什么呢啊中框。格式化一下这个能不能看到,可以吧,啊可以,这就是我的一级分类的一个数组,没问题,好,下面这一个要说一下,我们一共要显示几列啊。两列对不对啊,第一列显示的是谁,是分类的什么名称,对应的取哪个数据。
19:01
是,而刚好这个名字就是什么。是不对的。听懂了吧,这个可以可以不用指,等会我教大家怎么样去解决这个问题啊好,下一个下一个比较特别,来下一个我们来看一下我们要显示的效果,首先这个标题是什么?操作只有两个,下面这个可以干掉是不是。来接着来说一说这个操作,大家看到我们先看下一级分类啊,这个操作下面是不是固定的看着像两个链接的一个东西啊,它是要显示某一个分类的数据吗。是吗?不是,也就是说我现在需要去指定某一个字段的index吗?也就说我需要去指定什么ID或者这个或者这个吗?不是,我现在得告诉他,告诉他一个什么事了。我当前这个操作的这一列需要显示的界面的内容是这个。
20:03
听懂了吧,这个我不会啊,他这个里面这个事例里面根本没有啊。听懂吧,这个是这个私密的效果,根本没那个效果是不是不怎么。是不是找有我们跟我们那个类似的一个例子,得看他是怎么样去做到的,对不对,这能听懂不能听懂这个地方就要看我们有没有那种跟我类似的,又像这种就明显不是它应该显示地址的值,是不是啊,需要去找到一个啊合适,我们的这都是数据,都是在显示对应字段的数据,我们要找到的是啊某一个,诶这种就比较合适。哎,这个就是跟我们那个有效。能听到不,那我要看他怎么做的呀,对不对,给他什么展开对不对,展开看一下他的这个column,看一下第二个。
21:02
看最后一个不是第二个,最后一个打家开,这里面是不是有一个开头呀,这个电应该指定空转,实际上现在为止不用指它,接着这里面有一个。哎,它有一个什么配置啊render,而这个render最后返回来是不是就是这个删除的A标签。是不就显示了这个效果吗?也就是说我现在该怎么做,你说。不要这些了。搞一个什么人的,这个只是个函数,而且这个函数啊,要返回的是不是就是我要显示的内容。能听到不,我是不是要显示,最终要显示的是两个,看一下链接的文本是不是这个我们是不是专门的有组件的呢。我们有一个什么组件link。我是不是要包含两个,另一个发展,那这个时候不能直接写两个标签,我要先在外面写一个什么呢?跟标签听懂了吧,你要写两个标签,直接写英语它是不允许的,那接着就写谁link button啊,一个叫修改分类。
22:17
对吧,还一个是叫什么查看子分类,能看懂吧,查看子分类。好了吧,当然这个地方我得给他。给他引入是不是这个比较简单import。From点点斜杠,点点斜杠啊,下面的link把够了吧,因为里面是什么。Index。有没有看到?可以吧,可以可以好,那下面啊,这个地方就要说这个是指定什么。
23:00
返回需要显示的界面标签对吧。能不能听懂,这个跟前面不太一样,而这一个是指定什么。指定对应数据的,需要显示数据的属性嘛。能听懂不啊指令啊,显示啊,显示数据啊,对应的属性名。就是在这个里面的名字是不是我要显示的是他吧,所以我要告诉他名字对不对,好。来,我们大概来看一下看看。好,这个时候发现。哎,出来一个了吧,出来吧,出来吧啊。好,但是它稍微有一点区别。大家注意观察,这里面有边框看到吗?我这个里面我是不是有地方没有这个分割线呢?没有边框,边框不明显对不对,这个怎么做的了啊。
24:07
当然你可以去看例子,比较简单的,你也可以去看他的那个什么。来,我们试试看表格嘛。来,这面是不是有一个带边框的。啊带边框,他这是不是跟我那个样子就很像啊,那我怎么做啊。把它展开,展开以后这个地方实际上有一个属性。的什么意思呢?这一个明显是不是没有写属性值,跟他说没有写属性值是什么属性值,也就是说我就写个属性,没写属性值。这个什么用某什么意思啊,就这。能不当你的属性值是错的时候,就可以把这个属性值这个部分给成什么省略。听懂了吧?呃,这个什么意思,你看名字你就大概知道带边框了是不是。
25:03
这能听懂不能啊,这是这一个。啊,也是可以的啊,还有一个事情啊,需要去需要去指定一下啊,这个地方有警告说我没有指定一个什么呢,唯一的什么K,我希望让谁作为K。I。不是IDID说的不太准。应该是用我们这个的下划线ID的值作为K。是吧,啊,当然说ID是没问题的,你说ID我就是说刚才说的就是你不够准确下滑成ID对吧,因为我马上就要写,我到时候写ID就不对了,是不是能听懂吧,只是说怎么指定的问题,对不对来。放在最后边,其实它就有一个啊属性,我就直接告诉他得了啊,这里面有个属性叫柔。看到了吧。呃,柔K就是某一行的什么K值?每一行的K值用谁作为K值?
26:06
写出来你就明白了。容易。是不是使用我那个数据,每个数据对象的下划线ID的值作为K?能看到吗?啊,那这样的话啊,再来看一下我们还有没有问题。还有问题吗?没问题吧,是不是,那这个时候还有一个小问题,就是我的这个操作是不是占的空间有点什么,宽度有点什么,太大了,而我们这个边是不是相对来说要好一点点,那这个时候可以干嘛呢?可以指定它的宽度,也就说指定某一列的宽度,这个得在这个里面指定,是不是指定操作这一列的宽度啊,也比较简单,宽度怎么说Y。比如说我来一个300,这里面它会自动加像素,所以你可加可不加,加的话就要写成字符串,听懂了吧?好,再来看一下我们的。
27:06
你有吧?有,那也就是说我们现在是不是写好了一个静态的天灵效果。后面是不是要想办法去读数据,去给他异步做显示了。这个是没有什么太多逻辑的啊。
我来说两句