vuejs前后端数据交互之从后端请求数据的实例
本文将向大家介绍一种用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前后端数据交互之从后端请求数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
element中el-autocomplete的常见用法示例
这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下2023-03-03this.$router.push携带参数跳转页面的实现代码
这篇文章主要介绍了this.$router.push携带参数跳转页面,this.$router.push进行页面跳转时,携带参数有params和query两种方式,本文结合实例代码给大家详细讲解,需要的朋友可以参考下2023-04-04Vue CompositionAPI中watch和watchEffect的区别详解
这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别,文中的示例代码简洁易懂,希望对大家学习Vue有一定的帮助2023-06-06vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
这篇文章主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论