00:00
那基本上。嗯,表单我们就准备好了啊,接下来。就是把数据。给收集起来,收集起来之后。我们请求这个添加用户的API,把用户给添加上啊好。嗯,来。先看一下我们的数据在哪,数据呢,是被这个unfinish的回调函数里面的这个value会给收集到啊,只有一个参数,这个括号我就不写了。所以我们把这个Y6。啊,发送一个,就是说发送请求把那个value带到。啊,传给这个API就可以了啊,来我们来写一下啊,我们尽可能的就是不在这个里面去写方法,我们把我们的方法呢,还是嗯,写到一块啊。写到这里来。一个。
01:00
啊,User。它会接收一个value value参数,嗯。把这个注释写一下啊。添加用户。增加用户。那这个value这个参数呢,就是。呃,表单输入的数据啊,表单数据。那这个方法让谁来调用呢?让这个unfinished啊,给这个。给他啊,把它作为回调函数给到他。那这里我们就这个就不写了,而是直接写这个函数啊,同时把这个values。给传上啊。嗯,这个是一个一个一个简,就是说那个箭头函数的一个简写方式啊,这个大家不要搞懵啊。
02:00
嗯。那接下来我们先打印一下我们的这个Y6啊,啊,就是在这里。当他完成的时候,它自己会调用这个函数,它调用这个函数的时候,它会把它数据的这个呃,Y6啊给传给我们这个函数,那我们这个函数里面就可以接收到这个Y6。来打印一下看看就知道了。打开。把它给折叠,把它给清空,是不是有个报错看看。啊,没有保存的可能是之前的啊。来我们来写个昵称,嗯,1234啊,写个写四个S4邮箱随便。写一个啊好。密码六位以上提交是不是拿到我们的一个数据了,对吧,收集到了表单数据之后,而且是验证成功之后才会收集了,如果你的验证不通过的话,这边点提交不让提交的。
03:07
啊,所以用这个去写我们的后台管理,用这个NTD啊,Nt pro加这NTD写我们的后台管理非常快的,我们要用传统的那种方式去写这个表单验证还是比较费事的。那拿到数据之后就好办了。我们把这个数据。诶。请求这个地址,同时把这个数据带过来就可以了,对不对啊,之前说过我们所有和服务端交互的啊,这个API相关的都放到。Service里面是吧,那我们还写到user里面,因为它就是用户相关的嘛。来,接着写exp。Function ATP user。嗯,这里呢。A user要接收一个要接收你表单传过来的参数,对吧。
04:02
好,把这个注释写一写,添加用户,添加用户。呃,添加用户是一个post请求啊,大家也可以看手册去确认一下post,然后地址呢,就是ad me。大家会发现,诶,我这个获取用户列表,这也是DMI,那我这个添加用户也是DMI,那为什么可以这样,因为它请求方式不一样,这个是get请求,这个是post请求啊。啊,包括有的请求要带这种参数怎么怎么样的啊,这是很。很常见的一个API的一个方式,也是我们经常说的那个,嗯,Rest for API这种风格啊。稍微提一下,那接下来。我们既然要把参数给传给这个。传给这个这个地址对吧?啊,它所以它有第二个参数能接收我们的参数啊,还是先给大家写完整版啊,是这样的,它有一个pas参数,我们把我们的这个结果就是我们的参数给到他pars这个参数就行啊,最后它最终它是一个对象嘛,但是因为我们这个名字一样的就可以简写,所以哎请这样就可以了。
05:14
好。那我们来这边定义好之后呢,就要去这边去使用对吧。添加用户。嗯,在这里去使用,那使用的时候呢,要从这个里面去把它给导入进来,才能使用这个方法。嗯,在这里我来执行添加用户。嗯,发送请求添加用户啊,调用这个方法把values给传过来啊,这样。嗯,是可以。完成,但是不够完善,我们把它的状态给判断一下啊,是添加成功啊还是失败对吧,然后成功之后我们给他弹窗提醒对不对,这样才比较比较完善啊,那所以呢,我们就得等它的一个执行结果。
06:07
你既然要等它的这个执行结果,因为它是异步,所以怎么办,还是要借助这个A。然后是这个cost,我们来定一个response,哎,服务器的响应结果,然后加上A,这样的话我们就可以去判断这个结果了啊。还是哎,我们只要判断它的这个状态码就行,他只要。就是说只有他是出现了这个错误的情况下,它才会有这个有这个状态码啊。是这个response的,如果正常的响应200的话,它就不会有这个数据给大家也也看到过,如果他正常的就是说成功啊,你服务器,除非你返回的数据就是你服务器返回的数据,要么就是说啊这个。就是你如果是成功的情况下啊,成功的情况下你服务器返回的是什么。
07:00
这个结果就是什么,清楚了吧,如果出现了这个错误,或者说出现了异常,出现了报错等等等等,那么。他就会把错误信息给描述在这里,并且会有一个状态码啊,这个结果呢,大家可以自己去打印啊,所以我们就判断它。啊,等等于按底的就可以了,就是如果它不存在,那说明添加成功了呗,那我们来一个message success添加成功。对吧。好,那否则的话是不是就添加失败了。啊,其实添加失败的话,你不提醒也行,为什么说不提醒也行呢?因为我们在那个request拦截器里面已经做了一层提醒了,添加失败,嗯。好。那这个呢,先给大家看一下,看一下之后,等会儿我就再给大家说啊,我们就把这个添加失败的时候就不提醒了。
08:01
来,我们来执行一下啊。小信一下吧先。现在。嗯,有这七个人来随便添加一个,添加一个CCC。C c.com。密码。来提交添加成功是吧,好。添加成功,然后我们的后续逻辑是不是还没处理,我们得关闭模态框,并且让表格的数据。重新渲染一下啊,因为你看现现在表格还是这七条没有动,对不对。啊,还在我们手动刷新,那肯定不行的,因为表格它有一个属性是可以让这个表格程序渲染的,首先看数据是成功的,看到了吧,好,那这是成功的情况下,那再给大家说一下,为什么说我说失败的时候不用提醒呢?因为失败的时候我们那个request的拦截器里面已经给他。加上一个提醒消息了,你看已经做了一些拦截和处理了啊,所以说。这时候如果失败的话,提醒的话,他就会比较。呃,就是说比较多啊,就会有两条消息,那比如我故意把这个地址改错,还是按照这么来啊,还故意改错地址。
09:07
我们来。再来添加一个。啊,这个无所谓了,随便选吧,因为反正地址都是错的。来你看它就会两个,一个是我们的拦截器,再一个是我们这边的一个判断。看到了吧,啊,所以说呢啊,那我们代码如果想精简一点呢,失败的时候就不用写就行啊,因为这边只有一个提醒消息,所以说这个大括号你也可以不写这么一行就可以对吧,那我们之前。这边风禁这边是不是也有一个同样的一个判断,对吧,那我们也把它给整成一行好。接着呃,获取数据这边我们就没做判断啊。因为你拿到数据就展示了,拿不到数据就不显示呗,这个无所谓的。那。这个出苏我就关掉了。添加用户啊,接着我们来处理一下后续的一个逻辑。
10:01
呃,还是要写到这个括号里面,因为我们只有添加成功了才关闭模态框,关闭模态框。失败的话,我们就还是让他在那停着先,先不做处理嘛。那关闭门带框呢,就要靠这个啊,塞椅子。就是set model variable啊,把它设置成false,这样模态框就关闭了,接着你还得刷新表格的数据,其实我们应该在关闭模态框之前去刷新表格的数据,对吧?刷新表格数据。那表格的数据怎么刷新呢?不知道怎么写的是吧,那怎么办?写不下去了,写不下去看手册呀,首先想想我们用的什么表格pro对不对?来pro找一找手册。Pro找这个高级表格。嗯,先看这个例子有没有你需要的,没有的话就直接翻啊翻到哪呢?直接在这点吧,点到这个API。
11:01
那我们来看一看啊,API你找找你会发现一个这个X ref。它就是我们表格的一个引用,便于自定义出发。啊,我们知道这个ref就相当于我们给这个表格啊,定义了一个啊,这个起了一个别名,对吧,我们就可以用它去,呃,用这个。啊,GS的语法我们自己去触发表格的一些行为,对不对,但是都能触发哪些行为不清楚啊,那你先复制它在这个页面搜,看看有没有对应的例子来。其实你往上一找就找着了,看这里啊,有时候要手动触发table的reload,就是刷新等操作可以使用它啊,这个里面直接就告诉我们了,是不是好。节俭用法藻它是怎么用的?它是绑定了一个ref,那这个ref是哪来的?那是我们这边使用柚子if创建的,对吧。嗯,接着它的可用的一些方法,比如说if current re,就是刷新,那我们是不是就要这个刷新的操作就可以了。
12:03
对不对。来我们看看这个if,看看我们自己的代码在哪呢?啊,实际上我们之前在写表格的时候也定义了,看一下我们的表格,我们绑定的这个XF是不是这个它对吧,它是我们在哪定义的呢?在最上面定义的。对不对啊,不是给大家写上啊表格的ref引用啊。Ref便于自定义,嗯,操作表格。好,也就是说我们通过这个ref就可以去操作这个表格的刷新,对吧,那找到我们的添加用户这里在。添加成功之后,我们是要刷新表格,刷新表格是不是可以使用它,然后current.reload。是不是是个方法啊,看一下这个手册是个方法。啊好,所以说当你碰到写不下去的东西的时候。
13:00
一定要去借助这个文档,大家一定要养成这个看文档的这个习惯,以及看文档的这个能力。好,要学会如何去找到我们需要的东西啊。那这个写完了是吧,刷新表格了,而且也关闭模态框了,来测试一下,再来加一条。这个先在这啊。添加一个ddd。D d.com密码六位以上来提交,关闭模态框,刷新表格是不是有了?这样才是一个完整的一个添加用户的一个功能啊。大家在写一个功能的时候,一定要。把这个所有能考虑到,所有能想到的地方都给考虑到,都给想到,然后都给写好了,那我们忽略掉的一些地方其实就是bug。我们在写东西的时候,一定要把自己去站在,站在这个用户的角度,站在使用者的一个角度去考虑,就是假如你来使用这个功能。
14:02
你会怎么去做,怎么样去好一点。啊,你希望就是说这个功能是什么样的啊,一定要有一个换位思考的这么一个角度啊,这么一个思想。好,那添加功能我们就写到这里。再回过头来看一下代码,其实还是有可以优化的地方啊。我们来看一下啊。我们现在是把。呃,这个。添加用户的这这个代码都写到了这个列表里面,对吧,在这里。啊,因为我们现在这个功能呢,啊,只有两三个字段,所以比较少,但是如果有一个表单,哎,我们的字段特别长,有一二十个的话,那。然后再加上,比如说我们还要有编辑的功能,如果都写到这一个文件里面的话,那这个文件的代码会显得特别特别的大啊,会特别特别多,我们维护起来特别的麻烦,对吧,我们一定要有一种组件化的一种思想啊,像比如说我们这个添加,它完全就可以抽成啊,独立成一个组件,对不对,那我们所有添加相关的功能都在那个组件中去完成。
15:08
而我们的这个列表啊,就是在这个列表里面只需要做什么事,他只需要控制我们的这个组件的显示和这个组件的隐藏就够了。对不对,那所有的这个啊,验证相关的表单呢,以及这个提交处理数据啊等等等等都是谁的事都是。添加这个组件,他要做的一个事是不是这样的好。那接下来我们来处理一下啊。在处理之前,哎,我们好像发现了一个问题,什么问题呢?就是之前我添加了一个啊D这个人对吧,那后来我要想点新建的时候,诶,这个数据还在这,这是不应该的啊,我们应该呃,添加完成的时候,模态光关闭的时候,应该把这些都清空。对吧,好,那这也是一个问题,所以我们先把这个问题给解决一下。这个问题呢啊,比较好解决啊,那既然是谁的问题,那肯定是模态框的问题对吧,那我们直接去找模态框的手册嘛,来找一找。
16:06
对话框的这个手册,嗯,直接去翻到这个API,然后看属性找看看看到这啊。关闭是销毁model里个子元素,这样的话,我们关闭的时候销毁,我们打开的时候,它再重新给我们创立子元素,是不是就相当于一个清空的一个操作了,好,我们把它给加上啊。那就加到这个模态框这里啊,让它等于处啊,注意是这个变量处啊,不要写成字符串,这时候我们再来测试一下啊。好,它重新刷新了,那他重新刷新之后,这个内容肯定就没了,是不是来我们再添加一个E啊e at e com密码随便输来提交。啊,它关闭了,关闭了之后呢。关闭了之后呢,我们下面接着来点新建,可以看到,诶没有了,那这个问题也解决了,好接下来继续优化,刚才我们说的问题,我们要把这个添加呢,给独立成一个组件啊,不要把代码都写到一块儿。
17:05
呃,按照就是nt pro它的推荐,如果是和这个呃,User这个组件相关的一些子组件的话,我们在这个里面去建一个components目录啊。好在这个components目录里面去放我们的啊组件啊,那这时候我们来新建一个。来新建一个非这个C要大写,因为它就是一个单个的一个组件了啊。点GS叉啊。嗯,这里面我们先写一个RC,写一个函数式组件的一个,呃,基本的一个结构啊,然后。把这个内容一一替换,那我们这个里面的话。啊,实际上就是返回一个模态框,那我们把这个整个模态框。就给拿过去。
18:00
这里啊,整个模态框给拿过去。把那个div给替换掉,把整个模态框拿过来,接着我们看缺什么我们就就写什么啊。首先是当表单验证通过之后,去创建这个用户。对吧,然后刚才我在粘贴的时候呢,大家可能发现上面包括这个啊,Perform啊,以及这个以及这个model都自动帮我引入了啊,那这是这个编辑的问题,如果你的编辑器没有自动帮你引入,一定要手动去引入我们这边需要的这个model啊,以及这个pro text。清楚了吧,这里要强调一下啊,因为我们,呃,你们用的编辑器可能和我不一样啊,Web STEM,它会自动帮我们引入这个东西。好,接下来看缺什么创建用户的方法,我们把它给拿过来对不对,来找到。啊,创建用户的方法。添加用户,就是他是不是来直接剪切。粘贴到,嗯,还是放到这里面吧,好吧。
19:02
那接着看看还少什么?少一个关闭目录的一个方法。以及这个控制model显示和隐藏的。那这个。我为什么不在这去定义呢?嗯,就是说控制它的显示和隐藏,我为什么不在这里面去定义呢?我们要知道是谁在控制它的显示和隐藏,是我们在这个列表页,我们是让它显示对吧,所以说那这个。状态我们应该放到谁?放到副组件里面去维护,通过purpose传给这个子组件。明白了吗?我们你如果把这个状态你在这个子组件里面去定义,那么就是外面我们这个列表里面,我们就很难去来操作这个子组件的一个显示隐藏啊,当然有办法比较麻烦,所以这个状态的话,我们就交给。还是让他来维护。首先看一看啊,那控制模态框显示和隐藏的状态在副组件里,我们就暂定为它是副组件啊,那操作这个状态的方法也在父组件,想让子组件能使用,是不是得通过pop把这个啊操作状态的方法以及状态传给这个子组件,是这样的吧?啊但是我们来看一看,看什么问题呢,就是说。
20:15
这个关闭模态框和打开这个表单,实际上他们都是在操作这个状态而已,一个是这个false,一个是处,对不对,那它俩是不是可以合成一个方法。啊,那我们把它合成一个方法啊,那就是控制模态框。显示和隐藏。好。那这个方法名我们就改一改,哎,就是is修model好,那我们得需要,呃,这个就得需要去接收参数了啊,因为把我们把两个方法去合成一个,你是显示你就给我传出,你是隐藏你就给我传false。
21:00
那我们来一个参数结束一下啊,我们定一个就定一个修吧,默认给它个默认值,让它等于。啊,或者说不给默认值也行,那我们就必须得传这个秀。接着我们把它给放到这里面,哎,你传给我什么,我给你设置成什么这个状态,好,那接下来状态在这,操作状态的方法在这,我们是不是得把它传给这个子组件考对不对,那现在我们这里面还没有去使用这个子组件,我们把这个子组件给。来引入进来import。C。From啊,当前目录下的components啊里面的。啊。嗯,来使用这个组件,诶还放到这个位置就可以了啊,那我们要传。几个方法。一个是。直接复制吧,啊,这个有点长,Is model visible。
22:06
哎,等于它那。再传一个状态传过去了,我们再传一个操作状态的方法啊,Is秀model,嗯,就是我们的is秀model。只把这个方法传过去啊就可以了啊,不要不要加括号上的执行,我们可以在子组件里面去来执行父组件的这个方法是不是这样的啊。嗯,那接下来呢。就是在子组件里面,哎,我们使用父组件传过来的这个状态就是它啊,那呃,父组件传给子组件是不是可以用这个purpose给接收到purpose。那我提前,嗯。把它给。结构好啊,Cost is。
23:00
意思诶,我让他从purpose面去结构出来。然后还有我们的操作状态的这个方法啊,也让它解构出来,因为下面有很多地方都要用。对吧,好,那这个an council。那我就不再去呃执行这个方法了,而是执行副组件里面的这个方法,并且我传给他一个false,这意思我就要就是要关闭这个状态。清楚吧,啊,那接着来改一下我们子组件里面来打开。就是说点新建打开这个表单的时候,那我们这个要改成哎,Is show model传个出哎,让它显示啊,在这个列表里面,我们点这个新建,让模态框显示啊,并且我们把这个状态和操作状态的方法都传给了子组件,在主组件里面点取消的时候,它就会关闭啊,去调用副组件的这个方法。
24:00
然后传了一个副,就会把这个is。Model的这个属性给修改成first,它就关闭了,好,我们来试一下,看看效果。嗯,这个啊,这个地址。来现在新建啊,报错看看啊。有一个地方我们写错了啊,来改一下,哪地方呢,就是。在create里面,我们给这个取消事件的时候,就说我们点击这个模态光的取消这个按钮的时候,让它关闭,对吧,它应该是给一个回调函数,我们不能直接把这个函数就放到这,因为这样放到这儿的话,它一挂载它就执行了,对不对?哎,我们来给一个回调函数。啊,这样。好,那接下来再来刷新看一看啊,把这个清空掉。好来新建,哎,这就可以了,对吧,那刚才的,呃,那个问题。就是我们容易比较犯的一个问题啊啊,这里再给大家稍微强调一下,就是一个回调,就是一个事件。
25:02
呃,就是说有些属性它要接收的是一些回调函数,那回调函数如果我们想要给他去传函数的话呢。你要么你是这个函数里面你返回了,返回了一个函数,所以可以直接用,要么你就直接这边你定一个回调函数,然后在这个回调函数里面去调用这个函数,那实际上完整的状态是是这样的,对吧?那只不过这个大括号就一行代码,没必要写了,把它给删掉就可以。清楚了吧,啊,这块是一个细节要注意,那现在我们已经诶把功能都给独立到这个组件里面了,哎,那状态呢,都是由副组件传过来的,操作状态的方法也是副组件传过来的,好接下来看一下还少什么,就是我们在添加成功之后。关闭模态框,那肯定不能这样去关闭了,应该调副组件传过来的这个方法去关闭,是这样的吧,接着刷新表格数据。这个就刷不了了是吧,没有它啊,所以我们要把这个表格这个。
26:04
它的这个引用啊,也要给传过来,来再传一个啊。把它也给传过来好,那个这里的话,同样的把它也从purpose里面给解构出来,这样的话就可以去刷新表格数据,并且关闭模态框啊。嗯,看一下还有没有缺少的东西,应该是没有了。好,接着回到我们这里看一下有没有。用不到的一些东西啊。嗯,这里啊,字段里面,字段里面好像。啊,有一个编辑,编辑的话,我们下节课再写,这个先不用管。接着往上涨啊,那这些项不用的就给它删掉啊。包括这个模态框也用不着了啊啊。嗯。我们来测试一下啊,添加一个用户。来刷新一下。防止它出问题。
27:00
呃,E,我们再加个F啊。F。f.com来,现在提交。诶,添加成功,并且表格也刷新了,数据也有了啊,我们再点新建,并且内容也清空了啊,那这样的话,我们的添加才是真正的完成了啊,把它给独立成一个组件。这样的。这样就是说独立成组建以后呢,我们这个列表里面的代码就不会显得特别的多啊,那这小件先到这里。
我来说两句