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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 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之第三天
2006/10/09 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php中socket通信机制实例详解
2015/01/03 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
json的使用小结
2016/06/08 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
党员承诺书格式
2014/05/21 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
学生吸烟检讨书
2014/09/14 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
小学生毕业评语
2014/12/26 职场文书
社区工作者个人总结
2015/02/28 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers