00:00
这个我们看一个。登录的这个呢,前台验证。这个前端验证呢,主要是对我们这些表单数据呢,进行一个基本的合法性验证啊。我们来做一下。嗯。首先我们的验证代码呢,需要去写在哪呢?看一下啊,需要写到的是我们当前不会去点击这个按钮嘛,对吧。点击这个button。对吧,点击发展的时候,最终它默认是不会提交表单呢,那我们可以在来看看,这不有个form吗。看到其实咱是这事咱做过parent对吧,等于你说想log。可以吧,那我这个是不是应该在我哪个里面递进去。是message里面第一个呀,对吧,上面这个是干嘛的。
01:08
是不是获取,应该说异步获取对吧,异步获取什么短信验证码是吧,验证码,但是真正我们还没做,我们只做了一个倒计时,对不对,下面这个是不是实现业务登录啊,你不登录,但现在我们也不真正去做登录,我们去做什么呢。呃,基本的表单数据的验证,也就是前台表单验证啊,这里面有个概念大家知道啊。那前台表现呢,这里面就涉及到一个问题,要收集数据啊,有一部分咱收集了,但有的数据咱还没收集。我们来一个个看一下,就实际上是看所有的input就行。啊,第一个input的是我们的手机号是不是已经收集了,第二个是我们的验证码没有收集哪一个。
02:03
Model写什么扣的,这个不能随便瞎写啊,一定要去看接口文档来,而这一个呢,需要去写在这里初始值那自然开始了,都是诶。空串,嗯,这个里面是什么?短信验证码,短信验证码没问题,好往下。下面这个。这个是我们的VGA model,这是什么?咱就别写tell了,因为它可能有好几种东西,对吧,这是我们的name吧,而且要一定要跟文档里,文档里面就写的name好。我把它写完PWD搞了,接着这一个。注意个model是什么呢,这开,那也就是说下面呢,我们这个地方啊,应该也有几个是吧。
03:08
先有一个。用户名它是name,不是user name,记住这个对应的是什么用户名啊,用户名密码有了capture。这个是什么?叫叫什么呢?也是验证码,叫图形验证码,其实现在还有别的验证码,一个滑块的验证码。对吧,甚至还有那种在一句话里面啊,有有有几个字是有颜色的啊,而且还有不同颜色,说把红色的字写出来。啊,这个都不算什么啊,最主要的是这这个图片里面哪些是些什么,我需要哪些东西啊,我需要的是把所有的水果都选中,我的天,你要没见过世面,估计你都选不出来,真的有的时候有的时候真是让人很无语的,那个那个是谁做的,就是淘宝做的,阿里他们跟做的。
04:15
特别悲催啊,有的时候想想快点买票,就是就是选不中,嗯,选了好几次都选错的,就感觉自己智商是有问题。我也不知道是谁想出这么以前没有这个的,以前最先最多也就我第一次看到那种,在一句话里面说了几个字输出来,我就觉得就已经挺难了。因为汉字嘛,尤其是要输汉字,这是梳起来挺麻烦的。你要输几个字母还好对吧,还有人要要你输汉字,我要有色盲,我还说不还看不出来。他看到那个图片选择那那那就已经到极限了,我感觉。啊。这是这个,那也就是说我们后面是不是要对这样一些数据进行什么,是不是检查呀,好,那来啊。
05:05
我们现在检查,但是呢,大家知道我们有两种登录方式,需要检查的字段是不太一样的,对不对,所以我一上来先干嘛,先判断区别开来,到底是什么样登录方式对不对,因为不同的方式呢,需要检查的字段不一样啊,来看哪个直圈叫logging way,如果是to说明是什么的呢?是不是短信登录对不对,否则是什么,这是密码登录对不对。是吧,密码登录,短信登录,我需要检查的是什么?还记得不,你有两个数据啊,一个是呃,我的手机号phone,还一个是短信验证码扣的是不?我直接取出来呗。先取出来再等会再去检查是吧,下面这一个了。
06:03
这个里面有几个有name用户名,当然有密码是不是。还有一个capture。对吧。OK,那下面去干嘛,一个一个检查呗,对不对,好手机号的检查,其实不仅要手机号,而且要是一个什么。正确的手机号,所以说我是曲折的。啊,当然手机号也要到时候要最后后面是不是要提交的呀。这个能懂吧,那你说什么意思,如果说。this.phone first。嗯。我是不是要提示什么,提示什么东西。是不是手机号不正确啊,手机号啊不正确啊,其实差不多就行啊,手机号不正确这个都不是绝对的,你只要让用户知道什么意思就行,对不对?好,我那个提示我先不写啊,我们先把这个条件先写好,L还有什么。
07:14
这个扣的扣的必须有值吧。对不对,他没值那就不行,来我来写一个啊,这我简单搞一下啊,也不管太复杂。啊,如果说你的短信验证码,你就必须要六位的数字,那也行。扔了吧,那就必须要什么。用正则了,懂意思不就是我已经认定了我的那个短信验证码必须是六位的数字,那就不是这么写,应该怎么写?来一个正则是吧,啊,以什么开头啊,六位数字开头与六位数字结尾是吧,一样的嘛。能不能点一下什么谁扣的吗?扣的不取出来了吗?接着。
08:04
是不是吃饭了?那道。啊好,那去完的话下面啊,在这里面我是不是要提示什么验证码啊,什么必须是是吧,六位数字啊,或者说验证码不正确也行,这个没关系,反正肯定是不对,对吧。好,那下面的是不是类似的搞法。能不下面就类似的处理嘛,这都没什么啊,这一次我就简单弄啊,就是如果他是不正确的,就是说什么啊,我就说用户名必须有,为什有不要求啊,用户名必须指定。啊,必须指定可以吧,啊,必须指定用户名,好还有什么。
09:00
把这个拿一下。一共有三个嘛,是吧,接着是这几个,他就是说什么密码必须指定是吧,用户名下面还有一个是开不起啊,那验证码啊,验证码必须指定是吧,为什么。好。下面啊,下面就是要去当进入这些提示,是不是显示个提示。显示提示啊,大家看到我们的效果。我们就是这样一个界面效果,那这个界面效果,也就是说我是不是要有一个这样一个专门用于提示的一个效果啊,这个效果呢,我们可以专门写成什么。组件或者是使用啊第三方的UI库,P说UI。可以吧,可以啊,像这种东西有可能你们公司已经写好了。
10:06
也没关系,写好了就按学号的用呗。啊,你说老师要没写好了,那你就自己写对吧?好,因为我们自己写的好多了,我们就现在假设一种特殊情况,哎,公司里面的这个组件写好了,看怎么用啊,公司里写好的组件和那个密UI的组件用法是一样,但是呢,要求更高一点,为什么?因为没有文档。能懂吧,说白了,你只要看懂那个组件代码,最后还要知道怎么用。这个难度要稍微大一点点。能懂我意思不,那个UIUI组件库,他对文档告诉你怎么用都有例子。对不对,好,那假设呢,我们现在啊,其实这个组件并不复杂啊,来打开我们的这一个课件,好,这里面呢,我已经写好了一个啊叫A就警告提示。这样一个组件,那我们直接用上看看怎么用啊,要看懂,看懂以后才能用来,这是一个一般的组件,对吧,一般的组件在component下面对吧?来,那我要干嘛呢?先创建一个文件夹。
11:17
接着在这个文件夹里面呢,去创建我的云右组件。对吧,接着呢,很简单,把这个里面啊的代码都拷贝过来,接着把它读懂。说白了,你要知道怎么用啊,样式和样式,其实的样式基本上你可以不用动,不用看,主要看一些东西,比如说我看一下这个首先要看的JS,这很关键,这里面能看出来我接收一个标签属性对吧,名字叫a text,实际上就是我要显示的文本。对吧,我是警告不有个提示文本吗?字符串类型。好了来接着它是不是有一个点有个按钮的。
12:00
能不能看到这个按钮,这不显示的文本吗?有个按钮,按钮里面是不是有个点击听。对不,这个点睛啊,去调用下面这一个方法,而这个方法干了个什么事啊,这叫分发一个事件,而相当于是分发制定事件。这不是view的制定世界吗?世界名叫什么?C就叫这个名字。能不能?好。啊,现在呢,我们大概看完了。看完了以后,下面呢,我们要用上它,对不对,要用上它,用它怎么用呢?来看我们的log。这里说一说啊,这个组件是不是有时候显示有时候隐藏啊,啊这是一个标签组件啊,就是这是个标签组件,来看这里我一上来哎,我先要引入是吧,先组键嘛,现在引入import。
13:05
At,什么,Keep from。啊,这是一个components下面的alot tip下面的alot tip对吧,下一步。是不是映射成标签呢?Components alo来什么?下面大家看啊,我在这个这个最外层里面,下面给它写上。能不能看到。是吧,而且得说他必须得传一个什么。加a lot text啊,我先不管它,我先查看看,随便查一下看一下这个能懂不先看一看嘛,你不看一下怎么行呢。哎,这不是我的。
14:01
有了吧,有了,那关键是我开始显示吗?不显示,但是有时候我后面是不是又会显示,说白了它是不是有一个显示隐藏的切换了,它要切他要变化的东西就两个,一个显示隐藏,一个就是它文本内容。对不对,所以说我这里面,我当前这个里面应该有什么呢。有两个状态数据对不对,一个我们称它为a text空串,它什么有值啊,这是干嘛呀,提示文本对不对,接着了。还有什么秀啊,A了可以不?能不懂啊,这个地方是一个破吧,应该开心的什么来这个地方显示啊,是否显示啊,提示框或者警告框都行啊。
15:06
没什么好来,下面这两个数据是不是都得传过来?对吧,但是这里面一旦传的话,这里面有什么。冒号动态的码。能不下面呢?还有一个。啊,什么V数或者v if都行,对吧,用微数吧,那我这里面是不是它呀。那现在还会显示吗?不会显示啊,对不对。能看到不,那下面要做的事情就其实很简单了。我要显示出来,也就说我点一下它要显示出来,其实很简单干嘛呢,是不是更新这两个词就行。那我比如说我现在啊,大家看着。怎么写等于什么?接着点A等于,这不就是这个吗?
16:09
是不是可以了,这个分支就可以了,下面的分支跟这个什么一样的,那我是不是可以整理一个含整理一个方法统一的方法去做啊。能懂吗?这里面下面每一个是不是都是执行这两条语句。懂意思不?你看我现在再去抽取一个方法。叫alert可以吗?可以,它变化的是什么?他不确定的就是什么。其实就一个东西,就这个,我跟你说,别人都确定你看嘛。拿过来。是吧,把这一个文本。搞一下是不是那下面呢。不很轻松了吗?This时间和not传手机号不正确。
17:08
看到了,那下面是不是调用这调用这个方法就可以。是不是船不同内容是不是可以了,也就是说下面三个啊,都是这样一个结构,这不是一个两个三个对不对,接着大家看着啊,选中一段。选择一个文本双击就行,别每次都是去去划拉划拉划半天。你没有看到。啊。来,先看能不能显示。走你诶没动静啊,这是这是我的吗。看报错了,是不是说a lot should a lot孩子什么已经哦,估计是不是名字什么名字冲突了对不对。
18:03
认懂吧,那我这个地方就写额的竖。可以吧了,是否显示嘛,而这个秀了更像一个动作,这个秀了,诶我们修了这个显示嘛,对吧,能看到吧,好,那有了有了它,那我这边是不是就用这个。看懂吧,我的这个状态是啊叫的。看一下啊。能不能解决这个问题?啊,这个不用管我还没完呢。有完了吗?哎,哦,我的这个下面都没有什么都没有改,就是这个这这个没改吧,就这一个。就这个美感对吧,因为我不抽取好了吗。
19:01
是不有没看到。是不是手机号不正确吗?好,现在我点确定完了没关要关闭对不对。这意思吧,我点确认的时候,我干了个什么事,我是不是向外啊分发了一个资金事件,那所以说我在罗这边啊,是不是得绑定一个监听。对不对。不是吧啊,他等于也叫这个名字拉倒是吧,可以吧,可以,那我这边我的message这边。是不得再去见一个对不对啊,再见一个他呗,其实要干的事情非常简单,他想我们干嘛去?把这个拿过来,把这个纸改为破,还有这个清空。对吧,啊,其实挺简单的,我们来看一下当前找你这不手机号不正确吗?那我就输手机号对不对。
20:05
啊,这样行吗?不行,你手下仍然不正确,你得输正确对不对?听见了吧?能不能看到啊,这个是比较简单的,这输验证码啊。这是几位啊?应该还不对,对吧,啊,这都对啊,没有问题啊,没有没有反应了,说明就是最好的反应是吧。好来下面这一个这。这个啊,我们去输啊,输一个这里面只要输了就行,对不对,你看输入密什么密码123,嗯,就是输什么。验证码必须指定啊,我随便指定A是不是可以了。现在我们并没有去比较它啊,这个这个现在比较不了,这个得发到后台才能比较,前台是不能直接比较的,你别看着好像看得对,你看得清楚,人说老师你这看的对,怎么前台能去比较吗?不能因为这个数据保存在后台了,后台后台去比较啊,这个要注意,我们现在只是做一些啊,简单的一些合法性验证啊,并不能并不能做实质的验证啊。
21:13
说白了,是为了减少不必要的请求。好,那我们到此为止,基本上我们一些界面效果就做完了。你说特别难吧?
我来说两句