00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成po form组件中照片墙图片的收集的业务。那咱们呢,去看一下呢,咱们正在开发的这个项目。比如说啊,咱们呢,选择一个手机。手机通讯手机。那假如说啊,现在呢,老师想修改小米十这个PU。那咱们呢,去进行相应的修改。那首先说啊,对于po名称。对于这块呢,咱们已经完成了数据的收集以及展示。对吧,那咱们呢,可以去看一下咱们的开发者工具。找到咱们的这个po form这个组件。那咱们呢,去看一下这里的数据。那对于po名称,咱们已经完成了数据的展示以及收集。
01:03
那为什么要收集数据呢?很简单,对于添加po或者修改po的时候,那么它的名字发生变化的时候,你点击保存,那一定是要把数据提交给服务器的。那所以说对于po的名称啊,对于他数据的展示以及收集就OK了。那么以及咱们来看一下子对于品牌。那么对于品牌的数据啊,咱们也进行了相应的数据的展示以及收集。那么数据收集到了哪呢?是收集到了t mid这个字段当中。那以及po的描述也完成了数据收集的业务。那么但是对于照片墙这里。咱们呢,现在只是完成了一件事,什么事呢?这是对于服务器返回的数据。谁呢?就是这个PU乙酶例子。
02:00
可以把数据在这里进行展示,但是并没有进行收集,你看啊。咱们服务器返回的数据啊,这个图片是有几个呢?是有六个。对吧,所以说是有六张图的。那么对于咱们现在目前的这个照片墙,那只能把什么说,把服务器返回的数据是不是进行展示。那如果说用户进行了删除。对,不删除或者是新增的时候。那你要把删除的那些数据啊,或者是新增的这些数据,你要收集好,要提交给服务器。对不,当下一次进来的时候,那你的数据那一定是要发生变化。那但是对于咱们目前而言,咱们只是完成了数据的展示,但并未收集。那所以说咱们做一下笔记,第一个。第一个老师想问的一个问题就是照片墙核实,哎,就是照片墙写一下。
03:03
照片墙何时收集数据?这个问题呢,咱们呢,得一点点的去看咱们的代码,对吧,你不可能凭空给他想出来。那所以说找到咱们的po form,找到老师先把底下没用的先给它折上了,找到咱们的po图片。那咱们呢,先去看一下这里的一个结构。那首先说这里面呢,它用到了EL-uplo对吧,就是咱们照片墙这里的这个组件。那咱们呢,先去研究研究啊。那首先说action是什么?Action是你图片上传的地址,那这个是咱们真实服务器接口的地址。但也别忘记前缀需要加上D-API,否则啊,会有跨域问题。以及list card。
04:01
是咱们EL-uplo的本身自带的一个属性,对吧,属性值是啥,是不是赵新强。那以及咱们要问问自己,这个on preview是什么?他什么时候会触发。对不,那以及还有这个on remove啊,当然还有一个属性叫做feel list,是咱们照片墙需要展示数据的来源。叫做feel list。对吧,所以说呢,这块呢,有几个呢,咱们呢,还是得说说,那首先说。有两个,咱们一会儿要研究的就是这两个属性,对吧,但是对于few list这里边的老师呢,做一下笔记。Few list是什么?是你上传啊,比如说照片墙。哎,照片墙。需要,哎,照片墙。那么需要。展示的数据括弧是数组,而且数组里面的元素务必要有name与URL属性。
05:08
对吧。那咱们看,那咱们得问问on preview和on remove这是啥?那谁先说啊,咱们先一个来,谁先说on preview是什么呢?是当照片墙预览照片的时候,会触发这个毁掉。对不,其实这个是什么,是图片的预览功能,哎,预览功能。你看啊,那咱们的这块呢,有一个叫做UN preview这样的一个属性。那么它使用了一个函数作为它的一个回调,叫handle了,Picture card preview。那咱们的相应的函数啊,咱们也已经写过了,在哪呢?是不是在这,那这个老师做一下笔记,这是什么,这是照片墙,哎,照片墙啊写一下。啊,照片。墙图片预览的毁掉。
06:02
咱们呢,可以打印一下子,你看老师给你打印个123。对吧,那咱们呢,去看一下子。比如说。手机。手机通讯手机对吧,那比如说老师想修改小米神对吧?哎,你看这样,咱们的照片墙是有预览功能的,什么叫预览,你看啊,它这块是有一个小小的一个加号的。当你一点击的时候,会进行预览的,对吧,是不是会执行123。那这回呢,咱们要琢磨琢磨,那么当用户点击这个加号的时候,预览的时候要不要收集数据。对吧,所以咱们的第一个问题是,哎,照片墙何时收集数据,那第一个就是预览啊预览。照片墙啊照片。强的时候,显示大的图片的时候,那么需不需要。
07:05
收集啊图片嘛,啊收集信息嘛,或者叫数据。数据。那么你想想他需要收集吗?是不需要收集的,为什么呢?因为这些数据你已经有了,你只不过是把这张图片咋的,是不是给他放大了而已。对不,所以这块呢,要注意一件事,咱们是不需要收集的,哎,不需要收集的,为什么呢?因为数据已经有了。对不,你数据已经有了,那还需要收集吗?那如果说你没有数据,那你根本就没有啊,呃,预览的这个功能。对吧,所以这件事儿一定要注意。这是他。虽然这块呢,咱们不收集数据,但是咱们得看他的代码在干什么。那首先说this.dialogue u,那也就说咱们的组件的身上有一个详是一个属性叫做diog image your。
08:03
他在干什么?那咱们打印一下子叫做f.URL你看他在干什。那咱们呢,去点击一下去看一下的啊,走,咱们回首看一下。你看它存储的是什么呀。对不?你看它存储的是这张图片的地址,这明显是点勾皮,是不是这张图片的地址。那也就是说这块代码的含义是什么?对不是讲讲什么,讲数据当中这个图片的地址赋值给这个属性。那为什么要复制给这个属性呢?因为你这个dialogue在用,你看你这个dialogue是不是要把这张图片是放大的展示。对吧,所以说你会发现这个属性啊,在哪,在这个dio当中会出现。对不对对吧,你看这以妹纸宽度100%,以及它显示的是哪张图,是不是就是咱刚刚放大的那张图片。
09:04
对不,那以及这块是干什么?这块呢,是在控制着dialogue的显示与隐藏。对不,所以说你看他又做了一件事,什么事,让咱们的dialogue对话框是不是显示。对不,那这块咱们写一下这块是什么,是对话框,哎显示。矿啊,不是黄,是矿。对,不但是要注意这里面咱们需要收集数据,不需要。那什么时候需要收集数据,你再看你看。它除了有预览的功能,还有删除。那你就想想,原来有六张图,你点击一个删除掉,你保存,你下次进来的时候是不是应该是五张图。所以说你删除图片的时候,那你得收集数据,你得知道诶谁没了。对不对,对吧,所以说呢,还有一个,还有一个地儿,这个地儿是需要收集数据的,就是照片墙。
10:03
写一下哎,照片墙,那么在删除图片的时候是需要收集数据。对不?那么咱们怎么知道他删的是谁,剩下的又是谁呢?那你得看人家的这儿对吧,接着看代码。它顶上呢,除了有个叫on preview这样的一个属性,还有个叫on。On幕什么时候会触发的选项就是on-2MO VE幕就是当你删除照片墙,删除图片的时候会触发。对吧,哎,会触发。那咱们呢,可以看一下它的回调叫handler remove删除。那这块呢,咱们写一下这块是什么,是当照片墙,哎,照片。墙哎,照片哎。这个照照不出来了是吧,哎,照片墙。
11:01
哎,删除某一个图片的时候会触发。对不,那咱们呢,可以确定一下子,你看老师给这打印个啥,打印个1122吧,你看什么时候会触发。来看这儿。老师呢,还是来一个手机。手机通讯。手机一定要记住多测试,咱还是小米色。对吧,因为他这个图片多一些,你看啊。比如说老师删除第一个价值5999元的这张图,你看一点一击是不是出发了?而且呢,这个函数里面呢,给咱们注入了两个参数few。那feel是什么?其实第一个参数就是你删除的那张图片。OK吧,那么第二个参数是什么?你看它数组里面有几个元素?有五个元素,那这个代表什么?代表的是剩余的其他的这些图片。所以说这两个参数咱们也写一下子F参数。它代表的是什么呢?来写一下,代表的是你删除的那张图片。
12:05
你想那张图片都已经删除了,你没没必要也没需要去收集了,你就把剩下那五张图收集到,当将来点击保存的时候带给服务器就行。对不,那么还有一个参数叫做feel list,这个参数是什么?是你照片墙。按删除某一张哎,某一张图片以后,剩余的其他的图片。那这些图片是咱们需要收集的。对吧,那你把这些数据收集到哪呢?那有的同学可能会说,老师,哎,我要收集到咱们的这个PU乙酶质,就是收集到这个SPU当中的这个PU酶之例子。对不,其实收集到哪都可以,但老师呢,先不收集到这儿,为什么呢?因为将来这个是带给服气的那个参数。
13:00
那你要注意一件事,什么事,你看咱们的这个数据。咱们剩余的这五张图片有一些字段咱们是不需要。对吧,就比如说name和URL。对不?Name和URL是什么时候出现的?是当服务器的数据回来之后,照片墙展示的那个数据务必得有name和URL这两个属性。咱们当时是怎么搞的,是数据一回来,诶,我给他添加name和URL这个属性。对不,咱们可以去找一下子,咱们的这个数据,我看一下子。应该是在哪呢?应该是在这吧,啊想想应该是在这对吧,咱们找一下吧。找一下照片你看吧。获取图片的时候,这是服务器返回的数据。为了显示咱们照片墙的数据啊,咱们给它加了name和URL字段。而name和URL对于照片墙是需要的,但是对于服务器是不需要的。所以说老师呢,先不把数据收集到哪,收集到这个PU这里,因为po是即将将来带给服务器最终的那个参数。
14:08
那咱可以收集到哪儿,可以收集到任何地方。你收集在哪里都可以,你只要这些数据能收集到,将来在点击保存按钮之前,数据整理完毕即可。那老师收集到哪呢?我就收集到po image list。对不,所以这块呢,咱们要注意了,那咱们这块得怎么是不是得收集,哎,收集照片墙,哎写一下收集。哎,照片。墙图片的数据。对不,那就是this.pu image list等于什么?等于咱们的feel list,那这样就收起嘛。对不但是这块呢,老师呢,得说一下一定要注意。对于已有的这些图片,已有的数据,它是有name和URL字段。
15:02
对不,这块老师做一下笔记。就是对于已有的图片对吧,就是照片墙,哎,照片墙啊照。偏啊,写一下照片墙中。显示的图片。对不,它是有什么呢?有name和URL字段。对吧,URLURL字段。对不因为什么呢?因为照片墙,照片墙显示数据务必要有这两个属性。而对于服务器而言,那么对于服务器而言,它是不需要。Name。约URL字段,所以说这块一定要提醒自己将来。对于已有的图片的数据。对吧,在提交给服务器的时候。
16:03
哎,十号。需要哪个需要处理的。对吧,但是咱们目前先不处理,只是把数据给他收集了。对吧,因为咱们还没有点击保存的这个操作。那么除此之外呢,还有一个地儿也要收集图片,你看啊。比如说他现在有几张图呢?2466张图,那我能不能新增。能不能新增?当然可以新增。那么你需不需要把新增的这张图片进行收集?需要。将来要提交给服务器的,你保存是是需要提交给服务器的。我下一次再访问的时候,你是需要有这张图的。对不,那么什么时候去收集上传的这张图呢?其实这个业务逻辑咱们曾经做过。咱们可以去找一下咱们的upload upload这个组件。它呢有一个属性,可以监测到你上传的那张图片。它是哪个属性的,是那个叫on success,这个咱们前面在用过就是它。
17:04
All success。文件上传成功时的钩子。而且它里面有三个参数,Response feel和feel list。其实feel list就是什么?就是你上传完毕之后所有的图片。对吧,那所以说咱们呢,给他搞上。那这个呢,咱们呢,也给它加一个在这儿啊,在最后面吧,我在这儿给它加一个。冒号,哎,冒号on success,那咱起个名字吧,就叫做handler hand。Success you。CSS。那当然咱们目前是没有这个。函数的,所以说咱们回到底下呢,去给它新增一个函数。对吧,先把没用的给他折上。对吧,什么看着心烦意乱。那这个是什么,这个呢是照片墙,哎,照片墙。
18:00
哎,图片上传成功的回调。对不,那它这里面呢,有几个参数呢?有三个参数。对不对,来response few和few list。其实feel是什么?Feel就是你上传成功的那张图,Feel list是什么?就是你。上传成功之后所有图片的信息。对不?那以及response是什么,咱们都可以打印一下,Council,第2LOG re SE,对吧,以及few,以及feel list。对吧,咱们都可以打印一下。那咱们呢,去看一下。什么时候会出发,是当你上传成功的那一刻。对不,咱还是手机对吧,比如说咱来个小米十。老师呢,这回呢,给他新增,新增的时候当然也要收集数据。对不,那你看是不是处罚。那首先说第一个参数response是什么?是服务器给咱们返回的一些信息。
19:03
对吧,可以看到什么,可以看到,哎,这个图片的真实的在服务器上那个路径。对吧,以及few是什么以及。拍照以及费用是什么?是你上传成功的那张图。以及list是什么,是你上传成功之后所有图片的信息。对吧,这不正好七个吗?那哪个是咱们需要的,那不就是最后一个吗?那也是一样。收集。哎,图片的啥信息。咱们收集this.pu以may list等于谁feel list。这不就完事了?但是这块呢,一定要注意一件事。老师呢,也是最后一次在强调一定要注意。对于已有的图片,就比如这是已有的图片。那么已有的图片啊,咱们可以看一下,它是有name和URL字段。对不,咱们可以看是不是有name和URL字段,那么但是对于新增的这个图片,你看啊,新增新增的这个图片是没有name和URL字段啊,也有对吧?哎,看这。
20:11
看这啊看这啊,也有也有name和URL字段,因为如果你没有name和UR字段,这边形是不能显示的,但是一定要注意,将来提交给服务器的时候,Name和URL字段是咱们不需要的。对不对,所以这块呢,一定一定要注意,所以说对于照片墙图片的收集咱们已经完成,那所以说还有个地儿是需要收集照片墙那个信息的,就是照片墙。哎,在添加图片的时候,那么也是咋的,哎时候那么也是需要收集数据的。对不,其实就两个地儿,一个是删除少了。对吧,一个是新增多了,你都是要收集数据,而对预览功能你是没必要,因为预览是什已有的,没必要。对不,所以说这几个相应的回调你得能记住。
21:03
OK啊,但是这个东西呢,其实在文档当中是有的,没必要去死记硬背。
我来说两句