vuejs前后端数据交互之从后端请求数据的实例
2019/6/27 7:47:48
本文主要是介绍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前后端数据交互之从后端请求数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于vuejs前后端数据交互之从后端请求数据的实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist