Vue---從後臺獲取數據vue-resource的使用方法
作為前端人員，在開發過程中，我們大多數情況都需要從後臺請求數據，那麽在vue中怎樣從後臺獲取數據呢？接下來，我簡單介紹一下vue-resource的使用方法，希望對大家有幫助。
一、下載vue-resource
1、npm install vue-resource --save -dev
2、github: https://github.com/pagekit/vue-resource
兩種方式都可以下載，根據自己喜好進行選擇。
二、引入文件
引入vue.js和vue-resource.js，註意先後順序，先引vue.js。記住所有vue插件都需要在vue.js之後加載。
三、使用
我今天寫了一個小demo，比較簡單。
1.HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-resource請求數據</title> 6 <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"> 7 <script src="../../node_modules/jquery/dist/jquery.js"></script> 8 <script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script> 9 <script src="../../node_modules/vue/dist/vue.js"></script> 10 <script src="../../node_modules/vue-resource/dist/vue-resource.js"></script> 11 12 </head> 13 <body> 14<div class="row" id="paper" style="padding: 20px"> 15 <div class="col-lg-12 col-sm-12 col-xs-12"> 16 <div class="widget radius-bordered"> 17 <div class="widget-header bordered-bottom bordered-themeprimary"> 18 <span class="widget-caption">票據信息列表</span> 19 </div> 20 <div class="widget-body"> 21 <div class="query-form"> 22 <div class="row"> 23 <div class="form-group col-md-3"> 24 <input type="text" v-model="paperId"> 25 <div class="horizontal-space"></div> 26 </div> 27 28 <div class=" form-group col-md-1"> 29 <button @click="search()" type="button" class="btn btn-primary shiny">查詢</button> 30 <div class="horizontal-space"></div> 31 </div> 32 </div> 33 </div> 34 <div class="row"> 35 <table class="table table-bordered table-hover"> 36 <thead> 37 <tr> 38 <th>票據ID</th> 39 <th>分店</th> 40 <th>合作商</th> 41 <th>票據類型</th> 42 <th>票據編碼</th> 43 <th>票據金額</th> 44 </tr> 45 </thead> 46 47 <tbody> 48 <tr v-for="row in paperlist"> 49 <td>{{row.paperId}}</td> 50 <td>{{row.storeId}}</td> 51 <td>{{row.partnerId}}</td> 52 <td>{{row.paperClsNo}}</td> 53 <td>{{row.paperCode}}</td> 54 <td>{{row.paperAmt}}</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 60 61 </div> 62 </div> 63 </div> 64 </div> 65 66 </body>
2.js
所有在頁面上綁定的數據都需要在data中聲明，否則報錯。
1 <script> 2 var vm = new Vue({ 3 el: ‘#paper‘, 4 data: { 5 paperId: ‘‘, 6 paperlist: [] 7 }, 8 mounted:function() { //鉤子函數 9 this.get(); 10 }, 11 methods: { 12 get: function(){ 13 this.$http.get(‘data1.json‘, { 14 paperId: this.paperId 15 }).then( 16 function(res){ 17 this.paperlist = res.data; 18 console.log(this.paperlist); 19 },function(res){ 20 console.log(res.status); 21 }) 22 }, 23 24 search: function(){ 25 this.get(); 26 } 27 28 } 29 }) 30 </script>
3.相關知識點
(1)鉤子函數
鉤子函數是Windows消息處理機制的一部分，通過設置“鉤子”，應用程序可以在系統級對所有消息、事件進行過濾，訪問在正常情況下無法訪問的消息。鉤子的本質是一段用以處理系統消息的程序，通過系統調用，把它掛入系統。（百度百科）
對於前端來說，鉤子函數就是指再所有函數執行前，我先執行了的函數，即 鉤住 我感興趣的函數，只要它執行，我就先執行。
el被新創建的 vm.el替換，並掛載到實例上去之後調用該鉤子。如果root實例掛載了一個文檔內元素，當mounted被調用時vm.el替換，並掛載到實例上去之後調用該鉤子。如果root實例掛載了一個文檔內元素，當mounted被調用時vm.el 也在文檔內
該鉤子在服務器端渲染期間不被調用。
(2)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]);
都是接受三個參數：
-
url（字符串），請求地址。可被options對象中url屬性覆蓋。
-
data（可選，字符串或對象），要發送的數據，可被options對象中的data屬性覆蓋。
-
options 請求選項對象
便捷方法的POST請求：
1 this.$http.post( 2 ‘http://example.com‘, 3 // 請求體重發送數據給服務端 4 { 5 cat: 1, 6 name: ‘newBook‘ 7 },{ 8 ‘headers‘: { 9 ‘Content-Type‘: ‘x-www-form-urlencoded‘ 10 } 11 }).then(function () { 12 // 成功回調 13 }, function () { 14 // 失敗回調 15 });
請求選項對象
option對象的各屬性及含義
| 參數 | 類型 | 描述 |
|---|---|---|
| url | string | 請求的URL |
| method | string | 請求的HTTP方法，例如：‘GET‘, ‘POST‘或其他HTTP方法 |
| body | Object,FormDatastring | request body |
| params | Object | 請求的URL參數對象 |
| headers | Object | request header |
| timeout | number | 單位為毫秒的請求超時時間 (0 表示無超時時間) |
| before | function(request) | 請求發送前的處理函數，類似於jQuery的beforeSend函數 |
| progress | function(event) | ProgressEvent回調處理函數 |
| credentials | boolean | 表示跨域請求時是否需要使用憑證 |
| emulateHTTP | boolean | 發送PUT, PATCH, DELETE請求時以HTTP |
| emulateJSON | boolean | 將request body以application/x-www-form-urlencoded content type發送 |
Vue---從後臺獲取數據vue-resource的使用方法