vuejs前后端数据交互之提交数据_el-form提交表单数据

前端小白刚开始做页面的时候，我们的前端页面中经常会用到表单，所以学会提交表单也是一个基本技能，其实用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="ruleForm.type" placeholder="请选择专利类型" style="width:500px;">
                        <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.$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的介绍请参考我另一篇介绍http://blog.csdn.net/caixiaodaohaha/article/details/78855150

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