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之可拖动的iframe效果代码
Aug 01 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
JS继承 笔记
Jul 13 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
javascript数组去掉重复
2011/05/12 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
JS中的BOM应用
2018/02/02 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python中join和split用法实例
2015/04/14 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python IDLE入门简介
2017/12/08 Python
python使用正则筛选信用卡
2019/01/27 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python中return的返回和执行实例
2019/12/24 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
社会实践评语
2014/04/28 职场文书
小学清明节活动总结
2014/07/04 职场文书
法人身份证明书
2014/10/08 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python