00:00
大家好,这节课我们来完成一下添加用户的功能啊,那在写这个功能之前呢,先把这个字改了吧,上节课忘了改了,把这个。表格的字段改一下。来找到定义字段的这里,在这。创建时间。接下来看一下添加的这个功能,那添加呢。嗯,我们一般会就是弹出来一个模态框进行添加啊,那如果说你要是跳转一个页面的话,然后添加完再返回回来就是页面来回刷新,那就说体验和操作都不是太好啊,所以我们这边也是用一个呃,点这个按钮,然后弹出来一个模态框,在模态框里面。啊,我们来完成我们的添加,嗯。啊,那这个模态框给大家说一下。我们想要的一个效果是什么样的呢?就是一个呃,模态框里面包含了一个表格,对吧,那我们第一想法肯定是我先准备一个。
01:09
啊,蒙太慌。然后再把模态框里面放一个表格进去,对不对,好。那我们来看一看怎么写啊,那肯定不是让我们自己去写啊,这种像这种比较成熟的东西,肯定有现成的组件可以用。先去这个找一找啊这里面。你找过之后,你会发现他没有啊,他只是提供了一些数据的录入啊布局。呃,数据的展示等等。然后呢,接着你会去这个。NT里面去找。嗯,NTD里面我们找的话呢。你在找这个,就是说你在找这个表单的时候啊,你会发现一个事情啊,就是。这边有一个。啊,弹出层中的表达。
02:01
对吧,就是这个。诶,我们点这个按钮,它能弹出来一个弹出层,并且还有这个表单对不对。啊。呃,大家在找这个form的时候,可能就会找到这个,但是这个。嗯,我们来看一下它的用法,它是和这个呃,Model进行结合。然后在这个model的on可里面,然后这事件里面就是说,嗯,做这个放表单的一个验证,嗯提就说。不是特别的好用,我感觉啊,当然也可以,大家也可以这么去用啊,这是一种用法,其实。呃,就是看大家主要是看什么呢,因为这个模态框。他自己带的有底下有两个按钮,一个取消一个啊这个按钮对吧,如果我们想要用这两个按钮来做这个表单的提交啊。做表单的这个提交。那么就得在这个。模态框的这个回调里面去做表单的一个验证啊,那如果我们不想要。
03:06
使用这两个按钮啊,想要使用form的自自己带的那个提交的按钮的话,其实完全就可以啊,不这么去写,我们就准备一个模态框,把表单放里面就可以了啊,类似于这种啊,这个我就没有用它。Form组件中的那个例子啊,比如说是我没有用form表单组件里面的这个例子。嗯,就是不用。模态框自带的这个按钮来进行提交,而是我先准备了一个模态框,然后我把底部给隐藏,就是那个底部帮它显示,接着我准备了一个表格,我是这么去用的啊,都可以啊,然后这两种方式都可以啊,那我们呃,就不使用这种方式,用这种方式。我怕大家用起来更乱,还没有,还没有这种方式清晰,这种方式就是先准备一个模态框,然后我们里面放表格而已,就像我们在一个新的页面去放一个表格一样,好,那我们一步一步来啊,呃,要准备模态框呢,我们就先找到。
04:01
模态框啊,在SPA里面叫模态框,这里面它叫对话框。找一找对话框。嗯,应该是。搜一下吧,对话框。啊,在这啊。啊,那么。我们直接拿个基础的就可以了啊。来基础的。就是我们要。这个按钮我们不用啊,按钮我们这边已经有了,对吧,我们只是要一个这个模态框就可以了。找到我们的代码。还谁?Pages。有啊。Index这里面我先把代码呢写到这里面。然后。再给大家进行优化啊,因为写到一个这里面的话,大家,嗯,比较比较这个好看,看着比较简单。
05:02
这些折叠一下啊,这些不用了,暂时。嗯,随便放一个地方啊,放到这个里面底下就可以来,我放到这底下。好,接着呢,这是一个模态框,那你用的话肯定得从NTD里面去把这个模态框给引入,引入这个模态框之后,呃,控制模态框的显示和隐藏是靠这个呃,Is,呃,Model visible去控制的,所以我们要把它给定义一下,而且它的值呢,会。呃,就是说来回的去,比如说改变啊,显示的时候它是true消,就说隐藏的时候,就是它是false的时候,它就隐藏,那么对于这样一个来回改变的一个值,而且还要让这个值的改变引起这个组件的一个一个渲染,对吧,那这时候我们把它定义成这个状态。定义成组件的状态是比较合适的好。接着是一个,呃,这个确认的一个回调,以及一个取消的一个回调啊,那确认的这个回调呢,我们不调,取消的这个回调我们需要,那为什么如果取消的回调你不要的话啊,就看这啊。
06:10
你这个点这个叉就没有反应了,我们虽然不要底部了,但是我们这个叉还是要要的清楚了吧。好。所以说我们要准备一下啊,这两个东西啊。来,我们来先给它,先把它给呃。设置成组件的一个,我们这个组件的一个状态啊,那这个表格也暂时不需要把它给折叠一下啊。好像。折叠不了。先这样吧。我们现在是去定一下这个状态啊。这个是函数式的组件,那函数式的组件你要定义状态就得用到H,我们来use state,接着light。
07:02
然后再来一个设置它的啊,如果感觉这个名字太长,我们可以。把这个名字给改一改啊,一开始是副不让它显示。Is model。好,就这样吧。嗯,那定义了它之后。诶,我们一开始给他设置的是false,然后在这个里面就是使用它。嗯。然后这边我看他有个什么提醒。嗯,他说他没有被改变,让我们用cost去去定义啊,那我们用这个cost。呃,接着是定义这么一个。呃,事件啊,那我们把它给改一改吧。嗯,改成model,这样看起来比较比较直观一些啊,包括这个也是啊,Is model VI啊。
08:08
变量我们定义定就是尽量定义的,我们看看见变量都知道是做什么的啊,还有函数名也是这样。那函数呢,我们就写自定义的函数,我们就写在这里啊。关闭模态框好,那在这里面关闭模态框就简单了啊,就是。把它给。改成for就可以了,对不对啊。啊,大家可能有疑问,那什么时候它是变成触是打开的模态框呢?那肯定是我们点击这个新建的时候去打开这个模态框啊,对不对,那我们一个个来先把这个关闭模态框这个给写了啊,我们调这个S。它然后把它设成false。
09:01
好,那既然有关闭,我们就有打开模态框对不对。啊,但是打开模态框呢,我们就换一个名字叫open。A form啊,就是打开添加的这个表单。嗯,或者叫create吧。Open credit。啊。打开添加表单。那打开添加表单,我就要把它给设成出,只有这个状态变为出了我们的模态框,它才会。呃,就是说显示对吧。啊,来看一下这个。它例子它也是这么去用的啊,先定义一个状态对不对。因为只有你状态的改变才会引起这个组件的渲染,才能控制它的显示和隐藏。啊,来,接着写我们的代码。
10:03
那我们这边定义了打开。啊,添加表单的这个。这个方法对吧,那要给谁调用呢?是我们在点这个新建的时候啊,给他一个on click。当cli。那不是沁戚,是安卡利克。啊。在就是我点击这个新建按钮的时候啊,我们给他一个安可利克事件啊,那就是触发open。Model,那这样的话,我们的表单就是说这个模态框就能显示了,先来看一看啊。好来添加是不是显示了啊,然后这个底部呢,我们不需要。因为我们在复制这个。就是在复制,在使用这个form组件的时候呢,Form组件它自己带的有这个重置和确定,所以这个题目我们不要。嗯,不要的话呢,我就把它给隐藏掉啊,你去看对话框的API有一个隐藏,底部的是一个特啊,把它等于no的时候就隐藏了啊。
11:08
接着来调整一下。我把它给换一下行,因为比较长了。嗯,加一个foot等于no啊,注意要加上这个大括号在写这个now啊,是G的表达式,你不要写成字符串了啊。然后标题给改了,标题是添加用户对吧?啊,那这个点击取消的时候会close,就是关闭这个model。然后就是里面的这些内容,我们先看看效果啊。来新建是不是底部没了,那我们只要把这里面的内容其实换成换成这个表单就可以了,对不对。哎,就是换成我们的pro啊,你要是就是说的话,它会自己会带一个这么一个按钮,一个重置一个提交的一个按钮啊,我们来找一个啊,找一个类似的。
12:11
嗯,自己写也行,其实啊。就看这个吧。啊,这个也行,就写就用这个吧。因为有一些,呃,他的一些这个。表单项啊,你不是太清楚,不太清楚的时候,你就可能会去看一下这两个手册。添加用户,我们来看看这个,先看看我们的APIAPI文档,我们添加用户的时候都需要呃什么字段,然后来去准备我们的表单,对吧。那需要一个name,一个email,一个这个。Password。包括我们这个例子啊,大家可以看到就这三个就可以了,是吧,所以我们准备一下这这三个字段啊,那。
13:01
先准备。我们直接把这个复制过来吧。先把这个给引入进来,那这个内容不要了,等会写我们的。来这里啊,嗯,Text是我们需要的,那这个select的呢和这个我们不需要,我们现在只需要这个输入框就可以了啊。接着来使用这个platform啊,你自己去写的话,因为它很多属性是一些比较重要的属性,你还得去翻API去写,我们还是直接去这里面去复制啊。好到这。那我我尽可能的是不是一次性给大家复制完了,大家看的,嗯,看不出来,我是一点一点复制啊,那我们现在先准备的这个对吧?啊,我们说过了这个unfinish的是表单验证通过之后,它会执行里面的这个事件,对不对,好。这个我就先给它删掉啊。嗯。先这么着吧。
14:06
这个也不要了。Y流的需要啊,就先这样啊。我们就先简单的去谈一个消息,就是当表单验证通过,先简单谈一个消息啊。好,那这个字段呢,这个字段如果你看API的时候,它会告诉你,这是我们在初始化这个表单的值的时候使用的,一般是在做编辑的时候去用,也就我们配置了这个字段之后,那这个值就会按照对应的这个name给填充上,就像它上面这里面的这个情况给填充上,那我们添加的话肯定是不需要,我们做编辑时候可能会需要这个字段,对不对,所以呢,这个就不要了,Pass掉。啊,那其实也就好像就是用到了这一个属性,其他的也用不着了,嗯,接着来准备。我们的这个perform tax啊。之前给大家说过,它相当于是form.item加input。
15:01
清楚了吧,所以我们需要表单验证的话,也是直接写到这里面的啊,有一个它有一个rules啊。来,再给大家找一找吧。你如果看一下这个东西的话啊,在这里说它相当于perform item加input对不对。啊,这里面如果你找API找不到的话。那么你就去这里面NTD里面去找。找谁呢?嗯,找这个父母。来找一找。应该是在这一块吧。好,这呢phone表单啊。Form里面你去找APIAPI找谁找到form的item的API往下继续找啊这个啊。啊,要这么去看,所以这这两个文档有时候结合起来看,确实比较绕啊,因为我们使用的这个pro,它是。
16:00
Form item加input产物。所以说我们要看它的一些用法的话,你要去看这个form item,那form item这里面肯定是没有的,你只只能去哪看,只能去NT里面去找到这个form item去看,然后你会看到它会有一个比如说rules,就是我们校验规则对吧。啊,能我们表单要加些验证就可以在这,包括他这里用到这些属性啊,Label啊,还有这个place hold,你都可以在这里找到。好,那我们就不看了啊,只是告诉大家一下怎么去找这个手册啊。来接下来改一改啊宽度。嗯,宽度我们不写,不写宽度的话,它就是呃,百分百的嘛。然后是我们字段的名字name。我们应该是有一个好像也是内幕嘛,啊,这个得确定确定一下啊,啊是内幕你要跟这个API对应上,他要什么我们给什么啊。接着是。呃,昵称啊,说明也要把它改改,Label是昵称。
17:03
然后这个是。提示文字啊,提示文字。看看提示文字,它是。在哪个地方显示的。应该是看这里啊。能找这个地方吧。Atom。有一个tips。找这个form啊,看一下它这个属性。提示信息啊。这这这呢,配置提示信息啊啊。啊,这个我们不用要。请输入昵称,这个留着,然后我们再给它加一个rules,就是验证规则啊。
18:02
Rules,看一下它的使用方法。在这。呃,是一个数组啊,数组里面配我们的验证规则。然后点这里可以看具体验证事例啊,我们写一个数字。然后里面写我们的,呃,这个属性。来看一下示例吧。点开一下。呃,就是开始写数组里面,你看它是一个数组,数组里面呢,就是一条一条的验证规则,每一条的验证规则呢,就开始写你的这个呃规则,以及你的这个提醒的这个消息啊,就是这么去用。嗯,当然往下还有它所有能用的一些规则。要去API里面去找。你要找那个rules的一个规则,我想一下应该是。看看在哪?直接搜啊有点。
19:02
这上面还是刚才这里啊,点这个rules就可以看到他所有的一个可支持的验证规则啊,我来自己写一下吧,首先我们来定义第一条验证规则啊。先把数组定好。第一条验证规则。I。Required出就是你必填message。当你如果不甜的时候,我就会告诉你。嗯,请输入昵称,昵称好。我们先写一个pro,先看一看效果。打开诶是不是有了,请输入昵称,当我提交的时候,因为我没有填,他就会告诉我请输入昵称啊。然后我输入的话就可以提交了。啊,提交了,就是验证通过,我又点了提交的时候。诶,我给大家点一下吧,就会提交成功,提交成功是刚才给大家说过是走了这个form的finish这个方法啊。
20:04
嗯,我尽可能的少写一些属性,让就是说大家看起来比较比较简单。那这个就写完了,接着写下一个邮箱。啊,我们只是做了一个简单的必填的一个验证,然后也没有做一个长度的一个验证啊,你要想要验证长度的话呢,就在这个。这个API里面去看有一个max和这个命啊。嗯,接着来写啊,写我们的这个邮箱。把这个改了,邮箱是name是email。邮箱。请输入。邮箱。那这个hold。和我们的验证规则一样就行,邮箱呢,我还得再加一条规则啊,再加一条什么规则呢啊,Tap就是你要验证的类型是这个email啊。啊,应该是个字符串type email。
21:03
嗯,邮箱格式不正确,嗯,这个是在哪看这个是在还是这个手册里面,这有一个type吗?Type它目前常就是支持的类型。啊,有这个比如说啊email等等啊更多的你可以参考此处,这个就会打到打开这个github啊,这个之前给大家说过,好,现在我们的邮箱就有了,对吧。然后假如我输了,邮箱格式不对的话,邮箱格式不正确,那接着来处理我们的另外一条。密码啊,那密码这个就不要了。而且密码最小应该是六位,所以我们加一个面应该是六。嗯,密码最小六位。这个应该是,请输入密码。把这个也给改了。
22:01
密码字段名啊,就是我们的name表单的name password啊,这样的话我们来看看效果。那密码是有了对吧。而且必须得就是说六维以上,但是现在有问题啊,密码这是铭文的,我们需要的是密文的一个效果,对不对啊,这时候我们就得从这个perform text里面去点点password,哎,使用它的这个password组件,就它里面的这个password组件,这种用法其实在react中是比较常见的啊,就是它一个组件,它就包含它其他的一个子组件。这时候我们再来看密码,就是密文的了,是不是好点,这里还可以切换显示和隐藏,嗯。
我来说两句