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的使用方法相关推荐
- vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- vue+echarts 后台获取数据_vue+element+echarts 响应式后台管理系统,了解一下?
寒假结束了,趁着寒假,自己玩了一下element和echarts去实现了一个简单的后台管理系统. 项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式 ...
- vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据 在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
- Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题!
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
- vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片 首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码 重点就是:style="{background: ...
- 下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解...
今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数 ...
- 表单和ajax中的post请求后台获取数据方法(深度好文)
最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前台主要的contenttype为下面三种:(需要注意的是请求头中data ...
- artDialog弹窗+Ztree树从后台获取数据
简单的ArtDialog+Ztree 样子就是这个了 学习artDialog的前去artDialog 4.1.7,我们需要的都可以在这里下载.小案例可以看这个*artDialog 4.1.7精简版* ...
- jsp页面加载的时候,从后台获取数据,页面加载完成之后,下拉列表中已经有值
在jsp中,我们经常会遇到这种情况:当页面加载完成之后,下拉列表中已经有数据,这是怎么实现的呢? 下面作以详解: 1.<body οnlοad="fun()">:在js ...
最新文章
- R语言因子分析FA(factor analysis)步骤实战
- elasticsearch备份恢复(单机集群)
- 多阶段构建Docker镜像
- 50万数据生成6位数不重复字符串_R语言系列3:高级数据管理
- C++对象的动态建立
- Java获取元注解_Java 元注解
- 加速失败远程计算机不能反应,2008 R2 SP1远程桌面如何开启GPU加速?不讨论虚拟机...
- PHP的php://input和$HTTP_RAW_POST_DATA 和$_POST的关系
- java毕业设计C语言教学辅导网站Mybatis+系统+数据库+调试部署
- 极光设置一级二级标题
- mysql binlog常用操作
- 深度学习与神经网络的关系
- Docker学习之day01 Docker的前世今生
- php soh stx,symbol NULL SOH STX ETX EOT ENQ ACK ASCII(符号零SOH STX ETX传输结束询问ACK ASCII).pdf...
- JAVA8 Map新方法:compute,computeIfAbsent,putIfAbsent与put的区别
- Ring Buffer 的应用
- 人脸识别——FaceBook的DeepFace、Google的FaceNet、DeepID
- Config.h头文件
- SVN服务器管理工具——VisualSVN Server Manager
- java关于hashmap编程题_在Java中,关于HashMap类的描述,以下说法错误的是( )。...
热门文章
- python的super方法_Python中“super”是做什么的?
- java熄灯问题_枚举 - bailian 2811:熄灯问题
- 基于roslyn的动态编译库Natasha
- react native项目改名(仅针对android)
- 手把手教你全家桶之React(一)
- 一本flash和搜索引擎交互的新书
- MFC 定时器用法 SetTimer、KillTimer
- 汇编语言中可以定义变量吗?怎么定义?有局部变量和全局变量之分吗?作用域是什么?
- IOS考试题3字体变大变小
- IOS基础之NSString,NSMutableString,NSArray的基本使用