132-尚硅谷-尚医通-前台用户系统-微信登录-手机号绑定和前端整合

各位同学，下面呢，我们开始整合微信扫码登录的前端。刚才呢，在。微信调用到接口里边呢，我们最终重镜向到了这个地址中去，所以咱们下面呢，根据地址就来创建页面，在页面中把里面这几个值得到，然后得到之后呢，再去访到咱们那个登录的弹框，最终做手机号的绑定，然后把功能完成，那下面我们来调一下，刚才我提到了这里边呢，前面地址是local house3000，后面叫微信扣back，而这个名字呢，它默认在我们框架中会到配里边找页面，因为咱们叫微信扣back，所以我怎么做呢？我在配里边呢，先建个文件夹，我就叫这个微信。然后在微信文件夹中，我们创建一个voe的这么一个文件，咱们叫call back。

点E。然后它最终当你重定项，它就会仿到里边的这个一般中来就是扣back.voe中，所以咱们下面就在扣back vouee中写出它的内容，那内容怎么做呢？大家看我课件中提供的代码里边给各位写出来了，咱们把它直接拿过来，这代码就这么几行，那代码中呢，我强调什么意思啊，首先基本结构，然后在support里边，第一行叫layout按体，就是它的布局，这布局呢，如果你不写的话，默认用default，我这里面加个MT，就是你可以在建布局，但是这行其实可以没有，我就把它去掉了，因为这跟我没有影响，因为咱直接到我们那个弹出页面。然后下面主要是这个地方很重要，给大家解释一下什么意思啊，首先第一个mounted，在页面渲染之后进行操作。因为咱们现在呢，重钉向到这页面的时候呢，我们在后面它的地址栏后面是拼上了几个参数，大家看啊，一个叫ton，一个叫op PID，一个是不是叫内，所以咱需要把这三个值得到，而三个值怎么得到呢？咱们之前的曾经写过这么一段代码。

不是，各位是否记得啊，给大家写一下，当时咱这么写过，叫这点这个root。点P。点ID，各位应该记得D得到是不是你路由后面的值啊，但是这个得到针对什么情况，是你在后面直接写个值得到，而在目前是不是加上一个问号名称等于值，然后名称等于值是情况，所以你这么写的话，就是你加问号加上拼接的名称等于值的情况，你用之前的方式就得不到了。那我们怎么得到？这里边一种新的用法，咱之前没用过，现在给大家说一下，叫this.root.query用这一行代码能得到你问号拼接的那些切换的部分，然后这里边加你的key，比如说我这名字有三个，就是token open ID name，你看我写法中加上三个名字，这三个值就可以得到，所以这是它的一个写法，然后得到之后我们再调用咱们那个弹框里面方法，用window.parent就是它的负的这个vuee方法，然后里面把参数传进来，咱们在这个弹框就是我们的。

买开中一是我就写上这么一个回调的方法，里面把三参数得到就可以了，就是通过这个call back页面，咱们做一个中转页面，由页面再跳转到咱的弹框里边会更加方便，这是咱们写一个目的。所以现在这页面就写出来了，然后写完之后咱们来到my head里边，在my head中根据刚才写的这个结构，把里面这个回调给它写出来，还是来到里面那个wanted中我们找到。

Mount的在这里，然后mount里边呢，我们写上它这个回调的这个方法，我写一下啊，就是微信。回调的这个话部分，那我们加上就是一个window啊，加上这个名字跟之前写法很类似，给各位啊拿过来。就是里边的。就在代码。我把它分过来。然后大家看一下啊，代码中首先咱们给它当前这个页面，我们叫self，然后用window叫log in call back，你看这个名字跟它是不是对应，这个部分就会调用到这里边，然后三个参数调用到，三个参数传回来之后，然后再调用当前页面中这个叫log印call back，最终我们可以做个实践，所以咱们下面就来写这个方法。不知道各位是否听懂啊，我再说一遍，当咱们通过接口重定向到是不是这个扣back页面，并且传参数，那我在扣back页面中把三个参数得到，得到之后呢，去调用my head中的这个。

Log in扣back方法就可以了，在这里边因为咱通过这个回调的方式，把三个参数通过它得到，然后最终调里边这个烙印扣back方法做到，那下面就写这个方法就是。微信。回调的方法，烙印扣，Back。把这个写过来，然后在这个方法中，咱们传入三个参数，最终来实现里边这个具体功能，把这个啊给大家就最终拿过来，然后咱们看一下这个操作啊，首先在里边三个参数，Name ton open ID，然后下面我们做了判断，就我们之前说到的，如果说欧派D不等于空，那这个时候。咱是不是需要绑定手机号了，所以我这里边就wi ID不是给那uage in phone，然后咱调这个售烙印方法进行手机号的绑定，其实就是登录流程，如果说这个值呢，它等于空，表示你已经绑定了手机号，那我们直接放到空域中，最终就完成登录，所以里边根据open ID判断你是否需要绑定手机号，如果这个值不等于空，就里边有值咱绑定，如果它等于空，那我们就独径绑定，就是刚才我说的这个过程。

所以这个给各位把这方法我们就写出来了。大家把这前端能给他掌握出来，然后这个写完之后呢，其实咱们目前呢，把这流程应该基本上就做到了，最终做就一件事情，咱们就改一下之前那个手机中的部分，因为咱们要把微信登录跟手机号绑定结一起，比如说你微信扫完之后，进入到的还是手机那个登录页面，只是里边我们要做个修改。

那咱最后把这改一下啊，我先把这些都关掉，咱来到手机登录那里边，手机登录我们有这个ctrler ctrl里边调service service中有方法，在方法里边我们就来写一下，就是这个位置，我们需要给它做一个判断。那怎么判断呢？大家各位看一下，然后咱们快速编写一下啊，首先第一步，如果说我们这个log in VO州就传到对象中这个open ID，它不等于空，就里边有值表示咱是不是要绑定手机号啊，那这里边我们就先去查数据库，看里边有没有这个值，如果这个值不等于空，那我们做这操作，然后否则做其他操作，然后最终做判断，所以写的就是里边的这个代码，还是通过open ID做判断，如果有值的话咱们绑定，没值的话咱直接做其他操作，在里边还这个判断。然后把这个啊给各位拿过来。

我在里边写一下啊，就刚才我们写过这个方法。User info service。看下这个注入。啊，这个咱应该啊，应该在我们这个就是这里边啊，那这里边我就直接去调一下我们刚才那个方法应该就可以了，就是刚才的这个方法。我写一下哈。找到这个位置。它就是这次点select微信info open ID，咱们传说D，大家看这个逻辑啊，首先判断如果说。派D。不等于空。就是这里边有值，那我们根据WiFi ID去查一下数据库中有没有这个值，就是数据库里有，如果它里边不等空，那我们设置手机号，包括做一个绑定，最终做一个更新这个流程，比如把那个，因为大家注意这个流程啊，可能稍微麻烦一点点，咱们第一次微信扫码之后，像这里边是不是要加一条数据啊，但是我微信扫码之后的数据中没有手机号吧，然后第二次咱判断里边有没有这个值，如果有的值的话，咱再更新手机号，把手机号再加进去，所以它里边有这么两个过程，第一步是加数据，但是没手机号，第二步是更新，里边就把手机号给他加进去，所以里边做的就这个过程，大家把这个好好去理解一下啊，然后后面同样做判断，然后写一下。

就是如果说这里边A值不等于空，如果它等于空，那我们还是进行我们正常的手机的登录，这个等于呢，还是做这个操作。对，代码。给各位数过来。啊，就是里边的这个流程，我写个注释啊。如果说我们的user info为空，那咱还进行正常的。手机登录还是做这个过程，然后里边还是做相应的这个操作。

把这个啊给他稍微改一下，所以咱们现在就通过这个过程，把咱们的微信扫码登录的所有流程应该就都完成了，所以大家通过我刚才说的过程，能把这个代码给它最终能写出来，这过程呢，要稍微麻烦一点，但是各位要能理解里面这个流程。我最后呢，把这流程给大家再来说一遍，这过程我们是怎么做的，然后咱们最终再做测试，那我说一下啊，首先第一步我们是生成微信的二维码，这里面这个步骤，当我们一扫之后，它会进行回调去调用，我们里边的刚才写的就是这个方法，我们找到啊这个方法就是这个扣back，然后在扣back中，根据微信的流程，咱们得到扫码人的信息，包括昵称，包括头像，包括什么open ID等等，最终数据加到数据库，然后加到之后我们就让他。

重镜像到咱们的前端页面中，在前端页面中我们给它得到咱们传过来的几个值，然后得到之后去调用咱们那个就是弹框，也就是那个登录弹框中的那种，在登录成功中，咱们把值得到，然后判断看你是否需要绑定手机号，如果说ID不等于空，咱就进行登录，那个过程就是绑定手机号，如果它等于空，那我们就直接进行登录，而在过程中最后咱还需要改这个绑定手机号的接口，其实就是登录的流程。在这接口中，我们的做法就是刚才给大家应该刚写过在这里边。根据open ID做判断，如果说咱们这里边open ID不等于空，那咱们查数据库，把值得到向里边绑定手机号，如果等于空，那我们再进行其他的这些操作。所以这里边我们把这个接口部分和前端部分咱们就完成了整合。