Vue中的vue-resource示例详解

2024-10-08 19:55:54

vue-resource特点

vue-resource插件具有以下特点：

1. 体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2. 支持主流的浏览器和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

3. 支持Promise API和URI Templates Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

下面通过示例看下Vue中的vue-resource一起看看吧

版本：vue-resource v1.2.1
作用：

Vue与后台Api进行交互通常是利用vue-resource来实现的，本质上vue-resource是通过http来完成AJAX请求相应的。

用法：

Vue实例对象注册this.$http服务，可以发送HTTP请求。解析请求所返回的结果。此外，Vue实例将会自定绑定到this所在的回调函数中。

{
 // GET /someUrl
 this.$http.get('/someUrl').then(response => {
  // success callback
 }, response => {
  // error callback
 });
}

快捷方法列表

get(url, [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
post(url, [body], [config])
put(url, [body], [config])
patch(url, [body], [config])

配置信息命令

响应

源码

下面我将以get请求访问json文件的方式来展示vue-resource的用法。

html中的源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-router</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in list">{{item.name}}</li>
    </ul>
    <button @click="getData">get请求</button>
  </div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
  var vm = new Vue({
    el:'#app'
    ,data:{
      list:[]
    }
    ,methods:{
      getData(){
        var url = '../json/get.json';
        this.$http.get(url).then(function(res){
          var body = res.body;
          if(body.status){
            alert('请求出错！');
          }
          this.list = body.message;
        });
      }
    }
  });
</script>
</body>
</html>

json文件中的源码

{
 "status":0
 ,"message":[
  {
   "id":1
   ,"name":"张三"
  }
  ,{
   "id":2
   ,"name":"李四"
  }
 ]
}

结果

分析

上面的代码实现的功能是在页面中通过点击button按钮来触发一个getData的click响应事件，而该事件实现的功能是发送一个url请求（尽管说其请求的是本地的json文件数据，不过其请求后台的方法和该方法是一模一样的，所以说其用于请求后台的数据也是同样的用法。），该请求返回url链接所响应的数据。而该返回数据将会在then()回调函数中进行相应的处理，比如说我们的json文件中就返回了status响应状态码，其中0代表成功，否则失败。而一旦响应成功，则调用body.message，将相应的数据主体绑定到data数据域中的list中，由于list中的数据有变动，因而Vue会自定的刷新li的v-for中的页面信息，进而完成页面信息的更新操作。

总结

以上所述是小编给大家介绍的Vue中的vue-resource示例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Vue resource中的GET与POST请求的实例代码

前言:vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能,还提供了比如 interceptors 这样处理请求过程中行为的功能.下面介绍下vue-resource中常用的GET与POST请求使用与封装方法. 访问 Github获取最新的开发文件与文档特征: 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器(interceptoers) 支持 Firefox,Chrome,Safari,Opera 和 IE9+ 非常的小(压缩后
vue-resource 拦截器（interceptor）的使用详解

拦截器-interceptor 在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用? 拦截器能帮助我们解决的 1.添加统一的request的参数比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成 http://www.xxxx.
vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观
Vue2.0利用vue-resource上传文件到七牛的实例代码

本文介绍了Vue2.0利用vue-resource上传文件到七牛,分享给大家,希望对大家有帮助关于上传,总是有很多可以说道的. 16年底,公司项目番茄表单的前端部分,开始了从传统的jquery到vue 2.0的彻底重构.但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化.为什么呢?因为兼容性.没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器.否则,上传部分完全可以利用Vue-Resource以及Form
vue插件vue-resource的使用笔记（小结）

最近手头有个小项目,打算用vue练个手,期间用到了vue的插件:vue-resource.下面是我使用这个插件的一些经验,算是给自己写的一个笔记,分享出来也希望和我遇到同样坑的朋友可以借此踩坑而过~ 在使用这个插件之前,当然是先安装啦: npm i vue-resource --save 安装读条完毕,接下来便是在项目中引入: import VueResource from 'vue-resource' Vue.use(VueResource); 如上所述,在入口文件中引入vue-resourc
vue resource post请求时遇到的坑

使用 post 请求 // global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [options]).th
Vue添加请求拦截器及vue-resource 拦截器使用

一.现象统一处理错误及配置请求信息二.解决 1.安装 axios , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ,内容如下: import axios from 'axios' // 配置默认的host,假如你的API host是:http://api.htmlx.club axios.defaults.baseURL = 'http://api.htmlx.club' // 添加请求拦截器 axios.
详解vue前后台数据交互vue-resource文档

这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是
Vue中如何定义数据示例详解

前言在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情 Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性.维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性在Vue中,按照是否需要双向数据绑定,可以将变量分为两种: 一种是需要被Vue的数据劫持,将data的变化实时响应到view上只要data只能够的msg变化, temp
vue中使用geobuf的示例详解

需要安装geobuf和pbf这两个库 cnpm i -S geobuf pbf 引入 import geobuf from 'geobuf'; import Pbf from 'pbf'; 使用: let geojson_multiPolygon = { type: 'Feature', properties: {}, geometry: { type: 'MultiPolygon', coordinates: [ [ [ [109.2041015625, 30.088107753367257]
Vue中使用Ueditor的示例详解

目录一.下载Ueditor包二.编译下载文件三.在Vue项目中引用一.下载Ueditor包官网地址:http://fex.baidu.com/ueditor/ git地址: https://github.com/fex-team/ueditor 打开下载后的文件,大致目录,不会有较大差别二.编译下载文件 1.执行命令安装依赖: npm install 2.全局安装Grunt-cli: npm install -g grunt-cli 3.安装到本地: npm install grun
如何优雅地在vue中添加权限控制示例详解

前言在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 1.如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permissi
vue 之 .sync 修饰符示例详解

在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂
Vue项目接入Paypal实现示例详解

一.支付流程在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案接入方式优点缺点相关资料在html中插入paypal的script脚本实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义官方文档:https://developer.paypal.com/docs/checkout/integr
vue中的ElementUI的使用详解

登录+sessionStorage 效果展示登录成功后会把用户id存入前端的sessionStorage,拦截器会根据是否存在用户id来进行拦截也可以将用户权限存入sessionStorage,然后当访问某个页面的时候在created方法中判断是否具有权限 <template> <div class="login-wrap"> <el-form class="login-container" ref="loginFormR
Vue响应式原理的示例详解

Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v
Vue 服务端渲染SSR示例详解

目录手写Vue服务端渲染一.开始vue-ssr之旅二.采用模板渲染三.ssr目录创建四.通过webpack实现编译vue项目 app.js client-entry.js server-entry.js 五.配置客户端打包和服务端打包六.配置运行脚本七.服务端配置七.通过json配置createBundleRenderer方法八.集成VueRouter 配置入口文件配置组件信息防止刷新页面不存在保证异步路由加载完成十.集成vuex配置在后端更新vuex 在浏览器运行时
vue前端实现打印下载示例详解

目录 html2canvas介绍 jspdf介绍 printjs介绍 html2canvas介绍分享一下几个后台管理系统比较常用的插件:下载.打印 html2canvas是在浏览器上对网页进行截图操作,实际上是操作DOM,这个插件也有好长时间了,比较稳定,目前使用还没有遇到什么bug jspdf介绍如果下载出来是pdf文件,可以加上jspdf插件,会先通过html2canvas把页面转化成base64图片,再通过jspdf导出安装 npm i html2canvas jspdf 或 yar

Vue中的vue-resource示例详解

相关推荐

随机推荐