00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成添加po的业务。那咱们呢,先看一下已经完成的这个项目。当然,用户可以选择一级分类,比如说图书二级分类,电子书刊三级分类。电子书。那么对于我们而言啊,目前我们已经完成了修改po的业务逻辑。对吧,那接下来呢,咱们呢,是要完成添加po的业务逻辑。那咱们呢,看一下它。那首先说当你点击添加po的时候,那你是需要收集这里的数据的。当你一点击保存按钮的时候。你是需要把这些收集的数据提交给谁,是不是提交给咱们的服务器?对吧。那所以说啊,接下来呢,咱们呢,去看一下。那首先说咱们呢,盯住咱们的开发者工具。
01:03
当然,数据是很重要的。因为对于咱们目前而言,数据才是王道。那咱们呢,去看一下咱们的这个PU放。咱们看一下,那数据收集到了哪里呢?是收集到了咱们的这个PU这里。对吧,他收集到的是po info对不?那咱们看一下,那比如说它新增一个,新增一个呢,比如说咱们叫微博。品牌你看你会发现在添加PU的时候,其实它也是发请求了的,为什么?因为你会发现品牌这里你看老师给他切回来。点击添加PU,你会发现它默认是有品牌的数据。对不,那比如说再来一个叫做VIVO。对不品牌选择小米以及po的描述,那咱们看一下,比如说VIVO VIVO VIVO手机很好用。
02:00
对,不像这些数据你都是要收集。那以及添加po的图片,咱来一个小二哈。对不以及销售属性还有三个未选择。那你这里要注意这块也要发请求。对不,因为他不可能说。莫名其妙的来的这里呢,其实是获取到了所有的销售使用的数据。对吧,比如说添加一个颜色,什么色呢?比如说来一个黄色。那么当你一点击保存按钮的时候,是真的要添加的。对,不但是这里的业务逻辑啊,其实啊,没你想的那么简单。说老师那不就是把数据收集完一点击发个请求就完事了。你要注意你看这。比如说现在老师在第五页。对吧,现在是第五页,我现在要添加一个P,记住是第五页要添加一个。那咱们的这回呢,去看一下,看这看他已经写好这个啊,咱盯住了啊,你看老师一点点给你调。
03:00
你看现在老师是在第五页。我要添加一个PU。那你会发现他是不是发了两个请求,获取品牌的数据和以及所有的销售属性的数据,这是没问题。那咱们呢,也去做一下笔记。那就是说点击哎,点击添加puu按钮的时候,那么是需要发请求的。发几个呢?是发两个。对,不一个是获取品牌的数据,获取品牌的数据以及还有全部的。销售属性。销售属性的数据。对吧,那你看啊。现在是从第五页而来,你看啊,现在老师添加一个,比如说添加什么叫做,呃,叫做中国人。对吧,属于小饼描述中国人。对吧,哎,勤劳。那以及咱们添加一张图片,老师只有这样的一张图啊。
04:03
对吧,那以及咱们添加一个销售属性,比如说版本。对不版本什么版本呢,叫做呃2021版本。那当你点击保存按钮的时候,你看它是不是停留在第五页,不是了,而是回到了第一页,对吧,又多了一个,当然出现了第六页,是回到第一页。对不,所以这块的业务逻辑呢,要注意。对不,那所以说回首看一下咱们的这个项。你看啊,咱们呢,已经完成了修改的这个业务逻辑。对不对,对吧,你看比如说勤劳一一点击保存没问题,是不是回来了,咱们要完成的是添加po的业务逻辑,当然咱数据没清。这不清理数据,咱们最后再处理。对吧,你看现在咱们点击添加PU,那当然这块默认不应该是。那找到咱们的PU form这里啊,这个t midd不应该是V0对吧,咱们呢,给它展开。
05:03
对吧,给它展开,它应该默认是几呢?应该是一个空串。对不,要不然他上来展示一个零,这什么鬼对不?那咱们呢,回手再测试一下刷新看着啊。图书。电子书。对吧,添加,那你要注意第一个,当你点击添加spu按钮的时候,你需要通知子组件发请求,发几个,发两品牌和销售属性这里。那所以说啊,咱们得回到副组件,这因为是副组件当中有添加puu场景为零的这块的,才有添加s puu这个按钮。那所以说咱们找到副组件。找到咱们场景为零当中的这个添加po这个按钮。那么当你一点击添加po这个按钮的时候,你要注意找到adsp。那咱们呢,去找到相应的这个方法叫做ADPU。
06:01
这块要注意一件事,现在目前而言,咱们是可以切换场景为一,但是你要注意你得通知子组件干啥,是不是发请求。对,不通知子组件PU form发请求,发几个是不发两个。一个是品牌,一个是销售属性。那所以说咱当年啊,你修改的时候发了几个,是发了四个,而添加是几个呢?是两个对吧,修改咱当年发了四个,而这回你应该发几个发两。对不?对吧,那所以说咱们呢,得获取到这个po form子组件,这已经打了ref,所以咱们能获取。那所以说咱们写呗,那咱比如说叫做这点Dollar re ef.pu比如咱们叫什么叫做叫做ADD啊PU date。对不?那当然现在子组件没有这个方法,那咱们呢,去给这个子组件添加这个方法。
07:03
老师呢,把组件当中呃,没用的数据啊,咱们呢,先给它折上啊,先给它折上。是不,当然这个开发者工具又出现了卡顿现象是吧?找到咱们的method,把没用的先给它合上。对不?哎,先全都给他合上。那这块应该是什么,是点击。添加PU按钮的时候发请求的函数。对不?那咱们得先测试一下子,看一下有没有同名的,先看有没有同名的。对吧,因为我看到好几个APP没透明的嘛。那咱们先测试一下子对不对。对吧,比如说哎,咱们就打一个叫添加。那你看这啊,咱们呢,测试一下刷新。图书电子书,看电子书。对吧,当你点击添加po的时候OK。
08:00
是不是处罚,那咱们呢,就需要它的这个这个这个子组件发起发几个发两,而这个呢,咱当年写过。PU信息不需要获取,因为是添加品牌的数据,你是需要获取到的。对不,所以说咱们呢,把它直接拿过来就行了。那以及还有谁还有获取平台全部的销售属性的数据,咱们也得得到。对吧,所以这个老师呢,把它呢也给你放在这儿,但是咱得对准了,对吧,应该是这。啊,那咱们呢,格式化一下。咱们呢,还是得测试啊,当然你这写了a wait,那你这就来写写a think。对吧,那咱们呢,保存一下。你得去测试。那首先说咱们看一下子。图书。电子书对吧,以及电子书添加SP,那看有没有数据有。对吧,这是有的以及修改。对吧,修改也没问题对吧。好,那数据已经有了,有的同学可能小伙伴就知道,老师,那对于添加PU不就这点活吗?
09:07
来点货收集数据,点击保存,发请求添加不就行了?对不,那所以说啊,咱们得盯住数据,你看这些数据能不能收集了,记住数据才是王道。能找到咱们的PU放在这儿啊,看这,咱们能够把数据收集到看这啊。找到谁,找到PU这里。首先说SQ的名称,比如咱新增一个叫什么呢?叫做粽子。666。对不看一下能不能收集到,能收集到puu的这个po内这以及品牌收集到的是t m midd是不是也能收集到,以及描述123随便写一个也能收集到,以及添加图片。对不?其实图片也能收集到,收集到了呢,是不是收集到了PU image list,当点击保存按钮的时候才会复制给他,所以说图片咱们也收集到。
10:00
以及销售属性。这。那咱们看一下其实也能收集到,你看嘛,对不销售属性也能收集到,以及属性值咱们也能收集到。但是你会发现半天有一个东西收集不到,就是三级分类的ID。因为对于添加po form这些数据咱们都能收集到。但是你会发现一件事,什么事。非玩核实手机。对不在哪收集。就是咱们现在没有CATEGORY3ID,说老师咱当年修改PU的时候不有那个ID吗。那你要注意修改po那个ID是谁给的,是服务器给的。对不,你是得到服务器返回那个spu,它是自身就携带ID的,对对category在ID的,但是咱们添加现在是没有。那何时收集啊?对不你看啊,你看你琢磨业务。来老师刷新你看啊。你要在副组件这啊,你要一级分类图书。
11:02
电子书刊电子书,那老师问你。在你点击添加P按钮之前,三级分类的数据categoryd有没有已经有?对不?你看咱可以看一下它的副组件CATEGORY3ID有没有有已经有在这个添加po按钮能点击之前,那么当你点击添加pou按钮的时候,可不可以把三级分类的ID传给自组家。完全可以。对不?所以说回到咱们副组件这,你看这当点击添加po的时候,你还可以把谁送过去,把categoror cid,那应该是this.category cid。对不,那回到回到哪,回到咱们的子组件里,那你是不是可以收集到。对不在这嘛,对吧,这是啥添加spau,哎,写一下添加AAA。找一下添加PU的时候,收集三级分类的ID,收集哎三级分类的ID。
12:08
对吧,那收集到哪,是不是收集到咱们的老师先把没用的先给它折上。是不是收集到咱们的SPU,首先把没有限制这个有用对吧,顶上没有线给它折,要不然东西太多。对吧,收集到哪,是不是收集到咱们的PU的category cid址。对不,那所以说你这块呢,你得搞一下子。那也就是说this。点pu.category ID等于谁?是不是等于咱们的cat?个瑞3D。对,不,那等于cat grey side。对吧,那咱们呢,测试一下,你看能不能收集到。图书。电子书刊,电子书以及添加PU,那你看啊,对于子组件而言,能不能收集到3D?
13:00
是完全可以。对不?那接下来你就可以收集数据。对不,你就可以收集数据,比如说咱来一个叫做啥呢,叫做华为,对不,华为很六。对不哪个品牌小饼描述123添加一张图片,比如说一。对不,那以及来一个销售属性颜色,对不,颜色为什么色黄色,那么当你点击保存的时候,其实咱保存按钮的事件已经做了,在修改的时候就已经做了,因为当前这个子组件都是po。当你一点击保存的时候,你看有没有添加华为很六。哎,这是没问题的。对,不但是有一些事儿啊,你需要注意。哎,对,当然不是修改,是添加,有一些事你需要注意,你看啊。咱也说过。你看就这个保存按钮。比如说现在老师在第六页。我一看啊,有俩。
14:01
我想要的没有,那我再添加一个,记住在第六页对吧,比如说老师来一个,来个什么叫做呃,理想汽车。对不,它是属于小米系列对吧,123添加一张图看着啊。走来一个销售属性,比如说颜色什么色的,比如说咱给他来一个,呃,蓝色,老师喜欢蓝色。当你点击保存的时候,你要注意啊,它不应该停留在第六页,应该去到了,应该回到第一页。那也就是说保存的这个按钮,你是要区分的。你是要区分它到底是修改当中的这个保存,还是添加当中这个保存。因为什么呢?因为你看如果是修改你看啊。你看啊,如果是修改,假如说现在老师在第几页,第五页对吧,就比如说1122老师再来一个啥,再来一个888888,你看如果是修改,你是不是停留在当前。对,不但如果是添加,你点击保存应该回到第一页。
15:03
那也就是说在你点击保存按钮的时候,咱们找到啊,找到点击保存按钮的那个那个那个地儿是不是在这儿。咱已经写了叫做a or update的PU。那咱们得找到找到找到这个函数。叫ad,应该就是顶这个。对不?你看嘛,这不是在整理参数吗?点击保存不要发请求吗?整理参数发请求如果成功对不对。那么现在而言。那么当咱们点击保存按钮的时候,只是通知父亲切换为场景为零,但是你要注意,现在不够了。因为你还得告诉父亲,我是添加的保存还是修改的保存,因为如果是添加,你应该回到第一页。对不,如果是修改,你停留在当前页。所以说你只是告诉父亲说I change c这个方法,哎,只是更改场景它是不够的,那这就为什么添加的时候留在当前页。
16:02
对吧,你写的是这点配置。所以说你在这要区分开到底是添加还是修改。对不,那所以说传一个餐不够,你可以传几传俩。对不,比如说CE等于几等于零。对吧,比如说咱们来个标记flag。对不,那怎么去区分是添加。还是修改很简单,就是带的参数有没有ID。对不,也就是说,如果你的这点pu.id有ID,那一定是啥。修改。那如果没有没有就是添加。对不?那所以说回到哪,回到咱们的副总监这里。对不,你就可以接受。但是你要注意,这回这个自定义时间,它返回的是,它传的是一个对象,一个是场景,一个是flag标记。Flag。那老师写一下子f lgf lag这个行参。
17:00
是为了区分。保存按钮是添加还是修改?对不那。这块你得判断了。那就是说如果,如果什么如果,你的flag等等于比如说修改。那你获取po列表的时候,应该停留在当前页,叫做get。对吧,这个又没提示了,应该叫做get,获取po的列表应该叫做get po list,你应该留在哪,是不是留在当前页这。那就是这点配置。那如果说是添加呢,你添加应该回到第一页,那你说this.getp例你不传参,它默认传的是不是一。对不对,对吧,那咱们的回首测试一下,你看啊。你看这儿。比如说图书。电子书。对不老师在第六页这,哎,我点击添加你看啊,老师来个一一。
18:03
小米。二。对吧,来一个图。对吧,以及来一个销售属性。比如说呢,来个什么色,来个粉色对吧,少女少女色。保存,你看是不是停留在第一页。对吧,对吧,以及修改,你要修改老师刷新啊,那老师来个修改。对吧,啊,其实这块的业务逻辑还是挺多的。你看,比如说现在老师修改第七页,早上好。对吧,来个啥呢?来个早上好一是不是留在当前。对吧,但是还有一些活要做,你看啊你看。现在如果老师点击的是添加没问题。OK吧,我写了半天啊,当然数据还没清呢啊,数据没清呢,数据咱们最后再清你看啊。就比如现在老师点击在第七页,我点击添加。对不,我来个123123,但是我没有点击保存是取消。对吧,你看取消是不是有问题了。
19:01
对吧,那咱们找一下咱们的取消按钮,应该是子组件这取消。对吧,应该这块传的就不对了,因为这个自定义事件需要传两个参,一个是场景,一个是那个flag标记。对不,那这块呢,CE,呃,等于啥等于零。对吧,那这个flag呢,Flag取消的时候,其实你传不传都行。对吧,咱们先让他不报错,你看老师给他刷新啊,你看。所以这块的业务逻辑还是挺多的,你看啊。那现在比如说老师点击添加PUOK 123123,我现在取消了。我再回来,他还有你数据得是不是得清。对不对,那什么时候清,当你点击取消按钮的时候,你是不是数据全要听一遍。对不,那所以说咱们的这个取消,当你一点击的时候,你这块就不能这么写。对不?咱们得写一个函数了,比如咱们这个cancel can cancel,对不?那当然咱们目前是没有这个方法。
20:02
对吧,那这个呢,咱给它剪切下来吧,因为咱这里面是不是有一行代码对吧,叫CC。E。对不,那咱们在这儿呢,也来写一个。对吧,那这个是取消按钮。哎,取消按钮cancel cancel,当你一点击的时候,那还是一样,咱这块的业务逻辑,你是不是该写还是得写这Dollar。对吧,那这块呢,咱格式化一下。对吧,那这块呢,咱也写下这是啥,这是是不是取消啊,取消按钮的回调,对不通知父亲,哎,切换。场景为几为零?对不?那你还要干什么?你还要清这个date的数据。对不,咱刚刚看到数据是不是回写了,你是不是得清,但是这回清数据呢,老师呢,教你们一个小技巧。怎么整的,你看你可以这么清一行代码就可以搞定,你看。
21:01
叫做object.a这块写一下,老师先写一下,先写上再给你们解释,叫清理数据。叫object点三咱们应该学是不是合并清楚谁呢,这点杠杠啊杠。应该是杠date对吧,哎,杠date为什么为。Z4点Dollar OPS options点对的函数执行。朱老师,我现在看不懂这行代码,如果清数据,我告诉你最笨的方法就是找到它一一个清,但是这里面数据有点多。你看咱先看看能不能实现,老师回手再给你们解释那行代码啊,咱看一下。手机而突出电子书刊。电子书添加。123走,再回来,要是没了。那老师呢,得解释这行代码是什么含义。首先说object,点三是合并对象obj object.a3。
22:00
As SI jn,它们是ES6中。哎,新增的方法可以合并对象。对不?对吧,把B对象的东西是不是,哎跟A是不是进行合并。对吧,那咱们再说。组建。实力的这个这。第二杠背的是什么?咱们以前学源码的时候,应该知道杠date,你像想是数据,为什么,因为杠是不是从杠date是不是有关系,就是杠date有的。显示数据就有,想要数据没有,那刚对的就没有。对不,你看嘛,咱们呢,可以打印一下子。啊,对吧,咱们可以打印一下子走。conso.log face,点杠date第二测试对不来date。那咱们呢,测试一下你看啊刷新。图书电子书刊电子书,你看老师点击谁点击取消按钮,你看啊走,你看刚对的是谁。
23:05
是不是就是这些所有的想是数据。咱们以前说过,为什么VM身上有响应式的数据,跟data当中有关系,这不咱源码的时候学的吗?对不,那咱们再说说说谁这这个写一下子吧。哎,可以怎么的,是不是可以,哎可以操作。可以操作date当中的。响应式的数据。那首先说咱们再说谁这次到了options啊,其实这些都跟源码有关系了,对吧,咱当年讲过到了。呃,OPS到了options,其实是啊,就是当前组建的这个配置对象。你看嘛。你看嘛。来。添加、保存、取消。你看到了options是什么?是当前的配置对象。对,不那么配置对象它是有这个呃,Date函数的,因为你看配置对象当中,你看嘛,配置对象当中有没有date函数。
24:04
有吧,你看咱打印一下子,是不是当前的贝塔函数,你看啊一点测试。对不,你这玩意不测试永远都整不明白,你看啊,取消是不是就date塔函数,那你想贝塔函数一直行返回的是不是这里面的值。那这里面指我问你一直行返回是不是空对象。对不,那不就是进行清除数据吗?把这些呃清除掉的数据是不是复制给咱想的是数据。对不,所以这块呢,老师呢,也写一下子走看这。比如说this.dollar哎,点Dollar op OPT啊,TS可以。获取配置对象。对不,那么配置对象的贝的函数执行,那么返回的,哎,返回的响应式数据为空的对吧,那你复制给响应式数据不就行了。
25:04
其实到这还有个地儿,还要清除数据,你看还有一个业务。所以这块PU啊挺业务挺多的,你看啊。举个例子啊,你看。比如说现在老师是修改。对吧。没问题吧,老师点了一下保存完了,我再去添加SP,你会发现数据还是回显。对不对,你看嘛。我现在。看着我现在是修改。没问题,数据是不是已经有了?对吧,你看嘛。你看嘛,你看嘛,当你点击保存按钮的时候,这些术语一定是有的。你看啊,老师给他拿到啊,找到PU放,当你点击保存按钮的时候,这些术语一定是有的。但你会发现,那如果再添加了数据还是有的,是不是还是回显。就是当你点击保存按钮的时候,也要把数据清了。所以说咱们找到保存按钮的那个地儿。
26:01
对吧,保存按钮是不是这样,咱们呢,也要把数据清除一下。对,不也是清除数据,那也是一样的代码。对不,那这回咱们回首再看一下,再测试一下走。你看啊。图书。电子书刊电子书OK修改。对吧,老师什么都没修改保存,你再去添加,是不是数据没了。所以说对于这行代码呢,务必要我看懂。对吧,说白了得到配置对象当中的倍的函数,它一执行返回的是一个空对象,因为你看它的返回值不就是这个这个起始状态。赋值给咱们的详细数据,那不就是进行了清除嘛,所以这个套路要学会好吧,所以说完成了咱们的添加po的业务逻辑。
我来说两句