00:02
啊啊。来啊,我们下面呢,主要是要去做登录注册相关的一些功能。这里面东西挺多的啊,因为东西比较多,所以我在这里面呢,给大家列了一下,大家看一下。就是我把功能呢,分为界面相关的一些效果,以及前后交互的功能。就前面这一些呢,都是跟后台交互的。就是纯前端的一些效果,有简单的,也有复杂一点的,我们来看一下。第一个呢,是我来看一下最终的这个啊打开,比如这里面有两种登录方式是吧,我们需要能够去进行什么,是不是点击切换。这是第一个,第二个是在我们的这个。短信登录这里要输入手机号。那输入手机号这里面呢,这个右侧这个右侧啊,大家获取验证码,现在什么意思。
01:06
是不是你不能点啊。对吧,那什么时候才能点呢。当然你要输一个正确的什么,是不是手机号以后才能点呢,那这里面啊,实际上是有一个什么呢,手机号的一个。合法性的一个检查吧,就格式检查这里面用正则以及要用到一些怎么样,也就是说为什么时候它这里面变量这个该怎么控制呢。是不是?检查手机号,这里面我们就做了一个简单的检查。比如说起始。第一位是不是一呀,一共多少位,11位数值。这是用正则呀,你光知道正则还不够啊,怎么样让它从暗变成一个黑色的字体?
02:00
这是第二个,就是这个手机号的检查,呃,下面一个啊,下面一个。我输入一个正确的手机号了。啊,我输了一个正头罩,现在我是不是可以点了。那我点了以后啊。大家看着这里面会有一个什么?是不是倒计时的效果,这个倒计时需要本身来说需要跟后台交互吗?不需要,但是这个实际上背后它是不是。向后台发了一个请求,发一条短信。嗯,这条短信呢,嗯,是我们后面交互的功能,现在可以不用管,它是交互的功能,现在我们仅仅是说前台的一些效果。这是一个下面。往这边。那这边呢,有一个密码的显示和隐藏,什么意思。你看这是个隐藏的密码,对吧,来走里。
03:00
对吧,要想显示隐藏密码本身不难,非常简单,主要这里面有一个动画。看到了吧,哎。这个显示隐藏密码怎么做啊?其实非常简单,就是用两个input。嗯,一个是一个是pass。听到不只能同时显示一个什么,是不是一个啊,如果我也就此时显示的是哪个pass word那个input,那我依然这么点呢。那就text。啊,基本上啊,就是这么一些,还有一个啊,还有一个。譬如说我就这么一点,你看。这也不需要,这里面有一个概念叫表单的前台验证。我现在根本没法请求。知道吧,就现在没有必要发请求嘛,因为我很明显知道这是你的那个手机号或者用户名,他根本没输嘛。
04:08
你发请求能成功吗?不可能嘛。你别浪费后台的资源了,对不对。这能弄吧啊,这里面有一个前台表单验证,这里面有个提示,这个呢是自己写的一个组件,当完全可以用me UI来做,这个不懂,收到短信能懂吗?啊在这里面完全可以用UI来做,我们就是看一下我们自己写组件该怎么写啊,到时候呢,我们也可以用me UI写一写。啊,这整个刚才我演示的这么几个啊,一共是几个来着五个,这五个是完全不跟后台交互的,我们先把这五个搞定。搞定了以后呢,再我们再去看前后台交互的功能,这个前后台交互的相关功能有这么。
05:03
六个。六个,第一个呢是动态一次性获取图形验证码。就这个这个其实并不难,大家不要想的特别复杂,其实挺简单的。啊,关于这里面有一个事情,我点的时候它会什么,是不是切换了啊。当然有的效果是不是右侧有一个,呃,旋转的一个按钮,我点一下它就变,做法是一个意思,只是加的事件的位置不一样,对不对。认懂吧,好,这是这一个。还有一个是动态的一次性验证码,哎,刚才我有一个一次性验证码,我看一下啊。看看能不能用啊是。858数一下。那个933。是六位的数字啊,六位的数字,那也就是说按正常情况下为点应该什么,是不是登录成功,这是我们称它为短信登录啊,来试一下。
06:08
是不是成功了?这个能不能弄好,还有一个什么呢,退迟登录,这个要发请求的啊,这个需要发请求,因为那个它是通过筛选的什么的啊,到时候再说点击诶这一个是用密写的。这个是用meet UI写的,其实啊刚才啊跟刚才那个很类似,其实都可以用meeti来做,好点一下确定就什么是不是退出了,这是一个,还有一个就是我们的密码登录,也就是说我在这里面输入一个用户名,比如三个A啊,输入一个密码123,嗯,接着F什么。是Q还是AQ是吧,VP对不对。看到吧啊,如果假设有人说老师我一下不出错了会怎么样呢?那肯定要提示我啊,对不对啊,这边我就不整了啊好点一下它走里它真是音怎么有问题,刚才是不是看错了,来再说一个KSKB可以吧,走。
07:18
是不是可以了。能看到现在是不是用户名登录的啊。好。还有一个事情大家需要去知道,我现在登录好了以后呢,我不退出登录,我关掉浏览器,我关掉浏览器,就是我关掉浏览器啊,我我其实可以完全都关掉啊,我就把它全部关掉了啊。我再去访问。再去法官,大家看现在实际上是一个登录,已经登录的一个效果,看到了吗?啊,大家你看切换到这里来能不能看到。这实际上实现了一个什么自动登录。那也就是说我们最终要能够去获取用户信息,实现什么呢?自动登录,其实这个咱在我们的RA项目里面是不是写过类似啊,很相似。
08:09
刚才退出登录,我们是不是也说过了,哎,这里面一共有这么六个。前后在交互的一些效果。所以说你不要小瞧一个注册登录,它实际上啊,如果你能把这个注册登录最终自己做出来,你后面也可以不用做了,差不多得了就可以了。对吧,只是说你用的更多了,你可能对这个技巧呢,更熟练一点。如果你确实前面写的很费劲啊,注册登录也写的很费劲,我建议你就把注册录好好写一写。都没什么太大问题,其实很多东西都类似的。当然,如果你可以的话,肯定是要多练一练啊,碰到的问题更多,你更加熟练一些。好,这里面呢,我们就把前面相关的一些,这里面要做的一些东西说明一下。
我来说两句