本文实例讲述了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打印输出也可以看到啦!!!

当然啦。前提是你的数据库里面有一张名为user的表,表里面有name,type,date,intro几个字段,并且后端的接口啥的都已经定义好的情况下,不然是不会成功的哦

希望本文所述对大家vue.js程序设计有所帮助。

Logo

前往低代码交流专区

更多推荐