今天你看了嗎?Vue框架之?dāng)?shù)據(jù)交互http請(qǐng)求

原文出處: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ù)返回顯示在頁面中,如下圖:

image

測(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:

image

圖1-1-1

二、準(zhǔn)備編寫代碼

數(shù)據(jù)請(qǐng)求有三種方式:Get、Post、Jsonp 下面通過例子具體說明。

  1. 編寫html 代碼,準(zhǔn)備好三個(gè)按鈕事件,代碼如下圖1-1-2:
image

圖1-1-2

2. 編寫Vue 代碼及事件方法,如圖1-1-3

image

圖1-1-3

3. 實(shí)現(xiàn)請(qǐng)求交互

(1) Get 請(qǐng)求方法的實(shí)現(xiàn),如圖1-1-4:

image

圖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:

image

圖1-1-5

注:

(1) 在同級(jí)頁面下新建 testlogin.php文件, 代碼如下圖1-1-6

image

圖1-1-6

(2) 由于是php 頁面,所以需要php 運(yùn)行環(huán)境,可以百度搜索。

(3) Jsonp 請(qǐng)求方法的實(shí)現(xiàn),如圖1-1-7:

image

圖1-1-7

注:

(1) 使用 jsonp 請(qǐng)求數(shù)據(jù)接口,前提必須要服務(wù)接口支持,否則將無法正常獲取數(shù)據(jù)。

(2) 淘寶數(shù)據(jù)接口請(qǐng)求成功后,數(shù)據(jù)格式如下:

image

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)多諒解。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容