00:00
大家好,在上一节课我们完成了啊,布局以及组件的一个使用,那我们这个表格的数据呢,是来自于它官方例子的一个数据。那我们来想一想,如果这个数据是我们自己的API,我们应该怎么样来使用呢?那这节课我们就来学习一下。哎,就是。如何和服务端进行交互,以及我们如何去使用这个木和这个链条啊。先看一下和服务端进行交互,和服务端进行交互的话呢,他这边给了一个比较标准的一个流程,首先是UI组件交互操作。然后是调用这个model的这个effect,哎,最后调用这个service,然后调用这个request发起请求,获取数据,然后用这个reducer改变state,更新model啊。呃,看着比较乱是吧,那我们其实这个例子呢,我们已经在讲五米的时候已经写过了。我们在讲这个五米的时候,讲这个d va的时候是已经写过的,对吧?好,那我们再用这个nt pro再来写一下。
01:09
看看这个文档。那个我们就直接来写例子吧,我们再来新建一个啊,比如说是一个人员管理的一个。导航,我们来。这里先把这些都关掉。从头给大家找。那我们先创建一个路由。放到这个上面吧。Person。嗯,内幕就叫person,然后去找这个person组件。然后图标我去找一个。在这里。找一个图标,然后。搜索一个percent,看有没有。啊,搜索一个优。
02:00
好,我们就用这个啊。把这个换了,然后这两个删掉,因为他要字符串不能写组件过来,这样的话呢,我们的路由准备好了,他这时候应该是会报错的,对吧,因为他找不到我们这个组件,那我们去新建这个UI,也就是我们的。呃,这里说的第一步。UI组件进行交互对吧?那首先我们得把我们的UI组件给准备出来。来新建一个,找到src。Pages,在这里面我们新建一个person。在里面新建一个index。TSTS差,我们要写react的那个语法。给它重命名一下。啊。创建一个啊,基本的一个组件啊。
03:00
好,这里呢,我们把那个。布局给它应用上。我们只有引入了啊这个布局,它才有那个面包屑和那个标题对吧。From at。Layout这里面。这里就不用div了,写上这个啊。人员管理。他这个错是,嗯,说这个TS这个有问题啊,那其实这个文件名我们已经改过了,对吧,改成T差了,一开始的时候建错了,那这时候我们重启一下吧。因为出现这种情况。重启一下就可以了,等一下。
04:01
现在再回过头来刷新就正常了啊。这是我们定义的这个person,然后我们的图标。还有我们内容,包括我们使用的这个布局都有了,要把这个。这个字给给翻译一下。找到这个locust。找到菜单,这里我们来加一个。嗯,我们把它叫做人员管理。好。已经改过来了,那我们在这里呢,写一个列表,这个列表呢就来展示我们的人员信息啊。来这里面呢,我们要去,呃,写一个表格。看一下手册,我们来引入一个表格啊。找一个简单的就行。
05:11
嗯,就还用第一个吧。用这个吧。来复制一下啊,然后我们把这个不需要的给它删除一下。把这个替换掉。然后先把这个给引入一下input。From。ATT。
06:00
这个。然后。Ref。这个我们来复制一下。从这来写,那要从reri里面去引入这个use ref。接下来再来看一下啊这些。我先把那个script都给都给这个先给删掉啊,让大家看起来简洁一些。这些button,我们把这个样式也给引一下。And,里面的啊。
07:01
好,这个等会儿字段我们会去定义。Request啊,这里发起请求,获取数据。这个我们先注释掉,我们,呃,不用他这个地址,等会我们自己来写这个地址啊,你先把这块给注释掉。这个菜单我们先不要了,然后是。这个先留着啊,好来先看一看。嗯,那地方还有报错啊,这个没有定义,我们来定一下我们的表格字段。死。它是一个数组啊,数组呢,在这个里面,我们来一个一个的定义我们的这个字段。首先是一个title,我们用来显示的就是那个表格,那个列的名字。
08:03
来显示一个姓名,然后是date index,就是从数据里面啊,每个K去取这个数据啊,我们这个用name。啊,这个定义完了,我们再来一个。年龄。Date index背,然后。Had in search,这个我们就不让它在搜索里面出现了。哎,我们就简单的先定义两个字段啊。呃,接着是我们的这个数据对吧,数据呢,这个是它的数据源,然后。呃,我们暂时不需要去发送这个请求,那这个请求我们就。不要了。啊,我们先直接返回一个date啊。
09:00
先把这个数据写死,Cost date,我们先把列表给做出来,诶来,我们开始定义了我们的人ID。啊是一,然后内。To a11,好,再来一条。二。打宋年龄22。保存,我们来看一下效果。表格的结构是有了,而且这个名字的搜索框也有。但数据没有出来,那。我们这里返回的有问题啊,我来看看这个文档,嗯,找一下它的这个API。看一下他这个request。它要求的返回值是,呃,一个对象,对象里面在包裹这个date啊,所以我们来给它返回一个对象。嗯,当然这个是我们没有直接删掉它,因为后面我们写请求还要用,你如果想要给他一些默认数据呢,是可以直接使用它这个啊default data的这个的话,它可以直接接收一个数组,那我们就呃,继续使用这个request吧,只要按照它的这个格式返回就可以了。
10:13
来,呃,这样返回,但是对象的话呢,我们得用括号包起来,对不对啊,我们这是一个。简写的一个方式。保存再来看一下。是不是就有数据了,哎,我们的姓名年龄都有了,包括我们这个分页。那就是我们的。第一步完成了。好,接下来把不需要的字段我们删一删。比如说这个我们暂时不需要。好,现在就是这样的一个结果,那现在这个数据呢,我们是在这里面写死的,对不对,那肯定不能写死,来继续按照我们的这个流程来走,看一下这个。我们第一步的一个UI组件的一个交互已经完成了。
11:03
然后我们怎么去获取数据呢?是调用这个model的这个effect,那我们得定义一个model。啊,这个是它比较规范的一个流程,我们相当于流程写一遍,那其实有些可以简化的地方,比如我们,呃,实际上不需要使用这个DV啊,使用这个的时候呢,那这个model层我们可以直接跳过,就是说直接调这个service去获取数据就可以啊,我们先按照这个完整的给大家写一遍啊。嗯,我先写什么呢?我们先去写我们的这个。这个。这个什么呢?数据啊,写我们的请求和我们的数据,等会我们再来看看,就说调用model和不调用model的一个情况。因为现在数据是写死的,肯定不行,对吧,那我们呃得从通过API去获取这个数据,但是现在我们没有API。那我们就使用什么呢?使用这个Mo,诶,这时候大家可以看到文档里面的这个Mo和链条啊,有时候呃,我们在开发过程中去模拟这个数据,这个Mo是必不可少的。那在。
12:10
这里面去使用木盒呢,和就是五米联是一样的啊。来,我们直接写吧,这个文档就不看了。因为它这个目录结构都和无的一样,对不对,我们要使用Mo的话,现在。这个Mo里面我们来创建一个啊。创建一个文件,哎,比如说这是我们的p.tS。在这个里面呢啊,我们就返回我们的模拟的数据就可以了啊。Export default。默认报了一个对象,然后K就是我们的,呃,请求方法加我们请求的地址啊API。然后value就是我们返回的这个值,那我们返回的这个数组我直接拷贝过来。就是我们的这个数组。
13:02
那当我们去请求这个地址的时候,就会得到这样的一个数据,哎,因为我们默认的话。我们的慕课是开启着的啊,所以我们可以直接去呃发起请求,请求这个API获取数据就可以了,那我们怎么来发起请求呢?看一下他的这个推荐的一个规范,还找服务务端交互这里,哎,我们应该用嗯,就是在这个service里面统一来管理我们的请求啊,然后用封装过的这个request来发起请求啊。接下来找到这个service。嗯,太多了是吧,给大家折叠一下啊。Src。里面有一个service啊,在这里面我们来新建一个。Person。啊,尽可能的啊,就是说和什么相关的请求,你放到一个文件里面,不要都写在一起啊。啊。在这个里面我们来。发起请求的话,你就得先使用这个,要使用这个request对不对,我们看input request,但是从哪去引入这个request呢?从我们的这个里面啊u ta这个工具里面,这个有工具里面的这个request是封装过的,嗯,可以给大家看一下。
14:16
啊,这个里面的是,呃,封装过的,所以我们用这个。呃,官方的文档也是这么说啊,那我们来定一个方法。因为这个文件可能呃会提供很多去获取数据的一个方法啊,比如说是获取列表的呀,呃,添加人员的呀,删除的呀等等等等,所以我们不用默认暴露,我们用分别暴露啊export。Cost a g port。等于。Think,我们来定一个一的方法。好在这个里面,哎,就return我们请求到的这个数据,哎,因为是我们定义的这个Mo是get请求,所以诶直接request发起这个请求就可以了啊,如果是post的话,你可能用它的点post方法。
15:06
好,那这个请求数据的方法我们写好了之后就可以去,呃。调用这个方法,然后发起这个请求,这个请求呢,因为我们开启了Mo,会从这里拿到这个数据,我们来先验证一下啊。那这个date呢?我就不在这儿写了。然后我就不在这写了。在哪呢,我直接。在这写啊。把这个也删了啊,实际上我是可以嗯,直接在这去发起请求的,但是我们尽可能把代码都拆分出去,不要把逻辑都写到这个属性里面。啊,我们来一个比如说嗯,Persons list这样一个方法,那这个方法呢,我们就在这定一个方法,比如说person's。使用监测函数,好,我们在这里发起请求,获取数据。
16:08
获取数据啊。哎,这样的话。在这里就是说它这个,呃,回调函数里面去调用我们这个函数,我们这个函数里面去发起请求获取数据,最后把这个数据返回数据就可以了,对吧,那怎么发起请求我们这个。呃,Service里面是不是定义了一个这个获取数据的,所以我们来使用它就可以对吧。Cost。贝塔等于。你的这个get。啊,来回车执行这个方法。上面看看有没有啊,自动帮我们引入了,如果没有帮我们引入,就是说因为刚才我回车的时候,编辑器自动帮我们引入了,如果没有的话,你自己要手动从我们的service里面引入这个方法才能使用啊,然后呃,你。这样呢?还是不行啊,为什么不行呢?你注意一下我们这个方法呢,是加了这个think,因为这是一个网络请求,网络请求的话,它会有一个异补的一个情况,所以我们嗯使用这个think来进行一下处理,A think,如果一个函数我们加了think之后,它最后的是一个。
17:13
就是promise对吧,那我们这边如果你要想要拿到这个数据的话。哎,我们也可以使用这个a think和A来处理一下这个一步的一个问题。诶,这样我们就得到了这个数据,得到这个数据之后,嗯,先给大家打印一下可以啊,看看有没有拿到我们这里。返回的这个数据啊。来看一下。打开我们的这个调试。看空。没清掉刷新一下。是不是拿到给我们返回的这个数据了,对不对,但是这里还没显示对不对,还是刚才这个问题,你来看他的这个API的话,他这个request。我们最后得返回一个对象,并且对象里面得包含date这个字段,是不是这样的,来最后我们来return谁return一个对象啊,Return一个对象,对象里面呢,在包含date这个字段对吧?那date是我们最后拿到这个date那就可以对象简写是这样的,那最后我们的这个对象就是实际上会是放到这个位置啊。
18:21
现在我们再来回过头来刷新看一下。是不是就有我们的这个数据了,对不对,那我们在这个Mo里面。继续再去添加一条啊,33的啊,比如说是小明,哎,我们来刷新。是不是就多一条了,那这样我们就完成了什么呢?诶从。至少完成了,哎,UI组件我们有了,然后我们也把我们的请求放到了service里面,并且也使用了它封装的request发请求,哎,服务端呢,也反馈了数据,当然是我们使用梦模拟的啊,然后我们还有几部没有做是。呃,比如说使用这个model,然后调用这个改变状态,更新这个model等等,那这三个就属于这个d va的一个应用,就是会把这个数据交给这个redux进行统一的管理,这个根据情况大家选择去使用啊,当然。
19:12
啊,作为这个这个。哎,教程我看我还是给大家去写一下啊。这是我们的第一个版本,直接去发起请求,获取数据,把这个数据填充上。那么我们。接着再来写一个版本啊,这个我先给它注释掉。啊,这个先给它注释掉。嗯,看一下啊,要想调用model,就是说调用它的这个effect去获取这个数据的话,那么我们就先在去定义我们的model对不对,在这个model里面我们来新建一个。哎,就叫person.TS。Export default,默认暴露,还记得我们讲无的时候这个目录怎么写吗?它有。四个属性,一个是namespace。我们就叫person。然后。
20:01
还有一个state,哎,就是我们的这个状态,那么state呢,就是加一个person list也行。就叫吧,啊一开始是空对不对。接着还有一个。啊。它也是一个对象对吧,我们先把这些呃,该写的都给它写上,最后我们再来完成我们代码,那还有一个呃,Reduce。好,也是一个对项,我们说过这个是我们的命名空间,我们去调用这个model时候,要通过命名空间去调用,对吧?那保存了我们的状态,也就是我们的数据,我们可以在这个effect里面写一些这个副作用的一些操作,比如说发起网络请求获取数据,对吧?啊,然后得到数据之后,我们可以啊,把它的数据给到这个reducer,让reducer去更新我们的状态。来。接下来我们。
21:00
一步一步的写啊,那这个状态我们定义完了是空,然后在这里去,呃,发起数,就是说定一个方法,这个方法用来请求获取数据。我们先写一个呃星,因为请求获取数据的话,它也是一个异步的一个过程,所以我们这里使用的是这个生成器和这个验的这个两个关键字来处理我们这个异步的一个过程啊。赛。Person啊,就是获取人的一个数据。诶,这样一个方法。这个方法里面啊,有两个参数啊,第一个参数是我们。就是可以接收到我们传过来的这个参数,对吧,一个。配漏的,然后还有一个call back是不是。好靠back,我们就不用polo的,其实这个也可以不要啊,那我们不一定传这个数据啊,这个我们也不要,就不写了,那第二个有一个。靠,还有一个put。嗯,使用这个call呢,我们可以去访问一些方法去得到一个数据。
22:03
啊,接下来cost我们的这个date等于谁呢?液的啊,就是使用这个生成器,然后这个星加这个液的,我们来处理这个异步的问题,靠。访问什么方法访问就是我们service里面获取数据的方法啊,就是我们的这个get person对吧?那所以我们得先引入我们的这个get person input分别暴露。That person from。从这里开始扫啊,前面的艾特福代表我们的SC嘛,Service里面的person。哎,这样就有了这个方法,那我们使用call来访问这个方法就可以了。这样的话我们就能得到这个数据,得到这个数据之后呢,我们在使用这个put,把我们的数据派发给这个reducer。啊,这个之前都都讲过,在讲那个五米的这个DV的时候啊,那这里全当是一个复习啊。
23:01
来,接下来。LD继续使用这个。然后put是一个函数里面是一个对象啊,第一个是type,我们要派发的这个类型,比如说是set person啊第二个。漏就是我们要传递的数据,我们要给他传的数据,我们把谁呢?把这个date传给这个数据。看到了吧,啊。那reducer里面怎么写呢?Reducer之前我们在学大的时候也说过啊,啊reducer是纯函数对吧,所以这里面我们就是写这个纯函数,但是函数名是什么呢?就是我们这里定义的这个type啊,它是一个。纯函数啊。它有两个参数啊,一个SP,一个是action好。啊,最后我们要返回一个状态啊,那我们先把原来的状态给它结构写到这里,最后把我们要修改的状态进行修改,我们要修改修改这个person,那让他修改成谁呢?它的数据我们让它等于action里面的点。
24:14
配漏的,哎,这个配漏的就是我们这里就是传过来这个数据,相当于我们把啊effects里面我们获取到的这个data这个数据,然后给到了这个对吧,那我们在这里面呢,嗯,就是put这边这个传的参数其实是被这个action接收的action,我们不仅可以拿到这个paylo的叫paylo,也可以拿到这个type啊。好,这样的话,这个model我们就编写完成了,对吧,然后。嗯。在这个model里面,我们也发送请求获取数据了,哎,然后是调用这个return改变了,最后是这个更新model,那怎么更新呢?那我们光定义完这个model来使用,是不是在我们这里面,我们在这里面来使用这个model好。怎么使用呢?
25:00
大家想一想啊,我们这个组件是我们自己手动创建的,对不对。而且只是暴露了我们的这个组件,它和我们的这个model没有任何交互,你用不了。我们之前讲过,你想要让我们的这个组件能和。这个DV产生交互,是不是得使用一个呃connect进行一个连接才可以,好,我们来把这个connect给导入。然后是从,呃,这个我就不让他自己了,我自己手写了from。从U里面来导入我们的这个connect。在最后我不直接去。啊,抛出暴露这个组件,我暴露这个connect,然后它执行的结果是也是一个函数,函数里面我们把组件给乘进去。哎,乘到这里,哎,接着是它的这个参数啊,它有两个参数对吧,之前给大家讲过一个。
26:00
啊,是这个。这个映射这个状态到这个组件的,对吧,还有一个映映射这个dispatch到这个组件的。那我们只需要把这个。我们需要的。这个状态给他传过去就可以了。它是一个接收一个回调函数啊,我先把这个回调函数给它写上,函数呢,这个函数呢。它有一个就是说参数,它能接收到我们的整体的一个model,那我们只要其中一个啊,我们把这个。啊,Person。给他传过去就可以了啊。这个返回值大家注意啊,返回值呢,我们要返回一个对象,并且把这个person放到这个对象里面啊,但是因为我们返回对象。所以必须得用一个括号给包起来啊,这些都是加值函数一些简写方式啊,那我们这样的话。就是会把这个model person model给呃,作为它的这个返回值啊,返返回出去,返回去之后呢,它就能把这个person这个model给到这个person组件,我们在这个person组件的这个purpose里面就可以接收到啊,你等一下啊purpose。
27:07
啊,这个之前好像都都讲过了,第2LOG。先整体打印下purpose,我们来看一看,来打开我们的控制台。这里我们来刷新一下。好,这是我们打印的purpose,呃,可以看到是不是有一个person person里面有一个person persons persons是空对吧,那这个persons。就可以看到是我们这里定义的这个东西,对不对啊。啊,注意这个地方你传的话啊,一。嗯,这个参数一定要注意,是我们从这个有个大括号,是解构的一个过程啊,并且返回的时候你也要返回的是一个对象才行,这样要注意,但其实记不住也没有,没有事啊,直接呃复制啊复制别的其他的地方写好的也行啊,这是给大家。这个写讲课的话,我就写细一点。那拿到。这里是不是可以拿到这个persons对吧,好。
28:04
那我们purpose里面能拿到这个process。对不对,也就是说我们在这里就可以用这个person里面的数据。对吧,好。Cost date等于谁?等于这个purpose。哦,这个里面用不了purpose是吧?那我们把它这个函数剪切一下,放到我们的函数里面,因为我们需要从这个purpose里面去获取这个数据,它里面的person。里面的点person,哎,这样的话就拿到我们的这个状态里面维护的这个数据,对吧,Model里面维护的这个数据。好,最后结果一样,我们return。谁呢?Date冒号date就是我们拿到的这个数组就可以了啊,当然可以简写是不是?好来接下来看一下。
29:00
来看一下我们的数据,哎,没有的没有就是对的,因为我们这个现在是。就是空数组啊,刚才给大家打印也是空数组是不是。啊,那怎么办呢?对吧,大家也看到了,我这边是定义了一个获取人的一个方法啊,获取人物的数据,并且进行状态更新,但是我没有调用这个方法呀,对吧,我是不是得在这之前去调用这个方法,对吧,调用这个。Model来更新我们的数据,是不是更新数据?怎么调用的?呃,这个purposeboss呢,我现在再给大家打印一下,刚才给它关掉了,我来看一看。看一下这个purpose,它是不是还有一个dispatch,使用这个dispatch,我们就可以去来调用这个model啊。来,我们把这个dispatch给解构出来,为什么我会把这个dispatch给解构出来,因为我们其他的方法可能也会用到dispatch,对吧?比如说你更新的,你删除的,所以我就把它从purpose里面啊给解构出来之后,我使用这个dispatch去调用model种,那怎么调用呢?就是一个对象,对象里面两个参数,一个是tap啊,就是你要调用哪个model,再一个就是呃,Paylo,你要想model传的这个参数,那我现在不传,我就写这个now。
30:19
是吧,这个打错了。配漏的,一旦我这边传了这个参数,实际上就会被诶model的方法的第一个参数里面的那个配给接收到啊,这个后面我们再说,那现在。一个。关键的一个问题就是tap怎么写,Tap是我们的命名空间啊,然后。斜杠,我们的这个方法啊,一定要这么去写啊,命名空间加方法,所以这个命名空间一定要保证和其他的model不重复,保证它的唯一。那我们来保存啊,看一下我们的数据。来往下刷新一下。
31:04
没有数据啊,这是为什么呢?我们来打印看一看啊。嗯,首先验证我们这个方法执没执行成功,去我们model里面,我们在这里来打印我们的贝塔贝塔log。等它刷新完成。可以看一下数据确实拿到了对不对,但是这里为什么没有更新呢?啊,这个就带大家给大家说一点,也是一个大家容易忽视的一个地方,就是说我们你在这里,你去调用model更新的数据,你下面你这个数据你是从哪里去取的,你还是从之前传过来的这个purpose去取的,它还是个空数组啊。对吧,你这里更新的数据,你只有在用到它这个状态的时候,他他才会帮你重新渲染,但是你没有其他地方再用到这个数据了。看到了吧。这个就是就是刚才这个问题产生的一个原因。我们来打印一下这个托斯,大家就知道什么情况了,Log。
32:04
来刷新一下啊,重新。啊,注意看第一次。第一次啊,是我们组建渲染的时候,我们打印的这个purpose,我们的这个数据。是空的看一下啊,是空的对不对,那看。我来给大家模拟一下这个执行的过程,我们逐渐渲染对吧,那执行这个输出,然后。调用它发起网络请求获取它对不对,好,这时候它这个数据已经给他表格了,它是空的啊,你看吧,第一次是空的,好,接着这个为什么它又执行了一次呢?为什么组件重新渲染一次呢?这是因为我们在这里去更新了model,所以组件又重新渲染了。清楚了吧,可以看一下,这里面就是有数据的。Person是不是有数据好?那怎么办?我们来改一下代码就可以了,其实我们不在这个方法里面去。更新这个数据,哎,我们想一想表格的数据一般是在我们这个页面一加载就需要对吧,那这时候我们可以把它放到这个生命周期里面啊,在这个生命周期里面去获取这个数据啊。
33:11
嗯,因为这个是函数式组件,所以要使用生命周期,我们还需要啊,Use一个effect。然后。在这个。里面使用这个use effect。嗯,它是一个函数啊,我们把第二个参数给上,要不然的话,更新的时候它也会执行,我们把第二个函数给上,只在就说组件渲染的时候啊,执行它一次就可以了,那我们在这个里面去,诶更新我们的数据,哎,这样就可以了。好,这时候我们再来看一看我们的这个效果。是不是就有数据了。大家清楚这个刚才问题产生原因吗?因为你把它写到一块。他这个purpose还是拿着之前的purpose名数据对不对。
34:02
啊,这是这个问题产生的原因,那我们只要啊在这里去更新这个数据,那它只要一更新,就是说这个状态只要一更新,那组件就会重新渲染,这时候的model,就是说POS里面的数据就会改变,啊这个我们就可以拿到比较,就是说更新后的一个数据。啊,这是一个一个写法,就是我们把一些呃,页面一加载就需要的一些数据放到这个生命周期里面去请求啊。然后还有一些可以优化的地方啊,那比如是这里。啊,我们就不要使用request,因为之前我们这个呃没有使用这个model,没有使用D是吧,我们直接发起了请求,所以我们使用request啊,直接去发起请求获取数据,但是现在我们已经使用了这个model,嗯,这样的话,那我们的数据其实都是基于这个dva级这个model去管理的,嗯,那我们在这个生命周期中提前去获取我们的人员的一个列表,那这时候d va里面就是呃。
35:00
Model里面它的数据就已经发生了改变,实际上完全我们可以直接去使用这个数据就可以了,但是直接使用这个数据给到谁呢?那就不是request了,那我们来看一下它的这个表格的这个手册。找一下API。有一个。嗯,有一个data source,找找在哪。没有找到这个属性,那我们这时候怎么办呢?就去这个。Int里面去看啊,找到它里面的这个表格。在这呢?呃,这里,呃,之前给大家说过,它的这个per compments,它是在这个NTT的基础上是进行了进一层的一个封装啊,所以我们在里面找到,就说有一些API我们找不到的话,我们就可以去NTD里面去找啊,包括这个高级的表单,表单项及高级表格,它这些组件其实都是对这个NTD里面的组件进行了进一步的一个封装而已,那比如说刚才我们想要使用呃,Table Bo的一个data source属性来填充我们的数据,那就没有,那我们取这个这个atd啊,这个里面表格我们去找它的API。
36:19
来往下找看一看。诶,这里就有一个data source是数据数组对吧?啊,它是一个数组,我们这个里面的这个数据就能作为表格的数据去渲染啊,那刚才说了我们这里要优化一下,因为之前我们是直接在这里去发起请求去获取数据,对吧?但是现在我们已经没有必要去发起请求了,因为我们的数据呢是呃,在这个组件挂载时候,在生命中心中,然后去获取了这个数据,并且去更新了这个state,那我们直接使用pop里面的这个。这个就可以了啊,但是我们要加上这个data source这个属性啊,让它等于,等于谁呢?Purpose person,这purpose就是persons我们的,呃,D va里就是说model里维护的这个数据,好,那我们来保存看一下效果啊。
37:11
来刷新。效果是不是一样的啊,那这是我们要优化的一点,就是说如果我们是直接直接去发起一个请求去获取数据的话,我们就写到这个request里面啊,但是我们这个数据呢,嗯,你这是我们第二个就是说讲那个直接在这里面写service第二种的一个写法啊。啊,后来我们。呃,最后一种写法是把这个数据交给这个models来进行维护,对不对,交给models来维护之后呢。那它整个这个数据啊,都会就是在这个状态中啊,所以也会随着我们的组件去。传给我们的purpose,那我们直接在purpose里面去使用它维护的这个状态就可以了啊,但是这时候表格你的属性要换一换,我们就不用这个request了,使用这个呃。
38:01
那这个例子我们就写完了,稍微给大家总结一下,那我们在使用这个表格组件的时候啊,这节课呢,用了三种方式给大家演示,首先一开始我们是呃在上面去模拟的这个数据对吧?模拟的这个数据,然后给到这个呃,Request,因为当时还要后面还要用request,就先直接用的它,对吧?那实际上给大家说过,呃,如果我们想要给他一些默认数据的话呢,推荐使用啊这个default date这个字段啊。好,在第二种方式的时候给大家。嗯,使用了这个,直接在这里去发起一个请求,调用我们的service去获取这个数据,对吧,当然我们这个数据呢,也是通过这个。啊木可见就是通过这个木可去模拟的一个数据,这是我们的第二种方式,第三种方式,我们进行了呃呃最终的一个优化,然后把啊,我们的请求就是我们的数据是交给我们的这个model来维护,我们在这里去获取我们的这个数据,啊,最后去更改这个状态。
39:03
而在这里面去发起这个请求,去获取我们这边哎慕模拟的这个数据啊。那这是也是官方比较推荐的一个一个数据流来看一看啊。在这个地方。嗯,服务端交互啊,这也是官方推荐的一个请求的一个流程,UI组件负责交互,然后我们调用这个model里面的呃,Effect来操作这个数据,然后在这个effect中呢,我们去调用统一管理的service去呃请求API去获取数据,最后使用它封装好的request发请求啊,获取服单返回的数据,然后调用reducer改变stay的,最后更新model,那这整个流程跟我们写的这个例子就是一样的啊,我们这个例子其实就是按照他官方的这个流程去请求的,呃,但是实际上啊,我们在真正的写项目中呢,嗯,也。并不一定完全按照这个流程,嗯,为什么呢?呃,首先这个流程呢,是稍微绕了一点对吧?但实际上大家想一想,如果我们这一个表格仅仅是嗯,直接就需要一些数据就完事了,那直接可以在这去写一个呃,调用我们API去发送这个请求就可以了,呃,那为什么他好推荐使用这个model呢?呃,因为这个model的话呢,它使用的是这个d va,它的数据就会基于这个re,就状态会基于帮我维护,这样我们在一个呃,我们的页面中,比如说有多个组件使用到了一些共同的一个数据的时候,在使用这个model是非常方便的啊,但是就像我们的这个人员管理,我们就这一个表格需要用到这个数据的话啊,其实完全可以在这个表格的request里面去发起请求,去获取数据都是可以的啊,所以说呃,关于他这一个标准的流程,大家决定要不要去使用的话,你自己去权衡你的这个数据啊,你的这个状态。
40:49
呃,有可能是被多个组件给用到,或者说是哎,仅仅就是这一个组件用到的话。啊,那就没有必要去写这个model啊,这个是根据你自己的情况去写,但是有些情况下是。
41:01
就是说有些东西是少不了的,比如说这个请求,我们尽可能的放到service里面去统一关联我们的请求,按照我们的分组,每一个不同的这个分组都去。呃,负责相应的他自己的一些呃请求啊,注意这边暴露的时候使用我们省分别暴露,因为我们在一个呃这个请求的这个文件里面,可能还有写其他的请求,比如更新的删除的啊等等,嗯,再有一点大家需要注意的就是当你去改这些API的,就说当当你去看这个呃pros它的一些组件的时候,如果有些API找不到的话,我们要去啊这个at里面去找啊,因为这个components就是对NT的一个封装。那这节课给大家讲了如何和服务端进行交互,以及和服务端交互的一个标准流程啊,以及啊,还给大家讲了如何使用这个慕模拟一些数据啊等等,那那个。以后在我们开发的时候,如果后端的API还没有开发完成,我们就可以使用这个梦来模拟数据好。
42:00
那这一小节先到这里。
我来说两句