00:00
哈喽,各位小伙伴们大家好,那接下来咱们呢,去完成type nv组件,就是三级联动展示数据的业务。那咱们呢,先看一下咱们目前的这个项目啊,那咱们这里呢,是三级联动这样的一个组建。但目前这里的数据啊,都是假的啊,写死的。那所以说啊,咱们呢,是需要向服务器发请求,获取到服务器真实的数据,进行替换,进行展示。对吧,那当然目前我们已经把准备工作已经做好了。比如说像as的二次封装以及VI仓库,这些前提的准备都已经准备好了。那接下来呢,咱们就看一下子该如何的去发请求,该如何的获取数据以及展示数据。那么首先说啊,第一件事儿。
01:00
那咱们呢,当年啊,是把三级联动的这个组件啊,全局组件type nv放到了咱们的pages下,这个home的理念。那这里呢,咱们呢,以后养成一个习惯,就是把整个项目当中,如果是全局组建的,都给它放到complement文件夹当中。那所以说啊,咱们呢,给他换了一个地儿。对吧,那当然你现在项目一运行应该是会有错误的,为什么呢?因为咱们当年注册全局组件的时候啊,是从呸这一次文学家拿的。那这回啊,他的路径啊,咱们呢,稍微改一下就是艾特杠谁呀。Comp文件夹下的这个type NAV。所以说咱们以后养成一个习惯,就是把咱们项目当中所有的全局组件都给它放到compment文件夹当中。
02:01
对吧,哎,这是他那一家入口文件,咱当年呢,还写了一个测试的这样一个代码,就是发请求,那当然这里面呢,测试代码咱给他删掉。对吧。那接下来呢,咱们要做的一件事是什么呢?你看啊。就是当type nv组件它已挂载完毕,就是一执行。那你就得发请求了,获取数据以及展示数据。那咱们呢,去找到咱们三级联动的这个组件啊,那咱们在这里呢,老师呢,先把结构给它先合上。那也就是说啊,当组件写下,就是组件挂载完毕。那么咱们呢,就可以怎么的,哎,可以向服务器发请求。获取服务器的数据,展示数据对吧,那也是哪啊蒙。当组件已挂载完毕,咱们可以怎么做呢?可以这么做,就是通知。
03:05
唯有一叉干啥呀,你发请求。获取数据存储于哪儿呢?存储于咱们的仓库当中。那当然啊,将来仓库如果有数据了,咱们的组件呢,是可以获取到的,那当然也可以展示。那所以说啊,咱们呢,就派发一个action,就是z.Dollar star,第2DISPACH对吧,Disch派发一个X。比如说咱们给它起个名字吧,叫做什么呢?叫做开。葛瑞啊,商品列表。那当然,你现在这么一运行,那控制台的应该是会有警告的,说,哎,我不认识这个action叫做category list。那所以说啊,咱们得找到相应的仓库去书写相应的action。
04:02
当然咱们目前开发的是home模块,那咱们呢,找到咱们的仓库,找到咱们的home小仓库。对吧,那这里老师给他折上。那也就是说这里面呢,你需要去书写咱们的action。那这个action当它执行的时候,你要干什么呢?哎,就是通过。通过啊API。里面的啊,接口函数咋的调用。也就是向服务器发请求,获取服务器的数据。那所以说啊,咱们呢,要发请求,那你得把咱们当年封装的那个API是不是要引入进来。那咱们引一下in part。那应该叫做什么呢?应该叫做re EQ。对吧,叫做,呃,看一下子吧,咱也忘了叫什么了,叫做re EQ category list这个函数,那这不就发请求吗?
05:02
对吧,那咱们呢,给它拿过来叫做r EQ category list,那从哪引呢?是不是for从咱们的这个API引入。那当然你这里就要发请求了,那你就需要调用这个函数。那咱们呢,可以尝试一下子,你看他返回的这个结果是什么。对吧,那咱们呢,可以打印一下,当然这块A等于一,那咱就给它去掉了,咱当年这应该还写了个B等于二,那这些咱们都不要了。对吧,这是当年测试的一些代码。那所以说啊,咱们呢,可以打印一下,你看啊,它向服务器发请求了,而且返回的是什么呢?返回的是A设执行之后返回的结果应该是一个promise。所以说咱们呢,需要拿到promise的成功的结果,所以说咱们这里呢,需要给他写一个wait,当然a wait与a think是CP,它两者必须同时存在。
06:05
那所以说这回呢,咱们呢,再看一下呢,咱们服务器返回的结果,那是不是就拿到了。那这个呢,就是咱们三级联动的这个数据了。对吧,那当然,如果扣的是200代表成功,那如果成功了,要注意你要修改仓库里面的这个数据啊。对吧,那所以说咱们要解构出咱们的commit,提交mutation。对吧,那咱们判断一下,就说如果你的点扣的等等于200,那么我就要干什么呢?我就要提交扭提审。那咱起个名叫什么?叫做凯特?啊,Cat list。那你提交的数据是什么呢?就是点data。而且呢,咱们刚刚也看见了,它返回的数据是一个什么呢?是一个数组,你看咱可以看一下是一个数组。对吧,那所以说咱们现在是没有这个mutation的,那咱们在顶上需要写咱们的mutation。
07:07
对吧,那当然mutation当中啊,这里呢,是有相应的state,以及咱们也传参了,那这个咱们就叫做cat a GR cat list。对吧?那也就是说你要修改仓库当中的数据state.category list等于服务器返回的这个数据category list。那当然,起始的状态下,你的仓库当中应该有一个起始值,就是你应该有一个起始值。对吧,那叫做categ GR list,那它的其实是什么呢?应该是一个空数组,为什么呢?因为咱们刚刚也看见了服务器返回的数据啊,是一个数组,那所以说咱们的让它的起始值呢,就是为一个数组,将来服务器的数据回来之后给它进行替换。那这里呢,要注意一件事,就是中的数据啊,它的默认初始值啊,你别瞎写。
08:04
对吧。因为仓库当中的数据啊,你组件在用,那有的时候服务器反问的数据如果是数组,那你想想你的组件那边是不是可能被刚放。对吧,所以说你千万别瞎写对吧,也就是说服务器啊,服务器返回的是对象,那你起始值就是一个对象,服务器返回的是数组,那么你起始值就是一个数组。对吧,所以说这个初始值呢,是根据什么呢?根据接口的返回值去初始化,哎初始化,所以这块要注意。那所以说咱们呢,可以看一下刷新,看一下咱们开发者工具。看一下VV叉,那咱们看一下咱们仓库当中home下有没有相应的数据,这不已经有了吗。对吧,那当然home组件当中已经有了相应的数据。那咱们呢,需要在咱们的组件当中拿到仓库的数据进行展示。
09:02
那找到咱们的type nv。对吧,那你得捞到这个仓库当中的数据啊,那所以说咱们import。用咱们的辅助函数map state去获取谁呀?咱们的will?那咱们呢,把它的映射为组件的啥实力身上的一个属性叫做口。P的对吧,当然点点点map state,那这里呢,咱们使用一下的对象形式,因为咱们经常写数组,那这里呢,咱们写一下对象形式。那首先说啊,那咱们的这个属性叫什么呢?比如说就叫做cat啊green list,那值为什么呢?这里要注意,其实啊,它默认的V叉给咱提供了一个函数。这个函数呢,你可以看一下子,老师呢,给你打印一下子,你看啊conso.lo打印下。也就是说当你在组件当中啊,使用这个属性的时候,咱们可以看一下。
10:04
老师呢,随便找一个地儿就在这儿吧,给他来一个he,咱们用一下,用一下这个属性。你看,当你用这个属性的时候,你会发现在组件当中右侧那个函数它会执行。而这个stay是什么呢?就是大仓库当中那个状态,你看它包含home和色纸,而home下的数据呢,是可以拿到的。对吧,所以这块呢,老师呢,也给你做一下笔记啊,这块呢,咱们也做一下笔记,这块老师先给他折上。对吧,那这块呢,老师也做一下笔记,比如说对象的写法呀,右侧需要的是一个函数。这个函数什么时候会执行呢?就是当使用哎这个计算属性的时候,那么右侧的函数啊,会立即执行一次。而且呢,调用也不是咱手动调用的,你会发现它咋的呢?会注入哎注入一个参数state,那这个state是谁呢?其实哎即为写下其实啊哎即为咱们的大仓库啊中的数据。
11:15
大仓库是一个对象,它包含后和谁呀,和色值对吧?那所以说这个函数的返回的结果即为这个计算属性的属性值,那应该是谁是state,应该是home下的这个叫做category list作为这个新的计算出来这个属性的属性值。当然啊,这里啊,咱们可以简化写一下函数体,去掉去掉,而且箭头函数如果说只有一个形态,OK,你这个小括号它也可以去掉。对吧,那所以说咱们的组件呢,就可以拿到数据了,咱们可以刷新看一下咱们相应的组件,找一下咱们的这个type NAV。对吧,哎,找一下他,你看能拿到是可以。
12:01
那接下来剩下的活儿啊,你无非就是把这些数据给他咋的展示出来。对不,那咱们的给这打开,那咱们得找找。那首先说啊,咱们先看一下它这个数据的这样的一个结构啊,咱们先看它的一个结构。虽然说咱们目前呢,是一个三级联动,你看啊,它是一个数组,数组里面呢有16个元素,那么每一个元素啊,是一个一级菜单。你看嘛,每一个元素是一个一级菜单。比如说一级菜单叫做图书电子书刊,而这个一级菜单当中呢,又有相应的二级菜单,二级菜单呢,里面放的是category child是它的一个属性,只是一个数组,数组里面放的是二级菜单。对吧,那么二级菜单当中呢,又放了一个category,放的是三级菜单。对吧,所以说是一层套一层的,那所以说咱们得一个一个来你看啊,老师把这块结构先给你合上你看啊。
13:02
像什么电脑办公,你看一下子嘛,这不就是咱们的一级分类嘛,这个老师给你拿过来什么电脑办公你看嘛,这不这的吗?对吧,所以说老师现在折起来的这一部分啊,它呢是一个一级分类。这个老师都给他折上。对吧,哎,这块咱也给它折上,折上啊折上,那这咱也给它折上,对吧,这个还有很多。对吧,这还是挺多的,当然咱们先全都给他折上,你看啊,老师搁这也给他折上,你看啊,这些呢是它的一级分类,当然这个类名可以给他干掉,那所以说一级分类啊,咱们不需要这么多了。咱们数据已经有了,当然你V-for就可以了,那所以说啊,剩下的其余这些咱都不要只留几个呢,只留一个。对不,那这块老师呢,就给他干掉了,也就是说只留一个,你看这里就可以怎么做,We got for。那这块呢,咱们要便利的是一级菜单,咱叫CE,以及所叫index,你便利的是谁呢?是你计算出来那个属性叫做cat green list。
14:08
对不,那咱给他拿过来,这不就是他吗?这个玩意儿不就是一级分类的这个对象,那当然咱们是需要K的。那K咱们看它有没有ID啊,当然咱们先给它删掉,看一下一级分类有没有相应的ID。对不,咱们瞄眼,那这些都是一级分类,随便找一个看看有没有ID,有叫做category ID。那所以说咱们这块的K啊,你就用他的ID就完事了,那这个呢,就是一级分类的category ID。那所以说啊,咱们一级分类呢,应该有很多了,但是它的文本内容咱们应该没有换。对不,那所以说呢,咱们换一下它的这个文本内容就是这嘛,一级分类嘛,你说这里你不能写死了。你得变成什么呢?一级分类的这个名字,那咱们看看它应该叫啥,叫category name,好像是我刚刚瞄了一眼。
15:02
咱们可以看一下,这不就这吗,Cat great name。那咱们呢,给他拿过来给他。那一级啊,还有相应的二级分类。你看嘛,还有相应的二级分类,二级分类是哪呢?咱们可以看一下,其实就是这块。对吧,就是这。对,不叫sub什么什么。对吧,那不就是这里吗?对吧,这不就二级分类,那你要注意二级分类是什么?是一级分类当中的这个字段,叫做category child,又是一个数字。那咱们先尝试一下,你看这是二级分类,V-for。它便利的应该是谁呢?这个咱们叫C2,二级分类以及已有索引值便利的是谁?应该是一级分类当中的这个category。那咱们先看一下对不对,对吧,老师给你刷新,咱们先看有没有出来。对吧,这是没问题的,但是数据咱们没有替换,那以及咱们看他有没有K。
16:01
那K应该是什么呢?应该是C22级菜单当中的,咱们看看它叫啥。这还真得瞄一眼,你这玩意不能瞎去。对不应该叫做C2的,找一下这是C1C2的category ID,也叫category ID对不?那所以说咱们就直接给他拿过来了。对不啊,这个是点它哎点它哎点它。对不,那当然你二级分类的名字也得替换,这不这电子书嘛,咱给它替换一下,应该换成啥,换成这个C2的应该叫做category name。开头。Great name。那咱们的回首测试一下子,你看一下的二级分类的数据是不是也有了。对不就是哪就这对吧,电子书刊音像对吧,文艺少儿。对吧,那以及也是一样的,那三级分类在这的用em去做对吧,那当然你不需要这么多,你只留一个就行了,也得V刚放。
17:05
那虽然咱们这儿呢,也来一个V-for,那它是C级的是C3,是三级分类C3。那一级啊,也有相应的索引值,但你这回要注意它便利的是谁?便利的应该是C22级分类的,这个叫做呃,Categ child。对不,那以及三级分类呢,它这块呢,也需要写上它的K,那K为什么呢,为C3的应该也叫什么呢,叫做category ID。对吧,那当然咱就直接给他拿过来了。那以及三级分类的名字啊,它不可能都是叫做婚恋两性对吧,你要这么整他全写死了,咱们也得替换成,呃,三级分类的名字,所以应该是谁呢?是C3的cat啊,Great name,那这样咱们的三级联动的数据展示,那不就完事了。
18:00
对吧,其实这块呢,老师呢,得说一下子。就是对于前端程序员一定要养成一个本事,什么本事呢?看见它的这个外观,你就应该猜到它的数据结构。你看它的数据设计是怎么设计的,你自己看,你看它是一个数组。数组里面每一个对象是一个什么呢?是一个一级分类。对不对。对吧,比如说你给咱来个这叫C1的ID,比如ID等于一以及name,比如说叫什么叫电子书。对不?你想一级分类下,又相应的二级分类,你看比如说咱叫child,它是不是又放了一个数组。那数组里面,比如说咱又来了个对象对吧,比如这个ID为几呢?比如ID为二,这玩意叫啥呢?比如说这个叫叫叫叫叫电子书,比如说咱们给他来个内幕吧。叫啥呢?叫做呃,叫做喜羊羊。对不,那这是属于啊,属于二级分类,假如说二级分类有很多,OK,你也来。
19:01
所以对于它这个数据结构啊,一定要养成个本事,看见结构你就要猜到数据,就是看见了它的外观,你就得知道大概数据结构是什么样子。对不,那比如这是二级分类,那二级分类下又有相应的几级分类,三级分类,那你是不是又又接着来来啥,是不是来child接着放。对吧,就是它的数据结构是这样的,一个形式的外层与数组,里面的每一个元素是一个一级分类,一级分类当中呢,又有相应的二级分类,那么二级分类当中呢,又有相应的三级分类,所以这个数据格式一定要给它整通。对吧,虽然你看嘛,你看它的数据格式嘛。所以说老师啊,希望你们以后养成一个本事,什么本事呢?看见你这个项目的外观,你就应该大概猜到它的一个数据格式,那么数组当中每一个元素是一个一级分类,那一级分类当中是不是有相应的二级分类,那二级分类当中是不是再有相应的三级分类啊?
20:00
对吧,所以说这件事儿需要注意一下内容,到此咱们也完成了三级分类数据的展示的。
我来说两句