00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成获取数据,动态的去展示三级联动。那咱们呢,去看一下呢,已经完成的这个项目。那么对于平台属性这个模块当中啊,在它的顶部啊,是有一个三级联动的这样的一个效果。那首先说啊,它分为一级分类,二级分类和三级分类。那首先说默认的,你是可以选择一级分类的数据的。但是如果一级分类的数据你没有选择,那是没有相应的二级分类和三级分类的。那如果你一级分类的数据确定了,那当然就有相应的二级分类的数据了。比如说一级分类下的手机,它的二级分类有什呢?是不是有手机通讯运营商,手机配件,那如果一级分类变成图书,那是不是也有相应的二级分类的数据,比如说电子书刊影响。
01:05
那当然也是同样的道理,那如果二级分类的数据你没有选择,那三级分类也是没有数据的。那么如果二级分类的数据你选中了,那是不是有相应的三级分类的数据?比如说电子书刊是属于二级分类,那他下来是不是有相应的电子书和网络原创,那如果你选择的是文艺,是不是有相应三级分类的数据,比如说小说和文学。对吧,那所以说这是人家已经写好的项,实现了所谓的三级联动。那回到咱们的项目当中啊,那咱们呢,目前而言只是完成了静态的组件部分。那么如果想实现这一部分功能,那你想想你要做哪些事儿?那首先说第一件事儿,你是不是要完成相应的静态组件?
02:00
那么静态组件部分呢?咱们已经完成了,那么之后你要做什么?那你是不是要书写相关的API接口了?那所以说回到咱们的API文件夹下,回到咱们的product下的a tr这里,那咱们呢,要书写相应的接口啊。那这里面呢,咱们做一下笔笔记,这是平台属性。平台属性管理,哎,模块的请求文件。那当然啊,你要发请求,你需要使用到二次封装那个as。那所以说啊,咱们需要引进来。In port request from,它呢是放在了I杠啊下的request.j。那当然点GS尾缀是可以省略的。那咱们呢,需要写相应的接口,那首先说一级分类,二级分类,三级分类都有相应自己的接口地址。
03:05
那咱们先梳起第一个,比如说这个呢,是获取一级分类啊数据的接口。那当然啊,咱们得看一下SW,看一下在线的文档。那首先说啊,他们应该是在商品分类当中。那这个接口呢,是可以获取到一级分类的数据。以及可以通过一级分类的ID获取相应的二级分类的数据。以及可以通过二级分类的ID获取三级分类的数据。那所以说啊,咱们的一个一个的去给他完成,那首先说先看第一个。那这个是干什么,这个呢是获取一级分类的数据的。那所以说啊,咱们呢,选中一下,复制一下,回到咱们的这里,那咱们写一下,那这是它的请求的地址,以及呢,是盖的请求。那咱们写一下export对外暴露。
04:04
比如说咱们就叫做req。呃,Get,或者叫re q cat category商品分类的意思一的list。那当然这个接口呢,不需要咱们携带任何的参数。Request,那咱们的地址啊,刚刚咱们也已经拿过来,那就是它。那以及什么请求啊,那咱们写成为盖请求。那所以说这个呢,是可以获取到一级分类的接口。那咱们再看一下获取哎,二级分类数据的接口。那咱们呢,去找一下相应的接口在这儿,那么可以通过一级分类的ID,因为你选中了一级分类是有相应的ID的。对吧,那你就可以获取到二级分类的数据。那当然啊,他们也是一个钙的请求。
05:02
Get请求。那这块呢,咱们写一下子X power cost,那咱们叫做re EQ叫catry category g list咱们就叫2LIST。那当然啊,你这个接口呢,是需要携带参数的,带的是一级分类的ID,可以获取到相应的二级分类的数据。那咱们呢,也要书写一下子request,那以及咱们的URL。URL呢,当然就是它了,谁呀,是不是咱们的刚刚拷贝过来的这个地址。那以及啊,也别忘记了,他要带餐带这个E,那所以说啊,别忘记加一个Dollar以及什么请求啊,那咱们的是不是应该也是get请求。对吧,那当然还有一个是三级分类的这个数据,获取数据的接口,那咱们也写一下,就是获取三级分类数据的接口。
06:00
那咱们呢,也去看一下子他的一个地址啊,这是它的一个地址,可以通过二级分类的ID获取相应的三级分类的数据。那这是它的地址,以及也是一个钙的请求。那咱们呢,也需要对外暴露export cost,咱们叫做re q catry category GI g list3list。那当然啊,你是需要通过二级分类的ID category2id获取相应三级分类的数据。那咱们呢,也是一样,Request。那地址啊,咱写一下子URL是不是就就是咱刚刚拷贝过来的这个地址。对吧,那当然这块呢,模板字符串当中需要加一个Dollar进行拼接。那以及啊,还有咱们的什么呀,是不是咱们的method,为什么请求为get请求。好了,那咱们的接口已经写好了,那咱们得开始琢磨了。
07:01
那首先说啊,当你一选择平台属性管理的时候,默认一级分类是不是有相应的数据。那所以说当这个组件一挂载完成的时候,你就应该获取到一级分类的数据以及展示出来。那所以说回到咱们的这个全局组件分类这个组件这啊找到这儿。咱们呢,得琢磨琢磨了。那首先说当你这个组件一加载完毕的时候,你就应该获取啥,获取一级分类的数据,要进行展示。对不?当你选中了一级分类的某一个产品的时候,才会获取二级分类的数据。当你二级分类的数据选中以后,才会获取三级分类的产品。而且别忘记有一些接口是需要带什么,带相应的ID的。对吧,那所以说咱们呢,先把一级分类的这块的展示呢,先给他完成。
08:00
那也就是说当组件斜向组件挂载完毕,那你需要向。服务器发请求获取什么呀?是不是获取相应的相应的什么,是不是相应一级分类的数据。咱们写一下monkey。Mon monkey。那么当你组建一挂载完毕,那咱们呢,可以调用函数,比如说啊,获取一级分类的数据的方法。那咱们呢,可以调用一个方法,比如说叫做face.get cat category list。对吧,那当然咱们目前而言啊,是没有这个方法的,那所以说咱们呢,可以回到method当中meth啊ods回到method当中去书写相应的方法。那咱们呢,可以把这个函数名啊,你给它拷贝一份对吧,那在这咱搞一下子。
09:04
那这个是什么呀?是不是获取一级分类的方法,哎,获取一级分类数据的方法。那咱们呢,就需要使用到组件身上的Dollar API的这个属性了,谁呀?A tr点咱们应该叫做啥来着,看一下叫做re EQ category1list。那当然,你是需要发请求的。对吧,那当然它这个参数,这这这个接口啊,是不需要带参数的。那这里写一下,这是获取一级分类的请求,要注意不需要携带上携带参数。那当然,我们需要获取到它成功的结果,那你需要写think away。那咱们呢,可以看一下子能不能获取到相应的数据。对吧,那咱们呢,格式化一下,让它稍微好看一下啊,那咱们呢,去打印一下咱们返回过来的result。
10:03
那咱们看一下子能不能获取到相应的数据。是不是完全可以,因为你明显看到了扣的是200,以及message是成功返回的数据是一个数组,数组里边有16个元素。对吧,那你拿到服务器的数据之后,你要干什么,你是不是要存储,把服务器返回的数据,是不是存储于当前组件实例身上,是不是进行展示。那所以说啊,咱们在这儿呢,要准备一些详实数据,去存储服务器返回的数据进行展示。对吧,那咱们呢,就来一个return一个对象。那这个呢,咱们就叫例子的一是一个数组,这是什么?这是一哎分类的数据。那所以说咱们在这呢,你就可以怎么了,是不是就可以判断了,比如说当然你写出来catch也可以,如果你的result点扣的等等于多少200,那你是不是就可以把服务器的数据复制给list一进展示。
11:03
那也就是说this.list1,哎,LIST1等于什么?是不是等于咱们的result.date。对吧,那咱们呢,可以刷新看一下咱们的开发者工具,这块呢,一定要注意在写代码的时候啊,时不时的去看一下开发者工具,看一下控制台。对吧,那咱们呢,可以去看一下。在咱们的这个三级联动这个。组件当中是有相应的数据的,数据啊是16个,那每一个数据都有相应的ID和name。对吧?ID是什么?说白了就是一级分类,你选中那个产品的ID以及他的名字。那当然数据有了,我们就可以进行展示。那所以说啊,回到顶上这里找到咱们的一级分类。那当然啊,咱们展示一级分类的这么多数据啊,都是谁呀?是不是都是option?那所以说咱们得怎么办了,是不是得be for?
12:01
那所以说这块的option你就不用留两个,留一个就行了。那咱们这里面你就可以怎么办,是不是就可以we go for。便利。比如说咱们起个名叫C1,那这个呢,叫做categ green EA啊categ green1对吧,就是一级分类,那以及啊,它也有相应的索引值,那你便利的是谁?便利的是不是LIST1,那当然你需要写KK为什么是为C1的ad。那咱们的保存一下,刷新看一下有没有相应的数据,是不是有16。对吧,那当然啊,这个option的内容咱们没有进行替换,当然现在它显示的都是区域一,那这里要注意,你option显示的label不应该是取一了,你应该写动态的谁是不是应该写C1 C1是每一个一级分类当中那个对象,它的什是不是name。对不,那咱们看一下子那一级分类动态展示是不是就OK了。
13:01
对吧,那这块呢,你要琢磨一件事什么事,比如说用户选择的是手机,那你这块是不是得展示手机,那以及假如说你选择的是电脑办公,那你这是不是展示的电脑办公。而且还别忘记了。当你在选择一级分类的时候,你也要收集数据,收集什么?是不是要收集相应一级分类的ID?因为二级分类的数据是需要通过一级分类的ID去发请求获取才能获取到。对吧,所以这块别忘记了,而且呢,还要注意注意什么,咱们的select可以进行数据的收集,就是通过VGA model,但是你要注意一件事,什么事,VGA model收集到的是什么?收集到的是它的歪力。那咱们的Y轴收集什么?当然那就是收集相应的ID。因为将来一级分类的ID是用于二级分类获取数据用的。那所以说这里面咱们可以怎么办,可以这么办,那写冒号,那这块写什么,是不是写咱们的C一等上ad。
14:07
因为咱们得知道一件事啊,什么事?Select的数据双向绑定VGA model收集到的是什么?收集到的可不是label,而是value。那么Y6咱们为什么要写ID,因为二级分类获取二级分类的数据,你是需要通过一级分类数据的ID获取到的,所以说咱们是需要收集。那接下来那咱们就要通过VGA model收集数据,那你收集到哪。对吧,那同样的套路。在这,那咱们来写一下子,那这块是干什么,是不是收集啊收集。哎,相应的一级。二级三级分类的ID。那咱们可以起个名字,比如像categre for。对吧,叫c four,它这里面的默认的可以给他来一个,比如说叫cat啊jary categoryid。
15:05
对不,那除此之外还有什么2ID和3ID,你也要收集。那所以说啊,咱们就直接复制粘贴一下好吧。哎,那这块呢,咱们呢得改一下子,那这是1ID,那这是2ID。对不,那这是几A,这是3A。对不,那也就是说你这块呢,要进行数据的双向绑定,微岗model绑定的谁绑定的应该是CM啊C放点开个E。对吧,那也别忘记,咱们当年也有个套路,什么套路,在表单收集数据的时候,是不是在form这写个model收集到哪,是不是收集到c form这个对象身上。对不对,咱当年的form都是这么搞的嘛,特别是表单验证呢,对吧,比如说你这个model代表啥,代表的是你表单的数据收集到哪去了,是不是收集到c form这。那咱们的一级分类的it是不是收集到了cm Mo c form的category?
16:04
对吧,那所以说这回呢,咱们呢,可以看一下看这。先看这来。登录一下,那咱们呢看一下吧,这块呢,一定要记住,时不时的去看一下咱们的这个开发者工具啊,这块一定要注意啊,咱们看一下有没有收集到。那首先说一级分类的数据咱们已经获取到了,因为当这个组件一挂载完毕就能拿到,那当你选择比如说手机,你看能不能收集到一级分类的ID是可以。对吧,那比如说家居家装的箱子是不是五对吧,这完全是可以收集到,这是没问题的。好吧,那这个呢是很简单,那接下来的问题是你要注意什么时候去获取到二级分离的数据。啊,当然咱们现在二级分类的数据都是假的。你这块你真得认真的去想想,是不是当你一级分类的这个option的内容发生变化的时候。
17:00
对不对,就是当你一级分类的这个option选中的这个内容发生变化的时候,是不是获取相应的二级分类的数据。对不对。这块真要琢磨琢磨对不对?是不是当一级分类的option的数据发生变化的时候,是不是再去获取二级分类的数据,而且还要携带一级分类的ID去捞二级分类的数据?那所以说这块可以怎么办呢?可以这么办。找到咱们的select,那你可以给他绑定一个事件,叫做爱的change。当然啊,这里面呢,要注意一件事,什么事,这个change是系统原生的盗事件啊,这可不是,这是一个组件呢,DL-select,所以说这是啥,这是一个自定义事件。对吧,Change,比如咱们起个名字,那这个咱起个什么名字呢?那咱们就要什么叫handle。对不对,这是属于啊一级分类select的和事件的回调对吧,当然咱们没有这个方法,那没有这个方法你可以怎么是不是写一下。
18:03
对不,那咱们呢,在这儿呢,老师呢,给他搞一下子HANDLE1,那咱们在这呢,也写一下子则HANDLE1。是不是咱们写,那这个是什么,是一级分类。到like,到事件的回调。那在这里要干什么?是不是当一级分类的?呃,内容或者叫option。哎,发生。变化的时候,那获取。获取相应二级分类的数据。对吧,好,那咱们呢,写一下相应的这个回调,那咱们呢,可以打印一下子,比如说打印个一一对不,你看他什么时候出发。是不是当一级分类的option发生变化的时候是不会处罚?对不?对吧,哎,而且还要注意。当一级分类的option发生变化的时候,其实咱们已经能拿到什么了,是不是能拿到相应的一级分类的ID,那你是不是就可以通过一级分类的ID拿到二级分类的数据,是不是进行展示?
19:13
你想想是不是这个道理?对吧,那所以说看这。那咱们需要解构出,哎,解构出啊,解构出什么,是不是一级分类的ID,因为你要获取二级分类的数据。它算出同样的套路,这点到API点啊大小写要注意点AT r.r e q cat几点2LIST。对不,那当然啊。当然你需要解构出数据cost,他们应该是category e I,从谁那解构,是不是从组件的这个C放比身上是不是解构出来。对吧,那你就拿到谁category e ID是不是获取二级分类的数据,对吧,所以说写一下通过一级分类的ID,那么获取二级分类的数据。
20:07
那当然咱们呢,也是需要等待他成功的结果,Away,那这里你就得写上是不是写think?对不?那咱们看一下子能不能获取到相应的结果,来一个result。那咱们呢,也去打印一下子,看一下子能不能获取相应的二级分类的数据造,那如果能获取到,那展示就so easy。对吧,那咱们呢,看一下走,这是一级分类,那看一下子能不能拿到二级,二级分类的数据是不是完全可以。对不,就是当你一级分类的option发生变化的时候,是不是可以拿到相应的二级分类的数据。那也是数组,那也是一样,那你是不是在组件实例身上也得来一个叫list list2,那咱们的LIST2也来一个负数组。那这个将来接收的是什么?接收的是不是二级分类的数据?
21:01
对不,那当然你这块呢,也得经存储,也就是说如果如果咱们的蕊造的点扣的等等于200。那你就可以怎么办?你是不是就可以this.list2等于result.date。那也是同样的道理,那你也需要展示二级分类的数据。那所以说回到这,这不二级分类吗?那这里的option咱们也可以给它进行替换,换成谁,是不是换成咱们的V-for。那最后应该是C22级分类嘛,对吧,哎,以及咱们的什么是不是index。写一下C2以及音。In,便利,便利的是不是list are?对吧,那当然也得有K。K,为什么?是不是为C2的ID?那也是一样,你label应该展示的是什么?展示的是不是应该是C2的?哎,C2的内。那当然你也需要收集二级分离的ID,那这块呢,咱也来一个,那就是谁C2的ID,那收集到哪,是不是收集到CM,就是c form选项是不是收集到we model,收集到c form的cat GR啊J是不是二对。
22:19
对不?那咱们的回首呢,看一下有没有完成,就是当你一级分类选中的时候,二级分类是有数据的,而且二级分类的ID也可以收集到。对吧,那其实如果二级分类搞定了,那相应的三级分类是不是也搞定。对吧,那所以说来,那什么时候获取到三级分类的数据,那也是同样道理,到二级分类的option发生变化的时候,也是change的时候。是不是获取三级分类的数据,那咱们写一下将at,那当然是写在select这里啊,别瞎写。在这爱的change,那这个呢,咱们叫做handle多了几啊,Handle多二。对不,那当然咱们没有这个事件,那你也需要的,是不是写一下。
23:04
对吧,那所以说咱们在这儿也写一下子。那这块的注释呢,咱们呢,也搞一下子吧,那这块的注释其实咱们改吧改就行了。对吧,那这个是几级分类,是不是二级分类。二级分类的select事件。回校当二级分类。的option发生变化的时候,数获取项三级分类数据。对吧,那也是同样的道理,那你需要拿着2ID是获取三级分类的数据,那也是一样。哎,解构出数据。Cost,那这结构谁是不是开的为二?对,不等于什么?是不是等于z.c four,那也要发请求,那就是Z点到了api.at r.r EQ category3list。3LIST,那当然你需要携带的CATEGORY2。对不,你跟顶上其实就是一模一样的,你需要带着2AD是不是log,三级联动的数据,三级分类的数据,那当然咱们也需要写wait和谁啊和a think。
24:09
对吧,其实啊,它返回的三级分裂,它也是啥,也是数组。对吧,哎,这个结果咱们甚至都可以不用看了,因为他也是个数据,所以这块咱们也写啊,至少获取啊三级分类的数据。啊,或者叫三级分类的数据。那这块呢,咱们也来一个叫list几,LIST3为啥为数组?那当然你这里面你也得写上了,对不,就是如果你的蕊造的点扣等等于200。那咱们的这点LIST3就等于谁result点对,那当然呢,咱们先别着急,咱们先运行一下,先看一下能不能获取到相应的数据,如果没获取到,那是不是就拜拜了。对不?哎,看一下能不能获取到三级分类的数据。
25:02
看一下。则运营商。对吧,是不是可以获取的,那咱们呢,就可以展示。对吧,那所以说回到这里也是同样的套路,那这块的option去掉。那也是一样,微高放。对吧,V-for那这块是什么?是不是C3啊C3以及in代便里的是便里的是不是应该是例子的几例子的三,那以及当然也需要写KK为什么是为C3的ID。那也是一样,Label呢,应该显示的是C。对不,SC3的name,那以及这块没有,呃,将来数据双元榜能获取到的数据绑定的谁,是不是应该是C3的。对吧,C3的ID,那么这个Y6的值收集到了,是不是收集到咱们的C啊,V-model v-model收集到C。Form的叫category side cat,呃,是不是三?
26:07
对吧,那咱们呢,看一下子啊看一下。则一级分类。二级分类以及三级分类没问题。但是你要注意啊,三级分类的这个change事件需不需要写的,其实是需要写的,你看啊,为啥你看啊,现在老师一级分类的change事件出发,OK,是不是可以获取到二级分类的数据也没问题,那么三级分类的数据你看当它option发生变化的时候,你会发现底下是不是在发请求。对不对。对吧,所以说其实三级分类的这个change事件,咱们也给他写上,将来万一要用对吧,所以这块咱写艾特谁change。那这块等于谁呢?等于海三。啊,Handle了三,那咱们呢,也稍微写一下这个是谁,这个是三级分类的事件的回调,当然咱们现在目前呢,什么都先不给他写。
27:01
对吧,这是三级啊分类的事件的回调。对吧,那咱先给它放在这儿,因为咱们现在目前也不知道要写哪些业务逻辑。对吧,那你就先给它放在这,那咱们至少现在对于咱们而言,三级联动的这个动态展示数据,是不是就给它完成了。对吧,那当然还有一些细活,咱们一会儿回手要琢磨的。对不?哎,你看就举个例子,比如说数码,数码下哪还有手机通信。对不对,对吧,你看比如说厨具,厨具下哪还有手机通讯。是不是还有一些细活,咱们一会儿回手再去研究。
我来说两句