详解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 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
node.js入门教程
Jun 01 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 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删除指定目录的方法
2015/04/03 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP代码加密的方法总结
2020/03/13 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
经典c++面试题六
2012/01/18 面试题
一年级班主任感言
2014/03/08 职场文书
城管大队整治方案
2014/05/06 职场文书
老兵退伍标语
2014/10/07 职场文书
老龙头导游词
2015/02/11 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
小学语文教师研修日志
2015/11/13 职场文书
2016年母亲节广告语
2016/01/28 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
Java spring单点登录系统
2021/09/04 Java/Android