详解vue-Resource(与后端数据交互)

单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的。可以放在created或者ready里面运行来获取或者更新数据...

vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md

结合vue-router

data(){
    return{
      toplist:[],
      alllist:[]
    }
  },
  //vue-router
  route:{
    data({to}){
      //并发请求,利用 Promise
      return Promise.all([
        //简写
        this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1}),
        //this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0})
        //不简写
        this.$http({
          method:'GET',
          url:'http://192.168.30.235:9999/rest/knowledge/list',
          data:{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0},
          headers: {"X-Requested-With": "XMLHttpRequest"},
          emulateJSON: true
          })
        ]).then(function(data){//es5写法
           return{
            toplist:data[0].data.knowledgeList,
            alllist:data[1].data.knowledgeList
          }
        //es6写法 .then()部分
        //.then(([toplist,alllist])=>({toplist,alllist}))
      },function(error){
        //error
      })
    }
  }

在其他地方使用

ready(){
    var that=this;
    var websiteid = 2,
      pagesize = 20,
      pageno =1;
    that.$http({
      method:'GET',
      url:'http://192.168.30.235:9999/rest/knowledge/list',
      data:{'websiteId':websiteid,'pageSize':pagesize,'pageNo':pageno,'isTop':0}
    }).then(function(data){
      //赋值给alllist数组,
      that.$set('alllist',data.data.knowledgeList)
    })
    //简写
    /*that.$http.get('http://192.168.30.235:9999/knowledge/list',{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0}).then(function(response){
      that.$set('alllist',response.data.knowledgeList)
    })*/
  }

若定义全部变量(在data()中定义),使用$get()获取

data(){
    return{
      toplist:[],
      alllist:[],
      websiteid:2,
      pagesize:20,
      pageno:1
    }
  },
ready(){
    var that=this;
    that.$http({
      method:'GET',
      url:'http://192.168.30.235:9999/rest/knowledge/list',
      //使用定义的全局变量 用$get()获取
      data:{'websiteId':that.$get('websiteid'),'pageSize':that.$get('pagesize'),'pageNo':that.$get('pageno'),'isTop':0}
    }).then(function(data){
      //赋值给alllist数组,
      that.$set('alllist',data.data.knowledgeList)
    },function(error){
      //error
     })
  }

 post方式同理

将数据绑定到dom上

<ul>
  <li v-for="item in alllist" v-if="item.istop == false">
    <a v-link="{ name: 'getReceiptDetail',params:{knowledgeId: item.id }}">
      <div class='fl know-info'>
          <!-- | limit 和 | timer是filter 在后续会说到-->
          <!--字段含义: -->
        <p class='font-normal nomal-height'>{{item.title | limit 30 }}</p>
          <p class='co9a9a9a' ><span style='margin-right: 1rem;'>{{item.viewTimes}}K</span><span>{{item.publishTime | timer }}</span></p> <!--viewTimes:有多少人查看 , publishTime:发布时间-->
      </div>
      <div class='fr know-img'>
        <img v-bind:src=item.coverImage />
      </div>
      <div class='clearfix'></div>
    </a>
  </li>
</ul>

在vue-validator中做post示例 , 将接口请求地址定义为全局详见VUEX

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-01-13

微信小程序 数据交互与渲染实例详解

微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

SpringMVC实现前端后台交互传递数据

本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req

ajax方式实现注册功能(提交数据到后台数据库完成交互)

一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置: $(function(){ var isusername;(定一个变量) var ispwd; $('form').submit(function(e){ if(!isusername || !ispwd){ e.preventDefault();(阻止事件的默认事件) }) }); 1.在nodejs中我们可以用以下方法来(加载)跳转页面: JQuery 中的load()  这是实行加载一个页面  window.l

Vue2学习笔记之请求数据交互vue-resource

基本语法 必须引入一个库:vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/so

Android Activity 与Service进行数据交互详解

①从设计的角度来讲: Android的Activity的设计与Web页面非常类似,从页面的跳转通过连接,以及从页面的定位通过URL,从每个页面的独立封装等方面都可以看出来,它主要负责与用户进行交互. Service则是在后台运行,默默地为用户提供功能,进行调度和统筹.如果一棵树的地上部分是Activity的话,它庞大的根须就是Service.Android的服务组件没有运行在独立的进程或线程中,它和其他的组件一样也在应用的主线程中运行,如果服务组件执行比较耗时的操作就会导致主线程阻塞或者假死,从

SpringMVC前端和后端数据交互总结

本文主要介绍了SpringMVC前端和后端数据交互的资料,特地发出来记录一下.有需要的朋友可以了解一下. 控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. 传值方式 springmvc最方便的一点就是可以通过注释方式来定义它的url. @Controller public class formMVC { @RequestMapp

详解vue与后端数据交互(ajax):vue-resource

本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

get post jsonp三种数据交互形式实例详解

一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button" value="按钮" @click="get()"/> //点击按钮请求数据函数get() 2.准备一个txt文件 welcome vue 3.编写js代码 <script> window.onload=function(){ new Vue({ el:'body', //主体为body,

Java三种IO模型原理实例详解

Java中IO的模型分为三种,同步阻塞的BIO.同步非阻塞的NIO.异步非阻塞的AIO. BIO[同步阻塞] 在JDK1.4出来之前,我们建立网络连接的时候采用BIO模式,需要先在服务端启动一个ServerSocket,然后在客户端启动Socket来对服务端进行通信,默认情况下服务端需要对每个请求建立一堆线程等待请求,而客户端发送请求后,先咨询服务端是否有线程相应,如果没有则会一直等待或者遭到拒绝请求,如果有的话,客户端会线程会等待请求结束后才继续执行. NIO[同步非阻塞] NIO本身是基于事

Android系统的五种数据存储形式实例(二)

之前介绍了Android系统下三种数据存储形式,http://www.jb51.net/article/99468.htm.今天补充介绍另外两种,分别是内容提供者和网络存储.有些人可能认为内存提供者和网络存储更偏向于对数据的操作而不是数据的存储,但这两种方式确实与数据有关,所以这里还是将这两种形式简要的说明一下.  Content Provider: Content Provider,中文名是内存提供者,Android四大组件之一,内容提供者是应用程序之间共享数据的接口,以数据库形式存入手机内存

Spring AOP拦截-三种方式实现自动代理详解

这里的自动代理,我讲的是自动代理bean对象,其实就是在xml中让我们不用配置代理工厂,也就是不用配置class为org.springframework.aop.framework.ProxyFactoryBean的bean. 总结了一下自己目前所学的知识. 发现有三种方式实现自动代理 用Spring一个自动代理类DefaultAdvisorAutoProxyCreator: <bean class="org.springframework.aop.framework.autoproxy.

Spring 3.x中三种Bean配置方式比较详解

以前Java框架基本都采用了XML作为配置文件,但是现在Java框架又不约而同地支持基于Annotation的"零配置"来代替XML配置文件,Struts2.Hibernate.Spring都开始使用Annotation来代替XML配置文件了:而在Spring3.x提供了三种选择,分别是:基于XML的配置.基于注解的配置和基于Java类的配置. 下面分别介绍下这三种配置方式:首先定义一个用于举例的JavaBean. package com.chinalife.dao public cl

java与JSON数据的转换实例详解

java与JSON数据的转换实例详解 JSON与JAVA数据的转换(JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互.) 代码中有这么一句,是后台的封装数据. JSONObject jo = JSONObject.fromObject(map); 常见的java代码转换成json --请注意,这个方法曾经给我造成过困惑.因为,它在对Object转换的时候是按照domain类中的所有getXXX()方

IOS 数据库升级数据迁移的实例详解

IOS 数据库升级数据迁移的实例详解 概要: 很久以前就遇到过数据库版本升级的引用场景,当时的做法是简单的删除旧的数据库文件,重建数据库和表结构,这种暴力升级的方式会导致旧的数据的丢失,现在看来这并不不是一个优雅的解决方案,现在一个新的项目中又使用到了数据库,我不得不重新考虑这个问题,我希望用一种比较优雅的方式去解决这个问题,以后我们还会遇到类似的场景,我们都想做的更好不是吗? 理想的情况是:数据库升级,表结构.主键和约束有变化,新的表结构建立之后会自动的从旧的表检索数据,相同的字段进行映射迁移

mysql数据存储过程参数实例详解

MySQL 存储过程参数有三种类型:in.out.inout.它们各有什么作用和特点呢? 一.MySQL 存储过程参数(in) MySQL 存储过程 "in" 参数:跟 C 语言的函数参数的值传递类似, MySQL 存储过程内部可能会修改此参数,但对 in 类型参数的修改,对调用者(caller)来说是不可见的(not visible). drop procedure if exists pr_param_in; create procedure pr_param_in ( in id

IOS开发之判断两个数组中数据是否相同实例详解

IOS开发之判断两个数组中数据是否相同实例详解 前言: 工作中遇到的问题,这里记录下,也许能帮助到大家 实例代码: NSArray *array1 = [NSArray arrayWithObjects:@"a", @"b", @"c", nil nil]; NSArray *array2 = [NSArray arrayWithObjects:@"b", @"a", @"c", nil

php数据序列化测试实例详解

php数据序列化测试实例详解 测试代码 $msg = ['test'=>23]; $start = microtime(true); for($i=0;$i<100000;$i++){ $packMsg = msgpack_pack($msg); } echo 'pack len:'.strlen($packMsg)."\r\n"; $end = microtime(true); echo 'run time:'.($end-$start).'s'."\r\n&q