vuejs前后端数据交互之提交数据
2017-12-21 10:11
666 查看
前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点。。。额 。。。复杂,所以这里给大家提供一种用vue-resource向后端提交数据。
(1)第一步,先在template中写一个表单;
(2)在data里面定义表单内容的字段及表单的约束规则;
(3)定义提交表单的方法
上面提交函数里面的baseURL以及api的介绍请参考我另一篇介绍http://blog.csdn.net/caixiaodaohaha/article/details/78855150
当然啦。前提是你的数据库里面有一张名为user的表,表里面有name,type,date,intro几个字段,并且后端的接口啥的都已经定义好的情况下,不然是不会成功的哦
(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几个字段,并且后端的接口啥的都已经定义好的情况下,不然是不会成功的哦
相关文章推荐
- vuejs前后端数据交互之从后端请求数据的实例
- vuejs前后端数据交互之从后端请求数据
- vue.js前后端数据交互之提交数据操作详解
- 从axios看前后端数据交互
- (转)C# Winform利用POST传值方式模拟表单提交数据(Winform与网页交互)
- [jFinal]前后端数据交互技巧(一)
- web前后端数据交互
- SSH前后端数据交互
- 实现前后端数据交互方法汇总
- 前后端数据交互 ---- 跨域请求
- vue与后端数据交互(ajax):vue-resource
- Django引入jquery静态文件,以及前后端数据交互
- Spring MVC前后端数据交互总结
- 使用Ajax提交数据,进行前后台数据交互
- 前后端数据交互乱码
- Android之使用HttpPost提交数据到服务器(Android手机客户端和后台服务器交互)
- 在非英文字符集的页面上,如果使用Ajax方式进行数据交互的话,就必须要注意保证前后端数据的统一编码,否则,很容易就出现乱码!
- C# Winform利用POST传值方式模拟表单提交数据(Winform与网页交互)
- 【javaWeb】前后端传递数据交互的两种方式
- C# Winform利用POST传值方式模拟表单提交数据(Winform与网页交互)