这次给大家带来vue.js前后端数据交互步骤详解，vue.js前后端数据交互的注意事项有哪些，下面就是实战案例，一起来看一下。
前端小白刚开始做页面的时候，我们的前端页面中经常会用到表单，所以学会提交表单也是一个基本技能，其实用ajax就能实现，但他的原始语法有点。。。额 。。。复杂，所以这里给大家提供一种用vue-resource向后端提交数据。
（1）第一步，先在template中写一个表单；
提交
登录后复制
（2）在data里面定义表单内容的字段及表单的约束规则；
data() { return { ruleForm: { name: '', type: '', date: '', intro: '', } } rules: { name: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 1, max: 20, message: '长度在 1 到20个字符', trigger: 'blur' } ], type: [ { required: true, message: '请选择用户类型', trigger: 'change' } ], date: [ { required: true, message: '请输入出生日期', trigger: 'blur' }, { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' } ], intro: [ { required: true, message: '请输入备注', trigger: 'blur' }, { min: 50, max: 500, message: '请输入至少50个字', trigger: 'blur' } ], }}
登录后复制
（3）定义提交表单的方法
methods:{submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){ if(res.body==1){ this.$alert("提交成功", '提交结果', { confirmButtonText: '确定', type: 'success', callback: action => { }, }); } else{ this.$alert("提交失败", '提交结果', { confirmButtonText: '确定', type: 'warning', callback: action => { }, }); } }) } else { console.log('error submit!!'); return false; } }); }}
登录后复制
上面提交函数里面的baseURL以及api的介绍补充说明如下：
这里再向大家介绍一种用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打印输出也可以看到啦！！！
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
微信小程序中图片如何自适应机型高度
jquery图片上传时按指定比例预览（附代码）
以上就是vue.js前后端数据交互步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767321.html
