00:01
好嘞,各位同学。那么咱们呢,刚刚讲了一下子Mo GS的一个使用,它的使用呢,相对比而言呢,还是比较简单的,但是呢,它里面呢,有一些语法规则,晚上的时候自己一定要强行的去看一下它的文档。好吧,所以说以后项目当中在出现了mark文件夹,你得知道,诶,人家这里要模拟一些假的数据,那当然你得准备数据,以及通过mark JS去模拟出这些接口。OK吧,好嘞,那这两条数据都分别为谁而准备了?Banner是为了谁?是为了这个轮播图?OK,不,而这个flower这个数据是为了谁,是为了底部的这个家用电器,这里就是这个flower组件。那咱们正常说数据已经准备好了,对不?你就像静态组件已经有了,数据也准备好了,那老师问你,你说接下来干什么。
01:09
那你是不是得向服务器发请求啊?对不对,获取到服务器当中的数据。存储在咱们的VR的仓库当中。对不对,那剩下的有了数据,是不是展示数据即可呀。对不但是这里边老师说一下子。Work GS发的请求不会像咱们的后台服务器发的。它会被咱们的浏览器拦截的,但是你在用的时候,你就把咱们默的数据当做真实的数据用即可。好吧,那所以说啊,咱们呢,先去搞咱们home首页当中的哪个组件呢?就是这个list container就是这个组件。对不?那咱们去找一下咱们的例子的container,因为咱们先得把咱们的数据是不是得捞到,放到咱们仓库当中,到时候要用。
02:04
那所以说咱们看咱们找一下这个组件。应该是views文件夹下的home加这个list container不就这吗?对不,那咱们看一下它的结构,你看这儿吗。这是不是有一个轮播图。老师,不知道你们看到这个结构的时候有没有点印象?老师问一下,看到这个结构的时候有没有点印象?就是咱当年是不是学过一个叫做swaper,是不是搞轮播图的,而且swap不管是在PC端还是移动端都是可以用的。所以说咱们这个前台项目当中会用到swap。有对于swaper有没有点印象,有印象的给老师扣一个六。应该是有点印象对不?那以及你看这不就是咱们那个历史口袋当中,右侧右侧这你看商品会快报什么备战开学季全民半价。购买什么数码,你看这不就这吗?
03:02
对不,这不就是这儿吗。对吧,那你想想啊。咱们的数据准备好了。静态组件也有了,对吧,静态有你要干啥,你是不是要发请求。对不拿到服务器的数据是不是存储在咱们的仓库当中,但是咱这个数据是假的数据,但在这老师也说了,你就把它当做真实的接口用就行了。OK,不?OK吧,但是一定要注意一件事。咱们在发请求之前,你看这咱们以前发的请求用的是这个as,你看这个Asia。但是你要注意,你看这啊,这是老师回到了API文件夹当中,咱当年发请求的时候不是用的这个as对不。对不对,但是你要注意这个A设发的时候是真的往咱们那个呃,三八的那个那个服务器上发的,因为那个服务器和接口是不是全是以杠API开头的。
04:00
而咱们默的数据都是以杠Mo开头的。对不,所以说这个A设是向咱们真实的服务器发请求的。这能懂不?这能不懂能懂给老师扣一个一。但是咱们要向Mo GS就是模拟那些数据发请求的时候,它的路径前面是杠Mo。所以说这个A你还得来一份。这能懂不?因为这个是真的,像咱们那个真实服务器发请求的是以杠API开头,你这不能改成谁杠work,如果你这改成杠work坏了,咱们前面发那个请求就废了。对不,所以说把这个文件咱们再给他拷贝一份。这个文件咱们叫什么?叫做mark?阿贾克斯。这个是mark请求专门用的as。OK吗?那这一定要,这个as是向真实的服务器发请求的,而这个是了咱们模拟的那个数据的as。设得有两。
05:02
OK吧,但是这块也要注意,要把路径换了,这儿一定一定要注意。老师说注意的一定要注意,就是这个as设当中这个base ul1定要改,为啥咱们写的那个more GS,你看这它的地址是不是以杠more开头。这就是老师为了区分。真实接口和咱这个模拟的结构的区别也是杠APH,杠more。所以这块的base URL不应该是以杠more开头,应该是杠。不是不不应该是以杠API开头,应该是以杠开头。OK吧,好嘞。那你想想,那你将来是不是得发请求,诶刷新啊。看这你将来是不是得发请求?捞服务器的数据。放到仓库当中,组件是不是得得得用。那所有人得发请求,那你发请求你的这块的API,你是不是得写接口了。对不?老师问你找哪个文件。是找index的,哎,你看这容得找,是找inex还是找二贾,还是找他,是不是找他。
06:02
那你这块得把请求那个函数给它封装好啊。对不,所以说这块的老师呢,一个一个来。走。那这里要注意这个老师把这个注释性就放这这里要注意咱们不能再用这个A设了,因为这个asus请求的地址是以杠API开头。咱们得引入咱们刚刚拷贝的那个。就是inmport,咱们叫这个mark requests for wrong,咱们的点杠。莫叫啥来着?默克阿贾克斯,对不?那也是一样,咱们要通过get请求捞到咱这些虚拟的数据,那也是一样,你也对外暴露接口。在血压制上。这是获取咱们的。Banner,也就是那个the home。首页轮播图的接口。
07:00
对不?那你也一样,Xport cost,咱们一般都是以req开头,叫req get。Journalist。那是不是得是一个箭头函数,那也是一样,你也得把这个promise返回,那老师问你这块是用这个as还是用这个as,设用谁。你别到时候晚上的时候我用跑偏,用跑偏就废了,对不得用谁得用mark request.get咱发的是get请求。对吧,你只是捞数据对不。那地址是谁?地址一定要注意,就前面没有杠work了,因为咱们的那个base ul已经写好杠work了,直接写杠。Ban呀,那这就完事了。这块呢,一定要切记别再用这个以前的A设,因为以前这个A设发的请求,它的接口地址是以杠API开头。而它是以杠more开头的,这块一定要注意。
08:03
OK吗?以及这块也没有杠末,因为它贝当中已经包含了。那请求写好了,老师问你,你要干啥?那你是不是得向服务器发请求了,咱就把它当做一个真实机构,是不是得向服务器发请求了,那你是不是得存储到仓库当中,那所以说来看这。又是这个套路。所以说找到咱们的这个list container组件。老师问你在什么时候发请求?是不是在mounted,当组件已经刮加载完毕之后,是不是要发请求?对不,这个是哪个组,是咱们那个list container那也是一样,得怎么的mounted。对不,Mont mount,那你要干啥?是不是要派发action呢?派发action通知咱们的vuee叉干啥?发起阿贾克斯请求,那么讲数据存储在仓库当中。
09:02
对不,那不又是VIVO叉那个三连环吗。所以说点Dollar。到点第一思。Patch。那这个action的名字叫什么?咱们就叫get。Journalist。那你先运行一下,你先运行一下,它会给你一个警告,什么警告你看这儿。你看这儿。咱们是不是派发了一个action,那他他的警告是说VVR说大哥我不认识你,这个action的类型叫做get b list,为啥?因为你VR没有写这个action处理它。对不?那所以说你这边相当于在调用仓库当中的这个。Get判断list的函数,而你仓库当中是没有的。这能懂不?你会发现老师讲课的时候是每写一步,稍微带着你们看看,而你们写的时候好管的三加二就是龙。
10:01
单词错与对也不管,你就直接复制就行了。那老师问你啊,咱们的这个组件是不是也属于home模块当中。那咱们应该找哪个仓库,是不是应该找home相关?那所以说来折上找谁找仓库,仓库是谁是到到再找谁找home对不?那这不又是三连环吗。对不?咱们把已经写过的老师先给它折上,这不又是这个三连环吗?那所以说这块咱做一下笔记,这是在干什么,是不是在获取,获取什么,获取首页轮播图的数据。对,不叫啥叫他。对不,那又是一样,我告诉你,你这个项目写时间长了,你会发现最简单的就是唯一叉三连环。对不?那所以说你得用到那个函数叫啥来着,叫做REQ,叫叫叫叫叫叫a get b list,那你是不是得发请求,好,那咱发。
11:02
对,不叫做re EQ list。R EQ b list这个函数一致行一定要记住as.get as.post返回的是一个promise。那咱们要怎么办?是不是要等待他想要的结果?那你就来咋away,那你away就有谁a think,他俩是CP。那咱们先看一下子能不能获取到服务器的数据。那咱们打印一下对不。Conso第二,Love,谁result,那如果说打印出来,那就说明咱的work的数据是没问题。那咱们看一下有没有问题。来看这有没有问题。没问题吧?诶,没问题吧,同志们。那所以说这不就是咱刚刚默克那个数据吗,数组,数组里面有四个对象。就这儿能不能懂。这又到了三连环,三连环这能不能懂能懂给老师扣一个一。
12:03
这不应该给我打分。OK吗?我告诉你微微X,我告诉你咱会用好长好长时间。所以这块呢,你会发现它是将来整个项目当中最简单的地儿,就是这个这个VIVO1场。三连环嘛。而且当时老师给你们说过。Ma GS发的请求会被浏览器拦截,你看他根本没有这次请求,你看没看?看这。这能不能看见,根本没有这次请求的地址的显示,你看这不还是获取那个商品分类三级目录的那个地址嘛,但是你要注意。这次请求会被浏览器拦截,它只是在你的项目当中虚拟出一些数据。这能懂吗?他真的没有向服务器发请求。但是老师还是那句话,你就把它当做真实的接口用就行了。OK吧?所以说到这儿,能不能理解那句话,哪句话叫做请求会被拦截?这能懂能懂吧,哎,好嘞,那数据有了,你是不是得提交mut mutation是不是修改state,这不又三连环吗?那你看咱返回的数据是一个啥,是一个数组。
13:10
所以说仓库当中你得准备一个空数组,当服务器的数据过来之后,用这个服务器的数据是不是进行替换。那所以说咱们这得准备一个数据叫啥叫做banner list,那老师问你右侧值应该啥,是不是应该是个空数组。还是那句话,仓库当中的这个state的数据,它到底是数组还是对象,你别给我瞎写,看服务器仿的数据。OK,不OK吧,所以这个是是轮播图的数据。那接下来你是不是就得三连环了,那这就得有谁有commit了,Co MIT对不?那这块还是你得判断判断什么。比如说如果你的造。点扣的等等于200,那你是不是得提交啊,Commit提交谁是不是叫做get。
14:02
List提交的是谁?是不是应该是result date?对不?那接下来你是不是得写mut了?因为mutation是修改state的唯一地方,在这里不允许过直接修改state。那所以说老师给他折上回,回到这儿。咱们找到咱们的mutation给他拿过来呗,那mutation当中咱们应该说他修改谁,那一定得注入state,一传过一个谁,这个形态就二哈也行,但咱们就讲就叫banner list。那剩下只有一行代码就是stay.b list等于list。但是你先别着急洗呀。你先别着急,咱们先看一下仓库当中有没有你先稳一些,老师讲课的时候我都这么讲,为什么你们写的时候就咔咔就这么写。所以你看有没有有吧。那所以说仓库当中已经有了,但老师问你一句话,咱的组件。
15:02
有吗?有数据吗?诶,老师问你仓库,VIVO1查当中,仓库当中已经有数据了,但是咱们的组件有这数据吗?没有你是不是得找仓库要。对不哎,对不对,能不能反应过来。这个讲课的速度应该能给我跟上啊,就是你仓库当中已经有数据了,拿到了服务器数已经替换了,但是你组件身上还没有哪个组件叫list container,它没有。对不,那所以说你得回到哪,你得回到咱们的list container当中,你得捞取仓库当中数据。得用谁map stay。对不?所以这是咱们历史可能那就引入呗,引入谁。Map。State,对不,For wrong。谁will有一。那是不是又是这个套路计算映射为组件实力身上的属性comp?People,点点点,Map stay,放上放对象,咱们叫什么?叫做bner list,当然你这个K不叫bner list也行,叫二哈他也中,但是你起给我起的严格一些,是不是有state?
16:11
谁是不是大仓库当中这个小仓库home下的。Boundless对不对,那咱们这回再看一下,你看组建的身上有没有。看有没有。老师问你这回组建身上有没有这个数据,有了吧。那剩下的活不就是把这个s wiper当中的图片一经替换不就完事了?这能不能懂,所以说咱们刚刚只是做了一件事,什么事。像咱们的。呃,像咱们的这个work GS要数据捞到,数据放仓库,以及在组件当中可以获取到,仓库当中数据就到这儿,能不能跟上。可以吧?
我来说两句