00:01
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成获取平台属性的数据与展示平台属性。那咱们呢,看一下的已经完成的这个项目。那首先说对于用户而言,他可以选择一级分类的某一个产品,比如说选择的是手机。那当然啊,也可以选择二级分类的某一个数据,比如说手机通讯。但是这里呢,要注意一件事,当用户确定了三级分类是某一个产品的时候啊,他呢会向服务器发请求。那么获取到你平台的属性,在底下这里进行展示。那所以说接下来呢,咱们就是要完成这个操作。那咱们呢,去看一下子咱们正在开发的几个项目。那首先说咱们呢,完成到了哪里呢?看一下这里。
01:01
那首先说用户选择了一级分类。二级分类以及三级分类的时候,那咱们已经写好了相应的函数,那需要去发什么,就发请求,获取你平台的属性,是不是进行展示。那咱们呢,先完成请求对吧,先把服务器的数据先获取到。那咱们来看一下呢,咱们的组件应该是at tr这里。对吧,那么这里面呢,要注意一件事什么事,那么当三级联动的数据确定的那一刻,那么会发请求获取品牌或者叫平台属性的数据。哎,平台的属性的数据。那当然啊,咱们呢,还没有写接口,那只不过是在这个函数里面打印了一句话叫做发请求。那所以说啊,咱们先去找到相应的接口,把相应的API先给他完成。
02:02
那应该是哪个呢?应该是商品基础属性接口这里。那将来啊,咱们需要携带一级分类的ID,二级分类的ID以及三级分类的ID,去获取你平台属性的数据。那这里面呢,要注意一件事,那那这个接口呢,也是一个盖的请求。那所以说啊,回到咱们的API里面,应该找到咱们的a tr这里对吧,那这里面呢,咱们也需要写一个接口了,对吧?那这个是什么,是获取平台。属性的接口。那咱们呢,把它的地址啊,给它放在这儿,那以及啊是钙的请求。那咱们写一下子export cost。那咱们呢,起一个名字吧,比如说叫做re e q at tr list。那当然啊,将来你这个函数呢,是需要携带着这个一级分类,二级分类,三级分类的ID的。
03:04
那当然这里面是需要带参数的,分别是CATEGORY1ID以及CATEGORY2ID以及CATEGORY3ID。对吧,那当然啊,咱们的需要用到咱们的request函数。那第一个参数啊,就是咱们相应的请求的地址,那就是它,但是别忘记啊,这是模板字符串,需要拼接。那这里边儿呢,咱们呢,都给它加整箱的Dollar。那以及啊,这个接口啊,是get的请求,那也别忘记了写上咱们的method为get。对吧,那咱们呢,可以回到咱们的组件当中。那在这里呢,咱们也书写一下,那么当用户确定了什么呀,是不是确定了三级分类的数据的时候。那么可以向服务器发请求。那么获取。
04:01
平台属性进行展示。对吧,那当然咱们相应的静态的组件还没有写呢,那咱们先把它的数据先给它获取到。那这里面呢,咱们就要书写咱们那个接口呢,需要携带着一级分类,二级分类,三级分类的ID,所以说啊,咱们先获取获取分类的ID。那咱们呢,就可以解构一下,分别是CATEGORY1ID category2id以及category cid。从咱们的组建实力身上基因结构出来。那这里面呢,咱们呢,就可以等待着这个接口返回的结果了,对吧?api.at t r.REQ叫做at tr list。那当然,你需要携带的这三个ID分别是category e ID和CATEGORY2ID以及category ID。那这里呢,你写了a wait,那你就需要写谁,是不是写a think?
05:03
那咱们去等待他服务器返回的结果,那就是谁呀。那咱们呢,去打印一下子,看一下子服务器有没有返回数据。Resolve。那咱们呢,去看一下子,来看一下子,咱。那么一级分类啊,老师选的是手机手机通讯手机,那看一下,那当然获取到了服务器相应的数据了,对吧,这明显是200,那么它返回的数据是什么呢?是一个数组。那咱们来看一下结构,那么数组里面呢,有八个元素,每一个元素啊,食指就是一个平台属性。对吧,那咱们看一下这块呢,是有相应的ID,那就是你某一个平台属性的ID,对吧,那以及还有相应的属性的属性值。那么什么是平台属性呢?举个例子,比如说啊,咱们在前台项目当中,是不是有卖了一个叫手机,那比如说手机是有颜色的,那颜色你就可以认为是一个平台属性。
06:08
那么什么是平台属性的属性值呢?比如说你这个手机啊的颜色有哪一些,比如说有红色,黄色,蓝色对吧,青色,那这些就是相应的属性的属性值。那当然啊,咱们呢,已经获取到了相服务器的数据,那咱们需要让组件去存储一下子,将来进行展示。那这里面呢,咱们呢,可以进行判断对吧?哎,判断一下,比如说如果你的蕊造点扣的等等于200。那咱们将来啊,你的组件的一定是需要存储它的数据进行展示的。那所以说咱们这里面的解项叫做at tr list吧,那么初始值是来一个数组对吧,那这块咱们标记一下,那这个是什么,是不是接收。服务器平台有如接收平台。
07:01
哎,属性的呃字段。那当然啊,当服务器的数据回来的那一刻,那你需要咋的?是不是重新给它赋值?那也就是说this.at tr list应该等于咱们的result点。对吧,那咱们呢,为了以防万一啊,那可以回到咱们的开发者工具当中去看一下子,哎,看一眼咱们的这个组件身上有没有相应的数据,因为将来呢,咱们的是需要进行展示的。那咱们来看一下的有没有,这是有的对吧,那当然咱们的静态还没有去书写。那咱们呢,去完成咱们的静态啊,那数据有了,静态已有,那是不是全都完事了对吧。那首先说啊,它在第二个card当中啊,是有一个八。那咱们来一个叫EL杠八。那咱们看一下呢,它叫做什么叫做添加属性。对吧,那当然还有一个icon图标加号,那咱们这里面呢,也给他来一个icon。
08:05
那名字应该叫什么?叫EL-I-plus。那以及它有它的文本,叫做添加属性。那咱们呢,回到咱们的项目当中去看一下的有没有相应的按钮,这是没问题的。那以及在按钮的底下,它又放了一个table,那要注意几列,1234列,而且宽度上呢,也要注意一下子。那也就是说啊,底下这里呢,是有一个表格,哎表格那这块干什么,是不是展示咱们的平台属性的。那咱们就来呗,EL,告诉谁呀,告诉table。Table。那当然目前啊,咱们的数据已经有了,但是咱们先把它相应的静态先给它完成,贝塔呢,咱们先先不用管。那当然它是有外边框的,那咱给他来一个border。对吧,那这里呢,要注意一件事,咱们的表格啊,应该是几列,应该是四列。
09:04
对吧,分别是序号属属性名称,属性值列表和操作,那所以说啊,咱们这里面呢,也需要来四列对吧,Color这一个两个三个,哎三个。这个咱再给它复制一下啊三个。以及四个,那咱们的格式化一下,稍微格式化一下。那咱们就一个一个来。那首先说第一个它的名字应该叫什么,叫做序号,那你说咱们的第一列啊,这个label呢,应该叫做序号。第二个的label应该叫什么?是不是叫属性名称?对吧,那这个咱们改一下子,那这个呢,叫做属性的名称。那以及呢,还有第三个,第三个叫做属性值列表,那咱们也改一下子,那这里啊,就是属性值列表,以及最后一个叫什么,是不是叫操作。哎,操作那咱们呢,看一下呢,咱们的这个静态这是没问题的。
10:05
而且呢,还要注意一件事,什么事你会发现他们这个宽度是不一样的。对吧,序号小一点,谁最大属性值列表。那所以说比如说序号的宽度啊,老师给他来个80。对不,那第二列呢,老师呢,给他来个150。那第最后一列呢,也给他来个150,那是不是就剩第三列最最最大了。对吧,咱们呢,可以看一下有没有那点感觉。对吧,啊,这是它,那咱们一点点来,那首先说咱们table要展示的数据是谁,那咱们应该知道是不是就是date。对吧,冒号对。它应该为谁啊?是不是为咱们要展示的那个at tr list那个数组?那咱们看一下子,那相应的这些,哎,数据看一下子是不是就有了,那当然咱们得选择一下啊,手机看一下子是不是有那点感觉了。那咱们的一个一个来,那首先说序号,那序号啊,咱们就不需要prop了,展示哪个字段对吧,不需要,你需要写谁是不是写type type为in desk。
11:12
而且呢,还要注意序号呢,它将来啊是需要居中的,咱们看一下。看一下子序号将来是要居中的。对不?你看人家已经写好了这个。对吧,一定是需要居中的,那所以说啊,咱们给它来一个叫做ALIAL为什么呀,为center居中。对吧,那咱们的运行一下子看一下子对吧?啊,这个咱测试一下。这是没问题对吧,那以及啊,咱们的第二列展示的是什么,展示的是属性的名称。那展示的是哪部分数据呢?咱们可以看一下,那展示的字段是不是应该就叫做at tr name属性的名称。对吧,那咱们的这块呢,它就好整,那这块就是谁,是不是就是咱们的at tr内幕字段。
12:04
对吧,那咱们呢,还是得测试看一下。一定要记住啊,写项目什么的,一定要多加测试,比如说手机,手机通讯手机没问题。对吧,那以及也有相应的属性的属性值列表。但是这里面要注意啊,那这个已经完成的项目当中啊,其实他用到了一个小组件就是EL杠。Tag啊,咱们可以看一下,其实就是谁就是他对吧,你就搜一下tag用的是他。啊,标签。对吧,你会发现,你看他是不是用的是不是这玩意儿是不是叫tag。对吧,它有颜色的。那这块呢,要注意它展示的是什么,展示的是属性值列表。那这里面呢,老师呢,要说一下什么是属性。哎,属性那就比如啊,比如你说手机的某一个颜色,这叫属性,那么什么是属性值,比如说颜色有什么色,有黑色。
13:01
对吧,红色哎粉色紫色,那像这些就是相应的属性值。其实你看它的数据的结构啊,是这么写的,At tr name。对吧,比如说叫什么叫做颜色。那这个叫什么叫做属性,那属性值它用的是at tr什么什么value list对吧,那里面放的是什么,是不是就是相应的黑色呀,紫色呀,对不?哎紫色呀等等等对吧,所以说对于它这个数据结构你要看懂。那所以说这块呢,它们需要有EL tag的结构,那也就是说咱们需要用到谁,是不是用到作用于插槽。那当然每一个相应的平台的属性咱们是需要的,那你这里面需要找到肉和谁,Dollar in desk。那么肉是什么?老师最后再说一遍,肉是什么?肉就是你数组当中的每一个元素,就是相应的啥,相应的平台的属性。咱们呢,可以看一下手机手机通讯手机。
14:03
对不对,其实肉是什么?肉就是你每一个相应的平台的属性。对吧,啊这块呢,一定要注意,那所以说这里面啊,咱们呢,需要用到谁,用到EL杠谁啊tag。那你要注意那EL-tag的属性值不是一个是多个,那所以说咱们这里面要进行遍历,就是V杠放。你便利的什么?便利的是不是应该是,那咱们起个名吧,需要at r里。对吧,属性值以及加上索引值,那你便利的是谁呀?那你这块要注意,你便利的应该是相应的平台的属性的属性值。对不?那么这个数组里面每个都是一个平台属性,属性值是谁?是不是应该叫做at tr value list?对不?那宿舍应该印印谁应该是肉点a tr value list,那以及啊,你也得有需要相应的K的字段。
15:02
那K呢,咱们就叫做a tr y对吧,平台属性值的ID,看有没有ID,是不是有ID。对吧,哎,那就是点ID,那它显示的文本应该是什么?是不是就是咱们的at t r y6。对吧,At tr valu y6的,哎,写跑偏了对吧?哎,At tr6 valu y6的,咱们看应该叫什么。这块要注意一下啊。看见了应该是AR value的什么呀?是不是value name?对不,你看这不相应的平台的属性,直播属性值嘛,对吧,那这块应该叫什么叫value name,那所以说呢,咱们呢,把这个属性呢,给它复制一下点它。对吧,i.Y6内。点value name。那咱们呢,去看一下O不OK。对吧,看一下咱们正在开发的这个项目啊,那比如说手机。
16:00
手机通讯手机没问题。对吧,但是呢,你要注意一下子,那每一个tag之间是不是有距离,对吧,那所以说咱们呢,可以给它加点样式啊,给它来点样式。那咱们呢,给它来一个margin对吧,那上下给他来一个零左右呢,咱给他来一个20。对吧,那咱们的看一下子有没有那点感觉刷新看一下手机对吧,随便来一个吧,看一下有没有编剧对吧,这就是没问题了。那以及啊,最后一列操作,那放的是两个button对吧,分别是warning类型的这个修改和这个呃,删除对吧,那所以说咱们这儿呢,也需要最后一页,也需要作用于插槽。那当然这里面呢,咱们呢,也给相应的属性啊,平台属性和它的索引值给它写上,将来可能会用对吧,举个例子,你要删除某一个平台属性,那你得知道它的ID,所以这块呢,一定得写look inex。
17:00
对吧,那这里面呢,它呢是需要两个button,那EL-button那第一个呢,咱们看见了,它是那种橙色的,应该谁是warning w。那以及啊,它有相应的icon icon呢是一个那个修改的那样的一个icon图标,那应该是EL杠。Icon-E编辑。对吧,那以及它的大小啊,Size应该是为mini最小的。对吧,为什么为mini。那当然啊,他有文字吗?是没有的,那咱们可以看一下。对吧,看一下是不是这样的一个结构。对吧,那以及呢,还有一个是删除的一个按钮,那咱们也可以来一个EL-button,那它的类型应该是D,我看见了红色DN这样。对吧,那他们也有相应的icon icon呢,应该是删除,那就是EL-icon-delay。那以及大小的个头呢?也为mini size为mini。
18:02
那咱们呢,去看一下子咱们的这样的一个结构啊手机。手机通讯手机。对吧,那所以说咱们的结构是没有问题的,那所以说咱们完成了什么,是完成了获取平台属性的数据以及展示的操作。
我来说两句