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

各位同学大家好，刚才内容中呢，咱们完成了手机登录的接口开发，包括里边还开发了发送手机验证码接口，那咱们下面呢，我就按照课件中的流程，咱们快速把它的前端整出来，各位在自己练习的时候，重点放到咱们的后端接口中，然后前端根据我课件中的流程把它能整合出来就可以了，那下面咱们来整一下前端，那前端怎么整合，给各位先做个分析，然后按照流程咱们来做一下，首先大家看啊，我现在在页面中的这个地方是不是叫登录或者注册，当我们就是已经登录或者注册之后，这里面是不是要显示你登录的信息，有比如说你的手机号，比如说你的昵称等等。然后这里边呢，如果说你没有登录，当咱们点的话应该干什么，是不是要弹出一个框啊，然后在弹框里边咱能够用手机号验证码登录，包括用微信扫码进行登录，是能做到当你登录之后，里边才能进行其他操作，比如说你做挂号做等等加信息，所以咱们的流程就是这么一个基本过程，而这里边还有一点各位注意啊，就是当我们登录之后，因为我已经登录之后呢，那我操作中的其他部分是不是还要判断一下我当前是否是一个登录状态呀，那这个过程我们怎么做呢？如果说在咱们的后端中，咱是不是能有一个对象叫session，但是前端里边咱用什么是可以用这个cookie，就是我们登录之后把内容放到cookie中，然后咱判断一下，Cookie中如果有这个信息，那表示是登录，如果没有信息，它就不是登录，所以咱的过程就是这么一个流程。

那下面呢，我按照文档中的流程，咱来做一下啊，首先第一部分因为咱要调接口嘛，所以我在API中咱来创建两个这文件，那我们来做一下啊，首先第一个文件，我们这个user info里边有咱们登录的那个新闻接口。

我在里面建个门店，咱们叫user info点。然后在U色L里边来定一下我们操作的这么一个接口路径，我把这个直接拿过来，然后大家看一下A片user色，然后这个叫捞印，也就是咱们刚才写的这个接口，A片U色捞印它是POS提交里边用request的包地传入咱的对象，这是第一部分，然后除了这个之外，我们再定义第二部分，就是咱们发送短信的，那我再建文件，比如我叫M sm.S。这个我在里边创建一下。然后在里边呢，咱就定义我们那个短信发送这个接口，然后把这部分给大家说过来，因为都是我们昨天写到的，包括大家看A片msm，大家查一下啊，别写错，应该是里边的这个模块中。

我把它打开。然后大家看里边就是这个APIMSM，它的名字叫sand，然后单一个手机号，它是一个盖的提高，也就是咱们写的这么一个结构，所以现在把两个JS文件我们就完成定义，然后完成定义之后，咱做的是不是就是登录部分，也就是做这个部分。当然各位注意啊，咱们在最开始搭建环境中，我们曾经把这页面呢做了一个拆分，不知道各位同学是否记得啊，给各位来说一下，比如大家看啊，在我们的页面中，因为咱们访问的时候，首先应该到的是不是这个底部的这个布局页面，咱之前讲到过，然后布局页面中再引入其他页面，在局中呢，我们有它的头信息，尾信息，也就说上面这部分头信息，下面这部分是尾信息，中间是引入加页面。然后它的头信息，咱们当时建立一个页面，这个页面大家看啊，这个叫买拍，然后它的尾部分我们叫买葡，现在我们的登录注册按钮，大家看在哪里。

是不是在咱的头一面中啊，也就是里边那个买hi中，所以咱们写代码就在买hi中进行实现，这是我们要做的事情，那下面我们就来写一下，那怎么做呢？给各位说一下啊，首先第一部分呢，咱们点它是不是要弹出一个框啊，而弹框的部分呢，咱们可以通过IUI中的组件做到在element UI中，咱看一下我这课件中，我就把这个内容给各位，我就直接复制过来，然后把我这里边内容给它替换掉，咱们来看一下文件过程，因为这个过程呢，用的都是IUI中的组件，包含咱们voe中的指令把它做到的。我把这部分给各位，我先复制过来啊，咱们看一下啊，这部分应该就是一个叫EL dialo，就是咱说的那个弹出框，然后在弹出框里边，大家看这里边有这么一个部分，这部分中一个值，然后我说明啊，就是当这个值呢是bos的时候，那我弹出框就不显示，当这个指示处的话，我弹出框就显示，包括大家看这单词是不是有显示这个意思，所以咱们在里面就加上这么一个弹出框，所以咱们的登录相关的内容，包含手机登录，还有微信正法登录，那我现在把这个yellow dialo给大家就复制过来，复制到我们这个页面中来。

然后咱们看一下位置啊，这个复制呢，应该是到我们里边的这个地方啊，咱放到只要放到电位中就可以了，所以这样的话把这就拿过来了，然后大家看一下啊，在这里边也漏diallo这个值，然后包括里边这一部分是咱做手机登录的，然后下面是做微信登录的，还有一些其他的辅助信息。这样的话，把这个我们就复过来了，然后复制之后呢，下面刚才写下它相关的Java有代码，但是我刚才提到，因为咱们现在呢，要把登录之后的信息是不是要放到我们的cookie中去，而我们cookie呢，如果在咱们的Java代码中，咱通过request能到cookie，而现在我们是在前端中，或者说是在我们的vuee这里面进行操作，所以咱要用cookie，我们需要先安装一下这个cookie，这个插件，然后才能使用，所以咱们做安装，而怎么安装，就用咱们之前说过这个命令NPM因此都加这个角，这个cookie就JS里边用的cookie，那我现在把这个我们可以做安装，安装方式很简单。

就是现在你在这里边，比如把这个我给大家复制一下啊，我们在这里边，比如现在我再重新打开一个终端。打开一个，然后在里边用咱们刚才说这个命令，呃，少一个字母啊，就是NPM。

In的JS cookie，然后咱一回车，那这cookie插件就可以安装进来，咱在里边就可以使用，我这个已经装过了，默认是没有的，各位版的命令执行，然后在你的这个项目中给它安装进去就可以了，然后后面才可以使用啊，这步是必须的，然后这个安装之后，下面呢，咱就能进行它的操作，然后这里边呢，我段代码，我把这代码给各位直接分制过来，然后咱们详细看一下这段代码到底都是什么含义，我会把每行代码给大家详细解释一下，各位自己在测试的时候呢，你不需要把这代码完全翘扁，但是要求能看懂，能把里面的结构给它改出来，知道每部分是什么含义就可以了。那我现在把这部分给各位说过来，就是我们这个Java词汇部分，然后里边有咱们登录中的部分内容。那现在我把它竖过来。然后到我们这里边。

给各位详细来解释一下啊。大家看啊，现在这里边呢，我们发现有很多内容，有同学第一眼看到说老师这么多内容是不是很麻烦呀，其实它并不麻烦，它里面是一个比较通用的一个流程，只要你把登录过程呢，给它清晰知道，那的代码应该说并不复杂，那我们看一下怎么做的啊，首先我们看第一部分。第一部分呢，我们引入了一些相关组件，比如有咱们刚才装的检cooking，然后有viewue，有咱们刚才创建两个文件，一个叫user info，一个叫msm，就主要就是这三个啊，这是我们需要用到的，然后除了这个之外，大家看啊，我下面呢，定义了一个常量，里边有几个固定值，这几个固定值都是咱们一会儿会用到的，包括里边比如说这个phone啊，什么手机号码等等一些固定值。然后除了这个之外，下面是各位熟悉结构，你看这结构中啊，第一个叫date。

第二个create，第三个叫methods，这是我们的系列结构，然后这个在什么，我们怎么去看呢？大家看啊，首先第一部分，当咱们现在点击我的这个按钮叫登录或者注册，它是不是要弹出一个这个登录那个弹框了，那我们先找到登录注册这个按钮位置。你注意啊，这代码别复制错位置，咱们的买里边，那我先找到登录注册的位置，各位看到。是不是里边的这个地方，所以咱在登录注册中就能做这个操作，然后登录注册中，你看我里边怎么做的，我就加上了这么一个东西叫dialo user，这个值等于也是把这值变成处，那我这个弹框就可以打开了，所以它里边就是这么一个结构，这各位知道啊，当然包括其实你可以把这个登录注册在下面呢，单独写个方法也可以实现。

啊，就是都能做到，我们就用这个功能，我现在这样它就等于处，然后它等于处之后，我们这里边这个弹框就会打开，也就是里边的这一部分就做显示。那这个显示之后呢，里边有个特点啊，大家看啊，你看我这上面部分，这是手机登录，我就加了注释，这是微信登录，比如单第一次为了让它是手机登录，那怎么显示呢？这里边我加了一个V-U判断，就是当这个只是phone就显示，当这个值是微信就显示，那怎么是phone呢？但它这个名字啊叫show low in。Type，我们来搜一下这个值。大家看咱们在初始值的时候，这个值是不是就是Bo文，所以咱们第一次进入之后，我们这里边就是登录就打开了，包括这里边我给他也做了一个赋值，就是把这个值给这个dialo啊，这么一个就是对项做了一个赋值，所以现在我们把这部分就做了，做一个说明，然后说完这个之后，就当我们打开弹框之后，它就进入到我们这个手机登录，在手机登录中有些值，比如你看这些值都是咱们取那个对象中的值。

大家看这纸就是手机号码这个内容。然后在内容中呢，因为咱们要做这个手机验证码的发送，所以我这位置呢，需要咱们点击这个按钮，大家看啊，这个叫log in b TN，是不是叫后验证码，比如说我们进入页面中，就是拿回测试效果，当我点这个后验证码，它就调用这个实验中的方法叫BTN。再看方法中做什么啊，首先第一个这个值变成会验证码，然后咱们取到里边这个值。这一部分就是去发送咱们那个验证码，因为他要做一个最终这个发送，而这部分渠道是什么呢？咱是不是要根据手机号去发送，它就是把我们那个输入到手机号得到，然后咱们点它最后发送，比如这个地方。第一行是手机号，当我们输入手机号之后，咱们点这个发送验证码，它就可以得到手机号，然后进行验证码发送，就是到我们这个地方，然后这一行代码就是进行发送，包括那个倒计时的效果，咱看一下啊。