day12/上午/231-尚硅谷-尚融宝-注册页面前端代码说明

好，那现在我们的目标是什么呢？我们的目标呢，是啊，在这个地方啊，刚才验证码应该录到这儿是不是啊，录到这儿啊，然后在这个地方应该输入什么呀，手机号。好，然后输入完手机号之后呢，在这个地方呢，我们点击获取验证码就可以了啊，所以现在呢，我们要做的呢，就是在这个位置呢啊，为这个获取验证码的添加功能，那现在假设说这个前端页面已经摆在这儿了，就让你做这个功能，你应该从哪入手呢？首先要找到这个按钮所在的页面在哪，那我们看到呢，这边呢，就是register啊，如果是register的话，我们就会想象得到了，那一定有一个页面。它呢是放在pages下的，然后呢，叫做特点voe啊，也有可能有一个页面，它是放在pages下的，但是呢，这个页面呢，又放在了目录下，对吧，然后这个目录下呢，有个index.lee啊，根据我们现在学的这样的一个内容，了解到的一个情况就是这两种情况都有可能有，那么我们呢，就要上前端的页面当中去找一找有哪个有哪个我们就肯定就定位到哪个就可以了，所以呢我们来找一下。

嗯，在S2SET里面，我们要找到pages pages里面呢，正好有一个register.le对吧？那所以这个呢，就是我们的注册页了，好我们双击把它打开，打开之后呢，我们啊要找什么呢？要找这个获取验证码这个按钮，所以一般情况下我的方式呢，就是直接CTRLF了获取验证码好搜一下直接定位到这个按钮，好这个按钮呢。实际上啊，对于大家来说，我已经给大家做了极大的一个前端的简化工作，很多的内容呢，都给大家写好了啊，所以呢，这个获取验证码呢，它啊绑定了一个事件叫S，然后呢，它啊有一个啊就是。

这个叫做三顶啊三顶，那很显然三顶如果。没有3D的话，对吧，3D是从字面意义上理解的话，就是我们定义的是已发送对吧？啊已发送或者是发送中，是不是这个验证码正在发送中，那如果没有在发送状态中的话，也就是说言外之意就没发呢哈，那么我们就显示这个获取验证码按钮，如果已经是发送中了的话，那么大家看下面有个else，我们呢，就把这个按钮隐藏掉，然后这块呢，就显示，比如说60秒后重发啊，那一般情况下我们啊在。呃，互联网上去发送验证码的时候，也都是这样的一个场景，对不对啊，它会直接发送完了之后，直接就把这个按钮禁用掉啊，然后给你出现一个倒计时，当倒计时结束的时候，你才能发第二个验证码，所以这块的一个呃，实现的方案就是这样了啊，所以大家可以在这个地方去了解一下这个前端的这样的一些实现方案啊，好，然后接下来呢，上面这块一个input就是我们的手机号码的录入的地方了，它绑定到了user in for.mobile这个数据模型当中，好，然后再往上就是我们注册用户的类型了，一个呢是投资用户，一个呢是啊，借款用户，那所以呢，我们把它就绑定到这个user info user type这个里面啊，那这块呢，它type是个radio，就说明它是一个单选。

按钮啊，单选按钮，如果我们两个单选按钮的v model是一样的话，那就说明这两个单选按钮它俩是一组的啊，它俩是互斥的啊，如果一个值是一，一个值是二的话，那么当你选择我要投资的时候，那么这个user type的值就是一了，当你选择我要借钱的时候，那么user in for.user type的值就是二了，所以这个是单选按钮的一个使用哈，好，然后再接下来呢，就是往后这边呢，还有一个输入验证码的一个文本框。

这输入验证码的文本框呢，它是绑定的user in for.code的，然后再往下还有一个呃，密码框，这密码框呢，它是绑定到user in for.password的啊，然后再往下它有一个查看协议啊，查看协议，查看协议这块呢，大家看它这块呢，有一个叫做。呃，复选框的是吧？啊，你复选框你可以去勾它，然后再接下来呢，这面呢，就有一个下一步，呃下一步呢，这块我们是注册到了一个register这样的一个方法当中啊，所以这个就是整个页面已经帮大家实现好的内容了，当然后面这块还有一个第二步，这个叫第二步啊，第二步这块呢，有一个叫恭喜您注册成功，好，那么很显然刚才我们一直看的这个注册表单就是第一步叫step等于一啊叫VF step1的时候它就显示第一步VF。

啊，Step等于二的时候，它就显示第二步啊，这些简单的内容，希望大家能看懂哈，然后这块呢，就是如果注册成功了，就在这个地方直接显示用户当前的，其实相当于手机号了，也相当于他的目前为止的一个用户名了啊然后接下来呢，再往后。这面呢，就是事先给大家定义好的一些成员，这块呢，就是step等于一啊，是注册步骤，注册步骤啊，就是刚才不有第一步和第二步嘛，这块呢，就user info，那前提呢，我们先初始化一个user type，为什么要初始化它呢？因为我们想让这个user type呢，它有一个默认值啊，它默认值呢，叫我要投资就默认值呢，想让它等于一，也就是说默认情况下呢，这个我要投资是被选中的啊。

所以呢，在下面这个地方。我们就看到了这个有色他一，然后三点，就是刚才那个发送验证码那个按钮，最开始我们看到的啊，他的状态呢是false，就是发送验证码还没有发，所以我们再来看一下这款，那如果还没发的话，就显示获取验证码，下面这个就暂时不显示，一会发了的，一旦发了的话，我们肯定就会重置它的值，然后呢，它就不显示，它就显示出来对不对，所以呢，这个是三点，然后是倒计时的时间，我们发验证码的时候呢，有一个倒计时时间啊，还有个剩余时间，这两个为什么都要定义一下呢？因为方便我们在页面当中做显示，做处理，好那这块呢，是我们data的定义，再往后呢，就是methods啊，Methods里面定义了1233个啊方法都是空方法，当然了，也都给大家定义好，我们在里面看内容就行了，所以呢，现在我们这个前端页面对于我们来说难度还是降低了的哈，啊，不用我们自己去创建。

页面了，也不用我们自己去创建内容啊，绑定事件都不用了，大家只要在这里面做完形填空就可以了，好吧，啊，然后接下来呢，我们就来看一看刚才我们最开始收到的这个3D哈，获取验证码，那就是这个sin的方法了，那现在我们经过我们的分析呢，我们肯定首先要实现这个sin的方法，嗯，好，那所以接下来呢，我们就来看一看这个sin的方法如何去具体的去实现发送短信啊。