27. 尚硅谷_Mpvue_服务器端获取openId接口设计

好了，我们继续啊，上一节课呢，我们说到这个需要前后端交互了，对吧？那现在呢，我们先来到我们的服务器端去设置一个接口，那这个接口呢？啊是干嘛的呢？是呃，用于啊获取用户open ID的接口，来我们去看一下这个接口文档啊呃，首先方法是get啊，这是URL啊，前端需要传参参数的P调code。对吧，那知道了这个以后呢，来来到这一块啊，我们来一个route点，方法是get，然后呢，URL，诶不应该是它啊，不应该是扣的，我们把这个粘一下，应该叫get open ID好，我们先把对应的回调写好，在这里边呢，有一个CTS，然后有一个next来呃，前端请求，我们当前的接口呢，一定是会给我们干嘛的，是吧？哎，提交这个参数啊，所以呢，这个套路还是这老三样，把这个拎过来，我们先把之前的啊这些都干掉，最后一步也不要，呃，注释我留着啊，第一步获取请求参数，那这个参数呢，应该是扣啊，至于说怎么获取呢？CTx.query点，到时候他传的字段呢，必须叫code啊，我们才能拿到code的，拿到了code以后我们可以干嘛呢？

哎，呃，那来到我们的同事这一块，我们去看一下，当服务器呢，拿到code，他需要整合这三个数据是吧？对接微信的接口呀，好客的有的，那APPID和APAPPS，至于说在哪获取，我们之前也讲了，来来到我们首次登录的这个界面在这儿呢，大家看这是不是就是我们的AP appd啊来，那这个时候呢，我们来到这个，呃，服务器端这定一个PID，哎，这应该是字串啊，是不是等于这一长串还有一个PI，哎，S。

等于什么呢？哎，等于一个我们需要的字段，那哎，那这个secret呢，我就用这个啊，刚刚这个应该是没有拼对，好再来一个A，那至于说这个3RA长什么样呢？注意它不是名门，我们得需要去点击生成，然后才能拿到对应的密钥来我们走一把啊好走点击生成以后，大家看这是不是生成了一个密钥，对吧？那生成了这个密钥以后呢，我们赶紧得去复制一下这个密钥，然后你点击一下，诶我已了解了，这个不会明文重组在这个开发平台，并且呢，保存好它，点击一下确认关闭，我们就再也看不到了啊，再也看不到了，那这个时候呢，我刚刚已经复制好了，诶把它先贴到这儿，保存好了以后和大家说一下啊，如果说你没有及时的保存你的密钥，下一次再想用怎么办？你还得点生成，诶还得点生。

分成，然后呢，你了解这个确认关闭以后，它是不是又给你收起来了，好，那知道了这个以后，来我们来到服务器端，这三个参数我们是吧，都有了，那都有了以后，接下来我们要考虑的是我们的服务器跟微信的接口怎么对接，那一定是需要一个接口，对吧？那这个接口在哪写着它下边有说明啊，嗯，调用author code to session这个接口去获取这个open ID和会画的密钥，那这是一个链接，我们去访问一下，来来到这一块，这儿说了请求的地址是get，那后面这个就是我们需要对接的接口，来在这呢，我去给它，嗯，定一下啊来这个URL等于这个接口，这个接口里边，那前面这些，哎，这是。

固定的URL，那后面这是需要我们传的参数，大家看一下啊，有三个地方我们应该是动态的，给人家第一个APPID，第二个你要第三个code，这都是我们准备好的内容，对不？因为我们接下来要去动态的写这个URL了，所以呢，我选择用模板字符串，那在这里面呢，我们就把它动态的地方用Dollar符大括号圈起来，好把这呢也换掉来，那接下来我只需要把我们准备好的数据是不塞进来就行了，第一个扣等哎是在这儿，千万不要放错了啊，APPID，那是在第一个，然后S，哎，在第二个。

好了，URL也准备好了以后，我们接下来一步要干嘛呢？去发送请求，发送请求在这呢，那就是我们需要啊发送请求，呃，给微信接口，然后呢，去获取什么open ID。对吧，那如何发送请求呢？在这儿给大家推荐一个库啊，推荐一个库来，我先把这个停掉，这个库呢叫fly IO，我们来到这个github上面，我们去搜一下它啊，叫大家搜一下这个FLY就OK，第一个小火箭的就是啊，我不让他翻译，来我们过来看一眼。哎，FLY这个库呢，它是一个支持所有javascript环境的，基于支持请求转发的一个HTTP请求库，那这个支持所有javascript的运行环境就很厉害，哎，对于浏览器的支持性呢，也很好，包括跨平台，其中有一个就是我们的小程序，还有什么noe，那接下来我们在node里面去使用一下啊，它呢也是基于promise分装的，哎，熟悉view的同学应该知道我们view里边是不是经常用的叫X，好，呃，其实它的用法呢，跟X特别像啊，我们先来看第一步是不是让我们下载安装来，那这个时候呢，我们去装一下啊，装一下来，装完了我们看看怎么用，呃，往下啊，要引入FLYL引入它，注意看，因为它支持的平台太多了啊。

它引入的方式其实不一样，你比如说在noe里面引用和在小程序引用，那这儿的内容它就不一样啊，不一样，然后呢，下面这儿其实还专门是不是有一个node的入口呀，只不过这给我们注掉了，那我就用这个专门node的入口来试一下，来放到上面去引入FLYL啊，在这呢，我就同意用flat了啊，引入了以后，来接下来往下看，这一步是不是要定义flight的实例啊实例，所以呢，照着它继续往下走，Flat这个FLY，这大家要注意一个小细节，这个FLY很明显是个构造函数，但是呢，人家说了这不需要括号，那咱也就不写，FLY的实力有了以后我们再来看。

呃，接下来看使用吧这些，因为上面这些说的都是在不同的平台去引入啊，这有一个例子，那现在我们要发的get请求，那这就是get请求的例子，直接把它搂过来，OK，呃，我们发请求的啊去域在这，那这是不是要传一个URL，这个URL我们已经有了，那就是它好，那现在其实我们就可以干嘛了，以发请求给腾讯的服务器啦，包括这是不是有响应数据啊，那现在我们还不知道拿到的数据长什么样，我们可以怎么做呢？我们先给这个接口呢，设置一个假的返回数据啊，呃，这个是临时返回。

嗯，数据，呃，待会儿呢，确认了我们到底要返回啥了，再把这个替换掉，你说我现在为什么要加这个呢？哎，如果说我们不设置这个返回值的话，那当前请求这个接口的话，它是会404的啊这个大家要知道好了，把这些写好以后呢，我们可以再去启动一下我们的项目，那启动了以后呢，接下来这个接口是不是得有人请求呀？啊，那我们后端的设计接口呢，先设计到这儿，下一节课呢，我们通过前端去请求这个接口，然后看一下我们拿到的数据到底是什么，那这节课呢，我们先讲到这里。