121-尚硅谷-尚医通-前台用户系统-手机登录-前端整合（2）

各位大家好，我们继续来看这个签头代码，刚刚咱们说到了，就是我们输入手机号，点击获取验证码，然后它会根据输入手机号进行验证码发送，也就是到了我们的这一步，我们就调这个方法叫get code fun，那我们看一下在这个方法中呢，首先我们做了一个校验，就是手机号格式是否正确，然后设置初始值，设置值之后下面咱就调用这个接口，根据手机号进行验证码的发送。然后这个接口叫3CODE，各位看是不是这里边定义的这个方法，传入手机号进行发送，而在发送过程中，这里边我们做了一个倒计时效果，就是你点击发送验证码，然后它有一个倒计时，我们这里边设置是60秒的倒计时，60秒之后才能重新进行发送，然后这里边倒计时我们用的是一个这中一个方法叫set interval，这个方法表示每隔一段时间去执行一次这个代码，然后大家看它的结构中，就是每隔1000毫秒，那值减一，这个值是60，每次减一是不是就是59 58 57，因此类推，当这值小于一，再回到数值效果。

这里边写了一个叫可粒尔特沃，就是清除定热器的效果，这属于Java中的一个基础方法，Set特沃和可特沃，所以咱们里边就是这么一个基本逻辑，那这个逻辑呢，我在图上给大家再简单画一下这个过程啊，就是现在第一部分，当我们点击这个登录。这个注册的这个按钮的时候呢，咱们首先会弹出一个确认框，就这里边会做一个确认框的一个弹出，我写一下弹出，然后弹出到确认框里边，我们是这么一个结构，这里边咱能输入一个叫手机号。

然后我们输入手机号之后，下面的一个按钮就是发送验证码，然后写一下啊，这里边我们叫发送验证码，比如说现在我输入手机号之后，一点这按钮，它就根据手机号去向这手机号上发送一个验证码，然后在发送过程中，这里边会有一个倒计时效果，就是60 59 58倒计时的一个效果，然后发送之后这里边如果说这里边验证码不成功，那就是登录失败，如果验证码我们输入正确，那就是登录成功，而登录成功之后我们要做什么呢？首先第一个这弹框肯定要关掉，然后关掉之后呢，在我们页面的这个上面显示的肯定不是登录注册，会显示你那个用户的信息，比如说你的用户昵称，你的手机号等等其信息，所以这是一个基本过程，而这过程中，我们这个信息显示得要把动物之后的内容放到咱的cookie里边去。

通过cookie来存储我们的用户内容，那我们来看一下啊，这个过程啊，就是现在发送之后我们就进行登录，登录之后显示信息，这个过程中又把信息存到Q域中去，那各位看这步怎么做到的，刚才咱看这方法是进行验证码的发送，而发送验证码之后我们要做这个登录，那登录咱们往上看一下，就这位置有一个登录的这个按钮，也就是里边的。这个位置我们找一下啊。登录的这个按钮就是里边，刚才我们看到这个地方。那把这个找到啊，就这里边我们在验证码发送之后，我们进行这么一个就是登录，然后登录过程中呢，它要调用的就是里面那个叫捞印方法，在捞印中大家看到就是调用咱们这个定义的这个接口中的方法，根据你的用户信息最终完成这么一个就是登录，登录之后呢，把信息大家看这个代码叫set cookies放到cookie里边，在cookie中设置你的token值，包括你的用户名称，然后它的这个范围是我们的local house，最终把页面reload重新进行加载，所以这里边我们就是这么一个基本过程。

这个过程介绍之后呢，咱们继续往下来看啊，就是下面那种中等，因为咱们刚才说的，当我登录之后要显示咱们的用户信息，比如刚才我们看到在这里边呢，我们调用这个登录的方法，然后登录之后我们要显示用户信息，而用户信息呢，目前是放到咱们的库体中，那怎么显示呢？咱们看我页面的上面部分，就是在上面的这个地方。各位看啊，这个地方呢，我们肯定要做一些相关的判断，那怎么判断？大家看我课件中这个是有一个方法叫受音缝，当我们进入页面，在create里边调受音，用方法，然后从cookie中取到你的用户名称做显示，在页面中做控制，就这里边用V-E做一个判断，果你的内部值等于空，那我们就显示动物注册，如果内幕值不等于空，我们就显示用户信息，包括你看这里边显示我们的用户名称，然后下面有一些其他的信息，所以现在里边就是这么一个基本判断，那我现在把这个判断过程给大家拿到上面。

咱们把这个给它就改一下啊，改成我们目前的这么一个效果，那我们来改一下。就是现在这一部分就是做了一个基本判断，就刚才我提到的，如果说你的内部值等于空，我们就显示动物注册，再来进行我们的状态操作，如果你不是等于空，我们就显示用户信息。包括下面有一些其他部分。所以这样的话，咱们把这部分就完成了，完成之后呢，大家看啊，就是下面这里边呢，我们还有一个下拉的显示，就用到UI的一个组件，也就是说我们在这个地方，当我登录之后，我这里边有下拉框能显示实名认证，什么挂号订单，什么救人信息管理，什么退出登录等等啊，就用到里边的这个结构。

所以这些我们就完成了，就是现在完成了一个前端的一个基本整合。然后整合之后呢，下面呢，咱们把效果我们可以做一个测试，看一下它目前的效果什么样的，然后咱们再往下进行操作。那我们来测试一下啊。现在我打开浏览器进入到我们这个页面，然后在页面中大家看，因为第一次呢，我们肯定是没有登录，那我现在点击这个登录注册，可以看到是不是弹出一个框哦，目前我们做的就是验证码手机的登录，当然你点那按钮后面还会进行微信后面再来完善，现在先做这个手机号登录，然后在里边呢，首先我先输入我的手机号码，咱们用验证码做个登录，那我输入一下。

输入之后，现在我点击获取验证码，它就会调用接口进行发送，然后你看提示我们发到手机号，这里边是不是有一个倒计时效果，然后现在我在我的手机上已经接收到了这么一个验证码，我把验证码给他拿过来啊，是092696，那我在里边输入。092696，然后输入之后，现在我点击马上登录，是不是就进行这么一个登录的操作，然后登录之后这里边大家看啊，现在弹框关掉了，然后这里边你看显示是我的手机号啊，当然你可以显示名称或显示其他信息等等啊，看你的实际，因为我们当时写接口的时候，如果你没有名称，没有昵称，手机号就是你的信息，然后下面是不是一个下拉框效果，就刚才我说的这种情况，所以咱目前呢，就把这个登录的这个手机号的部分，我们就完成了测试，就是主要把它的接口和前端完成了整合，各位重点把接口好好给他完成一下，然后前端呢，按照我课件中的流程，给他能够快速整合出来就可以了，所以现在这个功能我们就做到了。