Vue---从后台获取数据vue-resource的使用方法

半指温柔乐

发布于 2018-09-11 15:35:55

3.4K0

发布于 2018-09-11 15:35:55

文章被收录于专栏：前端知识分享前端知识分享

　　作为前端人员，在开发过程中，我们大多数情况都需要从后台请求数据，那么在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发送