vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的臺兒網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

Vue可以構(gòu)建一個完全不依賴后端服務的應用，同時也可以與服務端進行數(shù)據(jù)交互來同步界面的動態(tài)更新。

Vue通過插件的形式實現(xiàn)了基于AJAX，JSPNP等技術(shù)的服務端通信。

vue-resource是一個通過XMLHttpRequrest或JSONP技術(shù)實現(xiàn)異步加載服務端數(shù)據(jù)的Vue插件

提供了一般的 HTTP請求接口和RESTful架構(gòu)請求接口，并且提供了全局方法和VUe組件實例方法。

使用的版本是：vue-resource 0.7.2

vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析

配置

參數(shù)配置

分為：

全局配置
組件實例配置
調(diào)用配置

這三部分的優(yōu)先級依次增高，游戲機高的配置會覆蓋優(yōu)先級低的配置。

全局配置

Vue.http.options.root = '/root';

全局配置option屬性

vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析

組件實例配置

在實例化組件時可以傳入http選項來進行配置

new Vue({
  http: {
    root: '/root',
    headers: {
      Authorization: ''
    }
  }
})

方法調(diào)用時配置

在調(diào)用vue-resource請求方法是傳入選項對象。

new Vue({
  ready: function() {
    // get 請求
    this.$http.get({url: '', headers: { Authorization: '' } })
      .then(() => {
        // 請求成功回調(diào)

      }, () => {
        // 請求失敗回調(diào)

      });
  }
});

headers配置

通過headers屬性來配置請求頭。

除了參數(shù)配置headers屬性可以設置請求頭外，在vue-resource中也提供了全局默認的headers配置

vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析

Vue.http.headers鍵值可以是HTTP方法名，common，custom，三種類型。這三種類型的配置會進行合并，優(yōu)先級從低到高依次是common,custom,HTTP方法名。

其中common對應的請求頭會在所有請求中設置，custom對應的請求頭在非跨域時設置，HTTP方法名對應的請求頭只有在請求的method匹配方法名時才會被設置。

基本HTTP調(diào)用

基本HTTP調(diào)用即普通的GET，POST等基本的HTTP操作實際上執(zhí)行增，刪，改，查是前后端開發(fā)人員共同約定的并非通過HTTP的請求方法如GET表示獲取數(shù)據(jù)，PUT代表寫入數(shù)據(jù)，POST表示更新數(shù)據(jù)。底層方法和便捷方法執(zhí)行后返回一個Promise對象，可以使用Promise語法來注冊成功，失敗回調(diào)。

底層方法

全局的Vue.http方法和Vue組件的實例方法this.$http都屬于底層方法，他們根據(jù)所傳入option慘啊書的method屬性來判斷請求方式是GET還是POST，亦或是其它的HTTP的合法方法。

全局調(diào)用

Vue.http(option);

組件實例調(diào)用

this.$http(option)

全局調(diào)用和組件實例調(diào)用都是接收相同的option參數(shù)。都返回Promise對象。不同的是，全局方式回調(diào)this指向window，而組建實例調(diào)用方式回調(diào)指向組件實例。

組件實例方式發(fā)送POST請求

new Vue({
  ready: function () {
    // POST請求
    this.$http({
      url: '',
      method: 'POST',
      // 請求體重發(fā)送的數(shù)據(jù)
      data: {
        cat: 1
      },
      // 設置請求頭
      headers: {
        'Content-Type': 'x-www-from-urlencoded'
      }
    }).then(function () {
      // 請求成功回調(diào)
    }, function () {
      // 請求失敗回調(diào)
    });
  }
});

便捷方法

不同于底層方法，便捷方法是對底層方法的封裝，在調(diào)用時可以省去配置選項option中的method屬性。

vue-resource 提供的便捷方法：

get(url, [data], [options]);
post(url, [data], [options]);
put(url, [data], [options]);
patch(url, [data], [options]);
delete(url, [data], [options]);
jsonp(url, [data], [options]);

都是接受三個參數(shù)：

url（字符串），請求地址?？杀籵ptions對象中url屬性覆蓋。
data（可選，字符串或?qū)ο螅l(fā)送的數(shù)據(jù)，可被options對象中的data屬性覆蓋。
options

便捷方法的POST請求：

this.$http.post(
  'http://example.com', 
  // 請求體重發(fā)送數(shù)據(jù)給服務端
  {
    cat: 1,
    name: 'newBook'
  },{
    'headers': {
      'Content-Type': 'x-www-form-urlencoded'
    }
  }).then(function () {
    // 成功回調(diào)
  }, function () {
    // 失敗回調(diào)
  });

請求選項對象

option對象的各屬性及含義

參數(shù)	類型	描述
url	string	請求的URL
method	string	請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object,FormDatastring	request body
params	Object	請求的URL參數(shù)對象
headers	Object	request header
timeout	number	單位為毫秒的請求超時時間 (0 表示無超時時間)
before	function(request)	請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù)
progress	function(event)	ProgressEvent回調(diào)處理函數(shù)
credientials	boolean	表示跨域請求時是否需要使用憑證
emulateHTTP	boolean	發(fā)送PUT, PATCH, DELETE請求時以HTTP
emulateJSON	boolean	將request body以application/x-www-form-urlencoded content type發(fā)送

url

url（字符串）請求的URL地址

method

method(字符串)默認值為GET，請求的HTTP方法(GET,POST等)

data

data(對象或字符串)

默認值為:'',需要發(fā)送給服務端的數(shù)據(jù)。

data屬性的值對method為POST，PUT，DElETE等請求會作為請求體來傳送，對于GET，JSONP等方式的請求將會拼接在URL查詢參數(shù)中。

params

params(對象)

默認值為：{}用來替換url中的模板變量，模板變量中為匹配到的屬性添加在URL地址后邊作為查詢參數(shù)。

Vue.http({
  url: 'http://example.com/{book}',
  params: {
    book: 'vue',
    cat: 1
  }
});

最終url為： http//example.com/vue?cat=1

headers

headers(對象)
默認值為:{},設置HTTP請求頭

xhr

xhr（對象）默認值為null，該對象中屬性都會應用到原生的xhr實例對象上。

upload

upload(對象)默認值為null，該對象的屬性都會應用到原生的xhr實例對象的upload屬性上。

jsonp

jsonp(字符串)
默認值為:callback，JSONP請求中回調(diào)函數(shù)的名字。

Vue.http({
  url: 'http://example.com/book',
  method: 'JSONP',
  jsonp: 'cb'
});

最終的URL地址為http://example.com/book?cb=xxx

xxx 為 vue-resource 生成的隨機串。

tiemout

timeout(數(shù)值)
默認為：0，單位為 ms。表示請求超時時間。0表示沒有超時限制。超市后，將會取消當前請求。
vue-resrouce內(nèi)部通過攔截器注入超時取消邏輯。

if ( request.timeout ) {
  timeout = setTimeout(function () {
    reqest.cancel();
  }, request.timeout);
}
// 超時后，Promise會被 reject，錯誤回調(diào)會被執(zhí)行。

beforeSend

beforeSend（函數(shù)）默認值為:null，該函數(shù)接受請求選項對象作為參數(shù)。該函數(shù)在發(fā)送請求之前執(zhí)行，vue-resource內(nèi)部在攔截器最前端調(diào)用該方法。

emulateHTTP

emulateHTTP（布爾值）
默認值為:false,當值為true是，用HTTP的POST方式PUT，PATCH，DELETE等請求，并設置請求頭字段HTTP_Method_Override為原始請求方法。

如果Web服務器無法處理PUT, PATCH和DELETE這種REST風格的請求，你可以啟用enulateHTTP現(xiàn)象。啟用該選項后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設置為實際的HTTP方法。

如果服務器無法處理PUT，PATCH和DELETE的請求?？梢詥⒂胑nulateHTTP。
啟用之后，請求會以普通的POST方法發(fā)出，并且HTTP頭信息的X-HTTP-Method-Override屬性會設置為實例的HTTP方法

Vue.http.options.emulateHTTP = true;

emulateJSON

emulateJSON(布爾值)
默認值為：false,當值為true并且data為對象時，設置請求頭Content-Type的值為application/x-www-form-urlencoded

如果服務器無法處理編碼為application/json的請求，可以啟用emulateJSON選項。啟用之后，請求會以application/x-www-form-urlencoded為MIME type，就像普通的HTML表單一樣。

Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin（布爾值）

默認值為：null，表示是否跨域，如果沒有設置該屬性，vue-resource內(nèi)部會判斷瀏覽器當前URL和請求URL是否跨域。

if ( request.crossOrgin === null ) {
  request.corssOrigin = corssOrigin(request);
}
if ( request.corssOrigin ) {
  if ( !xhrCors ) {
    request.client = xdrClient;
  }
  request.enumlateHTTP = false;
}

如果最終crossOrigin為true并且瀏覽器不支持CORS，即不支持XMLHttpRequest2時，則會使用XDomainRequest來請求。目前XDomainRequest 只有IE8，IE9 瀏覽器支持用來進行AJAX跨域。

reqponse對象

response對象包含服務端的數(shù)據(jù)，以及HTTP響應狀態(tài)，響應頭等信心。

data （對象或字符串）：服務端返回的數(shù)據(jù)，已使用 JSON.parse 解析。
ok（布爾值）：當HTTP響應狀態(tài)碼在200~299區(qū)間時該值為true，表示響應成功。
status(數(shù)值)： HTTP響應狀態(tài)碼。
statusText(字符串)： HTTP響應狀態(tài)文本描述。
headers（函數(shù)）：獲取HTTP響應頭信息，不傳參表示獲取整個響應頭，返回一個相應頭對象。傳參表示獲取對應的響應頭信息。
request(對象)

RESTful調(diào)用

RESTful調(diào)用就是客戶端通過HTTP動詞來表示增，刪，改，查實現(xiàn)對服務端數(shù)據(jù)操作的一種架構(gòu)模式。

vue-resource提供全局調(diào)用Vue.resource或者在組件實例上調(diào)用this.$rsource。

resource(url ,[params], [actions], [options]);

url

url（字符串）請求地址，可以包含占位符，會被parms對象中的同名屬性的值替換。

this.$resource('/books/{cat}', { cat: 1 });
// 解析的URL為：/books/1

params

params(可選，對象)

參數(shù)對象，可用來提供url中的占位符，多出來的屬性拼接url的查詢參數(shù)。

actions

actions(可選，對象)

可以用來對已有的action進行配置，也可以用來定義新的action。

默認的aciton配置為：

Resource.actions = {
  get: {method: 'GET'},
  save: {method: 'POST'},
  query: {method: 'GET'},
  update: {method: 'PUT'},
  remove: {method: 'delete'},
  delete: {method: 'DELETE'}
}

修改默認值action配置

this.$resource(
  '/books/{cat}', 
  {
    cat: 1
  }, {
    charge: {
      method: 'POST',
      params: {
        charge: true
      }
    }
  });

actions對象中的單個action如charge對象可以包含options中的所有屬性，且有限即高于iotions對象

options

options(可選，對象)

resource方法執(zhí)行后返回一個包含了所有action方法名的對象。其包含自定義的action方法

resource請求數(shù)據(jù)

var resouce = this.$resource('/books/{id}');
// 查詢
// 第一個參數(shù)為params對象，優(yōu)先級高于resource發(fā)方法的params參數(shù)

resoure.get({id: 1}).then(function ( response ) {
  this.$set('item', response.item);
});

// 保存

// 第二個參數(shù)為要發(fā)送的數(shù)據(jù)
resource.seve({id: 1}, {item: this.item}).then(function () {
  // 請求成功回調(diào)
}, function () {
  // 請求失敗回調(diào)
});

resource.delete({id: 1}).then(function () {
  // 請求成功回調(diào)
}, function () {
  // 請求失敗回調(diào)  
});

攔截器

可以全局進行攔截器設置。攔截器在發(fā)送請求前或響應返回時做一些特殊的處理。

攔截器的注冊

Vue.http.interceptors.push({
  request: function ( request ) {
    // 更改請求類型為POST
    request.method = 'POST';
    return request;
  },
  response: function ( response ) {
    // 修改返回數(shù)據(jù)
    response.data = [{
      custom: 'custom'
    }];
    return response;
  }
});

工廠函數(shù)注冊

Vue.http.interceptors.push(function () {
  return {
    request: function ( request ) {
      return request;
    },
    response: function ( response ) {
      return response;
    }
  }
});
Vue.http.interceptors.push(function ( request, next ) {
  // 請求發(fā)送前的處理邏輯

  next(function () {  
    // 請求發(fā)送后的處理邏輯
    // 更具請求的狀態(tài)， response參數(shù)會返回給 successCallback或errorCallback
    return response
  });
  
});

實現(xiàn)的功能：

AJAX請求的loading界面

Vue.http.interceptors.push((request, next) => {
  // 通過控制 組件的`v-show`值顯示loading組件
  loading.show = true;
  next((response) => {
    loading.show = false
    return response
  });
});

請求失敗時的提示對話框

跨域AJAX

vue-resource中用到的CORS特性，和 XHMLHttpRequest2的替代品 XDomainRequest

XDomain只支持GET和POST兩種請求。如果要在vue-resource中使用其它方法請求，設置請求選項的emulateHTTP為true。

XHMLHttpRequest2 CORS

XHMLHttpRequest2提交AJAX請求還是和普通的XMLHttpRequset請求一樣，只是增加了一些新特性。

在提交AJAX跨域請求時，需要知道當前瀏覽器是支持XHMLHttpRequest2，判斷方法使用 in操作符檢測當前 XMLHttpRequest實例對象是否包含 withCredentials屬性，如果包含則支持CORS

var xhrCors = 'withCredentials' in new XMLHttpRequest();

在支持CORS的情況下，還需啊喲服務端啟用CORS支持。

例如：

需要從http://example.com:8080提交到http://example.com/8088，需要在http://example.com添加響應頭

Access-Control-Allow-Origin: *

XDomainRequest

如果vue0resource不支持XMLHttpRequest2,則會降級使用用XDomainRequest

Promise

vue.resource基本HTTP調(diào)用和RESTful調(diào)用action方法執(zhí)行后都會返回一個Promise對象。該Promise對象提供了then，catch，finally。

var promise - this.$http.post(
  'http://example.com/book/cretae',
  // 請求體中要發(fā)送給服務端數(shù)據(jù)
  {  
    cat: '1',
    name: 'newBook'
  }, {
    headers: {
      'Content-Type': 'x-www-form-urlencoded'
    }
  }
);

promise.then(function ( response ) {
  // 成功回調(diào)
}, function ( response ) {
  // 失敗回調(diào)
});

promise.catch(function ( response ) {
  // 失敗回調(diào)
});

promise.finally(function () {
  // 執(zhí)行完成或者失敗回調(diào)后都會執(zhí)行此邏輯。
});

// 所有回調(diào)函數(shù)的this都指向組件實例

url模板

vue-resource 使用url-template庫來解析url模板.

在vue-resourece方法請求傳參時可以在url中放置花括號包圍的占位符。vue-resouce內(nèi)部會使用url0template將占位符用params對象中的屬性進行替換。

question

如何發(fā)送JSONP請求

vue-resouce提供三種調(diào)用方式進行跨域

全局方法

Vue.http({
  url: 'http://example.com/books',
  // 參數(shù)部分，將會拼接在url之后
  params: {
    cat: 1
  },
  method: 'JSONP'
})
  .then(function ( response ){

  }, function () {
    //error

  });

實例底層方法

http.$http({
  url: 'http://example.com/books',
  params: {
    cat: 1
  },
  method: 'JSONP'
})
  .then(function () {
    // this 指向當前組件實例
  }, function () {

  });

實例便捷方法

this.$http.jsonp(
  'http://www.example.com/books',
  {
    cat: 1
  }
)
  .then(function () {

  }, function () {
  
  });

修改數(shù)據(jù)類型

如何修改發(fā)送給服務端的數(shù)據(jù)類型

在默認情況下，對于PUT，PSOT，PATCH，DELETE等請求，請求頭中的Content-Type為appliaction/json即JSON類型。有時候需要將數(shù)據(jù)提交為指定類型如application/x-www-form-urlencoded,multipart/form-data,txt/plain等。

全局headers配置

Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded'

實例配置

this.$http.post(
  'http://example.com/books',
  // 成功回調(diào)
  function ( data, status, request ) {
    if ( status == 200 ) {
      consl.dir(data);
    }
  },
  // 配置請求頭
  headres: {
    'Content-Type': 'multipart/form-data'
  }
);
// 實例配置的優(yōu)先級高于全局配置

感謝各位的閱讀！關(guān)于“vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：vue前后臺數(shù)據(jù)交互vue-resource文檔的示例分析-創(chuàng)新互聯(lián)
當前路徑：http://muchs.cn/article34/ddpjse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、軟件開發(fā)、手機網(wǎng)站建設、外貿(mào)建站、外貿(mào)網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容