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

  作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助。

一、下载vue-resource

  1、npm install vue-resource --save -dev   

  2、github: https://github.com/pagekit/vue-resource

两种方式都可以下载,根据自己喜好进行选择。

二、引入文件

  引入vue.jsvue-resource.js,注意先后顺序,先引vue.js。记住所有vue插件都需要在vue.js之后加载。

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

三、使用

  我今天写了一个小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.elrootmountedvm.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发送
 

 

  

上一篇:Spring 5 中文解析核心篇-集成测试之TestContext(下)


下一篇:TableStore时序数据存储 - 架构篇