00:00
好,来,我们来看一下我们昨天讲过的东西啊。那昨天呢,我们主要做的是添加商品和修改商品的这一个组件界面。实际上是同一个组件是吧,因为他们的界面基本上一样,只是一个默认,没有显示一个默认要显示一个商品的内容是吧。啊,最后要做的。更新或者添加的功能,其实编码也基本上差不多。好,我们来过一下。啊,我们主要写的有两个组件,一个是我们的添加更新的这个组件。再一个就是那个图片上传的组件。我们先来看这,那对于这个组件来说,首先我们肯定要去把它的界面是不构建出来。这个基本界面应该没有多大难度,跟我们前面基本的界面啊。
01:02
当然这里面难度的,其实后面的几个是吧,啊有一个还没做。啊,前面这些基本的应用form表单呢,这是里面的一些输入框啊,单行输入多行输入。啊,这些都没什么太大问题啊,用的都是B里面的一些基本的一些组件啊,这里面跟前面都有一个不同的是,这里面有了一个左侧的一个标题。他称,为什么ne?对吧,左侧的一个标题。那这个其实它是本身就可以指定的啊,只是主要有一个需要去指定form的一个什么呢。好,现在我的内的是指定在哪个标签上的。嗯,卡住了。
02:02
是指定在form标签,实际上这个配置呢,啊,当前这个用于做布局item的这一个layout,不仅可以指定在form上,也可以指定在什么呢?某一个item上。说白了,如果你指定在form上,约束的是谁啊?是不是所有的item?那我也可以对每一个某一个item做一个特别的配置吧?这能听到不啊?好,这个其实也并没有多大难度啊。需要去知道,大家不用太背啊,这东西你要记住肯定是需要一需要花时间去记的,不用太去额外的花很多时间去记。其实简单的我们就不用再说了,这个是它的一个text error,这是在input后面是不是加了一个相对后缀。嗯,这个比较简单。
03:00
难是难在后面两个。首先我们来看第一个,首先这一个他用的是哪一个组件。啊,是不是用它有一个概念叫几年的主见你就开始K了,对吧,这个呢,啊,写起来还是有点小费劲的。而且我们这个今年的列表是不是异步加载的呀,啊,也就是说我们最终是不是以这个例子为基础来去写的,就这个当前这个例子为基础来写的。啊,大家如果去用某一个组件,最好能够先找到一个跟你的效果相近的一个效果的例子,在那个技术上去改造。人家说所有的组件我都能这样做吗?那可能也有的组件没有这样的合适的例子,那你就得一点一点的写。这个懂吧,嗯。啊,其实我们要最终做的效果跟他的这个例子相似度是非常非常高的。
04:03
啊,当然我们做的稍微比这个要稍微费劲一点,稍微难一点啊。首先要test的基本使用需要去知道啊。OK,好,我们这里面是不是一上来需要去,一上来我就希望能够看到谁了,看到这个一级。商品分类的这个列表吧。那说明我们一上来是不是得去获取那个所有一级分类商品。的列表是不是?这能听懂吧,那我应该在哪去调用。接口请求函数了。我想一上来就能看到。是不是did呀。说白了,一个无非就两发请求,就两种情况,一种是在初始显示的时候,就是在D里面,就是我希望一打开就能看得见。
05:00
另外一种时刻呢,就是我点,比如说我这个添加或者更新的这个请求什么时候才会发呀。我是不是点这按钮才发呀。也就是在事件回调函数里面去处理。就这两种情况。我就不信,就这两种基本情况你记不住。啊,这个嗯,是咱写了好多遍了,对不对啊,一个在一个在世回家兄弟们就这两种情况啊,没有别的。好,那所以说我们首先嗯,在D里面就要去想办法去调用接口请求函数,去获取一级分类的列表。那有了列表,但是他需要的是一个什么数据啊。有个概念,它需要的是一个options。对吧,而且每一个option呢,是有一个对象啊,每一个option是个对象,对象里面有什么呢?有value,有title啊,还有一个什么is live live什么意思,还记得不?
06:07
是不是叶子?那我们这些是叶子吗?不是。啊。我们这个啊,不是叶子啊,它是有一个箭头的。也就是说,如果你不是叶子,你本身是上不去的。听懂了吧,只有你选中某一个叶子节点,是不是才能选上去对。这样能看出来啊,那他啊有的呢,比如说这个事例。开始不是叶子,最后是不是变成叶子了,变成叶子原因是后来我是不是查询了一下。哎,这样才能选上去。啊。所以我们要去异步获取一级分类表,生成一级分类的什么呢?Options,那最终就能够去根据options了,去显示我的级联的一级列表。
07:02
那。但是有一个事情我要问大家一个事情啊,我在初始显示一级列表的时候,有没有可能需要显示二级列表?嗯。有一种可能性,就是我点击的不是添加,而是什么呢?修改。那此时是不是既显示了一级分类的这个电脑对吧,也显示了是不是二级分的这个台式机呀。但这个要求显示有一个前提。它对应的二级列表应该提前一句什么。获取到了。那是所有时候都需要获取二级分类列表吗?不是吧,那什么样的情况下需要获取二级分类列表啊?首先你得更新吧,你要是添加你能获取二级分类了吗?
08:00
不能你要添加换你你都不知道是要显示哪个二级列表,你去加的谁了。对。那四更新就一定要获取二级列表。那什么时候需要获取呢?当前商品是一个什么二级分类下的商品,那就需要获取对应的二级列表。这样是不是才有可能展现这个二级分类的这个台式机这个名称,如果你的二级列表没有获取,你想想看,这个台式机的名称,它能获能显示出来吗?不可能嘛,因为商品里面只有分类ID,没有分类名称是吧?这个要搞清楚。啊,就是这个,所以说如果当前是更新二级分类的商品啊,那就一步获取对应的二级分类列表,生成二级分类的option,并且添加,为什么呢?对应option的什么。
09:01
Children。其实在这里面用到一个技术啊,首先大家需要去知道一个事情啊,知道一个什么事情呢。啊,A sin函数。它的返回值是什么?是一个新的什么方面对象?那四方米对象是不是就要知道它的结果以及它的值?对吧,它的结果就算值,你的结果成功了,成功了还是失败了,对不对?值嗯,是正确的值,正常值还是错误的原因是不是啊,需要知道两个东西,那这一个promise对象的它的结果以及值由谁来决定呢?对吧。Promise的结果和值由谁来决定?由a think函数。
10:00
的结果决定。什么意思?比如说我的性函数正常的结束了。那你的这个是成功了还是失败了?那必然是成功了吧?那如果我这个剩函数抛了异常。那这个肯定是最后结果失败了吧,这个是专专门写过的,应该就比较清楚了。咱内部是不是有穿的呀。一旦开启到了异常是不是直接呀。这能听懂不来?那如果是成功了,那成功的值是多少呢?成功的值是多少?就看这个函数的什么返回值,如果它没有返回,我的成功的value是多少?Idein,因为你不返回就相当于返回什么undein。
11:05
对吧,那这个时候我们用于我们是不是要去调用一个方法获取二级分类,列二级的分类列表,也是得到一个什么呢?Categories。听懂了吧,需要得到它的时候,当时我们就用的return。把这个。二级分类数组给它出去。就可以作为我们函数promise的成功的结果。这个要会。这个是大家应该要需要去掌握的一个,呃,技术,其实你搞清楚了也并不难,就是我们这里面有一个get,它可以获取一级列表,也可以么。二级列表,它获取一级列表以后,是不是就初始化一级的option。
12:02
对,不等于什么,主要是如果获取的是二级列表,它是将这个二级列表的这个数组给了什么,那我在外面可以调用这个函数。得到这个结果吧。各位。可以的吧,只是我在这里面必须要有一个什么。能不能我不写呀?我不晓我,我能得到什么。得什么?刚才我们说过,那个函数的返回值是什么?Promise是吧,现在我是不是在调用一个函数?对吧,我就在调用一个函数,本来原本是不是得到的是promise。是不是,但是我现在想要吗?不想,因为要用promise起点了,是不是,何必呢,有了,我们说有了promise马上就可以进行什么操作。
13:04
Wait。对吧,那后面你左边是不是可以接收他给我出来的那个。这能听懂吧?嗯。这是这个。代码没有什么特别大的难度,主要是你要理解了,你觉得就觉得写起来并没有多多费劲啊,你要不理解,那就是一个字母,你可你可能都觉得写起来不太好写。好,这是这个。那有了这个下面一步是我可以去选择某一个一级分类项。那此时他是不是应该去尝试去加载它对应的二级分类列表?是吧?但一定有吗?不一定可能有,也可能什么没有啊。当选择某一个一级分类项时,一不获取对应的二级分类列表。那如果有的话,需要去生成对应的什么二级分类的options啊,最后边疆为什么呢,当前option的。
14:08
Children。哎,那我当前的open是谁呢?是不是就看你点的谁了,你点的谁,你单纯O就是谁呗,这能听懂不?嗯,好,这是这个。好在这里面还有一个就是表单数据的收集,以及表单的验证,就是我们这个地方,这里面所有的数据是不是都是靠form对象来帮我自动收集的吧?靠form对象来帮我自动收集,并且我的form对象是可以进行一定验证的,对不对,比如说我们现在是不是必须输入商品名称呢?啊,那就必须输入啊,就这么个意思。啊,其他的也是一样啊,我现在如果把这个删掉,那也是不行的,对吧,你必须选择一个。
15:01
嗯。啊,就是这个事情。好,下面一个事情就是我们的商品图片的一个。这样一个主页,我们是不是单独把它写成了一个单独的主页,对不对,因为这个有点复杂。所以给他。单独的提数据,好,那单独提出据以后呢,那我们这个时候就需要去写的是我们的这一个picture wall,而这个组件的编写,我们也是在。大家注意啊,我们也是在啊它的一个例子的基础上去写的,我们应该有一个组件叫什么。是的,上传是吧。哎,在这个上传组件里面,我们用的是这个例子是吧。这个例子好。那首先其实我们是把这个代码直接拷过去啊,去得到我们当前的这个pictures war这个组件,这名字都用他的这个名字,因为他的名字比较好。
16:09
当然最后我们的代码跟他历史上代码那就差别比较大了,加了不少的代码,他那做的是个简单的一个处理。首先我们要用到这几个组件来去做显示,是根据DEMO进行改造的,这个没意思了。好,这里面我们主要有两个功能,一个是上传图片,一个是什么。删除图片,那上传图片呢,我们需要做一些配置,这里面有几个重要的点,首先我得告诉upload它,我们后台上传图片那个什么。接口。能听到不接口是不是有个地址,你得告诉他,最后需要去告诉他这个地址。这里面要说一个啥,他发的也是二加请求,听懂了吧,所以也会被我们的那个,我们是不是配置代理啊。
17:05
我们有没有,我没有写前面的技术金嘛,如果我直接写5000,那他就跨域了,听到不。是不能的,需要我们代理来做。啊,这个是什么意思。是不是指定我只接受什么图片是吧,别的文件类型是不是不可见的,这避免用户犯错误,这个是什么东西,这个得说我们提交的文件,它的参数是不是有一个名字的呀,这个名字在文档里面肯定会说清楚的,到底是什么名字,一定是这个名字吗?不一。是我们刚好我们后台接口叫的这个名字是吧。啊,这个其实没什么,就是他自己指定的一个好的样式。这个是我们它需要显示的是什么?所有文件列表A文件是什么?一个feel代表一个什么?
18:01
代表一张图片对不对,它其实是代表的是图片相关的信息。图片相关的信息,这个相关信息有一些东西,比如说它有一个唯一标识叫UID,这个不用背啊。就是唯一标识嘛,是吧,还有什么呢?还有它的状态。我还记得他装了有几个值吗?我们常用的三个字啊,Uploading,以及什么removed。分别代表上传功已上传成功,嗯和什么删除已删除对吧?嗯还有什么呢?还有两个什么呢,一个是另。对应的是文件的什么名字,是不是还有一个是最关键的这个用于显示的什么ul。这个也不是我去指定的啊,你得根据他的格式去写。
19:00
好,这个呢是用来去啊做大图预览的,也就是说我们最终有这样一个效果,我点击这个眼睛,它会能展现这个原始的这个大图能看到吧。啊,是需要去按有一个轨道函数去处理啊。这个比较简单。重点是这个,其实男的是这个是吧。啊,下面这个比较简单,是用来去显示那个是判断是否显示那个上传的那个按钮,那也就是说现在我的按钮什么时候会消失啊。是不是大于大于三个就消失。应该说等于三个大于等于三个就消失。因为大于等于三吗?能看到吧,那如果我希望最多显示三个四张图片了,那我就把三改什么改成是这能听懂吗?有人听懂啊,当然有人说老师我这个没有限制。那你就把这个给他是吧,是不是删了呀。
20:03
这能听懂吧,啊大家需要能看懂代码。啊,这个其实也没什么,我们就不再说了,重点在于这里,这个是整个里面最关键的两个功能嘛,我们不有上传和删除吗。对吧,那上传的时候呢啊,他这是用来监视我的这个文件发生改变的一个阶听,那我能揭示什么呢?我能最终知道他这个说明他已经什么上传成功了吗。这一个说明他已经什么。删除了。好。那上传成功,它是不是产生了一个新的fairness?对不,那新的fair历史,它最终都要做一步,就要去更新这个fair的什么状态。但是有一点啊,有一点什么问题呢,就在于它默认的这个fair里面那个feel的名字。
21:05
很乱啊。名字不对,名字不正确,而ul呢,根本就没有。所以我们需要去往那个费里面去添加修正这个类,以及添加ul。那这两个数据从哪来呢?就正确的数据从哪来?那个文件图片文件名以及图片路径,我是从哪得到的?大家知道我们上传是不是发的是个假请求?我将请求服务器得返回我一些信息吗?是吧,那返回一些信息的话,那我是不是就可以能知道,嗯,返回信息里面是就包含了我的图片的名字以及什么ul,我只是说要怎么给它取出来的问题是不是。这能听到不,这里面我们通过打印输出就能看到这个费里面有一个什么。
22:00
这个不用背啊,我也没太去记住它,我就通过打印输出来去看它到底有什么属性。啊,哪个属性是我想要的。啊,从而去取数据去设置。当删除啊,删除的时候,我们这里做了一些事情,当我点删除的时候,它本身有真正去删除我后台的图片吗?没有,他只做了一个界面删除。但是我们是不是需要去做那个真正后台的图片删除,是不是,那这个时候我们得干嘛去发请求嘛。那最后我们就可以去啊,知道到底删除有没有成功之类的,这就没什么了。那也就是说我们这样就能去实现啊,图片上传以及删除的功能。我要问大家一个事情啊,我没写这个if,你说我的图片上传成功没有?
23:09
嗯。我不写这些衣服的代码,我的图片上传成功没有?也就是说我的图片上传什么,是靠我这个坚实的回调吗?不是啊,这个说这一个非点当是说明我的图片已经什么。上传成功了。也就是说我这个组件当他上传成功的时候,他是不是调用这个方法来通知我呀。我只是一个监视通知吧,对不对,听懂不啊,说白了,现在要实现图片上传非常简单,是不是指定正确的X指定正确内,他就会自动给我上传成功码。当然前提是你的接口要好的呀,对不对,你接口要好的。
24:00
这个也就是说这个我要去写相应的接口请求函数。你看我写了吗?没有吧,我没有写对应的接情况,你就说不是我亲自是请求的对不对,而是这个组件内部是不是在发请求啊。说白了是一个什么事情呢?我选中一张图片,我选中一张图片,那他就会再发请求。听懂不,他内部就在发行者。啊,我只要告诉他地址啊,告诉他携带那个文件的那个参数名叫什么就OK了。是不是?而我这里面是不是在做,当他已经上传成功之后,那我是不是要修正一些信息啊。因为这个信息我们后面就需要用,哎,有一个这样的一个方法,我们是不是要从这个fair list里面去获取对应的已上传图片文件名的一个数组。
25:00
叫I'm GS对不对。你要没有正确的信息,那我怎么能得到呢?啊,这是这个啊,需要去注意的。好。那最后呢,我们有一个啊,就是总结了一下父组件调用子组件对象的方法。啊,我们去需要去使用一个什么技术。If技术对吧,啊使用的是if。这个使用if的前提,大家需要去知道啊,组件标签对象啊,比如说我这里面呢,有一个有一个AAA的一个标签。这是个组件标签,我想得到主见对象,我怎么得了?其实,标签对象就是主见对象,这一句话先要知道。只下面变成你,变成我,怎么样得到主这个标签对象的问题是不是?我们是不是通过if技术来去实现找到这个标准对象吗?
26:03
那怎么找到它了?嗯,If的使用它分为三步,第一步先要去创建一个if的容器。这个容器一般都是在构造器里面去创建的。并且把创建的容器呢,给它存到this里面去。第二步将if容器交给谁呢?需要标识那个标签元素。比如说是picture对吧。用if等于它,那它内部会干嘛呢。你说它那个会自动将当前呃标签对象添加为。这个PW容器对象的。什么属性呢?他人的属性。
27:02
这个也不是我做的,我只要把容器交给它,它就会自动添加。而后面我们需要找到这个标签对象的时候,我们只需要通过this的PW,这个是不是得到容器对象。就是再点什么。Carrot。这就得到标题对象了吧?得到标签对象,那如果我这一个是个组件标签,那得到的就是组件对象。当然,我们所说的组建对象是组建的什么实例对象吧,比如我们在组建里面访问那个this。那有了组建对象以后,那我不为所欲为了吗?那我想怎么着都行啊。也就类似,能看的东西,我现在在外面是么都能看见了,甚至我告诉你,你甚至可以直接点点咔都可以。组件里面是不是有一个属性叫state?
28:01
有吧,有了state里面他所有的状态数据,我是不是都可以取。当然,尽量不要这么做。尽量不要这么做啊,即使你要去取,最好是去调用它的一个什么方法来去取它对应的数据,听懂我意思吧,啊,最好是通过方法的调用方式去取。他暴露给外面的数据啊。这是这个。那基本上呢,就是这样一些啊行。
我来说两句