详解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 相关文章推荐
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Node.js实现数据推送
Apr 14 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
node内置调试方法总结
2018/02/22 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python 将Excel转Word的示例
2021/03/02 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
债务授权委托书范本
2014/10/17 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
Python实现归一化算法详情
2022/03/18 Python
MySQL 字符集 character
2022/05/04 MySQL