19. 尚硅谷_Mpvue_前后端交互实现

好来，咱们接着上节课来说，上节课呢，我们是把头头部这个样式呢，哎，结构搭建完了，以及这个清楚功能呢，我们做完了，那这节课呢，我们来做什么呢？就是搜集这个用户输入的内容，在用户点击搜索的那一刻去发请求获取数据，哎，现在呢，回到我们这个模拟器里边，我给大家讲一个场景啊，在我们的真在我们真实的手机上边呢，当用户在这儿点击输入的时候，他应该是去干嘛，调取我们的小键盘去输入内容，那输完了以后呢，你可以去看一下你自己的手机啊，一般来说用户会点击右下角这儿有个完成。或者叫前往或者叫确定的按钮，一点击，其实就是相当于发请求，对吧？那因为在模拟器上边，我用的是我们电脑上的键盘，所以呢，压根儿没有那个搜索的按钮，哎，没有那个按钮，那我就不知道什么时候点那个button，也不知道什么时候去发请求，对吧？那其实微信小程序在设计的时候呢，他也考虑了这一点啊，那这个input我们往下来看啊，往下来看其中有一个事件，那先说这个属性，Input有一个属性呢，叫confirm type，设置键盘右下角按钮的文字仅在type为text的时候生效，那我们现在的type是不是就是text type，嗯，那也就是说这个type是可以设置那个按钮的文字是什么，比如说我在这去设置一个走。

啊，我们就叫它搜索，那这个时候大家在真机上去体验的时候，你会看到右下角有一个搜索的button，好设置完这以后我们再往下看啊，再往下看下边这还有一个叫by confirm，点击完成按钮，这个完成按钮就是我们刚才提到右下角的那个确认按钮，来点击这个按钮。

时触发，那再次强调啊，这个事件呢，叫confirm by，只是说绑定事件的方式，而点击触发的时候啊，这有event对象的哈，啊，还有个对象呢，只不过这个我们用不用待会再说，好，那这个时候我们要绑定一个事件，应该是事件名是不是叫confirm呀？好，来我们绑定一下啊，At confirm在这儿呢，我们来一个handler search。好，那对应的这个事件呢，我们应该定义在method里面，那这个呢是在搜索。功能函数来，为了证明一个事情啊，我先这先打一个lock，那刚才也说了，这个可form什么时候被触发呢？人家文档上说的是点击完成按钮时触发，对吧？但是在模拟器里边很明显没有那个按钮，那这个时候呢，它其实为我们提供的回车，大家看我这输入内容，一敲回车键，诶右侧是不是就有打印啊，有打印意味着对应的这个处理函数是不是被触发了？好，那知道了模拟器上怎么触发以后，那接下来我们要做的是什么呀？在这儿呢？那就是哎，获取用户啊输入的。

内容，那接下来呢，就是发送请求给服务器获取数据，那用户输入的内容其实我们知道啊，是什么呀，那不就是search content吗？对吧？来那发送请求给服务器，那接口呢，我们可待会儿可以看接口文档。

我们稍微再来回顾一下，在小程序里边怎么发请求啊，对应的API。嗯，其中有一个呢叫网络，那第一个就是发请求，微信点request，哎，传参的套路呢，如果说大家熟悉解query发送加请求的方式，你会发现啊，这里面的东西比较熟啊，其实相当于是一模一样，那我们因为用过啊，我就在这直接再用了微信点request，那这是一个对象，首先URL是不是少不了，还有什么要不要传参，要那这个参数呢？我在这儿再次强调一下啊，大家看参数的类型，支持stream object以及buffer对吧？在这儿呢，为了统一啊，我们在这儿呢都使用的是对象啊，是对象，那现在呢，我先用对象来表示一下，除了这些呢，最起码你得是不是有个成功的回调，而且呢，在这儿我们一定是通过参数的形式拿到最后的数据，那这个地址呢？

前边我们应该知道HVB，呃，Local host对应的是3000，然后呢，我们去看接口文档，这是不是URL，哎，没问题，呃，对应的参数re EQ。Re EQ其实不需要在这写啊，因为下面这是有个data，那这个data的话，我在外边去整合一下，呃，Let data的一个对象K呢，叫什么REQ啊，Value呢就是z.search count是不是就可以？没问题吧，啊，那接下来这个data塔这是不是就不需要写了啊，为什么不需要写呢？因为ES6里面有个对象的解写方式，同名的属性可以省略一个不写好，那这一版我们去发请求，我们来看一下啊，刷新我输个A走你好，呃，当我敲回车的时候，我们看到右侧这有一个提示啊，有一个报错，而我们的请求呢，发送是失败了，为什么呢？他说我当前的地址呢，不在以下request合法域名列表当中，在这呢，我要说一下啊，大家在实际开发的时候，你要请求你的从小程序，请求你的服务器的时候啊，你需要先把你们对应服务器的地址啊，干嘛呢？在这儿去设置一下。

嗯呃哎，在开发里面啊，来点击开发。开发里面开发设置往下翻在这儿，这就是我们服务器域名的列表，我们可以把我们的服务器域名在这里配置一下就OK，好这是第一个问题啊，第一个问题，第二个问题是啥呢？呃，来到我们对应的API这。

往上翻大家看啊，这发起的是HTTPS网络请求，哎，使用前呢，请注意阅读相关说明，在这儿呢，有一整篇说我们网络请求的啊，嗯，在这里呢，我需要说几个重点啊，说几个重点，嗯。往下翻，往下翻。第一个大家先记住这个，我们现在用的方法是不是request，那你最大的并发限制是十个，也就是说小程序里面发起就要注意啊，你不能同时发的个数太多，是最大是十个，同时呢，还得说一下啊，小程序里面他为了安全起见，要求我们发的请求都必须是HTTPS协议。

啊，这个如果说大家在公司开发的时候啊，你应该是跟你们后台提前要说这个接口一定得是HTTPS的接口，好知道这个以后呢，回到我们这啊这啊既然出了这么多错误，我们是不是请求就发不了了呢？其实也不是，大家看啊右侧右上角这儿有一个详情，点击一下往下翻啊往下翻下面这有一个选项叫不校验合法域名，当我们把它勾上的时候，再次去发送，它就不会去检查我们当前请求是否符合它的规范，只要说有对应的服务器，服务器给你数据，你就能发送，那这个时候大家看我们的数据是不是拿到了。这是一个对象，而我们返回的数据是否被它包装了在这个对象的data塔里边啊，那也就是说我们最终要的对象应数据应该是res点贝塔，再跑一把AA，看回撤来数字是不是拿到了，好，那到现在为止呢，我们就是成功的去获取了后端的数据啊，完成了一次前后端的交互，好，那这节课呢，我们就讲到这里。