00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们去完成po form组件的保存的操作。那咱们呢,去看一下子咱们正在开发的这个项目啊。那比如说啊,用户选择一个一级分类,比如说图书。以及电子书刊以及电子书。那么当他点击某一个po的时候,它是可以进行修改。对吧,比如说咱们要修改粽子这个PU。那么对于po form这个组件当中啊,对于数据的展示以及数据的收集,那么我们已经完成了。对吧,比如说呢,咱们再给他添加一个销售属性,比如说咱给他来个什么呢?来一个啊666版本。那你这里要注意一件事。那么当你点击保存的这个按钮的时候。
01:01
那你是需要把你收集到的这些最新的数据是要提交给服务器的。那么服务器是要修改当前的这个po的信息的。对吧。但是呢,这里面呢,要注意一件事。这个保存按钮啊,它可能是修改po的保存按钮。那么也有可能是什么呢?也有可能哎,是添加po当中这里的保存按钮。因为对于修改PU和添加PU所使用的是同一个组件,那当然结构是一样的。所以说这里呢,要注意一件事,就是咱们的这个保存按钮,它可能是修改po当中的保存按钮,也有可能是添加po当中的按钮。对吧,那当然目前而言,咱们现在是没有完成添加po的业务。那咱们现在的注意力呢?只是放在哪?只是放在修改po帧。
02:05
对吧。那什么叫修改呢?那首先说,当你比如说这个po的名称,老师给他改成什么呢?改成华为,那你这叫修改。那么当你点击保存按钮的时候,你真的要把这些数据提交给服务器,那所以说你是需要写接口。对不?那所以说呢,咱们呢,去看一下咱们的swa在线文档。他呢,应该是关于商品PU的。对吧,那这里面的一个是啊,一个是更新po的接口,那么一个是添加po的接口。那么这两个接口所携带的参数呢,都是一样的。对不啊,那么。添加和修改所携带的参数都是一样的。那无非修改和添加有没有区别,有就是你的那个po有没有携带ID。
03:02
那如果是修改某一个,那一定是携带ID的,那对于添加一个PU,那它是没有ID。所以说呢,咱们去书写一下咱们的接口,那找到咱们的API,找到咱们的PU。那这里呢,老师呢,去书写一下咱们的接口。那这个接口呢,老师呢,想让一个函数啊,同时可以进行修改和添加这个这个套路咱们前面用过。对吧,比如下面这个函数可以干什么,就是修改PU对吧,或者是添加哎,添加PU。其实啊,对于修改和添加写一下吧,就是对于。对于修改或者是添加,那么携带给服务器的参数啊,啊是大致一样,哎,大致一样的。对吧,那么唯一的区别,哎,区别就是携带的参数,是否带什么,带ID。
04:09
对不,那什么叫修改,修改代表的是服务器已经给把数据给你返回过来了,那么服务器呢,会给你返回相应的ID字段,那什么是叫添加,就是服务器还没有呢,它是没有ID的。所以说呢,咱们去写一下子X。那比如说咱们起个名字吧,叫做re EQ啊对吧,当然你可以有com,叫做req,叫ADD,或者是更新SQ。对不,那当然这两个接口都是需要携带参数的。对吧,你可以看一下子,这个呢,是添加po所需要携带的参数。对不?你看比如说有三级分类的ID描述对不?那以及当然这块的这个不应该出现是没有ID的对吧,以及po的图片对不?其实和修改的是一模一样。
05:01
对吧,只不过唯一区别就是有没有ID。所以说要携带参数,而且要注意这个参数,你看它是什么带过去的,是不是请求体保顶。对吧,那所以说咱们这个函数呢,是需要带参数的,叫po音法。对不,那这个函数里面呢,老师想做一件事,什么事呢?就是添加和修改都放在这个函数里面。那首先说如果携带的参数,哎,携带的参数带有谁,带有ID,那这代表什么?代表的是修改SP。对不,那你就可以判断,比如说如果你的PU音坊点ID有ID,那你这是啥,你这是修改呀。那你就回谁什么,是不是咱们的请求的数据,那就是request。对不URL,那么地址为谁?应该是修改的那个地址,那咱们看一下吧,应该是这个update。
06:00
对不?所以说呢,咱们呢,把它呢,给它复制一下子,以及是POS的请求。所以说这是他的地址。那以及请求的方式,Method为什么为post?那一集是需要给服务器代餐的,而且是请求体,所是date,为什么PU?那这个呢是修改,当然else就是什么没有,就是携带的参数,不带啥不带ID的。写一下就是携带的参数是不带ID的,那这个是什么?是添加po。对吧,那这块也是一样,把服务器返回的结果呢,给他返回一下,那一个是ul,那URL是谁呢?咱们看一下的这个接口。URL的应该是顶上,这个叫废物po音。对不,哎,那咱呢,给他带过来,这是他。那以及什么请求?那为post请求。
07:00
对吧,那以及呃,携带的参数呢,也是PU音符。对不,那所以说咱们接口写好。那么接口写好之后啊,咱们呢,得去看一下咱们的组件了。对吧,咱们得看下业务图书电子书刊电子书,比如说啊,咱们要修改粽子这个po。那咱们呢,得回到咱们的po form这个组件当中,咱们去看数据。对不,那么老师呢,把这个曾经测试的地儿呢,给他注释掉了。OK吧,那也就是说。当你点击保存按钮的时候,你这块要注意,当你点击保存按钮的时候,那么你需要整理收集到这些参数提交给服务器。对,不,而且保存如果成功,你应该回到场景为零的这个结构当中。对不对,对吧,啊这块要注意一下。那咱们呢,去看一下。
08:01
那也就是说,当你点击保存按钮的时候,那咱们找一下点击保存按钮,是不是在这儿保存。对不,那咱们呢,就给他绑定一个单机事件艾特click。但是你要注意这个保存按钮,它可能是添加,也有可能是修改。对不,因为添加当中也有保存按钮。那所以说啊,那咱们起个名字叫做ad或者up date PU。对不,那当然咱们目前而言是没有这个方法的,那所以说咱们在底下呢,给他写了相应的这个方法。老师呢,先把没用的地儿呢先给它折上,省得看着心烦意闷。对吧,哎,这个老师都给他折着,压力小一点是吧?哎,Computer给他注释。那这个呢,是咱们保存按钮的回调。对吧,哎,这是它。那咱们呢,可以先弹出个123,先看一下O不OK对吧,ALERT123。对吧,随便来一个,那咱们先看一下子,当你点击保存按钮的时候,说明弹了,这是没问题。
09:04
那你说你接下来要干什么呀?你说你接下来要干什么?一点击保存按钮,是不是要向服务器发请求?对不对,就是当你一点击保存按钮的时候,是不是要向服务器发请求,而且还要带参数,所以说咱们第一件事干什么,先整理参数。来整理参数。那么带给服务器的参数呢,咱们呢得研究研究。谁呀,这儿?不就这个SP。那首先说需要携带的参数有谁有三级分类的ID?啊,其实三级分类的ID啊,咱们已经有了,咱们呢可以看一下你看啊。老师呢,把数据呢给你打开,因为一定要记住数据才是王道。找到咱们的po放我们这儿啊,Po放这儿。盯住这啊。这块呢,别忘记一件事,什么事呢,诶这块有个报错看一下子啊。这个方法咱写了对吧,来看这儿。
10:02
那就比如说当你点击粽子这个po的时候。对吧,你别忘记了,咱们po form是发了四个请求。对,不可以获取到什么可以获取到你要修改的当前的这个PU。以及所平台的所有的销售属性列表,以及po的图片列表,以及品牌的列表。对不?所以当你一点击修改按钮的时候,咱们是发了四个请求的,而是把这四个字段都相互了赋予了值。而且要注意puu是需要给服务器携带过去的参数,那你看这里有没有categoror ID,有,为什么?因为服务器接受到请求之后,会把你当前要修改这个po信息给你返还,返回说复制给他。所以说在修改的时候,咱们的这个字段三级分类的ID是有的。对不,你看嘛。
11:01
你要咱初始值是零,你要注意,当你一点击修改的时候,咱是要发请求的。对不,你看你是不是把服务器上的那个。呃,服务器的数据是不是返回复制给他,而服务器上的数据是携带PU的这个category ID的。对不,所以说这个值咱们已经收集到了,在修改的时候。那以及描述,描述咱们也收集到了。对不就这嘛,你看吧。对吧,以及品牌的ID咱们也能收集到。对吧,就是tid嘛,盯住这。T m mid硬化是不是也能收集到那以及照片墙的数据,要注意一件事,咱收集到哪去了?对吧,那你要注意一件事,照片墙的数据咱可不是收集到这儿了。对不对,咱照片墙的数据收集到哪,你看咱现在的这个PU image list还是空的,那咱puu下的这个PU image list是不是还是空的。
12:01
咱们的数这个po图片的数据收集到哪,是不是收集到了咱们的这个po image list的这个数据当中。对不对,做这块要注意,但是你要注意收集到哪都可以,但是最终整理的时候,你都应该放在po这里,因为这个是将来带给服务器的参数。对吧,那所以说咱们呢,得去整理一下的图片的数据。为什么呢?咱们看一下了,你看老师找一个。我给你找个手机,手机通讯手机来盯住啊,照片墙这个数据你看。这个呢,是服务器给咱返回已有的图片的信息,你看。就是服务器给咱们返回的这个图片的信息当中是带有image name和image URL字段的。而将来你照片墙的图片提交给服务器的数据当中,也务必要带image name和image URL字段。你看这七个都是,但是你要注意它是不是还可以添加,你修改的时候是不是可以添加。
13:01
你要注意一件事,照片墙,你新增的这个图片,它是没有image name和image URL字段,它是有name和URL字段。对不?咱们当年说过,为什么要有name和URL字段,因为照片墙要展示它必须这条数据得有,得有name和UR,对不?所以说你会发现一件事,什么事,对于已有的图片是有这两个字段的,而对于新增的是没有的。对不,所以说照片墙的数据咱们是需要进行处理的,而且要把它最终的数据整合在咱们的po这里。对吧,那所以说哎,以及咱们再看一下底下这以及咱们的销售属性的数据也收集完了。都是收集到哪的,收集到了咱们的po这里。对不对,都已经收集到这儿了,你看比如老师新增的一个啥尺码,是不是已经收集到这了,收集到po这里了,对吧,所以说你会发现需要带给服务器的这些参数只有一个,咱们需要整理一下,就是谁,就是那个图照片墙的数据。
14:07
对不?哎,所以这块呢,要注意一件事。那所以说来咱们回到这儿,当你点击保存按钮的时候,要整理参数,那咱们需要整理谁需要哎整理哎照片墙,照片墙的数据。这块呢,要注意一件事,什么事就是携带的。参数就是对于图片,对于图片。那么是需要携带哪两个参数需要携带啊携带。叫做image name,应该叫image name对吧?Image name和image url2个字段。对不写一下需要携带image name。哎,Name与image URL字段。那所以说呢,来老师呢,给你们测试一下,咱们刷新看一下,比如说图书。
15:03
电子书刊电子书对吧,比如说咱们来一个一。看一下子他已经有一张图了。那咱们先看看这个参数啊,这个参数在哪?这个参数是在po form,这个po image list。它是由image name和image URL字段的。但是你要注意对于新增的图片。对于新增的图片,它可是没有的。对吧,那所以说咱们要整理一下参数,那就说face.pu image list,它是一个数组,那怎么去整理数组当中这个元素的这个这个这个KV对呢。对不,哎,怎么去整理。这块你得琢磨。对吧,哎,咱们找个已有的对吧,你这块你得琢磨了。对不怎么去整理,就是整理这个新增的这个字段怎么去整理。对,不可以映射map。
16:01
所以说咱们呢,可以用数组的map方法,因为map咱们应该知道。可以利用已有的元素,把瑞特回来的结果作为新数组里面的元素。对吧,所以咱们可以一个什么呢?是一个对象,那你带给服务器的照片墙的数据呢,必须得有image内幕字段。对不,那咱们来看一下呢,它对于。来多测试它对于什么,对于已有的图片,你看啊。咱盯住这。找到这儿啊,你看对于已有的图片,它是有内幕字段。对吧,内不就是一点那个PNG对吧,那你看比如说老师再新增一张图片。对吧,哎,你看他又来了一个,你看对于新增的这个图片是不是也有name字段。对吧,都是有name的属性值的,所以说呢,你这块就可以怎么写呢,以image name就让它为什么为你的item的name。
17:00
是完全可以。对不,我管你是,呃,老图新图你都有图片的名称。对不就是它就可以了,那以及还有谁呢?还有个叫做以妹纸URL字段。咱们先写个空,那咱们呢,还是得测试。对不来,咱们看一下修改。你看,盯住数据,数据才是王道。咱们呢,找到咱们的PU这啊,盯住了啊。盯住这是老的,它呢是有image u l,但你看新增的有。新增的没有啊。对不对啊,也有URL,你要对于老的是不是有URL和image UR对吧,但是对于新增的它只有URL,但是你要注意新增的这个R是本地图片,咱要的不是这这个纸啊。如果你提交的是本地图,本地的这个地址,第二次你再看修改的时候,你是看不到图的。对不,你得用啥,你得用他的response里面这个date。对不,所以说这块怎么写呢?这块得分情况,对于新图你不应该用这个地址,你应该用的谁是response下这个date。
18:08
对不?所以这块呢,咱们得写一下子,比如说看你的item有没有这个re response,那如果有,你要用的是他的item的response date。这是这是对于新图来说的,那如果是老图,老图有response,老图是没有的。但老头有谁有URLURL不就是远程图片的地址吗?就这来个或或什么item的URL。对不?所以你看这啊,Image name是什么?是带给服务器的字段,比就说不管你新图老图都有name字段,对不?Image UR要注意,对于新图而言,它放的可不是item ul里面,而且是response。对吧,那老图放的是URL里面,所以说这两个字段是需要带给服务器的,而咱们应该知道map数组的map会返回一个新数组,那咱们是不是就可以赋值给咱们的PU下的这个PU image list这个字段?
19:06
那这样这个不就是提交给服务器的数据。对不,所以说可以把它赋值给谁赋值给。咱们的这点PU。对不那么参数这不就整理完毕了。那么参数整理完毕之后,那你要干什么?老师问你。你说参数整理完毕之后,你要干什么,你是不是要发请求?对不,那咱们就可以发请求啊,Wait等待着成功的结果,Wait谁这点到API点点谁啊,点咱们的这个叫PU,哪个方法叫re EQ啊叫啥来着忘了。找一下。叫re e q at or update po。对不,所以说不点它嘛,REQ,它那你是需要携带参数的,就是谁SSP。对不,那咱们呢,需要去等待他成功的结果。let,一个造。
20:03
对吧,那咱们呢去。打印一下conso.love谁?对不,那咱们呢,去看一下有没有成功对不?哎,刷新看一下。呃,咱们的语法呢,应该出现错误,因为你写了away,但是你没有写谁呀,写think。对吧,所以这a synca sync空格对吧,那咱们看一下子能不能成功刷新。来测试一下。图书电子书刊电子书对吧,修改粽子,比如说老师呢,给他来个粽子666对吧,点击保存。呃,失败看一下哪失败了啊。看哪块语法的有错误啊。艾瑞啊,他报了一个艾瑞的错误。没事,那咱们呢,再测试一下子,咱们这呢去保存一下,这块去保存一下对吧,以及看一下咱们这里有没有错误,他下的map这是没问题的,赋值给他也没问题。
21:08
对吧,这块应该是没问题,看接口有没有写错啊。应该是没问题的,行,那咱们呢,保存一下刷新。再回手测试一下。对吧,来给它挪下来。呃,图书电子书刊电子书,那咱们再找一下第二页的吧,比如说这个早上好。对吧,咱们呢,给他来一个吧,来一个什么呢?来一个山节构图吧。对吧,咱们点击一下子保存按钮看一下走。出现了错误,那咱们真得找一下这个错误。对吧,他说说说说什么二应该在哪用过呢。咱们呢,去看一下呢,Every every,我看搜一下咱们这里面有没有二出现啊Eve。R。
22:00
对吧,哎,应该是这块的问题啊,这块的问题咱们看一下销售属性值。行,他一直在报这个二错误,那咱们刷新呢,再看一下数据啊图书。电子书刊电子书,那么当你修改粽子的时候,比如说咱给他来一个吧,添加个图,添加一个咱们的这个小二哈吧,看一下子,当你点击,假如说点击保存按钮的时候,那么你应该是把这个返回的数组啊,并不是说复制给PU啊,如果复制给PU,那它就变成一个数组了,应该是SPU下的这个s PU image list。对吧,所以说咱们是这里搞错了对吧。哎,所以说呢,咱们这呢,给它搞一下是Z的SPU点它对吧,这块要注意一下,你不能把这个数组啊复制给谁复制给他,如果把数组复制给的,那它不就变成个数组了嘛,对吧,应该是复制给他下的,它这个字段是带给服务器的图片的信息。
23:03
对吧,那所以说这次咱们回手再测试一下对不,看一下子能否成功走刷新。瞄眼,那首先说图书电子书刊电子书,那咱们要修改粽子来看这老师呢,比如说给他来个很好吃666。走,那这回咱们点击一下子,看一下子O不OK,是不是修改成功了,但是你要注意,如果修改成功之后,还有没有事要做,有。如果修改成功,你看一下人家已经写好了这个啊,你看修改成功,他还有没有别的业务要去做,你看啊。中的,咱比如说你看真的修改成功了,对吧,咱改成啥999。对吧,那当你一点击保存的时候,第一个你需要通知父亲,你回到场景为零的这块的业务。对不,以及你也看见了,它弹出了一个message。那所以说咱们这里面你得判断了对吧,比如说如果如果你的result,哎,Result点透的等等于200,那你要干什么。
24:10
你是不是要来一个提示。那就是这点Dollar message对不?那咱们呢,可以传一个对象type,让他来一个叫做sus类型的,以及给他来一个什么,来一个叫做保存成功。对不,而且还要注意一件事啊,这个呢,应该是有一个字段是message啊me。除此之外呢,你应该通知父亲,你看,当你看咱这个吧,当你保存成功的那一刻,你不仅仅说只是弹出一个保存成功的信息。你还应该通知父亲,应该回到零的那个场景。其实咱们点击取消的时候,已经触发了一个自定义事件,就是修改场景的嘛。对不对,让他回场景为零嘛,所以当咱们点击这儿啊,点击这个保存按钮的时候,发完请求之后,如果成功,那也是一样通知父亲啊,也就是说通知父组件回到哪,是不是回到咱们的场景零这里。
25:16
对不,那也是一样。这点DOLLAR1。看一下这个自定义事件的名称叫做什么,它应该叫做change场景对吧,哎。那咱给他来一个,那这块呢,咱们看一下子,哎,场景对吧,那应该回到几回到零。那这回呢,回首呢,咱们呢,再测试一下。对吧,咱们呢,一定要记住多加测试,你看啊。图书。电子书刊。电子书。比如说老师呢,要修改这个早上好。对吧,哎,那咱们呢,比如说给他来一个啊,叫做早上。早上好呀,对不记住了啊,来个12306对吧,那么当你点击保存的时候,我真的进行修改了,修改这个PU的这个描述,你看保存。
26:08
对吧,你会发现一件事,什么事我真的修改了。对不对,那你应该停留在是不是第二页这块,是不是应该停留在第二页没问题,但你这块的值是不是得改。对不?那所以说要注意一件事,你看我真的修改了,老师再给你看一下子啊,比如123,呃,888888888888,你看我修改了,但你会发现描述这里它根本没有更新数据。所以说你要注意一件事,什么事,当子组件通知谁,当子组件通知啊父组件你要回到零场景的时候,那咱们得找到父组件这里。你看切换场景看这啊是不是这呢。对吧,是不是这个方法叫做它是不是改为零,但是你也别忘记了,你是不是还需要在获取po的列表的数据再重新获取。对不,那所以说这块呢,你还得怎么的face.get PU list。
27:05
对不,所以说你还得测试。对不,你还得测试,你看这啊图书。电子书刊电子书对吧,比如说现在老师想修改豪哥对吧,豪哥牛逼,那这块呢,咱给他来一个叫做呃,叫做呃名祖国的。哎,老花。孤朵啊,多。祖国的老花骨朵,对不?你看我这回保存啊,走。你要是不是真的修改,所以说千万别忘记当你通知副组件写一下,比如说子组件。通知副组件切换场景,但是别忘记了已经修改完,是不是需要再次获取po列表的数据进行展示。对不?你以为完事了吗?没完事儿呢?
28:03
你还得琢磨你看啊。图书。电子书刊。电子书。那刚刚老师修改的是第一页,那假如我修改第二页。就比如说早上好这个。对不来,咱俩给你来个叫做小名啊,哈哈哈,对不?我修改的是第二页,我问你,你修改完事之后,你是不是应该停留在第二页。但是你会发现咱停留在第一页,你应该是停留在第二。对不,所以说这块呢,你该怎么办呢,你得停留在当前页,所以这块应该传谁传咱们的这点配置。对不,这点配置不就是当前页吗。对吧,你看一下咱们这个参数配置是不是就是当前页。对不,所以咱们再测试呀,图书。电子书刊电子书对吧,比如说咱修改第二页对吧,早上好,这回不小明了,小明哈哈哈666对吧,你点击保存走,是不是停留在当前页。
29:01
所以说到此为止,咱们才完成了修改当中的这个保存按钮的操作。OK吧?
我来说两句