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 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
全面理解闭包机制
Jul 11 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
原生js实现3D轮播图
Mar 21 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
React Fragment介绍与使用详解
Nov 11 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
Vue Promise的axios请求封装详解
2018/08/13 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
pow在python中的含义及用法
2019/07/11 Python
python滑块验证码的破解实现
2019/11/10 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
python中四舍五入的正确打开方式
2021/01/18 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
python实现学生通讯录管理系统
2021/02/25 Python
中年人生感言
2014/02/04 职场文书
个性发展自我评价
2014/02/11 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
业务员的岗位职责
2014/03/15 职场文书
幼儿园新年寄语
2014/04/03 职场文书
药品业务员岗位职责
2014/04/17 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
python可视化之颜色映射详解
2021/09/15 Python