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


Posted in Javascript onJanuary 16, 2017

单来说,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

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

Javascript 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
js前端图片加载异常兜底方案
Jun 21 Javascript
微信小程序 封装http请求实例详解
Jan 16 #Javascript
详解vue-validator(vue验证器)
Jan 16 #Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 #Javascript
webpack入门必知必会
Jan 16 #Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 #Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 #Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 #Javascript
You might like
php 购物车完整实现代码
2014/06/05 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
讲解Python中的标识运算符
2015/05/14 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python实现定时任务
2017/02/08 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python使用folium库绘制地图点击框
2018/09/21 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python Tornado框架的使用示例
2020/10/19 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
国际经济与贸易专业求职信
2014/07/10 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers