00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成添加属性的操作。那咱们呢,先看一下子已经完成的这个项目。那比如说啊,用户选择一个一级分类,比如说手机。二级分类手机通讯。三级分类,手机。那么在底下这里啊,会把。服务器返回到PU列表的数据进行展示。那么如果说你想修改某一个po OK没问题,那你就点击修改po这个按钮,对不?那咱们呢,在这里可以进行修改操作。那么对于我们目前而言啊。像po的名称。品牌po的描述以及po图片。这四个。
01:00
分支。那么我们已经实现了数据的展示以及数据的收集。当然有一些数据在当你点击保存按钮的时候,还是需要处理一下它的数据格式的。对吧,但是至少这四个分支我们已经接近于完成了。那么咱们接下来要完成的是谁呢?是添加销售属性的操作。那么对于一个PU,比如说对于一个类而言。它是有属于自己已有的销售属性的。那么就比如说当前的苹果12这个po。他已有的销售属性啊,是有两个颜色和版本,那么还有一个销售属性怎么的未选择。那么用户呢,可以勾选比如说尺寸。那么当你点击添加销售属性的时候,那么在底下这块table当中,是需要展示你刚刚添加的那个销售属性的。
02:11
那以及当你点击保存按钮的时候,那你是需要把这个新增的销售属性提交给谁,提交给服务器。那当然将来也有相应的销售的属性值,只不过我们目前不考虑,不先考虑销售属性值,咱们只考虑销售属性。对吧,那接下来那咱们所遇见的一些问题是什么呢?第一个来看这。看一下咱们的这个对吧,比如说图书。电子书电子啊,对吧,电子书。那么对于我们目前而言,我们所要遇见的一些问题是什么呢?第一个。你需要收集哪些数据,因为将来点击保存的时候。你选中的这个数据不仅仅说在这儿要展示,还要收集,为什么将来点击保存按钮的时候,你是要把新增的销售属性也要提交给服务器,让服务器去更新你当前这个po所对应的销售属性的。
03:17
所以说咱们遇见的第一个问题是什么?第一个。收集哪些数据?对不,那有的同学可能会说说老师,那我知道了,那要收集你这个销售属性的名字,那一定是要收集的。那么其实要收集哪些数据呢?这里呢,咱们去看一下数据。这里呢,老师呢,也跟你们去说说。行,那咱们先看一下呢,咱们的这个po form这个组件。那么对于已有的这个PU,对吧,他已经有了一个销售属性。对吧,颜色其实将来你要收集一个销售属性的时候,你要收集如下三个字段。
04:01
分别是你当前的销售属性的ID就是这个字段,Base。C条ad。那以及啊,你的销售属性名也要收集。对吧,这个字段你也要收集。那当然你对应的某一个销售属性,还有相应的属性值也要收集。其实对于我们而言,将来要收集的数据就是这三个字段。对不?所以说咱们的第一个问题,收集哪些数据,这是没问题的了。第二个。在什么时候收集数据对吧,就是第二个问题,在什么时候收集数据。哎,收集数据。那咱们呢,得回到咱们相应的组件这儿。那找到咱们的销售属性这里。你看啊。那首先说未选择的销售属性在哪呢?是不是在咱们的select框这里。
05:06
对不对。对吧,咱们可以看一下,比如说图书电子书刊电子书,对吧,还是修改它。那就比如说未选择的销售属性,这些数据在哪呢?是不是在select这里。对不,那么当用户选择某一个销售属性的时候。那咱们是不是就可以收集数据。对不对,但是你要注意你要收集的是什么,收集的除了你要添加的这个新的销售属性的名字以外,相应的ID也要收集的。对吧。那所以说咱们要收集用户勾选的那个销售属性。的名字与ID。那对于咱们目前而言啊,咱们在这里只是收集了你勾选的那个未选择的那个销售属性的ID。
06:01
对不,咱们呢,可以看一下咱们的数据。来看一下咱们po放就这个ATID就是你未选择的这个销售属性的ID,咱们可以重新看一下。对,不盯住数据,数据才是王道。那咱们呢,去看一下,比如说atd。那比如说用户现在勾选的是版本OK。那对于当前的这个销售属性的ID,我是能获取到。但是你要注意。将来你要提交给服务器,或者是在底下table当中进行展示的时候,你不仅仅只要收集ID。你还得把这个销售属性的名字也要收集到。那也就是说,我们目前而言,这里面只能收集到你当前勾选的这个销售属性的ID,而他的名字咱们收集不到。那其实这个名字能不能收集到咱们看一下啊,你看这儿。
07:04
其实可以。那比如说这个value流,你现在只收集ID,那你能不能同时收集两条数据呢?因为你这个属性名字,这不也是在select这。对不,那你看,那比如说老师给你来个操作,比如说我现在不仅仅说只是收集ID。对不,那当然你这块得插一个啥,是不是得插一个呃,模板字符串。对不?你看老师再给他来个加,加个谁张飞,那你看现在收集的数据是什么,咱们刷新看一下。来,从头调试。对不,就比如说123。盯住咱们的数据。找到咱们的PU。对吧,这你看现在老师勾选他已有的是颜色,比如说勾选版本,那你看啊,相应你刚刚要添加的那个销售属性,OK,他的ID有吗。
08:01
那以及其实它的销售属性值能不能也获取到,其实也可以。对不,也就是说你这个销售属性是能拿到的,他既为谁,他是不是即为你这个。咱们应该叫什么呢?我看一下子应该叫做,呃,这个。UN select点。那所以说咱们要添加这个销售属性的名字和ID,你是能拿到的。对不,那也就是说这块呢,你再给它变成啥,是不再给他来一个胡字语法。对不?对吧,或者来个冒号都可以。对吧,比如说咱们再来一个,那这应该是这应该是UN select.name。那也就是说我们把将来咱们需要的。销售属性的ID和销售属性的名字。在这儿,你通过数据的双向绑定。是不完全可以收集到。对不?那咱们的回首还是要测试。
09:01
图书。电子书刊电子书没问题,点击修改。对不,比如说已有的销售属性是颜色来咱们盯住咱们的数据。找到咱们的q four看这啊。走。版本,那你看相应的销售属性的ID。是不是能捞到,以及相应你要添加这个销售属性值也能获取到。所以说咱们要收集这两道数据已经收集完毕。对不对,那当然有的同学说老师那销售属性值呢,销售属性值咱们先不考虑。对吧,因为将来需要通过后通过这个呃,EL tag和input去进行收集,咱们现在只考虑销售属性。OK吧?那接下来另外一个问题是,你现在数据能收集到,那你把数据收集到哪里呀?对不对。就是你现在对于这个销售属性和ID是能收集到的,那你要把这些数据收集到哪里。
10:06
那首先说第一件事儿,对于我们目前而言啊,当然这个名字最好改一下。对不,他不仅仅说只是收ID,还有他的那个名字。对吧,销售属性的名字,所以咱们叫a TD and。对吧,And and at tr啥呀,呃,Name。对不,那当然你这块的数据双向绑定,收集数据的时候,那这儿是不是咱也得换一下,对吧,这个名字不好听,咱换一下。又是样。那接下来老师刚刚问的那个问题,你真的要去细心的去思考,咱们看一下哪块有错误啊,是不是刚刚那个at t RA。对不看一下咱都在哪用at t RA了,不就这吗?对吧,咱保存一下看一下再刷新。对吧,它还有一个地儿,咱用at tr好吧,那咱们先给它改成at tr吧,因为到底在哪块用到它了,呃,咱咱呢。
11:07
哎。还不真不知道对吧,这里面的代码有点多对吧,咱先给他折上,那咱还叫先叫个at tr。好吧,好,那咱刷新。其实咱还有一个问题,什么问题呢?就是你把数据收集到哪儿。对不图书。电子书。电子对吧,电子书走,就是你把这个数据现在已经都能收集到。那你要收集到哪?对不,那你看一下咱们的数据,对于咱目前而言。将来的po是要携带给谁?是要携带给服务器的?对不对,那也就是说咱们收集这个新增的销售属性的这些信息,你是要哎收集到哪,收集到po这里,其实收集到哪里都可以,但是你要注意老师为什么要收集到这儿呢?因为很简单,因为现在你除了要收集,你在table当中是不是也要展示。
12:02
对不就是你点击添加按钮,在table当中,你不仅仅说要收集,你是不是也要展示。对不,而咱们table现在展示数据,咱们可以看一下。你用的是不是PU的Co a tr例子这个数字。对不,你看嘛,PU下的CU at tr list这个数组,数组里面有一个元素,是不是已经展示一个。所以当咱们一点击添加销售属性按钮的时候。那么把咱们收集到的这些数据啊,你给他扔到这里。扔到这个数组里边,那么table这是不是就多了一列,以及咱们收集数据是不是也完事了,以及table的展示是不是也完事了?对不?那所以说咱们把数据收集到哪里,那么是把把数据收集到咱们的SPU属性的身上,对吧,或者对象。那么什么时候收集,什么时候给这新增呢?很简单,当你点击添加按钮的时候。
13:04
对不对吧,那所以说咱们找到咱们添加销售属性这个按钮。啊,那这回是不是看见了,在这儿是不是在用at加。对不,那所以说咱这个名字大胆给他改,At t ID and at tr name。对不那。这块呢,咱CTRLC全都统一给他替换一下,对吧,这个名字还是不好听。对不,那以及刚刚看这是不是也要。那当咱们点击添加销售属性这个按钮的时候,咱来呗,艾特。那咱起个名字叫a d DC at tr。那当然咱们目前是没有这个方法的。对不CTRLC。咱们呢,给他拿过来,这块要干什么,要添加新的销售属性。对不?那你要干什么呀?
14:01
对不对,那咱们已经收集到了需要添加的销售属性的啊,销售属性的信息。对不,你已经收集到了,对不,你是不是收集到这了。对,不,但是你要注意这种格式不是咱最终需要。这能懂不就是咱现在已经收缴,但是现在这种格式不是咱想要的,为啥?因为提交服务器的时候,他要提交的是一个对象,身上得带有那三个字。但是目前而言,收集到哪儿都行,但是咱们已经收集到。对不?你看比如说版本是不是已经能收集到。但是你要注意,你要把这个数据扔到哪里,是不是扔到咱们的这个当前的PU的这个PUCU点例子这个数组里。这样的好处是什么?第一个table。他会展示新的销售属性,以及数据也全都整理完收集。
15:02
所以当你点击添加销售属性按钮的时候,你要干什么?那你是不是把咱们,哎把收集到的,哎,收集到的销售属性的数据。对吧,哎进行分割。对不,因为他那种格式它指定是不对的。对吧,那咱来呗,那看一个。那它是一个什么呢?它是一个字符串,那字符串咱可以分割呀。对,不,那应该是this.att and name.li用谁分割,用分号?啊,这应该是冒号。那返回的是一个数组,数组里面应该有两个元素,ID和名字,那咱们完全可以解构出来。对不,那一个叫啥,这个字段你不能瞎写,我带给服务器这个字段必须叫base c TD,那当然说老师我写ae行不行,行,但是这个字段将来提交给服务器这个字段必须要这玩意。
16:02
对不,以及还有sal at tr name,对不,销售属性的名字啊,当然别复制跑偏了。那就说数据已经拿到了,那你要干什么,是不是像咱们的。笑。PU啊,对象的看一下子像PU对象的看一下的应该是谁。对吧,哎,他这玩意展开不了。老师呢,再给他展开一下啊,给它关一下吧,重跑一下吧。走卡了,应该向PU的啊,PU Co at tr例子的这个数组当中添加新的销售属性。对不?向SQ对象的。这个数组或者叫属性。里面。那么添加新的啥,是不是销售属性?对不,那咱们就可以来了。
17:01
但是你要注意,你扔到这个数组里面的应该是一个什么,应该是一个对象。对不,你看嘛,他应该是一个对象。哎,这样的,咱重新跑一下。走,你应该是一个对象,你自己看。对不,那对象的身上应该有这三个字段,它。他和他应该是个对象。所以说咱们整理一下这个对象,Let一个,比如叫new。对吧,销售属性导一生一个对象。那分别有哪几个字段呢?这两个字段要有。销售属性名和ID,那以及还有一个就是咱们那阵说的叫做销售属性值这个字段。那当然现在目前而言是没有销售属性值。对不?那咱们先给他来个空数组。对不?哎,那你要干什么,是不是扔到那个数组里面对吧,那你就接下来就是添加。新的哎销售属性,那就是这点PU点叫啥来着,叫叫PU啊PU CU a tr。
18:12
啊,Value list.push push给谁push一个新的销售属性。对不?所以说咱们可以看一下,咱们刷新测试一下,以及回来再总结一下,你看图书。电子书刊电子书,比如说我想修改十月12。对不,那咱给他来一个版本,当我一点击的时候,收集的数据整理成服务器需要的格式,扔到咱们的s pou当中。对吧,那咱们看是不是有代码的错误。看一下。什么叫做看好啊?是arrow。Property of安底犯push对不?那咱们看一下这个错误,它说的是push是什么案底犯,那就说明一件事,什么事?前面这部分应该不是一个数字。
19:02
对不,所以说咱们看下单词要看准了,他们应该是PU下的他嘛。对吧,Pur list。对不?哎,所以这个错误一定要会看啊,他说push前push有错误,那一定是前面的值不对。那所以说来咱们回手测试一下,一定要记住多测试手机,手机通讯手机对不?比如说A。那咱们给它添加一个新的销售属性是不是可以,当然销售属性值咱们还没有操作。那你要注意现在咱们做的好处是什么?第一个table该展示,该展示数据已经收集到,将来一点击保存的时候,OK,提交给服务器就可以了,当你再访问这个po的时候,那么新增的销售属性是可以展示的。对不,那所以说老师呢,给它关掉。咱们呢,回首再总结一下。
20:02
那首先说你看这儿。你看这儿。那么对于这块销售属性这块一定要注意。那么顶上咱们已经搞完了,就盯住这那对于销售属性而言,用户可以选择一个新的销售属性。那你要收集他的什么,收集他的ID。对不,你要注意这个三啊,这个销售属性这。它的数据是从何而来的?咱们已经计算完毕的是从那三个当中筛选出俩,在这儿是不是进行展示,而且是有name和ID。对不对。对吧,咱这不都展示出来了吗?那你要收集什么,你要收集他的ID。和什么和它的内。那咱们的做法是什么?你是在vega model的这里,完全可以同时收集两条数据。在哪,在这?咱们得知道select收集的数据是什么,收集的是它的value的值。所以说你看ID和名字是不是能收集的。
21:01
对不,那么当你点击添加销售属性的时候。OK,那咱们是把它添加扔到了,扔到了咱们puu的这个s PU Co DR list这个数组里面。老师说过,以前老师说过收集数据,收集到哪里都可以,但是为什么要收集到这儿了?第一个因为table展示销售使用用的就是这个数据。对不,那这样当你一点击添加OK table是可以展示的,除此之外,数据也能收集。而且将来这个PU。对,不是提交给服务器的那个对象。所以这样做的。非常完美。对吧,那当然有的同学可能会说,老师,我收集到别的地方,最终再去整理,扔到这里可不可以可以。对,不,但是不管怎么做,你至少现在而言,你再往这里面扔,因为你不扔,不扔到这里你会发现一件事,什么事,Table的数据,OK,它不会新增一个销售属性。
22:02
OK吧,所以说这是咱们完成销售属性的添加。
我来说两句