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 相关文章推荐
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
js倒计时抢购实例
Dec 20 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
解决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
分享一则PHP定义函数代码
2015/02/26 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python实现单词翻译功能
2017/06/06 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
简单谈谈python基本数据类型
2018/09/26 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
从python读取sql的实例方法
2020/07/21 Python
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
入团者的自我评价分享
2013/12/02 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书