day12【首页登录和注册功能】/15-尚硅谷-谷粒学院-注册前端整合（1）

首先呢，我们要做这个前端，因为前端呢，最终目的肯定要调咱们的后端的接口能做到，所以咱们啊，首先我们做这个整合中的第一部分，我写一下啊，咱先。整合注册功能，那我们做的第一问就是先在我们的API中的，咱先建这么一个JS文件，然后文件中把注册的相关方法在里边我们先定出来啊，这是我们做的第一步。写一下啊。在API中创建一个文件，比如我们叫这个。DJS文件，然后在文件中我们定义咱们注册的接口的一些方法啊，这是我们的第一部分，那我们下面来创见一下啊，这过程应该比较简单，咱直接啊写上这么一个文件，比咱看一下课件中，在里边我们就是定一个JS，然后里面写方法，因为咱注册中呢，需要两个方法，一个是手机验证码发送，还有一个是用户注册，那咱把这两个先给它定出来，那我来快速写一下啊。

API里边建文件，用它快速改出来，因为都差不多，这文件改个名字叫。点S，然后在里边我们定义两个方法。首先第一个方法就是根据。手机号发送验证码啊，就是发验证码这么一个方法，然后里边还有第二个方法，那它就是注册的那个方法，那我们定义啊，先看第一个发验证码，那我们给它起个名字，比如叫这个散的这个。扣的而发验证码，咱肯定需要手机号，那里边传个参数，比如叫这个错位啊手机号。这是我们的方法，然后在下面写上你那个接口地址，那这接口地址我到里边我们找一下啊，就是咱们那个手机短信msm，这里边我们的名字叫做EDUMSM，然后这位置啊，有这个手机，那咱给他拿过来啊。

我就写上这么一个名字，后面加上它那个符号上名字叫这个赞。然后散到后面加上我们的手机号，但是手机号两种写法，第一个你可以做个拼接，或者说把这改成飘的符号啊都可以，我就改成个。飘的符号，然后在里边加上一个表达式，咱写一个叫复位，把这个号拿过来，这是手机号，然后写完之后提交方式是一个get提交。啊，这个啊，我们写的第一个方法，然后第二个是注册，那注册方法写下哈，我就叫这个。这个user啊，或者member。然后注册里边呢，因为咱们注册中呢，要传入这么一个对象，通过对象传到我们的接口中做操作，那咱给他传个对象，比如我就跟笔中写上一样了啊，就要这个form item，就是表单中这个对象。

把这个拿过来，然后拿回来之后在里边写一下这个结构，结构中的第一部分是你的接口的地址，那咱写一下这个叫edu center member。把这个复制。然后在后面加上它那个注册的名字，就叫做啊这个名字。下面是一个叫post提交，然后这个数据用isn传递，所以咱写一个date冒号，加上这个叫form item，这样的话把这两个方法在API中我们做定义，一个是发送手机验证码，一个就是注册方法啊，这是我们做到第一部分，我们就快速做到了啊，不在里边截代码，你之前都写过类似的啊，这比较简单。然后做到之后，咱下面做的是在页面中，我们肯定做个调用啊，刚才写的是这步，下面页面中做调用，这些页面都准备好了，那我们来到页面里边做最终调用啊，咱们进入到页面，咱找到那个注册页面。

我先把不相关的先关掉啊，就打开我们最。使用的两个页面，一个还有一个注册。注册里边写一下啊，因为咱要调方法，所以首先把这个先给它引进来，我加一个import，比如叫这个啊，咱为了区分我加个API from，加上这个地址at斜杠API。Al。这个啊，我们就加上了啊，所以现在。把这个我们做了一个引入，然后引入之后呢，下面我们在里边肯定要做这么一个最终的一个调用，那咱们看这怎么做啊，这个代码中呢，涉及到有很多的地方，咱们一个来看啊。

这个我就不敲了，这咱直接用了啊，然后里边有什么呢？大家注意啊，咱来到页面中，首先第一部分我在注册的时候。它是不是有这些数据啊，包括你的昵称，手机号，验证码和这个密码，而这些数据咱是不是要传到接口中去，所以这些咱怎么做呢？在里边我就定一个对象人，对象我就叫啊，用这对象就来。封装咱们注册输入那些数据里面就有四个手机号验证码啊，这个我加个注释，这是验证码。然后包括咱的昵称，还有密码，这是我们的第一个这个对象，然后下面这三个是为了咱一会儿做那个验证码发送的时候使用的。验证码发送过程中，大家注意啊，比如我现在输入一个昵称，输入一个手机号。然后这里边点一个叫获取验证码，那这个过程中，在获取验证码我一点的话，里边是不是应该有一个倒计时的效果呀，就比如说60秒59，然后什么58 57依次是不是有一个倒计时效果，所以这个效果咱要给他做到啊，这个啊是咱马上实现的，那我们来看这怎么做啊。

咱们一个来看啊，首先啊，先看这个页面中，我把页面调大一点啊，我这里强调啊，就这个倒计时效果，其实不需要各位去写一遍，但我要求各位能看懂，而倒计时怎么做到呢？我把这原理先说一下，然后咱一会儿把代码直接拿过来，咱看就可以了，各位直接改就可以了，那我说怎么做倒计时啊，里面一个原理。给大家啊，比如说我这么写吧，我就直接写一个普通的HTM文件啊，就是test。DHTL咱在这里边啊，写一个方法。把这个打开啊，然后把这个。给它打开，那我说一下这个倒计时我们要怎么去做啊，里边我写一个写一个脚本啊。

十块吧。然后我们的做法怎么做呢？在这过程中呢，咱要用到在我们javau中啊，有这么一个方法，这个方法是什么呢？它叫做定时器的方法。什么叫定时器方法呢？也就是说你每隔一段时间。去执行一次，我这个JS里边这个方法，这叫定时器方法，那咱要做这个到底是怎么做呢？就是现在比如说我写一个变量，固定值是60，每隔一秒让这值减一就可以了，用到这个叫定时器方法，就是每隔一秒去执行一次，那这方法怎么用，给大家写一个基础代码啊，这方法要各位记住，是javaq中的一个方法，就是S方法，它的名字叫这个名字。这个位置啊叫set interval。这是一个方法名字，然后这里边怎么传参数呢？第一个参数就写你的的方法，或者你写一个代码，第二个是你的执行的间隔时间，比如说我写一个小例子啊，然后这么写。

呃，咱为了明显啊，这个值稍微长点，要不然咱不好点，这个3000在里边，我就加个alert。比如加个值啊，就叫T的，然后这个这么写什么意思呢？它就会啊，每隔3000毫秒让这个语句进行一次，就每隔三毫秒弹出alert，而咱写倒计时可以这么做，每隔1000毫秒，就每隔一秒让它的值减一就可以了，这是我们要做倒计时用的一个方法，叫set interval，你记住这个方法是扎中一个方法，是一个叫定时递方法。咱做倒计时用它可以做到啊，那这个效果咱们看一下啊，3000就是毫秒，3000毫秒就是三秒，每隔三秒这个ler它会弹一次啊，那我们只有想啊，我用这个工具了，这工具中有这个。浏览器啊，可以用它来试一下，比如现在大家看啊。

里边我们等三秒弹一个，我确定再等三秒弹一次，再等三秒。是不是又弹一次，每隔三秒它都会弹这个alert我就关掉了啊，而我们现在多倒计时跟它原理一样，你可以每隔一秒让它那个值减一就可以了，这是咱们要做的这么一个效果啊，所以大家把这方法给他知道，Set inter沃用这个做倒计时。我把这个啊给各位截过来啊。其实我们在开发中经常用到的Java中一个方法。我小弟位置。就是第二个，因为咱们的页面中。要实现一个那个倒计时的一个效果，就是59 58 57倒计时效果，那怎么做呢？要使用到GS里边一个定时器的方法来实现，它的方法，就是咱们刚才写的这个东西。啊，这各位知道啊，那咱们看怎么来做啊，这些代码不要各位去敲别，但是要求各位能看懂，而他写法就是我刚才这个写法啊，那咱们看这个做法啊，比如说我把这个代码咱先拿过来啊，就这段代码。

给大家先拿过来啊，咱们看这里边最终咱再测试啊，我先。放到这个位置。这个方法我起的名字叫这个have done啊，这方法做的事情就是倒计时的那个效果。我加个注释啊。倒计时，而他怎么做的来看里面这个结构啊，就我刚才说到的，你看啊，Set interval。是不是咱的定时器中间是你的方法那个具体内容，然后这里边加个1000，它就表示每隔1000毫秒让里面那代码定一次，每隔1000就执行，那怎么执行，咱看啊看这结构，首先我这里边第一个初始值叫second，它初始值是不是60啊，那我要执行，你看啊，每一秒让它干什么。

是不是减减，是不是就减一哦，就是说你现在第一次只用手再加一些基本值，然后第二次它再减一，第三次减一，依此类推，每次值它都会减一，直到你这里边就能做出倒计时效果，用的就是set沃做的，每隔一秒让这个S值减一，减一之后咱free给这个叫code test。啊，这是一个定时器的方法，给大家能看懂可以了，不需要各位敲点啊，因为是一个比较固定的写法，你每次。1000毫秒只用一次让它减一啊，就是这么一段基本代码。各位也都知道啊，然后这个说完之后，下面啊，咱们把页面中的内容我们具体写一下啊，然后这个怎么做呢？因为咱要做的肯定是注册嘛，也就说我现在在这里边啊，因为这个方法啊，可能我给他加了。有些东西没有写到啊，没有写完啊，我先给它注掉啊，一会咱再统一加上，然后只先看一下这个方法，一会儿咱测试啊。

先给它先注掉啊，咱回到页面中啊，就是在我们的页面中大家看啊，我现在的目的就是在里边这些值咱肯定都要输入，然后输入之后咱点注册，这些值是不是要调接口加到数据库中，咱肯定要做这个事情，那咱们现在看一下这个注册啊，把注册按钮咱找到，先写核心部分，然后再写这些辅助功能啊。核心肯定是注册，那找到注册就这个按钮。八腿注册在注册里边呢，我这位置绑定了一个叫可立个事件里边有这个方法，那那在这个方法中把数据调到接口中是不是可以了啊，那我现在讲这个方法啊，要subject。我小的位置啊。就是这个这个方法。这个方法就是注册。提交的方法啊，然后咱的名字就是。

然后在方法中我们要怎么做呢？咱的做法就是把数据因为咱都放到了拍里边，那咱们把它直接提交是不是可以做到啊，就直接你做个提交就可以了啊，那咱给他就最终提交一下啊。把这个我先写出来啊，那怎么写呢，我们调一个叫A片。里边这个注册的方法，咱注册方法应该是他叫这个member。在这个方法中传入你那个参数，就咱写这个P，因为里边封装数据，然后这传之后我们加上这么一个叫点赞啊，咱加一个叫response。来一个箭头函数，这样的话就表示成功，如果说咱们注册成功之后，那大家说注册之后干什么。第一个是不是有个提示信息啊，第二个注册之后咱是不是能跳转到登录页面中去，所以咱就做两件事情，当注册之后，第一个提示他注册成功，第二个就跳转到咱的登录页面啊，就来做这件事情，那第一个提示我就到这里边啊，咱直接复制那个提示信息了，之前都写过就这个。

比如提示他注册成功啊。这个我先截过来，然后提示之后，下面咱就给它跳转到我们的登录页面啊，就到登录页面中做这操作。这个啊，拿到上面来啊，然后怎么跳转到登录页面的，就是这个跳转有很多种方式，咱还是用一个咱们之前用过的方式，我写一下啊，我觉得各位应该记得啊，这点这个叫root RO点上push。在push里边加个括号，大括号，然后加个pass，再加上你的地址，咱的地址就是这个loe，这样的话用路由跳转，跳转到胆道动页面啊，所以这是一个。

调用登录的这么一个方法，这个啊，咱就快速写出来了。要各位啊，能快速做到。也就是我们输入数据之后，一点这个注册，或者一点这个注册按钮，然后它就会把这数据最终做个提交在里边，我们就做了这个事情啊，这个啊是我们写的这么一个啊。啊，就是少个逗号啊这个。可以做到啊，所以各位把这个调的过程知道啊，但是在这个过程中呢，我们现在只写一个注册，它还有一个地方就是我们现在你看啊，比如我写的完整点，假如这叫幺零，幺零这是手机号。注意，当我填完手机号之后，我一点获取验证码这个超链接，他是不是要调接口向手机号里边是不是要发个验证码呀，然后同时这个位置要显示的是不是那个倒计时效果呀，所以咱下面把这个再完善，刚才是核心注册已经挑过去了，下面咱来做这个发送验证码的调用，还有这个倒计时的时间啊，把这做到这些都属于前端这东西写法稍微麻烦一点点啊，但是也不复杂。

那我们看怎么做啊，注意这个流程，第一个这要输入手机号，当输入之后再一点获取验证码是不是要发送，那咱们就找到获取验证码在什么位置啊，找一下这个位置啊找一下。看在哪里啊？各位注意啊，我这里面是这么写的，我是加了一个。变量叫code t的，然后code t中是获取验证码，然后上面咱找那个code t在哪里啊，找它的位置。往上涨啊，就是在这里大家看啊。这里边我用一个叫差值表达式取这个值，其实这个值就是获取验证码。啊，咱就写的完整点啊，获取验证码大家更清晰，然后当我们一点这个或验证码，你看这个超链接，在超链接中咱就要调接口发送我这个位置也是绑定的一个事件，叫这个方法啊，这名字碎片器，然后这个方法中咱就是调接口去发送验证码啊，那咱就解下这个方法啊。

我小下边。这个位置啊，这个是提交注册的，然后写到这个位置，这个方法我们要写的。这个位置啊，它就是。通过你输入的手机号发送验证码，咱要调接口方法，我们调这个名字。就是它那在里边，我们就来调一下啊，来看怎么调啊，首先我们是还是用这个叫A片。用它。在里边咱找到那个发送方法，这个方法叫这个send code。把这找到啊，然后找到之后呢，在里边呢，咱需要传入的是不是你的手机号，因为咱的手机号在这个拍里边有一个叫mobile，而上面你看这里边啊，都写了一个东西这个。

叫V-model是双向绑定，所以咱们用这个这个值应该是可以取到的啊，那咱给他就取一下啊，咱都做了双向绑定。这是点。点上这个mobile啊，这个就是调咱的接口，发送这个验证码啊，他就是这么来做的，然后做到之后我们加上一个点赞。比如来一个叫。Response。线头函数，如果说它执行点赞，那就表示咱这发送肯定是成功了，那如果成功的话，那这个位置啊，咱可以怎么做呢？我在里边比如说。可以让它有个倒计时，也就是说啊一点它肯定要发送，发送成功，这里边就提着一个倒计时效果，而倒计时咱就是把这个方法做个调用就可以了，就刚才的这个方法啊，把它打开。咱最终写一下啊。这个在这里啊，咱们做一个调用啊。

那我就。调用这个。倒计时的。这么一个方法，然后这个方法就写一个，这次点这个开大啊就可以了啊，另外这里边还一个地方叫这个这个。三顶就是是否发送哦，是这只触啊，咱们当你发送之后，然后它就变成了for，就不能再二次发送，这个也做个设置啊。就是这次点这个。三顶等于false，就是你点完之后不能再点第二次，然它就提示这个倒计时，这样的话把这个我们就写出来了，就是当我现在在里边一输入手机号，然后输入之后再一点就可以做到啊，主要这么一个过程啊，咱们把它完成了啊。那代码稍微改一下啊，应该有一个地方应该少了点，呃，好像少了一个括号吧，这个位置。我看一下啊。这是后面一个方法啊，这里少了一个括号，你看这个位置有一个括号就对了。

这里。看看啊。应该是有一块，那我重新把那个复制一下啊，咱看这个页面中。好，这个方法我重新先给他重新复制一下，应该是少了一个括号啊。就是咱们那个time down那个方法，倒计时的方法应该就是里边的。啊，其实就是少于括号二，然后把这个方法我给他再复制一下。放到咱们的上边啊这个位置。啊，这样的话应该可以啊，那就是少个括号啊，然后现在咱们这个基本的结构应该就出来了啊，那我们再看一下啊，当然有很多细节咱们慢慢完善，然后咱们看结构啊，在这里边我们主要这么几个地方，第一部分，当你输入了手机号，比如我输入一个。156。输入之后，当我一点这个叫获取验证码，它会根据手机号调接口发送个验证码，而发完之后里边这个获取验证码位置要变个倒计时，效果就是59 58 57，而当我们把这值勾数之后，你点这个注册，这数据就可以加到咱的数据库中啊，主要这个过程，然后在咱代码中最低的体就是这么几个地方，首先有些初始值啊，咱都固定的，然后有这之外，我们点这个注册，它会调这个方法叫subject，在方法中咱就调调中的方法，把你的对象数据传过来，最终添加注册。

提示成功，并且跳转到动录页面啊，这是我们写的第一部分，然后跳转用那个就是路由跳转，另外就是发送验证码，当咱们输入手机号之后，一点这个叫发送验证码，就是咱们刚才看到的这个位置获取验证码，然后在里边呢，这个位置超链接也会调个方法，咱是这个方法调get code find这个方法，在方法中咱就根据我们输入的手机号调接口，然后发送验证码，发送之后咱就调用这个倒计时的方法，让他有一个倒计时的一个过程。

所以主要就是这么一个过程啊，咱现在把这个基本结构我们就初步做到了啊。就是这么一个过程啊。然后这个做到之后呢，在这里边呢，还有几个细节问题给大家来说一下啊，什么细节问题咱们注意看啊，现在核心都写过了，然后说这个细节啊。首先刷新。大家看啊，比如我现在啊，我不输入我一点别的地方。看到问题了吧，不是看到这个效果了吧，现在是不是提示我们说你请输入昵称，你说这个值你必须要有没有的话，他会给你一个提示，假如单输入之后这是手机号，是不是提示我输一个手机号。是不是格式不对，然后我输入一个对的。

这是不是可以的，然后你验证码是不是需要输入，比如咱输入验证码，下面让你输入密码，密码要输入一个啊，比如来一个123456，这个是不是可以了，所以现在你发现我在这个页面中是不是做了一些简单的校验，咱加了一些校验的规则啊，这是我们加这个，那这个怎么做到的，给大家说一下啊，第一个强调这个规则不需要咱们再去做单独的判断，没有这个必要，因为这框架中把规则给咱都封装好了，咱直接用就可以，也就是说你不需要再写一个if，这个值是不是等于空，等于空做个提示，不等于空往下提交，现在不需要这么写，它里边做到了，这个就是框架中给咱封装过了。那怎么来写呢？给大家说一下啊，来看它的写法，很简单，这框架中做到的。往上来看啊。注意这写法中我就不写一遍了，各位也不需要敲，你能看懂改就可以了。主要这个地方。就是在你每个这个input数框里边，咱可以加上，比如就是主要是这个EL item中，咱可以加上一个叫。

Rule就是一个规则，规则里边呢，是这么一个结构，这结构是一个固定的结构啊。那我说一下这结构什么意思，给大家解释一下啊，比如我就注入到这个位置了啊，咱看这结构，首先rule规则在结构中这么几个地方，第一个叫require的是数，那什么意思？当你写这之后，那就表示这个里边必须要数值，不数值它就会有问题，比如说我现在不输入就问题啊，这是第一个require等于处必须有值，然后第二个是什么呢？就是当你这里边没有值的话，它就提示这个信息，比如说我这个。回到这里啊，然后这个输入的昵称。那没有问题，当我不输入是不是就提示请输入你的昵称，而请入你的昵称是不是这个东西，然后最后一个叫这个东西trigger，这是什么意思呢？Trigger这个单词有触发的意思，它就表示你在什么时候要执行这么一个判断，那什么时候呢，加的是你的一个事件，这事件叫乐blur。

我说各位是否见过啊，比如GS里边这叫什么呢？就是你在失去焦点的时候，那这个就会触发，什么叫失去焦点，你看我现在啊，比如我重新刷新。我现在光标是不是在里边呀，这叫获取焦点，什么叫失去，我点外边这叫失去焦点，当你失去焦点的时候，里边会触发，就触发你这个规则，它必须有值，没有值就是这个信息，包括你看后面都是氧啊，什么手机号，验证码，什么密码都是这种规则必须有，包括你可以在什么时候触发，这是它那个错误的提示信息。啊，大家把这知道啊，另外在里边呢，就是这个是它自带的一种规则，咱也可以自己加规则，怎么自己加规则，举个例子啊，就是咱这个手机号。

你注意啊，手机号做了不能为空，比如我现在随便写个手机号，你看它提示。是不是格式不对呀，这格式不正确，是我自己写一个规则，那规则什么样的给大家看一下啊，写法也不复杂，咱找到手机号。找到手机号那个位置啊上面。就是你现在啊，除了前面这部分之外，你在后面需要加上一个叫自定义规则，就加上这个东西，你看啊叫va。是不是叫校验，这check phone是你写的一个方法里面规则，然后这是你的触发事件，那这check phone咱看一下啊，我下面有这个方法，看这方法。这个我应该都见过吧。这是什么？是不是一个正则表达式啊，就是咱们写个正则表达式，点上T判断你的值对不对，如果这个值，比如说它不是这种规则，提示它，如果是这个规则直接就往下执行，就加一个自定义有规则里边主要用这个正则表达式做个判断啊，这个行就表示输出你那个错误信息，就是你格式不对，输入它。

如果你格式对，那它就直接返回往下执行。这是加的一个自定义有规则，所以这是一种简单的校验啊，大家把这知道啊。我再说一遍啊，咱这过程中表单中可以加校验，但是校验呢，不需要咱单独做什么ex判断，在框架本身给咱们自带的这种教育规则做法就是你加上这么一个结构rules里面加上require true，然后message加上这个trier，它就表示在你失去焦点的话，那这个规则会触发，但是如果你觉得规则不满足你的要求，你可以自己写个规则，就这种结构加一个vali，这是你的方法名字，这是触发规则，然后这个方法中咱可以用个正则表达式把这个做到，比如我判断手机号这么一个结构啊，就是它是一开头，然后中间是这些，后面是有多少位。

这个啊是一个手机号的校验，所以咱们把这个我们就初步做到了这么一个基本的规则啊。各位把这知道啊，然后这个做完之后呢，咱最后把这效果我们来试一下啊，就看一下最终这个结果是什么样的，咱们把这个结构应该都完成了啊，当然还有很多细节，然后后面没有完善，总体过程咱应该做到了啊，咱就看这个注册啊。这个啊，首先保存一下。