今天你看了吗？Vue框架之数据交互http请求

原文出处：http://mp.toutiao.com/preview_article/?pgc_id=6530408768281248260
今天要分享的技术是关于Vue 数据交互之Http的使用。这里需要通过一个例子来说明，页面上有三个按钮，点击后发送请求，并将数据返回显示在页面中，如下图：

image

测试的效果图

一、准备工作

在 Vue 中使用数据交互需要引入vue-resource.js 文件，本身Vue.js 是不具备交互框架的。

1. 首先要下载vue-resource.js文件，并将文件保存至目录lib\vue 下，与vue.js 同级，方便管理。 文件下载地址：https://cdn.jsdelivr.net/npm/vue-resource ,右击另存为即可保存。

2. 准备html代码框架，并引入相关文件，如下图1-1-1：

image

图1-1-1

二、准备编写代码

数据请求有三种方式：Get、Post、Jsonp 下面通过例子具体说明。

1. 编写html 代码，准备好三个按钮事件，代码如下图1-1-2：

image

图1-1-2

2. 编写Vue 代码及事件方法，如图1-1-3

image

图1-1-3

3. 实现请求交互

(1) Get 请求方法的实现，如图1-1-4：

image

图1-1-4

注： 使用方法为：

(1) this.$http.get/post/jsonp(#请求URL#,参数，额外属性).then(“#成功方法实现#”，“#失败方法实现#”);

(2) 上图方法中的successData 存放的是请求成功后所返回的数据，而errorData是指请求失败后所返回的数据。 且名字可以自定义。

(3) successData.data 指获取successData 中的data 值，而successData.status 指获取请求响应的状态码（404指找不到页面、500指服务器异常响应失败、200指请求响应成功）。

(4) "请求的URL" 可以是网址，也可以是文件，只要能访问并有数据返回就行。

(2) Post 请求方法的实现，如图1-1-5：

image

图1-1-5

注：

(1) 在同级页面下新建 testlogin.php文件， 代码如下图1-1-6

image

图1-1-6

(2) 由于是php 页面，所以需要php 运行环境，可以百度搜索。

(3) Jsonp 请求方法的实现，如图1-1-7：

image

图1-1-7

注：

(1) 使用 jsonp 请求数据接口，前提必须要服务接口支持，否则将无法正常获取数据。

(2) 淘宝数据接口请求成功后，数据格式如下：

image

JSON数据结果

(3) JSON.parse 指解析JSON数据.

三、完整代码如下：

Vue 请求的方式

• Get 请求
• Post 请求
• Jsonp 请求

Get 请求文件返回的结果是：{{resultMsgByGet}}

Post 请求PHP页面返回的结果是：{{resultMsgByPost}}

Jsonp 请求淘宝网页搜索数据返回的结果是：

• {{item}}

每天进步一点点，人生迈出一大步！

注： 本文章仅限于对自己学习技术的总结，方便自己能力的提高，写得不好的地方请多谅解。