vue.js前后端数据交互之提交数据操作详解ajax实例里面的函数
本⽂实例讲述了vue.js前后端数据交互之提交数据操作。分享给⼤家供⼤家参考，具体如下：
前端⼩⽩刚开始做页⾯的时候，我们的前端页⾯中经常会⽤到表单，所以学会提交表单也是⼀个基本技能，其实⽤ajax就能实现，但他的原始语法有点。。。额。。。复杂，所以这⾥给⼤家提供⼀种⽤vue-resource向后端提交数据。
（1）第⼀步，先在template中写⼀个表单；
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item label="⽤户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="⽤户类型" prop="type">
<el-select v-model="pe" placeholder="请选择专利类型" >
<el-option label="⼀级管理员" value="1"></el-option>
<el-option label="⼆级管理员" value="2"></el-option>
<el-option label="三级管理员" value="3"></el-option>
<el-option label="普通⽤户" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出⽣⽇期" prop="date">
<el-input v-model="ruleForm.date"></el-input>
</el-form-item>
<el-form-item label="备注" prop="intro">
<el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
（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.$(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.$(baseURL+"api/条件").then(function(res){
this.msg = res.body;
});
}
}
这⾥baseURL项⽬的路径，如果项⽬部署在服务器上⾯⼀般格式为www.XXX/项⽬名；之后的api是后端封装的api接⼝；然后条件就是对表的查询，删除等语句。⽐如对名为student的表进⾏查询，需要获取studentID为40001的学⽣信⼼，则查询语句可写为‘query?table=student&studentIDeq=40001'，需
要注意的是与有关数据库的操作字段（通俗点讲，可以理解为后端定义的字段）要加引号，⽽前端定义的字段要放在引号外⾯；
（3）最后，别忘了这个请求操作是没有调⽤，是默认执⾏的，所以要在mounted⾥⾯实时执⾏；
mounted: function (){
this.showDetails();
}
好了，这个函数就完成了，你可以通过浏览器控制台的network查看从后端取得的数据，或者通过console打印输出也可以看到啦
当然啦。前提是你的数据库⾥⾯有⼀张名为user的表，表⾥⾯有name，type，date，intro⼏个字段，并且后端的接⼝啥的都已经定义好的情况下，不然是不会成功的哦
希望本⽂所述对⼤家vue.js程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。