00:00
大家好,在上一节课我们完成了数据共享的功能,让这个列表的一个数据啊,在列表中和这个头部都能共享去使用。嗯,这里块我们继续完成一个功能,就是添加的功能,在我们点击这个新建的时候,弹出来一个模态框,然后模态框里面我们可以输入这个标题,并且点击这个提交,能在这里面去增加一条这个。这个数据啊。好,首先我们一步一步来,首先来。把这个模态框我们给,哎把它给整合上,那模态框呢,我们去NT里面去找它的这个。有一个模态框啊,对话框在这儿。啊,我们直接使用这个最基本的就可以啊,然后最基本的这个里面的内容,我们再给它换成表单就行了啊来看一下它的代码。嗯。应该就是这个样子啊,一个模态框,然后我们再引入这个model,最后还有一个变量去控制它的显示和关闭。找到我们的代码。
01:01
Src。Pages。然后是。这个我们的todo啊,写到这里面。把模态框放到这里面。那可以看到这些标红的都是我们要去嗯,处理的一个事件,对吧。好,再来看看我们的这个。要求啊,有一个重置一个提交,也就是说我们是不需要这个模态框的一个一个底部。嗯,我先给大家把模态框线给整出来,我们再看啊,那这个OK。就是点击确定执行这个事件,我们不要点击取消的话,我们让它关闭,然后先把这个模态框给引入啊。从an TD里面来引入这个对话框。之后。嗯,看一下啊。还有少一个这个东西啊,那这个呢,我们把它给定义成状态,因为状态的话。
02:01
啊,就可以,诶控制我们的这个显示和隐藏就是状态,因为为什么要定义状态呢?状态的更新它就会引起逐渐存渲染,那就能控制它的这个。嗯,就是说能让它重新渲染,然后就能让它来显示和隐藏,我们来定义一个状态。看前面啊,已经又了state,那我们把它给使用上。呃,状态的话,我定义到最上面啊一个。和一个set,我们就直接用这个变量吧。来定一个设置的一个方法等于use state。一开始的话,我们给个false,让它默认是关闭状态好。嗯。那想想。就是说如果我们去点击一个按钮,把它改成了处,那这个组件诶,重新渲染之后,它这里变成了处,它是不是就会显示了啊。那接着我们把这个方法也给取消掉,也给写上啊。
03:03
这个是当我们点击取消的时候触发的一个事件。嗯,写到这里吧。好。横轴等于它是一个函数啊。先把它给写上啊,就是点击模态框,点击。模态框关闭的事件。好,我们一步一步来那。首先我们模态框已经准备好了,事件准备好了,现在我们要做的是点击一个按钮,让它的值改为触,它是不是就显示了,那改谁呢?是点谁呢?是点这个button对不对?所以我们给他一个顶级事件啊,On click。然后是。嗯,秀。修form嘛,因为我们这里面要去创建就是一个form表单嘛,那么就定一个修form的一个方法。
04:03
打开添加表单的事件事件好,Cost修form啊,等于减同函数。然后我们在这里面调用这个set。然后。呃,把它的这个值呢,给设为初。呃,下面我们来试一下,就是我们点击这个新建的时候,会触发这个事件,这个事件里面会把这个的状态给就是把它的状态给设为处,当它的状态发生改变的时候,那这里用到它的地方,嗯,就会这个组件就会从渲染嘛,那这里就会显示模态框,我先看看模态框能不能出来,来点击新建模态框是有了,对吧?那接下来我们来对这个模态框进行一些呃整改,那那顺便说一下,刚才我们写的这个方法系统中的,比如说现在你看我点它没有反应对不对,那实际上这个就是当我们点击这个取消啊,或者点击它的时候触发的一个事件,那我点击取消。
05:06
实际上就是要关闭模态框对不对?所以我再把这个值设为false,我们先把这个问题解决了,False好,再回过头来看。那这样的话啊,我点取消能关闭,点这个插件能关闭对不对,我们来对比一下,那这里是不需要这个底部的,那这两个按钮是我们就是说表单自带的那个提交和重置就可以了,那我们不让那个底部显示,你去看的话,看它的API有一个是隐藏底部的叫foot。啊,这foot给成now的话,就可以不显示这个底部,那我们把这个属性给上啊。呃,找到这里我们再来给它一个啊foot特foot压等于no啊,注意你不要给成字符串啊,一定要是这个,呃,这个now。这个GS的这个呢,不是字符串啊。好,这时候你再来看的话。嗯,就没有了这个底部对吧,我们把这个标题改了这个是。呃,添加待办事项啊在这啊抬头。
06:04
添加待办事项。好,这个内容呢,你就不要了,我们要把它换成表单相关的一个内容是不是好,现在是一个空的模态框,那表单呢,继续使用pro。Components里面的高级表单。先不用看它其实就是对platform,就是对和那个我们用的这个表格一样,就是对NTD这里面的这个form进行的一个更高的,呃,就是说呃,进行了又又一层封装啊,然后直接找个DEMO去使用就可以了。我先使用啊NTD里面的这个form给大家去看一下啊form表单,然后我们随便找一个例子。啊,比如说是。这样的一个例子啊,我们要使用这个form input啊等等,都要从这个int里面去引入,先把它引进来。先试一下原生的啊,就是NTD里面的,我们再使用里面的。
07:02
呃,在ant这里面,我们把它给把这个form给引入进来,然后。啊这些啊,先放这吧之后。我们把这个。它的这个下面的这个使用form的使用给粘进来。好,站到这里面。嗯,然后看一下啊。把一些不用的先给删掉啊,比如说这个。啊,包括这个绑定的这个,包括他的这个完成的一个执行的一个方法。然后他的这个删掉。嗯,应该没问题,我们来看看效果。这里啊,刷新一下。呃,有什么东西没有引入。8TEN啊,这里已经引入过了,那刚才是复制多了,把这个删掉,大家看一下。
08:03
嗯,应该还有报错。这个方法没有。没有的话,那我直接不要了,这个。啊,这个也不用了。啊,只留一个输入框和三个按钮。啊,只想让大家尽快的看一下效果。这个方法也没有。这个reet。以及这个on全都删掉。好来点击新建啊,是不是我们这个框就有了啊,包括。这个啊,我们提交的时候会进行一个表单的一个验证,对吧。那这个我们就不要了,然后。比如说label绑定的这个名字啊,我们换成是。呃,代办事项。再办十项好,内幕就是,嗯,我的todo就可以了。
09:03
啊,接下来这个是提交。然后这个是重置好这样两个按钮。那这个我们使用的是这种,嗯,原生的对吧。那我们如果要使用啊,不是说原生的是使用的是NTD里面的这个表单,对吧,那如果我们要使用这个。看一下啊。它只是在这个原来的父母的基础上增加了一些,呃,更多的一个东西啊,所以说我们直接使用它的话呢,也是可以的,比如说。啊,那我要使用的话,肯定要先引入对不对,来引入一下port,嗯,Pro。啊,要从这个platform里面去引入啊,那甚至我可以把。这个form去换成per,我们的结果都是一样的。清楚了吧,看一下啊。是不是一样的。提交也是一样的啊。
10:00
啊,这个大家可能发现了,你看这里有一个,这里也有一个,对不对,好,那这是这两个,因为挨在一起的,肯定是我们自己写的那个,那下面这两个呢,就是。我们的per他自己带的,所以说per是对原来的这个form。就说嗯。进行了一层封装嘛,就更加好用,所以那这个我们就可以不要了。对吧,好。来,再来看一下。就是pro,它自己就带了这两个按钮,提交和重置。清楚了吧,那接下来我们再来优化一下,那既然我们使用了per,那这个form我们就不用了,对吧,那form item我也不要了,但是不要了我们写什么呢?你如果直接写这个input,你会发现啊,我们的这个比如说字段的这个名字呀,以及这个表单的验证啊,都没了啊给大家看看效果。好,来新建就是这样的一个效果比较丑对不对,这时候怎么办?你如果去看perform的这个手册,找到它这个表单项啊,往下找找找找啊。有一个。Pro text,看它是与这个input相同的,然后我们来搜一搜这个pro tax啊。
11:06
Pro tax实际上就是form item加隐的产物。也就是说,Pro t就等于。呃,原来的呃,Item加加这样的一个一个写法对不对,所以我们直接使用perform text就可以了啊先把这个撤销,也就是说我们如果直接使用这个perform tax。那么它是等同于谁呢?等同于它俩的对吧,所以我们直接写它就可以了,那它这些属性我们就可以直接给到这个text。清楚了吧啊,然后给个斜杠结出就可以,因为它就等于了这个item加这个input,那这个我们就不要了,对吧,但是它现在标红了,说明我们在引入,那既然是per相关的东西,这个也不要啊,因为我们在这已经自闭合了,那既然是pro相关的东西,是不是就得从pro里面去引入,好注意后面这是一个分别暴露啊,这些记不住都没关系,你看手册都可以了。
12:01
那现在我们来看看这个效果是不是和我们刚才。那个效果一样。是不是有代办事项,包括表单验证都有了,对不对,那这就是呃的一个使用啊,接下来呢,我们再把这个它的相关的属性给完善一下啊。那这个内幕我们就暂时不用了。我们主要用它几个属性呢,其实。嗯,主要用它一个属性,就是当我们点击这个。提交的时候,我们的数据提交到哪啊,主要用到这个那个重置,它是给我们已经写好的,对吧,就是我们点击这个提交,我们提交到哪里,对不对,这时候你去看这个。找他的API。嗯,Form的API有一个unfinished,就是我们提交表单并数据验证通过后执行一个回调对吧?所以我们给上一个呃,这样一个unfin就可以了,然后让他去执行我们自己的一个方法。啊,比如说我们这个方法就叫。嗯,Handle而已。
13:01
Handle啊,处理我们的这个。Form表单,来,我们写一下这个方法啊。呃,表单。验证通过后。哎,执行的方法。就是提交表单啊,提交表单,并且表单验证通过后执行的一个方法啊,看我把这个写上。写箭头函数,好,那我们在这里面去写一个。啊,这个。变量。这个打错了,是调成写成F吧。哎,写一个变量来打印一下,看我们能不能接收表单提交的这个就是我们输入的这个内容啊logo,那你这里既然要接收的话,这里是不是我们得传过来,你如果这么直接传的话,肯定不行,那这个函数直接执行了是不是对吧?那怎么办?它是一个回调函数,回调函数我们就把它给写成回调函数的形式。
14:07
诶,然后回调函数。就是当这个回调函数触发的时候,我们执行的是这个函数对吧?好,那回调函数呢,它有一个Y6,哎,就是它收集到表单的数据,我们把这个Y6传给我们的这个函数。清楚了吧,那箭头函数嘛,我们这个都可以简写,因为只有一个参数啊,只有一个返回值,只有一个参数就可以简写,最终就写成了这样的一个形式啊,那这个是FM,刚才我们改了一个字母对吧。那这个注意啊,它是接收一个回调函数,好,这时候我们在这里打印一下我们表达的值,看能不能接收到。就是这个unfinish是我们用的最多的这个form的一个属性啊,我们用到其他的再去手册里面去看,现在先解决我们的问题就行了。来刷新一下。呃,新建啊,现在我不输入提交不了,然后我输了内容之后还可以重置,那我输入个AA,我提交是不是输到了这个图do AAA对吧?那前面的这个名字就是我们这边定义的这个name啊,那这个它对应的V6就是我们在这个里面输入这个值,所以通过这个代码大家可以看到了,如果我们使用NT去开发我们项目,真的是特别的省事,表单验证不用我们去操心,对吧,那数据的这个收集啊,表单数据收集也不用我们操心,直接就这一个方法全部帮我们处理好了,都在这个维度里面,而且是验证通过之后才提交。
15:25
对不对,好,那我们能拿到这个输入的这个值之后,我们就可以开始去执行添加,对不对,好在这里面我们既然能拿到这个值了,就开始写我们添加的方法啊,执行添加。啊。同样的啊,我们没有后端的API,那么我们要执行添加,还是要使用Mo去模拟我们这个添加的一个。一个数据啊。呃,我们先把这个梦给写一下,找到我们的图do。来默认暴露的一个,然后我们再来一个添加,我们一般使用post post API定义我们的地址,然后是。
16:10
嗯,Do。冒号。在这里面就开始写我们的添加的逻辑,嗯。如果之前呃,大家有好好看到这个墨的话,它不仅是可以直接去返回这个数据,还可以去呃写我们自定义的一个逻辑对吧,那我们来呃再看一下手册给大家去。啊,确认一下,比如说木口和链条找一下。啊,在这里啊,你看我们可以自定义自己的函数,就是一个方法,然后他能收到这个IQ和res,好,那这个IQ呢,就是我们请求提交过来的一些数据,那通过这个res呢,我们可以返回呃,这一些数据给这个。呃,请求我们这个API的这个,呃地方清楚了吧,嗯,也就是我们要在这里面去添加。Todo对吧,但是添加todo我们想一想,因为我们现在全是基于模拟数据添加todo,我们是要在这个数组里面去添加,对不对,所以这个数组我们如果定义到这的话,这边我们就不太好添加,那么把这个数组给给提出去啊呃,给一个变量吧,就是to度,呃,List。
17:16
啊,就直接定义成list也行啊,List然后在上面我们来定一下这个啊变量啊,用let list,那为啥用let呢?因为后面我们要对它的数据进行更改,如果用Co进行常量就不好更改了啊,那我们在这里面就是给这个list去增加这个数据。就可以了,是这样的吧。那这里呢,嗯,我先不写。我先打印一下这个IEQ,我看看我们从IEQ哪个地方能获取到我们提交过来的数据,好,这个API木回去先写到这,那接下来去写我们的。嗯。我们再定义一个。添加todo的一个方法来直接复制一下。
18:05
添加todo list啊,那这个就叫ad吧,啊,不写那么多了,然后就是API的话,肯定是请求,刚才我们定义的这里对不对,这个API to do。嗯,这个。先看一下这里,这里是post对吧,那所以这个我们就不能request,直接request,我们要request post,使用它的post方式去请求这个API,接下来。我们既然是一个添加操作,我们得把表单啊,把这个表单里我们输入这个内容给提交过去是不是。啊,那也就是说我们这个方法你执行添加的时候,你必须得接收到这个P参数parliament。好,我们来打印一下这个。来浏览器中看一下啊。现在我们来新建输入一个AAA提交,可以看到有两个输出,一个是我们index,一个是todo啊,那你们先把这个index这里面的给它删掉,这样的话就只留这一个了,对吧?啊,这个我们确定可以看到参数是肯定能传过来的,那那当然能传过来,我们这里只是掉了一个函数啊,这个值传过来,那肯定能接收到,对吧?然后令大家比较好奇的是这个地方为什么没有输出。
19:16
啊,那我们来先验证一下我们这个请求到底有没有请求到这里来,怎么验证,那既然是看请求,肯定是看network,来,我们把这个点开新建传入个bbb,好,请求确实是过来了,而且是posts,而且是2.0,并且给我们返回的也OK,对不对,但是我们看conslo还是bbb,还是这个图do打印呢,对吧,那这里为什么不能打印呢?这给大家稍微解释一下,我们这个慕JS就说慕它模拟的这个数据的时候,它有点类似于属于后端的一个一个东西,所以你在这里输出你是你是看不到的啊,你不可以把它想象成是一个,呃服务端对吧,服务端输出的东西你在浏览器端你能看,你能看到肯定不行啊。是不是?所以我们在这里打印,你是输出不出来的啊,我们就把它给给删掉啊,但是。
20:01
呃,我们确实有时候想知道怎么去拿到我们传过来的参数,对吧,那现在我们还没有传,那我们先把这个他给给传一下啊。但是这个参数要怎么传过来呢?啊,当然大家可能想到了,我去看手册就是看这个。嗯。五米G4里面找到这个。呃,不是这个是五米TS啊,找到它的这个插件,然后看它的这个request,然后再去它的这个,呃。呃,比如说get up去找它对应的一个使用啊,这是一种方式啊,大家可以也可以这么去做。嗯,比如说你去它这个里面,你就可以看到它每个方法需要传怎么传参数啊,然后你还可以怎么去做呢,直接嗯,就说CTRL加左键点到这个post里面,你点的时候呢,会进入到啊这样一个TS的文件,它会告诉你啊第一个参数URL,然后第二个是options options,呃,接收的是这么一个类型,我们再去这个类型里面看看它定义的有这么些类型,对吧,大家可以看到,诶有这个date,有这apartment,那实际上我们是posts的请求,Post请求,我们传的这个数据应该是放到这个请求题里面对吧?那所以啊,它应该是这个date的参数,他们是一般是我们在做一些这个。
21:15
啊查询啊,或者说是这种get请求说用用多一些,那POS请求我们一般就是直接给data就可以了,所以看完这个类型之后,大家知道怎么传了,对吧,而且上面还有。嗯,这个介绍你看data是post的数据对不对,你像这个S是query传的一些参数啊,所以这个呃,Typescript还是比较好用的,在我们去使用的时候呢,可以很方便的给我们进行一个类型的一个提示啊。啊,那这个我们就知道了,我们要传一个什么,首先open是一个对象,那我们要把呃,这个date里面这个数据就是我们POS的请求嘛,我把这个我们接收到的数据给到date这个参数。对不对,好,是不是这样的,那我们来稍微做一个优化啊,比如说我们把这个URL给提取出去,抗的URL等于诶我们的这个URL,哎,这这个我们就直接写UR就行了,那我们把这个UR放到上面,那cost option,我们把这个options呢也给提出去,就是一个对象,对吧,那这个我们直接就写option就可以了,Options那这个就是我们的啊,Date冒号。
22:18
Parents对不对啊,如果还想再做精简呢,那这个我们就不叫parents,我们就叫date date冒号date,那这个就可以简写,是不是最终我们的结果就是这样的了啊之后。我们现在通过这个options。呃,就说参数。传给了这个请求对吧,那我们这里面应该是能接收接收到传的这个参数,但是怎么看的,之前给大家说过,这个目前是有点类似于就是运行在后端的,你没法打一面输出的,你看不到对吧?嗯,如果大家真的想看呢,我也给大家去输出一下啊,比如说。呃,因为我们是POS请求,它是放到了这个请求的包题里面,对吧?所以我们从这个re EQ点包里面是可以拿到我们请求参数的,对不对?好,但是它是一个对象,对象的话,我们这个end这里只能返回字数上,所以这里我先给大家转一下,让大家看一下杰点呃去百,然后Iq.body好,我们先看效果,我再给大家解释我为什么知道是呃RA,就是IQ里面的body是可以拿到这个数据来保存。
23:20
回过头来刷新。好,先看我们的cons,我们来添加一个,呃,DDB来提交cons里面我们的个todo,呃,这个service里面是可以拿到这个数据的,对吧?好,接着看我们的network network呢,是我们的这个post,你看post请求。2000提交成功了,我们主要是看看这个孟虎给我们返回的这个数据。看到了吧,你看我们用post去请求这个地址,然后他给我们返回的数据,这个是原始数据,是字符串,对不对啊,因为我这边如果不给大家转字符串,那这个方法会报错啊,但我这个是pro预览之后就是一个数据说明我们表单提交的数据确实是在这个IQ点包里面,对吧,那怎么去看呢?其实你去。
24:02
嗯,找我们的这个文档啊,At pro的这个文档,去找它的这个。啊木可和链条,然后。刚才给大家说过了,如果我们要自定义是吧,可以是使用这个方式,对不对,他也告诉我们了,这些API,你去参考谁参考这个一个plus啊,四版本以上,他就会告诉你这个IEQ能怎么用,I能怎么用。清楚了吧,所以大家还要去看这个一个盘四的一个文档啊。嗯,随便。找一个吧,去他官网嘛,然后。来到这个express的这个官网之后,我们直接去看API参考啊,API参考之后刚好这些是这的版本,找谁直接就看request,我们主要是看这个请求里面有什么吗?然后继续看啊,比如说这种get请求在IQ里面,我我们可以通过这个apartments获取这个apartment参数,对不对,那我们直接呃就找api.post直接搜来post,好,这里给我们举例了,你看就是说API,就说如果是一个post请求的话,我们可以在req里面的这个body里面是拿到我们提交的这个参数的啊兄弟们,嗯,这个的话是文档不太好找,因为这里他只是说提了一句,在这里提了一句说,呃,具体的API参考这个嘛,嗯。
25:11
嗯,所以说嗯,大家记下就好了。那我们继续啊,那这里我既然能拿到这个数据了,也就是说IQ.body就是我们提交过来的一个数据。好。我们提交过来的一个数据啊,给大家写上注释,但是这个数据比较简单啊,就是一个。我们的一个字符串啊好。嗯,实际上呢,我们看看我们的数据需要什么,需要ID,需要stay对不对,哎,那我们。就得去。定义一下我们的这个数据了啊,Item我们添加的这一项等于什么呢?ID我们让它等于。List点认识啊加一。哦,因为ID我们不是从零开始的。
26:02
嗯,加一就可以了啊,加一的话进行七个加个,加一就是八个就可以了啊,那接着是我们的title title的话,其实上就是我们这个Iq.body。嗯,里面的点。Todo。是吧,把这个图do给拿到就可以了啊。接着我们的这个state。啊,默认我们零率行了,你新添加的一个肯定是呃,代办的对不对,好,那现在有了一个item之后,我们就把它给放到这个数组的最后就可以了,是不是。但是我们呃没有做排序,如果加到最后的话,它就会在页面的这个呃后面,就是我们的这个,先把这个关了,就会在我们的这个页面后面,我们想让他新加的在前面的话,我们就把新增的这项数据放到前面,对吧,那我们就让这个list。List。啊,Shift我们的STEM给它追加进去。呃,现在我们先不做任何返回,我们先看一下试试能不能来完成我们的这个添加。
27:06
把这个清了。来新建一个AAA,好,来提交。嗯。数据呢,现在不确定啊,有可能是过去了,有可能没过去,但是我们的这个列表。对吧,列表呢,数据没有改变。对不对,这时候我们也没办法去验证。那说明什么问题?就是当我们这个有数据添加完成之后,我们得让这个列表重新刷新清楚了吧,但是我们这个列表数据是谁控制的,是不是model里面控制的好,那我们。找到添加这里,你在添加成功之后,你要干什么刷新。To do list。对吧,好怎么刷新,是不是使用这个dispatch。就是purpose里面的。应该有有引入吧,看一下有没有引入。之前在。
28:01
在这里写的时候。嗯,没有引入啊,没有引入dispa,那我们就直接从purpose里面去获取吧,Purpose点,呃。太。好太。Todo里面的get。To do。List是这个名字吧,不确定的话我们去看一下,找一下这个model。啊,Model在这啊,看看我们的todo model啊,是这个方法get todo list,我们重新调用一下这个方法,它就会重新请求数据吗?对不对,那这个时候我们就知道我们的数据到底有没有加进去。回到这个index来,就是这个方法,那第二个参数,呃,Pay漏的话就给一个nova,我们暂时先不传参数啊,添加成功之后,嗯,刷新todo list,好,这时候我们来看一下这个效果啊。刷新。嗯,因为我是手动刷新的,所以这个数据就有了,对吧,但是没有做到这种自动,你看我们现在自动去添加一个添加一个bbb提交。
29:06
好bbb是不是就有了啊,那我们的这一块,哎,就这个就是刷新了,因为一开始我们没有写这一块的代码的时候,它就没有,对吧,我们在添加一个CCCC。来提交,是不是CC又有了好也,而且是代办那。这个新建我们就写完了,但其实还有优化的地方,怎么来优化呢?比如说。我们怎么知道有没有添加成功,你就确保你这行代码肯定没问题对不对,所所以说我们得从服务器去拿到服务器返回的一个结果是吧,比如说res。哎,等于它返回的结果,但是。嗯。我们的这个添加它是一个网络请求,它会有一个延迟啊,相当于一个异步啊,我们怎么解决异步的,还记得吗?使用这个ay think,然后配合这个a wait,哎,这样呢,变变成一个同步的一个状态,那这时候我们可以判断这个re里面的这个状态嘛。
30:00
清楚吧,那如果状态码给我们返回的啊,是啊,比如说是201啊,就是创建我们一般用这个201嘛,那么我们就认为它添加成功了,好把它给。添加成功我们才去刷新对吧,否则的话呢,我们就给他一个提醒。EL啊,否则的话就给一个提醒,那添加成功我们应该给一个提醒,哎,我们使用什么提醒,就使用A的message吧,啊message啊,从这个A里面引入啊,我这样回车前面就自己帮我引入了啊,没有引入的话,你自己手动去引。message.success添加成功,那消息呢,我也不写了,我就从res里面去获取A,好。啊,如果是失败的话呢,那我就叫一个error,也是返回失败的一个消息,好,那现在我们又用到了啊,这个is里面的就是说。
31:03
执行结果的一个啊,还用到了这个添加结果的,就说请求结果的一个message,那这些东西哪来,那是不是得在我们的Mo里面,就是我们执行完添加,你不要直接。啊,Res,这个N就是。呃,直接结束掉啊,我们应该返回什么。那我们把那个数值写写啊,这个是我们添加速度,接着应该是呃,返回添加结果是吧,就是告诉他们有没有添加成功或者添加失败添加结果啊好注意啊,我们这里这个是网络请求啊,你a d bad这里面是不是发起的网络请求,你看,所以说那请求的这个结果呢,我们应该是在这个Mo里面去去返回对应的一个结果,所以这边我们就能捕获到这个结果来决定,嗯,是显示成功还是显示失败对不对,所以我们要改的是这个Mo啊。那我们把这个啊定义一个res啊,等于一个对象吧,对象里面有一个state啊,比如说是201,刚才我们约定的添加成功们用201是不是,然后一个message好添加。
32:11
啊,代办事项总工啊,给个叹号啊,最后。呃,其他的就不给了吧,这两个就够了,那最后我们把这个消息给发送出去,那我们这时候使用一个什么方法呢?使用这个send啊send来发送。嗯,Send呢是可以直接,呃,就是扔入这个这个接的,之前给大家说的那个,就是他一开始带的那个end嘛,就是is摁它是只支持字符串的啊,这些都可以在这个一那个官网里面去看的啊,之前只是带大家去看了它请求的一个参数,大家还是可以去看一个响应的一个参数啊。嗯,就是去去参考这里吧,再给大家看一遍,这个也不是特别费时间,我们看他的这个官网,你找他的API,然后是在他的response里面可以看到它的,比如说send的方法,以及它的这个摁的方法,就是他们分别返回的这个数据的类型,都可以在这去看啊。
33:09
好,那这个稍微过一下。这样我们返回了这个消息啊,那其实啊,不在这定义也行。直接这样写吧,好,这个时候这边就能接收到我们返回的这个消息啊,返回的这个服务器返回的这个消息嘛,我来判断状态来测试一下。如果是201,我们就认为它是成功,如果呃不是201,就是可能就失败了。添加一个啊CCC,嗯,写个AA吧。来提交是不是添加成功,而且AA也有了,对吧?嗯,然后我们再刷新还是有的,大家可能有疑问啊,那个我们之前添加的那三个都没了,那个是因为。我去修改了这个Mo,我修改了Mo之后,他又重新给我,给我就是说相当于初始化了一遍这个慕嘛,就你不改这里面代码的话,你再刷新它还是有的看看。这A还在的对不对,一旦你去改了这个东西,比如说随便去,呃,加一个换行啥的,你再刷新。
34:04
它就没了啊,它就会相当于就是说你动了这个,呃,默默里面的这个代码,它就会重新给你刷新啊,重新给你初始化一遍,好,那我们的这个添加。就写完了啊,看一下还有什么地方能优化的没有。呃,把这个打印都给关了吧,嗯。然后不行,然后data。URL。然后是我们的从头开始捋吧,从头刚好把大家这个流程给大家捋一遍,大家可能有点懵啊,稍微我们做一个总结。呃,首先是在这个表单里面,我们指定了这个on finish给他的一个回调函数,这样的话,当表单的这个验证通过之后,我们会收集到它的数据,并且会触发这个回调函数,我们把收集到的表单的数据传给这个回调函数,啊在这个回调函数里面,诶,我们调用了一个ADB的一个方法,那AD这个方法呢,是从这个。Service todo里面去获取的对不对,好。
35:00
嗯,这个方法啊,因为是一个网络请求,呃,会存在这个异步,所以下面我们还要用到这个数据,所以我们使用这个a think维的方式来处理一个异步的问题,要不然你就在这个在后面写这个点Z啊,因为它返回的是个promise嘛,然后使用这个练习操作啊,我还是比较习惯使用使用这种方式啊,大家自己看习惯啊,然后接着下面我们先不看啊,我们先看看,当我们调用这个方法发起这个请求,这个方法干了什么,就是我们的service里面这个ad方法,首先有一个参数,能接收到我们这边传递过来的表单提交的一个参数,对不对,那这个参数呢?我们在这里发送一个post的请求啊,请求这个地址,然后把我们就说表单传过来,这个参数给放到他的option里面去,呃。在我们请求的时候一块儿去啊,发送给这个地址啊。呃,关于这个request这些参数啊,大家不太清楚的话,你看这里面的这个,呃类型的题型也行,你去看get up的文档也可以啊,这个文档上的东西我就就不多说了。好,当我们发送了这个请求,并且带上了我们表单提交的参数之后,那这个地址,因为我们是用默可模拟的对吧,那在这个里面我们就定义了一个POS的方式来来处理我们的这一个请求,然后怎么去获取到表单提交的一个数据呢?我们通过看这个plus的手册啊,就这里看这个1PLUS手册我们知道啊,然后在这个IQ就是post请求提交过来的数据,我们可以在这个。
36:23
IQ的这个body里面去获取到对吧,那我们去拿这个图do字段给他设置这个title,同样的我们还得去处理一下这个ID,再处理一下这个状态。是不是好,最后我们把我们我们封装好的这个数据给添加到list的前面,你看使用这个啊shift好,最后我们返回添加的一个结果,那我们返回的这个结果呢,最终会被发送请求的这边啊,就是发起请求的这里,它会等待到这个结果,我们来判断,如果是201,我们就刷新啊,使用这个model去刷新todo list啊,这个是model的命名空间,这是我们调这个命名空间里面的哪个方法。在刷新完todo list之后,我们记得谈一个创提醒,那当然如果不是201的时候就失败的时候,我们谈一个错误的一个提醒,这就是整个的一个流程,稍微给大家总结一下啊,那我们的这个添加就已经写完了,包括这个表单验证什么都是有的啊。
37:14
好,那这小节先到这里。
我来说两句