00:00
大家好,在上一节课我们完成了啊,Todo的一个添加的一个功能。啊,那这一块呢,我们继续完成状态的一个修改啊,看一下我们之前写好的一个案例,点完成的时候,它是一个完成状态,然后我们点取消也可以把它变成给代办啊注意这三个状态。呃,它是就是说不能同时存在的啊,哎,所以说我们这里面呢,等会还要做一个判断,那在写这个状态修改之前,我们先把上一节的代码给。嗯,有几个地方稍微调整一下。一个是这个我们提交完表单判断状态码这里啊,这里当时少写了一个,少写了等号啊判断,再然后是这个201呢,其实在我们rest API中呢,它是这个ADP的响应嘛,啊,但是我们现在。呃,没有给大家去做这个一个响应码,它的响应码还是200相当于对吧,那所以我们也也不用这个状态码,把这个状态码我们就改成。找一下我们的木就改成零就可以了啊。
01:02
啊,我们把那个。State改成。扣的啊,啊,为了和上面的我们的数据的区分开,我们就把它改成扣的,就是我们认为当扣的是零的时候就没有错误好吧,啊,这个是我们自己约定的啊,扣的如果等等于零,我们就认为是添加成功没有错误,那我们把这个稍微调整一下。像我之前用的这个201什么的,那其实这些呃不是我们自己去约定的,它是APP的一个响应的一个状态码,我们后面在写项目的时候会用到这种呃响应的状态吗?那就我们到项目的时候再说啊。好,那这个就对这一块做一个调整,我们先把这个都关了。先来写我们的。编辑的功能,首先我们对它做一个判断啊,比如说当它是已完成的这个状态的时候呢,那这个完成其实就应该不显示了,对吧?那当它日已取消的时候,那这个取消就应该不显示了,来找到我们的列表在src。
02:02
Pages找到我们的图do。Index,那这个状态是在定义字段的时候,我们定义的对吧,就是这个内容找到定义表字段的地方。好ID标题状态。也就是这里,那这里的话,我们就得做一个判断对吧,就是呃,如果当前的状态是零,那代办就不显示了,如果当前状态是一,那个完成就不显示了啊,不是当前是这个当前记录的啊,就当前这一条数据的。我们从哪可以拿到这条数据呢?就是render方法,它有第二个参数,呃,Record就可以拿到我们当前这条数据,对吧?当前的这条数据啊,之前我们还在这上面判断了它的状态是不是好,我们这里也拿一下啊,第一个参数不要用这个给他占位,然后record。啊,这个事实我们。呃,当前的这数据,那么我们判断它的这个呃状态。那怎么判断呢?看一下啊,我们最终要返回的是一个数组对不对,而且这个数组里面我们放的是一个一个的元素。
03:07
所以我们如果要进行一些判断的话,那这里就不能用这种正的函数的简写了,我们把这个大括号加上。好,最终我们来返回一个数组,对不对,但是现在。我们不想让这三个都返回,要基于它做一个判断。先定义一个公数组啊,Let以operation。等于一个空数组。之后我们。对,这个。呃,它的这个状态进行一个判断,然后根据不同的状态去往这个数组里面去放入不同的一个东西,最后我们把这个数组给返回就可以了,啊,就是这么回事,比如说if这个record.state。嗯。不等等于零,就是当这个record的状态不等于零的时候,那如果不等于零呢,我就可以把这个哎代办给它放到这个数组里面。
04:10
行。啊,给他推进来,接着,哎,同样的,那就是。啊,复制就可以了啊。如果不等于一,那我就把这个完成给放进来,如果不等于二。那我就把这个取消给放到这个数组里面。把这个K改一改一二好,那最后我们返回这个数组就可以了。看到了吧,嗯。就说。呃,不等于零的时候,我们就能去操作这个代办对吧,那你不等于一的时候,就不等于完成的时候,我就能点完成,那不等于这个取消的时候,我就能点取消,就是刚才我们说的就是说当他已经是什么状态的时候,我们不让他去,呃,有这个状态啊,来保存看一下效果。
05:02
是不是就可以了,你看啊,当你是代办的时候,你这边就不能有代办了,当你是已经已经是已完成,这边就没有已完成了,那就是我们这个判断的一个。判断的一个代码,好,接下来。开始去写修改状态啊。我们先来分析一下修改状态,怎么去修改。我们的状态,我们的就是说你要去修改这个状态,就是说你要去改变这这条数据对吧,那我们的数据是在哪存在呢?是使用的是Mo对吧?啊,如果是我们正常的开发,可能使用的是后端的API,对不对,诶所以诶我们得最终得是去修改这个Mo,或者修改API里面的这个这个数据的这个属性才行,对不对,那既然要修改这个Mo,修改这API,我们就必定得发起请求,那你要发起请求service里面你就得。去写这个发起请求的一个方法,就是我们这个service里面对不对,好,那有这个方法之后,我们还得一个触发的一个时机,那什么时候触发,是当我点这个按钮的时候触发,对吧?而且我点这个它的状态改为什么,点它状态又改为什么,比如点完成状态又改为什么?他们三个按钮所改的状态都不一样。
06:14
是不是这样的?嗯。那所以呢,我们就得给我们的这个东西一个点击事件,并且当我在点击的时候呢,我要把。这个状态我要改成什么状态啊,给传到这个方法里面。听楚吧,来,我们来写一写,那先把这个点击事件都给他们啊,当可利可啊亲记。State啊,我们来一个。给他一个回调函数啊,因为我们要要传参数,所以就不能直接写那个性质了,要写一个这种的一个回调函数啊,然后。接下来就是当我点击这个点击它的时候,会触发我们这个函数,那这个函数呢,我肯定要要几个参数对吧?都要什么参数呢?当然这个函数还没有定义啊,等会我们去定义一下,我们先想一想要什么参数,我们既然点它是把它状态啊改为零,那点它状态改为一点它状态改完,所以我们得传一个呃状态过去对不对啊,那点它就是传零。
07:23
接着我们再想个问题,看一下我们这里啊,我们这边这么多数据,我我点点这一条,那怎么就知道去改了这一条对吧,那我点这一条怎么就能确定它改第一条,而不是改其他的对不对?所以我们要把这条数据的一个ID给传过去,才可以传到函数里面。对不对,那ID怎么传,是不是CD record加ID对不对?好,那我们第一个参数传record加ID,第二个参数传我们要修改的状态就可以了,那同样的。其他的几个也去。复制一下啊。那只不过这里我们要把它改成一,这里改成二。
08:02
嗯,大家好,捋捋你看。我这个按钮的作用是取消,那我点取消的时候,我是不是就把状态改它改成二,我把二传过去对吧?好,接下来我们去定义一下这个方法啊。那这个方法定义到哪里呢?啊,我先折叠给大家看一下啊,为什么让大家看这个呢。看一下我们这个字段是在哪定的呢?在组件的外面,所以说你这个函数的话,你要定义到这个组件的外面,要不然你把函数定义到组件里面,你这边就。没法使用了啊,当然你也可以直接把这个东西,把这个字段的定义以及我们的状态啊,剪切放到这个组件的里面去定义也是可以的。清楚吧,啊好。嗯,那我们,嗯,要不然就。也放到里面吧。我们把这个剪切一下啊,剪切一下都放到这个组件里面,然后放到这个render,就是说之前啊来定义。
09:03
啊,我把那个之前我们在外面就是说组件外面定义的这个表格的字段给放到了这个里面。啊,这样的话可以做到一个就是说,呃,我们可以把这个方法就定到组件里面,然后和我们的这个提交表单添加的时候啊,就是能放在一起,方便大家去去看啊,其实你在外面定义也是完全可以的啊。但是有一种情况,你就必须得定义到这个组件里面,就是说你这个方法里面,你用到了这个组件里面的一些东西,比如说是purpose啊,比如说是呃这个呃state等等啊,那这这时候你就要定义到函数里面啊,其实我们这个方法用不到组件太多东西啊,但是为了。为了统一啊,为了和把这些方法都写到一块,我把这个挪到里面来定一个cost change space等于。嗯,接收两个参数对吧,一个是ID,一个是我们的啊要修改的状态。
10:05
我们来打印一下啊。State。Log。打开控制台啊,现在我点这个代办,嗯,ID是一,我们要修改的状态是十,对吧,我是零,然后点取消,ID是一,要修改的状态是二啊那我们参数已经过来了,参数已经拿到之后呢,其实呃,后面的流程其实大家应该清楚了,对吧,你看在这里啊。发送请求对吧。也不是不是在这发生请求,是在这里啊,去修改状态,修改状态。嗯,写详细一点,就是调用这个service里面的方法。Vs service中的方法啊,修改状态。我们请求是在service里面发起的修改状态。
11:01
啊,然后是呃,我们的这个判断对吧。判断这个执行结果,哎,就是这么一套。嗯,那既然要调用service的方法去修改状态,哎,所以我们就得去service面写方法。来找到service。嗯,这个流程怎么说呢,就是大家写东西的时候,你可以从最基础的这个数据,比如说是Mo啊,这个这个底层开始写啊,但是呃。我们如果有API的情况下呢,其实就不使用这个慕了,有现成的API,那这时候我们可能就直接从这个service开始写了,你看我们要去调service这种方法。但是这个呃,Service里面没有修改状态的这个方法啊,所以我们要去写这个service对吧?啊,只是我们没有这个API数据,所以要再去多写一个。嗯。我们先把这个方法给写了。
12:00
来直接复制一下这个改一改啊。呃,这是修改土豆粒子状态。状态。嗯,修改我们就啊给个一方法啊。然后这个也改成。数据。呃,数据的话,我们。嗯,还是这么传吧。还是这么传。等一下我们传的时候呢,就调那个方法上,我们把它给处理一下就可以了,把它处理成这个对象嘛。那个修改呢,一般使用。Put啊。嗯,那这个方法我们就写完了啊,只是这个API我们还没有对吧,那我们去定一下这个API的一个数据。找到。这个慕里面的todo,嗯,我们来复制一下。复制一下这个这个啊啊。
13:00
把它改成put。然后这个地址改成。嗯,这个就不是添加todo了,应该是。呃,这个就不要了,应该是筛选。筛选图do进行修改,那为什么要筛选todo呢?你看我们操作了哪一条是点的哪一条,我们还传了ID过来,要根据我们传入的这个ID去。就是说对他进行一个筛选,筛选到符合我们的那一条,我们再去修改它的状态啊,应该是这么回事啊。因为我们用的是这个Mo,所以你要这么去写你呃,如果我们直接是请求的API的话,那直接传个ID过去就其实就不用管了啊是不是啊,来继续写。嗯,这个就不要了啊。这个也不要了,我们写我们的这个筛选。先把这个状态给改了。
14:01
呃,修改啊,直接就改成修改成功了。接下来呢,嗯,还是一样的啊。我先把那个猪吃掉。先给大家re send,把这个IEQ给大家返回一下啊,Q.body给返回一下,我们先看看我们的这个参数啊,传过来的这个参数。呃,那接下来呢,这里面调了这个方法,传了这个参数,对不对,这个参数。我们得通过调这个以data方法时候传过来啊,之后在调这个的时候,就是说发起这个请求的时候,才去把这个参数传给我们的模,我们在这才能看到对吧?好,那我们就去调用这个一定的方法在这个里面啊。哎。嗯,同样的也是一个异步的一个请求,我们还是要把它给转成这种,就是说写成同步的这种形式吧,方便我们去判断后面的一个状态。Cost re等于。
15:05
Edit是吧?E,好,这个时候你只要看到后面它比如说service啊,Todo这种的一个情况,如果你回撤的时候呢,它会自动给你引入。清楚了吧,啊,那我不回收了,我自己手写,那在不自动引入的情况下呢,你就要去上面去手动去引入我们这个请求啊。这个已经有了啊。嗯,Service图图这个已经引入了啊。引入了,那我们把参数传过去,我们要传什么参数,要传一个ID,要传一个状态。对吧,啊,所以我们把这个。啊,ID和。仔色的传过去啊,我这个是一个对象的简写,你要写完整了,就是这样的是吧,前面ID也是,那我就简写啊呃,这个时候我们调用这个方法,那把这个对象,你那这个对象是不是传了过去,传给了谁,是不是传给了我们这个方法date就能接收到对吧?那date接收了之后,我们又把它作为这个包地的一个数据啊,传给了这个地址,就请求这个地址的时候,放到了包地址中传给这个地址啊,我在这里我们应该是能输到这个包对里面传过来的这个数据。
16:16
看一下,验证一下。嗯。这里面我给大家打印一下啊,就是说service里面给大家打印一下这个备份,嗯,来先刷新一下。把这个network也清掉,哎,为什么要清network呢?因为这个service里面的这个todo,呃,这个cons我们在cons cons里面可以看到,但是这个Mo里面的刚刚给大家之前给大家讲过,它有点类似于是我们服务端的代码,对吧,所以你在这里面response就说呃,Re send就是你返回的是在这个请求里面,在network里面去看的。好,那我们来点第一个代办。这个是,哎,Service里面,你看service里面打印的我们的这个传真数据,接着看network,这个是我们发起请求put方式200啊,然后看他给我们返回的这个数据。
17:04
ID是1STATE0,也就是我们Mo里面这边返回的数据,那说明我们从这个IQ.body里面是可以拿到这个ID和state的,对吧?好,那我们后面肯定会用到这个数据,所以呃,我提前把它给解构出来。ID state等于reQ.body。啊,这样的话我在用的时候就方便了,是不是啊。那这个send道就不管了,那还是我们的这个send道上的返回先下面要做的一步就是通过我们传,就是说收到的这个ID去数组里面去匹配这个数据,然后把它的状态给,就是把他的这个状态给改成传过来的这个状态。对吧,那接下来就开始去筛选我们的这个list。我们使用这个呃,Map来作为筛选啊,它有一个。还有两个参数啊,一个是item,一个是。
18:03
Index,当前当前迭代的一个索引啊,我们写一个回调函数。然后。Item呢,我们是用来判断的,就是说啊,If这个item当前便利的这个项,它的这个ID等等于我们要修改的这个ID,对吧,那么我就。呃,去修改对应的状态。呃,因为这个map呢,它不会对元数组产生影响,所以我们要去修改元数组的话呢,还是要用到这个list的,然后把index传过来,Index是当前的一个索引嘛,对吧,那这个我就取到了这个list原来的一个数据,然后让它的这个state等于我们要修改的这个state,哎,这样就。就完成了。一个对。呃,这个原数据完成了一个修改。清楚了吧,啊,那因为这个。Map它不会对原数据产生新改,就是进行修改啊,当然还有一种方式,它会呃产生一个新的数组嘛,我们可以呃就是说呃,比如说是return。
19:09
嗯,这是一种写法,给大家先注释一下,还有一种写法就是说。我们不去直接修改元素组,而是说直接啊,也是判断啊判断,比如说item啊,ID啊等,等于ID的时候,直接修改这个item的state,然后等于这个state在修改之后呢,我把修改后的这个item进行返回,这样的话,它最终会得到一个新数组,我把这个新数组我给到这个list重新赋值也可以。是吧,这也是一种方案,它比较麻烦,我们直接啊,就是在这里面判断ID匹配之后,直接去修改原来数组里面的对应的这条数据的这个状态就可以了啊。好,这个返回值也不用给用,我们用不到它生成的这个新数组,那我们来测试一下啊,保存。浏览器来刷新。好,现在我改第一个啊,把它改成代办啊。
20:01
嗯,我已经点了,刚才但是。大家没有看到效果是吧,那我刷新一下,你看一下。是不是变成代办了,那为什么我点完之后这个列表它没有刷新呢?这个就是我们这个逻辑没有处理完对吧,你看我们这里只是发起的这个请求,还没有去判断我们请求的这个结果,然后重新去刷新数据,去弹出消息,对不对,我们把这个给加上。就可以了,来,再来看一下效果。啊,因为我们这个都是基于这个。啊木的这个数据,所以说呃,我们的列表呢,是基于这个model的,那当我们去更新完这个数据之后,一定要去重新去调用这个model啊,重新去刷新数据,重新去获取这个列表才可以。好吧,来这时候你再试就可以了,比如说完成,哎,修改已完成好,取消已取消,你再刷新它也不会变啊,因为有这个慕课帮我们去维维持这个状态数据的状态,比如说完成,包括还有提示消息都有啊。
21:00
好,那嗯。这个编辑就写完了。稍微给大家总结一下啊,首先是我们这边啊,这几个链接的一个处理,你要呃经过这个呃判断去呃返回这个不同的一个链接,对吧,那之后是要给这些链接呢,一个事件,事件呢,我们让他去呃传了一个ID过来,然后以及一个状态过来。呃,因为我们只有拿到对应的ID才能去修改那条数据,对吧?啊在这个方法里面呢。我们接收到了这个ID和状态,并且去调用这个,呃,Service里面的这个方法,Service里面这个方法去请求服务器把我们传的数据啊传给这个API,那在这个API就是我们的像类似于我们的后端,他会去处理我们的数据,并且反馈给我们结果,那在我们修改成功之后呢,要记得去刷新这个数据,才能拿到最新的一个。一个结果啊,我们把这个啊注释给补一补啊。这个是修改。
22:02
幅度状态。那这小节就到这里。
我来说两句