day12/上午/232-尚硅谷-尚融宝-发送验证码的前端调用实现

好，那对于你来说的话呢，啊，做这个发送短信刚开始的时候，你可能不可能像我想的啊，就是这么全面一点啊好，那么怎么做呢，你就能想到哪做到哪，那我发短信我最主要的目的是什么，我是不是就是向后台发起接口调用啊。那就是向这个接口发起调用啊，那我就直接用阿贾克斯去调用就好了，我其他的我一律先不考虑明白哈，所以呢，那我就在这个地方直接this点这个是昨天咱们学过的啊Dollar X啊，然后点Dollar get对吧啊就可以了，然后这块呢，我们也比那个后台管理系统啊，对于对于大家来说呢，就是我又简化了一些后台管理系统，咱们都封装了一个API模块，是不是这面呢，为了大家更轻松的去写程序，我们呢，就不封了，就直接写啊，直接写好，然后呢，接下来呢，就是this.dollar x.Dollar get，然后呢，我们直接写那个后台的那个接口地址，后台的接口地址这一块呢，我们啊，正常情况下应该是这个地址，它是一个get形式的是吧，它完整的地址是这个。

在这写吧。把它复制过来，正常情况下它是这样的一个地址啊，你发送清楚就可以了，好那么实际上呢，我们在啊这个项目当中，S2B site这个项目当中，我们找到next点点GS。我们在这里面呢，曾经配过一个us的base URL啊，然后呢，已经把它定位到了跟路径为local host这样的一个地址当中，所以呢，这面我们就不需要写这部分的内容了。让他直接删掉就可以了。杠六的啊。好，把它直接删掉就可以了，然后接下来呢，后面这部分的内容啊，它是一个手机号，手机号呢，它一定是从用户输入当中拿到的，那么用户输入的手机号呢，我们是绑定到了user info里面，我们再来看一下用户在哪录入手机号呢？在这个位置，那么应该就是user in for.mobile对吧？啊，所以我们在这个地方写它就行，好这样的话呢，一个远程远程请求呢，就发送出去了，发送出去了之后呢，我们直接写。

我们在想呢，获取。好，然后接下来呢，我们直接呢，就如果这个远程请求能够正正确的发送出去啊，那么我们直接就给用户弹出一个提示点this.dollar my点。好瑞这样nice就可以了，那在这里面呢，我们发现也可以用element UI对不对，因为呢，在这项目当中我们整合了element UI啊，然后具体再回顾一下element UI，你看这个地方有element UI，所以项目当中一定会有，然后再接下来呢，我们这个element UI呢，它具体整合到那当中的方式呢，是在plug in里面创建了一个element UI的一个JS文件，好，这个JS文件呢，是在我们的配置文件当中，在这个位置给它引进来，所以通过这种方案，我们的element UI就可以在我们当前的这个na这个项目当中直接使用了啊好，然后这块呢，就是发送短信的一个过程了，所以呢，接下来我们来看一看啊这个。

短信的发送。啊，我在这个地方呢，刷新一下啊。然后呢，在这个位置呢，我们输入一个手机号，然后呢，点击获取验证码，然后这个地方呢，你看啊，他说user in for is not find，哎，我顺便说一下啊，这个错误确实不是我这个想要特意给大家演示的，但是正好演示到这了，说一下这个就说明我们页面出错了，对不对，我们页面出错了之后呢，它啊，就是默认情况下呢，这个系统当中啊，有一个默认的错误页，这个错误页在哪呢？

这抽页在这哈，就是在layout里面有一个arrow，看见了吧，这个arrow啊，这个arrow就是我们的展示错误信息的地方啊，然后呢，这个地方呢，就是啊，它所有的这个错误信息，它会自动的通过props props也是view的一个啊，默认的一个，或者是内置的一个属性啊，它属于一个关键字，它可以干嘛呢？它可以接收外面传进来的一些参数值。啊，那么在这个地方呢，它是一个叫i.view的，放在layout里面了，这也是那里面的一个特殊的页面，叫做错误页面啊，它必须放在layout下面，然后必须叫IW，只要你在layoutos下面创建一个IW，它就叫错误页面，错误页面有什么功能呢？就系统当中一旦出现了错误的话，它会自动跳转到错误页面，并且错误信息会被这个名字叫做props，然后里面叫做irow的这个属性来破，注意props叫属性的意思，属性呢就是我可以定义一堆属性，那么我其中定义了一个属性呢，就叫做arrow，这个arrow属性呢，它可以接收什么呀？可以接收错误信息，就类你把你可以把它理解为我们Java的异常处理当中的那个touch的那个E对象啊，一旦有错误信息了，是不是自动被catch方法里面的一堆象就补过了啊，这个就是这个作用啊，一旦有错误信息了，它就自动。

被arrow页面的这个iro属性就捕获了，那么这个arrow属性啊，就是这这个就是属性了，它的用法跟我们在data塔当中定义的这些成员是一样的，只不过通过这种方式定义的这个成员，它是可以从外部获取值的，所以我们所说的外部就是发生错误的地方直接给它注入了值，然后在这个地方呢，我们就把这个I的值呢就显示出来了，所以大家就可以看到在这个位置。

我们就看到这个irrow信息了，明白吧，当然了，这个啊，Arrow这个页面呢，它也不例外啊，它是什么呀，它是使用了default.view这个啊布局文件，所以呢，这个I这个页面呢，也有和其他页面一样的头和和其他页面一样的尾，明白哈，所以你会发现假设说我这边是写一下啊。好，然后呢，大家看啊。我再来一遍。

大家看是不是就来到了我刚才的这个错误页面的这个位置啊，明白吧，嗯，好，那嗯，很显然他的这个he直接输出了哈，那我就不写一了，都写P吧。行吧，好，所以说这个就是咱们刚才的这个错误，正好说到这了啊，这个错误页面，然后接下来呢，那我们的错误到底出现在什么位置呢？那很显然这块我没有写this是不是直接粘过来的，要检查一下啊。这样就可以了，明白哈，好，然后接下来呢，咱们来试验一下。是醒了下来。好，短信发送成功对吧？好，那这个短信发送成功是不是成功了呢？我们来刷新一下这块啊好，那大家看呢，有一个刚刚啊，对吧，我们的那个过期时间不是五分钟嘛，是吧，300秒，然后所以有一个刚刚发送的短信啊，它应该就是9994997啊，所以呢，这块是我们短信发送这一块。

那么就发出去了呀，好，发出去了之后呢，我们就需要考虑有没有什么需要就是优化的地方了，那这个时候如果你自己没有思路的话，你可以参考着我这个代码去看一看，比如说啊，就是前期必须用户输入手机号了，我们才能发短信，如果用户没有输入手机号，我们就不能发，所以呢，我们可以对手机号做一个校验啊，当然了，这个表单校验这一块，我是采用最简单的方式给大家做的啊，啊真正企业级别的话，可能要引入表单校验框架，就是还要引入三方框架，专门去做表单校验的，那这块因为都是前端的更进一步的知识，所以我们呢就简单处理，简单处理的话，我们就在这块就简单的判断一下，当用户的手机号没有录入的时候，我们就给他做一个提示，所以这边呢，我们就备一下啊。If判断什么呢？this.user in for，然后点mobile对吧，如果它没有输入，没有输入就直接C就行了，在前端啊在前端因为javascript是一个弱类型的语言，所以呢，你像这种没输入啊，空字不串，UnDeFined now啊什么的，都代表false啊，都代表false，都和false是在不环境下是相等的，所以呢，这样的话呢，我们就如果它没有输入啊。

那我们就this.dollar message.er error，然后呢是输入手机号码明白吧，然后这边呢，我们再写一个对称啊好，这块同样我们只对手手机号码是否输入进行了校验，那么手机号码是否正确呢？我这边呢也也就省略了，那当然大家如果想加的话呢，你可以加前端的一个校验，对吧，前端用正则校验就可以了，好，然后接下来呢，我们再来看一下。

如果我没有输入哈。获取那说请输入手机号码，然后你输入完了之后啊，然后再点击获取验证码，当然了，你可以进一步的校验手机号码是否正确啊，这是我们可以扩展的内容啊，所以这块呢是我们的。一个发短信啊。然后这个发完短信之后呢，大家想，如果我这个输入完手机号之后，用户一顿疯狂的去点击，一顿疯狂的去点击注意啊，这个手机号码不正确是哪块提示的，是我们后端提示，因为我们后端也对这个手机号码的正确性做校验了，对不对啊好啊，那天那个马松老师跟我说，说有些同学的那个手机号他是呃，互联网运营商的手机号，所以就没包含在咱们那个后台的正则的校验里面哈，呃，那个后台的正则校验其实就是只是一个演示啊，大家完全可以对那个正则表达式做一个优化，你看一看你自己的，你对你自己的手机号比较了解，你把你自己的手机号优化到那个政策里面就可以了，好吧，啊然后呢，这块呢，就是我们所说的这个啊，就是刚才做的这个功能，那刚才做的功能的缺陷呢，就是一旦用户发送完验证码之后，他疯狂的点击的时候，那就会不断的向后台发起一个。

调用对吧，啊，会不断的向后台发起调用，那这个向后台发起的调用呢，我们就不能让他。有机会执行，所以呢，一旦用户点击完获取验证码，并且呃，这个短信已经开始发送的时候，我们呢，就必须要禁用啊，把这个按钮禁用掉，把这个按钮禁用掉呢，之前我们学过很多方案啊，就是直接给它加这个禁用。嗯，我看一下我的按钮。直接给他加这个禁用那个什么就行了，比如说你给他加一个disable。

好，实际上现在这个按钮就是禁用状态，你看我现在正在点啊，但是已经点不动了啊，为什么它没有显示成那个禁用的样子呢？是因为咱们这个前端的页面啊，它自己有那个特殊的样式，它你会你会发现它不是element UI的。对吧，如果是element UI的按钮的话，EL这种哎，我们禁用它比较方便，但是它不是说明是什么，说明它就是一个普通按钮，然后它的样子呢，是由样式表定义出来的，所以样式表里面定义的这个按钮的样子就长这样，无论它是禁用状态还是启用状态，明白吧，所以你在这个地方对它进行禁用的，虽然实际上是禁用了，但是样式上呢，还没有禁用，所以如果作为前端的话呢，可能要和这个禁用状态啊在匹配一个样式，那对于我们后端来说的话，这个本来JS就弄不懂，再让你去写CSS就更困难了，是不是？所以我们呢，就用了另外一种方案，什么方案呢？就是干脆不禁用它，就直接隐藏掉它。

啊，那你要隐藏掉它的话，你是不是就3D把它作为这个处就可以了啊，所以我们来看一下啊，一旦我们这个。短信发出去了啊，其实呢，就是只要你点击了发送短信按钮啊，马上就把这个3D出就是if。This点三点啊，如果等于true的话，我们就直接return了，就说明如果已经被置为处了，那就说明刚才已经点过了是吧？啊，如果还没点过第一次，那么就this加三点等于这个逻辑大家知道吧，啊，防止重复提交，显示倒计时。好，我们来看一下啊里面大家看这面呢。

好，然后点击这个获取验证码。好，大家看短信发送成功，这面是不是那个发短信的按钮就不见了，然后倒计时的按这个信息就出现了啊，所以我们呢，就要实现这样的一个功能啊，啊这个是这样的，那接下来呢，大家想一想啊，什么时候我们要把这个按钮再给他启用了呢？是不是这块会有一个倒计时啊啊当倒计时开始的时候，这个按钮就是。呃，显示出来的啊，这个倒计时就是显示出来的那个发送短信的按钮就隐藏起来了，好，那么当倒计时结束的时候，那么这个按钮呢，就啊隐藏起来了，然后刚才发送短信的那个按钮呢，就又显示出来了，所以现在呢，我们要做的就是这样的一个倒计时的功能，那也就是说到这儿。

到这儿为止啊，就直接进入倒计时，那倒计时在哪，在这呢，我给大家定义好了，我们在这个地方调用一下。当然了，前面写的对，好，那接下来呢，我们来具体看一下这个倒计时。