vuejs前后端数据交互之从后端请求数据的实例


Posted in Javascript onAugust 11, 2018

本文将向大家介绍一种用vue-resource从后端请求数据的方法。

比如说从后端请求一张表过来,

(1)首先,在data中return一个msg:[]数组来接收表的数据;

(2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails;

methods:{

   showDetails:function(){
     this.$http.get(baseURL+“api/条件”).then(function(res){
      this.msg = res.body;
     });

}

}

这里baseURL项目的路径,如果项目部署在服务器上面一般格式为www.XXX.com/项目名;之后的api是后端封装的api接口;然后条件就是对表的查询,删除等语句。比如对名为student的表进行查询,需要获取studentID为40001的学生信心,则查询语句可写为‘query?table=student&studentIDeq=40001',需要注意的是与有关数据库的操作字段(通俗点讲,可以理解为后端定义的字段)要加引号,而前端定义的字段要放在引号外面;

(3)最后,别忘了这个请求操作是没有调用,是默认执行的,所以要在mounted里面实时执行;

mounted: function (){
   this.showDetails();
  }

好了,这个函数就完成了,你可以通过浏览器控制台的network查看从后端取得的数据,或者通过console打印输出也可以看到啦!!!

以上这篇vuejs前后端数据交互之从后端请求数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载script文件的两种方法
Aug 15 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
js定时器实例分享
Dec 20 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
使用javascript做在线算法编程
May 25 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
解决vue中post方式提交数据后台无法接收的问题
Aug 11 #Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 #Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 #Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 #Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 #Javascript
微信小程序滑动选择器的实现代码
Aug 10 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php备份数据库类分享
2015/04/14 PHP
Yii rules常用规则示例
2016/03/15 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
js select option对象小结
2013/12/20 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
webpack优化的深入理解
2018/12/10 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
浅谈JavaScript 声明提升
2020/09/14 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
python3调用windows dos命令的例子
2019/08/14 Python
python打开使用的方法
2019/09/30 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
工程造价自荐信
2013/10/09 职场文书
护士岗位职责
2014/02/16 职场文书
升职自荐信范文
2015/03/27 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js