00:00
哈喽,各位小伙伴们大家好。那接下来咱们呢,去完成获取添加SKU的数据。那咱们呢,先看一下的已经完成的这个项目。那比如说啊,咱们选择一个图书。电子书刊电子书,那么对于我们目前而言啊,像添加po和修改po的业务已经完成。对吧,那么咱们要完成的是谁呢?完成的是添加SQ。那么对于我们目前而言,那咱们呢,只是完成了相应的静态。对吧,那么老师呢,打开控制台,带着你们呢,去审查一下他的控制面板。那么老师呢,重新去访问一下对吧,比如说来看这老师给他拽下来。盯住顶上啊,盯住顶上,比如说图书。电子书刊。电子书。
01:00
老师呢,把这块呢给你清掉,看这。当你点击添加SKU的时候。那么你会发现,诶,展示的这个组件当中啊,他发了几个呢?发了三个请求。说老师,那这三个请求分别是什么,咱们先看一下啊。首先第一个叫做at tr info list。周呢,还有一个叫做PU cut啊。以及还有一个叫做po例子。咱们看一下,当你给某一个SQ添加SQ的时候,咱们先看这它是不是在展示一些图片列表。那当然这些图片列表呢,一定是要发请求的。对不,所以说他用到了PU list这个接口。那所以说啊,咱们呢,在这儿呢,老师呢,做一下笔记,这是获取图片的地址。那么以及咱看一下还有这你看这个呢,叫做po的销售属性列表。
02:04
你会发现销售属性这里面其实也是有数据的。对不,那所以说也是需要发请求去获取到。那所以说这块呢,还有一个接口。咱们呢也复制一下子,那这个呢,应该是获取销售属性的接口。对不,那以及还有一个就是平台属性的获取。对,不叫做at tr info list。所以说啊,老师呢,把这三个接口我给你先放在这儿。那咱们呢,回首再看一下咱们正在开发的这个项目。那也就是说,当用户选完三级联动,那么当你点击添加SKU这个按钮的时候。那么你的父组件应该通知他的子组件,要发几个请求呢?应该是发三个请求。
03:00
对不?那所以说回到咱们的代码当中,诶,找到咱们代码。他呢,应该是哪儿啊,咱们刷新。应该是副组件当中的这个table,第几列呢?第四列的这个添加SQ按钮。那咱们呢,已经给他写好了,对不,这不就是添加SQ的回调的按钮吗。那么你这里要注意一件事,那么你需要获取到子节点。哪个刺激点是不是就是这个SKU for场景为二这个。那咱们呢,给它打一个ref,那么等于什么呢?比如说咱们就叫做SKU。那么咱们在底下就可以怎么办,是不是让它的副组件,哎调用。子组件的方法,对,不那么让子组件发请求,但是要注意子组件要发几个,是三个请求。那咱们就写一下呗,比如c.dollar2FS.squ比如说呢,叫做get date的方法。
04:07
对吧,那么。对于子组件SKU是没有这个方法的。那咱们呢,需要给SQ form添加一个方法。MY。Hods。那这个方法呢,叫做get date。那咱们呢,打印一下子这块写一下笔记,就是获取SKU form的数据。哎,数据。那咱们先测试一下子cons第2LOG,比如说咱们来个叫做获取数据。对不来,那咱们呢,先测试一下子能否调用。对不找你,那咱们呢,看一下的控制台有没有打印对吧,是OK的。那当然,咱们目前而言,这些接口还没有写,你没办法发请求。所以说呢,咱们要书写咱们的接口接口。
05:02
那咱们呢,去看一下在线的SW文档。那对于这三个接口呢,咱们一个看,首先说先说第一个获取图片的。对吧,接口,那咱们呢,得写咱们的API,找到咱们的SKU对不?那当然第一件事你是需要引入咱们的。对不,所以咱们呢,把它呢给你扔在这儿,这是它。那咱们呢,先一个个来,那先说第一个接口,第一个接口呢,应该是什么呢?是获取哎,获取咱们的图片的接口。那么咱们找一下这个接口,它们应该是SKU当中的。对,不,获取图片的地址叫做PU image list,当然你需要带着当前的PU的ID。那写一下子获取哎某一个,写一下获取某一个啊,或者就是获取图片吧,哎,图片的数据。
06:00
那这个呢,是它的一个接口。那以及看一下的是什么请求,是不是钙的请求。对吧,写个get。那咱们来一个呗,Export。比如说啊,咱们起个名字叫做re EQ,叫做PU image list。那当然,你需要携带参数是PD。对不PUID,那当然咱们需要返回咱们的服务器,返回的结果。那虽然说URL为什么呀,是不是为咱们刚刚拷贝的这个地址。对不?那以及是什么请求呢?以及是钙的请求。对不,Method为get。这是第一个接口,那当然还有第二个接口。获取,获取销售属性列表。那咱们找一下子,它的应该是PU当中的获取销售属性,看一下子应该叫做PU,我看叫什么来着,叫做呃,PU CU tr list。
07:05
找一下。对吧。咱们找一下叫做po Co tr,例子是不是在这?对吧,那所以说啊,咱们呢,把它呢也给他带走。那这个是获取什么呢?是获取。获取销售属性的数据。那这个呢,是他的一个请求的地址,以及也是get请求。Export。那咱起个名字,比如说叫做re EQ PU CU。对吧?Saltr list那也是一样,也是需要带餐带po的ID。那以及啊,也需要把服务器返回数据呢,返回URL。那么咱们的模板字符串当然别忘记用Dollar进行拼接。那一级是什么请求呢?刚刚也看见了,也是get请求。
08:00
对吧,哎,咱们看一下子是不是get没问题,那以及还有一个接口,就是获取咱们的呃,属性信息的叫AR info。他们应该是商品基础信息里面的,对不这不这个吗。叫做AR info list要带三个参数,分别是一级分类、二级分类和三级分类的ID。对吧,那所以说咱们呢,把这个接口呢,也给他搞上对吧,这个呢是获取,呃呃,获取平台。属性的数据。对吧,那一个呢是请求的地址,第二个呢,咱们看一下是get的请求。那也就是说export。Cost咱们叫做REQ叫做at tr info list。当然,它需要携带三个参数,分别是cat GR。Dad。对吧,C啊,也就是说这几个。咱们再给它拿进来,分别是category e。
09:05
以及CATEGORY2ID和cid。那这块呢,改一下是二,那这块呢,是几呢是三。对不,那以及返回服务器想的结果。URL为咱们的这个地址。那当然啊,你别忘记了要干什么,是不是要拼接,所以说呢,咱们把这个地址给他带走,CTRLC。停车位。那以及啊,该写Dollar的地儿啊,给它写上对吧,哎,这块是Dollar,那以及Dollar以及Dollar。那当然啊,什么请求呢?是盖的请求。对吧,哎,看一下子是不是get请求。OK,那也就是说这三个接口需要几个参数呢?需啊,这块别忘了,是不是有个到了啊,需要四个参数,分别是当前的po的ID对不?以及一级分类,二级分类,三级分类的ID。
10:02
对吧,好了,那咱们呢,回到这儿,咱们测试一下。那首先说看这用户选择一级分类,二级分类,三级分类,那么当你点击添加SKU的时候,咱们看一下负组件这。来,把没用的线给它关掉。找到咱们添加SQ这里。那点击这个按钮的时候,当前的这个肉是谁?当前的这个肉呢,就是当前的这个PU。对吧,咱们也说过,那当然有两个接口需要用到这个po的ID的。对不对,对吧,咱们看一下是不是有两个接口需要用到PU的ID。那所以说父亲这是有的,那你需要传给谁,传给咱们的子组件对不?那应该是啥?应该是肉点ad。对不,其实肉的身上啊,咱们呢,可以打印看一下,其实它的身上啊,有这三个接口需要的两个参数,咱们可以看下。
11:06
你看老师给你调一下。走走走对吧,点击添加你看啊,其实当前的这个po身上啊,有什么有当前po的ID,以及有三级分类的ID。对不,那其实啊这块呢,咱们可以怎么玩,这么玩,你把咱们当前副组件的一级ID,这点category e ID和这点CATEGORY2ID。对不来2AD2。对吧,2A。以及呢,还有把咱们的肉也给他传过去就可以了。对不,那所以说当点击添加SKU的时候,那么父组件把子组件发请求所需要的参数呢,其实都已经给了咱们的子组件。那所以说回到咱们子组件这里,找到咱们的SKU for,那在这里你就可以接收分别是cat。
12:05
葛瑞。对不,单词千万别错了,对吧,Cat以及category。那以及还有个谁呢?还有个就是咱当前的SP。对不?那接下来剩下的活无非是什么?让咱们的子组件一个一个的去发请求就行了。对不,那咱们呢,一个一个来。其实咱们这里面呢,可以用什么呢?用pro点啊。对不?哎,那当然你也可以一个一个的书写,其实promise点二咱们应该用过对吧,可以同时处理多个异步。对不对,对吧,那当然你在这里一个一个书写也可以,对吧,那咱们呢,去看一下有哪几个接口,第一个获取图片的。对不?那咱们呢,也做一下笔记,那这块呢是获取。图片的数据。
13:01
对不,那当然,那咱们呢,也得写了。This I this.dollar API点点谁呀?是不是点咱们的那个叫做SKU点汤。对不?那当然你是需要携带参数的,携带的参数是谁?是咱们的PU的ad对不?所以这块就可以搞什么PU的pu.ad。对吧,哎,那么你要注意,你要注意它呢,会有返回的结果,Let一个result。那咱们去打印一下子,先看一下子有没有数据。Result。对吧。那这块呢,咱们呢去测试一下。看这。图书电子书刊电子书找你添加,这不当然是可以拿到数据的。那所以说咱们这儿呢,就可以来谁。对不,那这块就可以来谁啊think对不,那咱们呢,最好呢还是看一下数据的格式,老师呢刷新咱们呢去看一下。
14:04
对吧,比如说添加。对吧,它是一个数组对吧,图片是一个数组啊,那所以说啊,咱们这块呢,得有数据去接收date。那咱们这块呢,给他来来个字段,叫做蕊一个对象。比如说啊,咱们这个叫什么叫做PU image list对吧,空数组。那这个呢,要注意这个是存储图片的信息的。那当然,如果你成功了,你是不是要赋值?那就说,如果你的result点扣的等等于200,那么你需要把咱们的z.PU image list赋值为result.date。对不?那就是说获取图片的数据已经能拿到了?那接下来还有什么呢?还有的就是咱们的获取销售属性的数据。对不,那所以说呢,咱们呢,在这儿呢,也做一下笔记在这儿,这个呢是获取销售属性的数据。
15:07
那也是一样,这点Dollar api.sku点它,那需要携带的是什么呢?也是squ的ID。所以这块呢也是一样肉点ad,那当然你这块也需要来个谁说。对吧,那咱们呢,可以赖一个,比如说咱们就要RESULT1去接受。那咱们呢,还是测试一下子有没有数据。对不,哎,蕊造一。那咱们呢,还是回首测试一下刷新。图书电子书刊电子书添加看一下有没有,哎,肉啊,不应该叫肉,应该叫做啥叫做PU。对不PU。那这回呢,咱们呢,再测试一下,应该是有的,对吧,但是别忘记了要存储,将来要用。对吧,啊看一下也是OK的,那它呢也是一个数组。
16:02
对不,你看这明显销售属性了,那所以说啊,那咱们再来个字段。对不,这个是存储销售属性的。属性,那咱们叫什么呢?叫做PU tr list等于一个空数组。对吧,那这一块呢,咱们呢就可以这么玩了,也就说如果你的蕊result result一点扣的等等于200,那也是一样,你也是需要存储一下。就是z.RESULT1等于啊,不对啊,Z点谁啊PU t list等于result一点倍。那以及还有一个要获取,就是获取平台属性的数据。那其实是一样的套路。对不,那这块呢,咱也来一下子,这个呢是获取,哎获取。平台属性的操作,呃,数据。
17:02
那就是这点Dollar api.sku点。哎,点点谁是不点他。那你需要带的参数呢,是分别是一级,二级和三级的ad。所以说咱们这是有的是cat GR e ID以及cat gr2id,以及puu的cat gra side。对不,那当然咱们呢,也需要看一下的,它返回的结果,来一个result,等于这叫二吧。对不,那咱们呢,也得看一下它返回的数据格式到底是数组还是零下。对不,那所以说呢,咱们呢,也是打印一下子造几啊。那咱们的测试一下子看他有没有数据返回。对吧,图书电子书刊电子书添加。那么它是有返回数据的啊,当然你这块呢,需要写。
18:01
A,对吧,那咱们呢,回手呢再测试一下。图书电子书刊电子书添加。对吧,那么这呢,咱们来看一下它明显是不是出现了错误啊,那咱们呢,先看network面板来看这。看这老师呢,给它取消一下啊,这块咱还取消不了呢,是吧,哎,看一下应该是看一下有没有单词的错误,首先说第一个cat gra cat e和po的cid,这应该是没问题的。对吧,那应该叫做at tr应该就是它。对,不分别带的参数是123AD。对吧,123没问题,为post。对吧,这应该都是没问题的。那咱们呢,还是得回首先看一下来吧,那这块咱们先看一下数据有没有。对吧,那这块呢,先别着急,那咱们先测试一下数据有没有找你。分别是category eid。
19:02
对,不,以及CATEGORY2ID以及PU第2CATEGORY3D。对不,咱们得先测试一下数据有没有,就是带给服务器的参数有没有,咱们刷新看一下。手机手机通讯手机对不?哎,比如说添加。看一下,那明显这个2A是不是写错了。对不对,所以说咱们回一手在这儿啊,找到副组件这。找到咱的副组件,这看一下子应该是这点CATEGORY2。对不,那所以说这回咱们就可以大胆的去写了,对吧,数据应该都有了,咱们呢,还是测试一下。手机手机通讯手机点击添加对吧,是不是该有都有了,那这回呢,咱们就可以发请求了wait。对不,这点Dollar api.sku点是不是叫啥来着,好长应该叫做呃,找一下叫做re e q tr info list。
20:06
对不应该是他那需要带的参数呢,就是那仨。那咱们呢,搞一下子分别是CATEGORY1ID category2id以及肉点啊,应该是po啊po.category3a。对不,那当然咱们呢,也需要接收到他返回的结果。Let一个RESULT2。对不,那咱们也打印一下子,看一下它的数据格式是什么。二对吧,看的到底是数组还是对象刷新看一下。手机手机通讯手机对不点击添加,那么返回的数据呢,也是数组,那所以说啊,咱们这儿呢也是一样,这个呢是存储平台属性的数据。那咱们就叫做什么,就叫做at tr info list。
21:00
对不,哎,也是一个啥空数组。那这块呢也是一样,于说如果成功,如果造二点扣的等等于200,那么咱们这个数据是要存储的,就这点a tr info。List应该等于result 2.date。那咱们呢,最后呢,回首再看一下的开发者工具当中,他的这些数据有没有。对不,所以说咱们找一下咱们的这个SQ。对吧,应该是他盯住这个数据。手机,手机通讯。手机对不点击添加。那么咱们看一下咱们的SKU放,SKU放。啊,那么相应的数据是有了,那当然有的图片可能没有对吧,但是数据已经是有了。所以说咱们完成了获取什么呀,获取咱们SKU当中的平台属性的数据,销售属性的数据,以及图片列表的数据。
我来说两句