亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解vue前后臺數(shù)據(jù)交互vue-resource文檔

 更新時(shí)間:2017年07月19日 15:29:09   作者:Alogy  
本篇文章主要介紹了vue前后臺數(shù)據(jù)交互vue-resource文檔,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

這兩天學(xué)習(xí)了vue-resource插件個(gè)地方知識點(diǎn)挺多的,而且很重要,所以,今天添加一點(diǎn)小筆記。

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

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

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

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

使用的版本是:vue-resource 0.7.2

配置

參數(shù)配置

分為:

  1. 全局配置
  2. 組件實(shí)例配置
  3. 調(diào)用配置

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

全局配置

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

全局配置option屬性

組件實(shí)例配置

在實(shí)例化組件時(shí)可以傳入http選項(xiàng)來進(jìn)行配置

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

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

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

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

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

      });
  }
});

headers配置

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

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

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

其中common對應(yīng)的請求頭會在所有請求中設(shè)置,custom對應(yīng)的請求頭在非跨域時(shí)設(shè)置,HTTP方法名對應(yīng)的請求頭只有在請求的method匹配方法名時(shí)才會被設(shè)置。

基本HTTP調(diào)用

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

底層方法

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

全局調(diào)用

Vue.http(option);

組件實(shí)例調(diào)用

this.$http(option)

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

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

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

便捷方法

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

vue-resource 提供的便捷方法:

  1. get(url, [data], [options]);
  2. post(url, [data], [options]);
  3. put(url, [data], [options]);
  4. patch(url, [data], [options]);
  5. delete(url, [data], [options]);
  6. jsonp(url, [data], [options]);

都是接受三個(gè)參數(shù):

  1. url(字符串),請求地址。可被options對象中url屬性覆蓋。
  2. data(可選,字符串或?qū)ο螅?,要發(fā)送的數(shù)據(jù),可被options對象中的data屬性覆蓋。
  3. options

便捷方法的POST請求:

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

請求選項(xiàng)對象

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 單位為毫秒的請求超時(shí)時(shí)間 (0 表示無超時(shí)時(shí)間)
before function(request) 請求發(fā)送前的處理函數(shù),類似于jQuery的beforeSend函數(shù)
progress function(event) ProgressEvent回調(diào)處理函數(shù)
credientials boolean 表示跨域請求時(shí)是否需要使用憑證
emulateHTTP boolean 發(fā)送PUT, PATCH, DELETE請求時(shí)以HTTP
emulateJSON boolean 將request body以application/x-www-form-urlencoded content type發(fā)送

url

url(字符串)請求的URL地址

method

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

data

data(對象或字符串)

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

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

params

params(對象)

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

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

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

headers

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

xhr

xhr(對象)默認(rèn)值為null,該對象中屬性都會應(yīng)用到原生的xhr實(shí)例對象上。

upload

upload(對象)默認(rèn)值為null,該對象的屬性都會應(yīng)用到原生的xhr實(shí)例對象的upload屬性上。

jsonp

jsonp(字符串)
默認(rèn)值為: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 生成的隨機(jī)串。

tiemout

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

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

beforeSend

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

emulateHTTP

emulateHTTP(布爾值)
默認(rèn)值為:false,當(dāng)值為true是,用HTTP的POST方式PUT,PATCH,DELETE等請求,并設(shè)置請求頭字段HTTP_Method_Override為原始請求方法。

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

如果服務(wù)器無法處理PUT,PATCH和DELETE的請求。可以啟用enulateHTTP。
啟用之后,請求會以普通的POST方法發(fā)出,并且HTTP頭信息的X-HTTP-Method-Override屬性會設(shè)置為實(shí)例的HTTP方法

Vue.http.options.emulateHTTP = true;

emulateJSON

emulateJSON(布爾值)
默認(rèn)值為:false,當(dāng)值為true并且data為對象時(shí),設(shè)置請求頭Content-Type的值為application/x-www-form-urlencoded

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

Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin(布爾值)

默認(rèn)值為:null,表示是否跨域,如果沒有設(shè)置該屬性,vue-resource內(nèi)部會判斷瀏覽器當(dāng)前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時(shí),則會使用XDomainRequest來請求。目前XDomainRequest 只有IE8,IE9 瀏覽器支持用來進(jìn)行AJAX跨域。

reqponse對象

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

  1. data (對象或字符串): 服務(wù)端返回的數(shù)據(jù),已使用 JSON.parse 解析。
  2. ok(布爾值):當(dāng)HTTP響應(yīng)狀態(tài)碼在200~299區(qū)間時(shí)該值為true,表示響應(yīng)成功。
  3. status(數(shù)值): HTTP響應(yīng)狀態(tài)碼。
  4. statusText(字符串): HTTP響應(yīng)狀態(tài)文本描述。
  5. headers(函數(shù)): 獲取HTTP響應(yīng)頭信息,不傳參表示獲取整個(gè)響應(yīng)頭,返回一個(gè)相應(yīng)頭對象。傳參表示獲取對應(yīng)的響應(yīng)頭信息。
  6. request(對象)

RESTful調(diào)用

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

vue-resource提供全局調(diào)用Vue.resource或者在組件實(shí)例上調(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進(jìn)行配置,也可以用來定義新的action。

默認(rèn)的aciton配置為:

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

修改默認(rèn)值action配置

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

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

options

options(可選,對象)

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

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

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

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

// 保存

// 第二個(gè)參數(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)  
});

攔截器

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

攔截器的注冊

Vue.http.interceptors.push({
  request: function ( request ) {
    // 更改請求類型為POST
    request.method = 'POST';
    return request;
  },
  response: function ( response ) {
    // 修改返回?cái)?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
  });
  
});

實(shí)現(xiàn)的功能:

AJAX請求的loading界面

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

請求失敗時(shí)的提示對話框

跨域AJAX

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

XDomain只支持GET和POST兩種請求。如果要在vue-resource中使用其它方法請求,設(shè)置請求選項(xiàng)的emulateHTTP為true。

XHMLHttpRequest2 CORS

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

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

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

在支持CORS的情況下,還需啊喲服務(wù)端啟用CORS支持。

例如:

需要從http://example.com:8080提交到http://example.com/8088,需要在http://example.com添加響應(yīng)頭

Access-Control-Allow-Origin: *

XDomainRequest

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

Promise

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

var promise - this.$http.post(
  'http://example.com/book/cretae',
  // 請求體中要發(fā)送給服務(wù)端數(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都指向組件實(shí)例

url模板

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

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

question

如何發(fā)送JSONP請求

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

全局方法

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

  }, function () {
    //error

  });

實(shí)例底層方法

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

  });

實(shí)例便捷方法

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

  }, function () {
  
  });

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

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

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

全局headers配置

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

實(shí)例配置

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'
  }
);
// 實(shí)例配置的優(yōu)先級高于全局配置

跨域請求出錯(cuò)

跨域請求需要服務(wù)端開啟CORS支持

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue不能下載xls以及文件亂碼問題解決

    Vue不能下載xls以及文件亂碼問題解決

    最近工作中遇到了一些問題,通過查找相關(guān)資料終于找到了相關(guān)的解決方法,這篇文章主要給大家介紹了關(guān)于Vue不能下載xls以及文件亂碼問題解決的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • element-ui upload組件上傳文件類型限制問題小結(jié)

    element-ui upload組件上傳文件類型限制問題小結(jié)

    最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧
    2024-02-02
  • vue3?ref實(shí)現(xiàn)響應(yīng)式的方法

    vue3?ref實(shí)現(xiàn)響應(yīng)式的方法

    這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況:ref接收的是number這種原始類型、ref接收的是對象這種非原始類型,需要的朋友可以參考下
    2024-07-07
  • Vue3+elementui plus創(chuàng)建項(xiàng)目的方法

    Vue3+elementui plus創(chuàng)建項(xiàng)目的方法

    這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • vue中html2canvas給指定區(qū)域添加滿屏水印

    vue中html2canvas給指定區(qū)域添加滿屏水印

    本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-11-11
  • vue中v-for循環(huán)選中點(diǎn)擊的元素并對該元素添加樣式操作

    vue中v-for循環(huán)選中點(diǎn)擊的元素并對該元素添加樣式操作

    這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對該元素添加樣式操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue打包部署到tomcat上頁面空白資源加載不出來的解決

    vue打包部署到tomcat上頁面空白資源加載不出來的解決

    這篇文章主要介紹了vue打包部署到tomcat上頁面空白資源加載不出來的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境

    教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境

    這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊,需要的朋友可以參考下
    2022-11-11
  • vue如何自定義封裝API組件

    vue如何自定義封裝API組件

    這篇文章主要介紹了vue如何自定義封裝API組件,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue實(shí)現(xiàn)四級導(dǎo)航及驗(yàn)證碼的方法實(shí)例

    vue實(shí)現(xiàn)四級導(dǎo)航及驗(yàn)證碼的方法實(shí)例

    我們在做項(xiàng)目經(jīng)常會遇到多級導(dǎo)航這個(gè)需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)四級導(dǎo)航及驗(yàn)證碼的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-07-07

最新評論