vue.js前后端数据交互之提交数据操作详解
|
本篇章节讲解vue.js前后端数据交互之提交数据操作。分享给大家供大家参考，具体如下： 前端小白刚开始做页面的时候，我们的前端页面中经常会用到表单，所以学会提交表单也是一个基本技能，其实用ajax就能实现，但他的原始语法有点。。。额 。。。复杂，所以这里给大家提供一种用vue-resource向后端提交数据。 （1）第一步，先在template中写一个表单； （2）在data里面定义表单内容的字段及表单的约束规则； （3）定义提交表单的方法 {
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("提交失败",type: 'warning',});
}
})
} else {
console.log('error submit!!');
return false;
}
});
}
}
上面提交函数里面的baseURL以及api的介绍补充说明如下： 这里再向大家介绍一种用vue-resource从后端请求数据的方法。 比如说从后端请求一张表过来， （1）首先，在data中return一个msg:[]数组来接收表的数据； （2）在方法中定义一个请求函数，比如我们这里函数名定义为showDetails； 这里baseURL项目的路径，如果项目部署在服务器上面一般格式为www.XXX.com/项目名；之后的api是后端封装的api接口；然后条件就是对表的查询，删除等语句。比如对名为student的表进行查询，需要获取studentID为40001的学生信心，则查询语句可写为‘query?table=student&studentIDeq=40001',需要注意的是与有关数据库的操作字段（通俗点讲，可以理解为后端定义的字段）要加引号，而前端定义的字段要放在引号外面； （3）最后，别忘了这个请求操作是没有调用，是默认执行的，所以要在mounted里面实时执行； 好了，这个函数就完成了，你可以通过浏览器控制台的network查看从后端取得的数据，或者通过console打印输出也可以看到啦！！！ 当然啦。前提是你的数据库里面有一张名为user的表，表里面有name，type，date，intro几个字段，并且后端的接口啥的都已经定义好的情况下，不然是不会成功的哦 希望本文所述对大家vue.js程序设计有所帮助。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |