原文出處：http://mp.toutiao.com/preview_article/?pgc_id=6530408768281248260
今天要分享的技術(shù)是關(guān)于Vue 數(shù)據(jù)交互之Http的使用。這里需要通過一個(gè)例子來說明，頁面上有三個(gè)按鈕，點(diǎn)擊后發(fā)送請(qǐng)求，并將數(shù)據(jù)返回顯示在頁面中，如下圖：
測(cè)試的效果圖
一、準(zhǔn)備工作
在 Vue 中使用數(shù)據(jù)交互需要引入vue-resource.js 文件，本身Vue.js 是不具備交互框架的。
1. 首先要下載vue-resource.js文件，并將文件保存至目錄lib\vue 下，與vue.js 同級(jí)，方便管理。 文件下載地址：https://cdn.jsdelivr.net/npm/vue-resource ,右擊另存為即可保存。
2. 準(zhǔn)備html代碼框架，并引入相關(guān)文件，如下圖1-1-1：
圖1-1-1
二、準(zhǔn)備編寫代碼
數(shù)據(jù)請(qǐng)求有三種方式：Get、Post、Jsonp 下面通過例子具體說明。
- 編寫html 代碼，準(zhǔn)備好三個(gè)按鈕事件，代碼如下圖1-1-2：
圖1-1-2
2. 編寫Vue 代碼及事件方法，如圖1-1-3
圖1-1-3
3. 實(shí)現(xiàn)請(qǐng)求交互
(1) Get 請(qǐng)求方法的實(shí)現(xiàn)，如圖1-1-4：
圖1-1-4
注： 使用方法為：
(1) this.$http.get/post/jsonp(#請(qǐng)求URL#,參數(shù)，額外屬性).then(“#成功方法實(shí)現(xiàn)#”，“#失敗方法實(shí)現(xiàn)#”);
(2) 上圖方法中的successData 存放的是請(qǐng)求成功后所返回的數(shù)據(jù)，而errorData是指請(qǐng)求失敗后所返回的數(shù)據(jù)。 且名字可以自定義。
(3) successData.data 指獲取successData 中的data 值，而successData.status 指獲取請(qǐng)求響應(yīng)的狀態(tài)碼（404指找不到頁面、500指服務(wù)器異常響應(yīng)失敗、200指請(qǐng)求響應(yīng)成功）。
(4) "請(qǐng)求的URL" 可以是網(wǎng)址，也可以是文件，只要能訪問并有數(shù)據(jù)返回就行。
(2) Post 請(qǐng)求方法的實(shí)現(xiàn)，如圖1-1-5：
圖1-1-5
注：
(1) 在同級(jí)頁面下新建 testlogin.php文件， 代碼如下圖1-1-6
圖1-1-6
(2) 由于是php 頁面，所以需要php 運(yùn)行環(huán)境，可以百度搜索。
(3) Jsonp 請(qǐng)求方法的實(shí)現(xiàn)，如圖1-1-7：
圖1-1-7
注：
(1) 使用 jsonp 請(qǐng)求數(shù)據(jù)接口，前提必須要服務(wù)接口支持，否則將無法正常獲取數(shù)據(jù)。
(2) 淘寶數(shù)據(jù)接口請(qǐng)求成功后，數(shù)據(jù)格式如下：
JSON數(shù)據(jù)結(jié)果
(3) JSON.parse 指解析JSON數(shù)據(jù).
三、完整代碼如下：
<html>
<head>
<title> 測(cè)試Vue 交互例子 </title>
<meta charset="utf-8"/>
<script src="lib/vue/vue.js" type="text/javascript" charset="utf-8"> </script>
<script src="lib/vue/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
new Vue({ // 實(shí)例化Vue 對(duì)象
el:"#box",
data:{
resultMsgByGet:"", // 顯示Get方式請(qǐng)求的結(jié)果
resultMsgByPost:"", // 顯示Post 方式請(qǐng)求的結(jié)果
taoBaoData:[] // 定義一個(gè)數(shù)組，存放數(shù)據(jù)請(qǐng)求結(jié)果的集合
},
// 聲明請(qǐng)求方法
methods:{
requestByGet: function (){
console.log("==========requestByGet==========")
this.$http.get("test.txt").then(function (successData){
this.resultMsgByGet = successData.data+"=======請(qǐng)求響應(yīng)碼是"+successData.status;
},function (errorData){
console.log("=====errorData==="+errorData)
});
},
requestByPost: function (){
console.log("==========requestByPost==========")
var baseUrl = "testlogin.php";// POST請(qǐng)求PHP 頁面
var params = { // 請(qǐng)求數(shù)據(jù)
username:"小明",
userpass:"123456"
};
var otherParam = {
emulateJSON:true // 告訴服務(wù)器數(shù)據(jù)參數(shù)類型以JSON 傳遞接收。
};
this.$http.post(baseUrl,params,otherParam).then(function (successData){
this.resultMsgByPost = successData.data+"=======請(qǐng)求響應(yīng)碼是"+successData.status;
},function (errorData){
console.log("=====失敗=====requestByPost=========="+errorData)
});
},
requestByJsonp: function (){
console.log("==========requestByJsonp==========")
var baseUrl = "https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb"
this.$http.jsonp(baseUrl).then(function(myData){
// 解析JSON數(shù)據(jù)
var myObj = JSON.parse(myData.bodyText);
var tempD= myObj.result;
console.log(tempD)
var tempC = [];
tempD.forEach(function(item){ // 遍歷數(shù)據(jù)集合，取出數(shù)據(jù)，放入臨時(shí)數(shù)組tempC
console.log();
tempC.push(item[0]);
});
this.taoBaoData = tempC;
},function(errorData){
console.log("==========errorData==========") //請(qǐng)求失敗
})
}
}
})
}
</script>
</head>
<body>
<div id="box">
<h2> Vue 請(qǐng)求的方式</h2>
<ul>
<li> Get 請(qǐng)求 </li>
<li> Post 請(qǐng)求 </li>
<li> Jsonp 請(qǐng)求 </li>
</ul>
<input type="button" value="Get請(qǐng)求" @click="requestByGet()" />
<input type="button" value="Post請(qǐng)求" @click="requestByPost()" />
<input type="button" value="Jsonp請(qǐng)求" @click="requestByJsonp()" />
<p> Get 請(qǐng)求文件返回的結(jié)果是：{{resultMsgByGet}} </p>
<p> Post 請(qǐng)求PHP頁面返回的結(jié)果是：{{resultMsgByPost}} </p>
<p> Jsonp 請(qǐng)求淘寶網(wǎng)頁搜索數(shù)據(jù)返回的結(jié)果是： </p>
<ul>
<li v-for="item in taoBaoData">
<span>{{item}}</span>
</li>
</ul>
</div>
</body>
</html>
每天進(jìn)步一點(diǎn)點(diǎn)，人生邁出一大步！
注： 本文章僅限于對(duì)自己學(xué)習(xí)技術(shù)的總結(jié)，方便自己能力的提高，寫得不好的地方請(qǐng)多諒解。
