Vue---從後臺獲取數據vue-resource的使用方法

時間 2019-12-05

標籤 vue 後臺獲取數據 resource 使用方法简体版

原文原文鏈接

　　做爲前端人員，在開發過程當中，咱們大多數狀況都須要從後臺請求數據，那麼在vue中怎樣從後臺獲取數據呢？接下來，我簡單介紹一下vue-resource的使用方法，但願對你們有幫助。javascript

1、下載vue-resource

　　一、npm install vue-resource --save -dev css

　　二、github: https://github.com/pagekit/vue-resourcehtml

兩種方式均可如下載，根據本身喜愛進行選擇。前端

2、引入文件

　　引入vue.js和vue-resource.js，注意前後順序，先引vue.js。記住全部vue插件都須要在vue.js以後加載。vue

3、使用

　　我今天寫了一個小demo，比較簡單。java

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中聲明，不然報錯。node

 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)鉤子函數jquery

鉤子函數是Windows消息處理機制的一部分，經過設置「鉤子」，應用程序能夠在系統級對全部消息、事件進行過濾，訪問在正常狀況下沒法訪問的消息。鉤子的本質是一段用以處理系統消息的程序，經過系統調用，把它掛入系統。（百度百科）git

　　對於前端來講，鉤子函數就是指再全部函數執行前，我先執行了的函數，即鉤住我感興趣的函數，只要它執行，我就先執行。github

　　el被新建立的 vm. $e l 替换，并挂载到实例上去之后调用该钩子。如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m .$

$e l 替换，并挂载到实例上去之后调用该钩子。如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m .$

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發送