先讲实现原理:
页面表单通过post提交至后台,让后台能通过对象一次性接收多个属性值
axios问题:有人曾axios直接提交后台无法获得表单数据,需要手动实例(axios.create)才能接收 ,此案例可避免这种尴尬
具体思路:编写一个function参数需要提供后台接口路劲+后台接收表单数据对象名+表单参数,然后用js再次转化为符合后台能接收的formData,达到需求目的
1、上代码
/**
* Created by lijinquan on 2018/11/13.
*/
function request(url,formName,formData) {
console.log(JSON.stringify(formData))
const data = new FormData();
for(var key in formData){
data.append(formName+"."+key,formData[key]);
// console.log("=====>"+formName+"."+key+"=="+form[key]);
}
const instance = axios.create({
baseURL: url,
timeout: 60000,
headers: {
"Content-type": "multipart/form-data"
},
});
return instance({
method: 'post',
data: data,
});
}
2、参数列表详细:
request(url,formName,formData)
(1) url:即请求地址
(2)formName:表单名称
(3)formData:表单数据
3、具体案例
<el-form :model="roleExt" ref="roleExt" class="demo-ro">
<el-row>
<el-col :span="7">
<el-form-item label="角色名称:" prop="rohReferencecode" >
<el-input v-model.trim="roleExt.rlName" placeholder="请输入角色名称" @input="removeSpaces" style="width: 200px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="状态:">
<el-select v-model="roleExt.rlStatus" placeholder="请选择入库模式" style="width: 200px;">
<s:if test="#request.Languages=='English'">
<el-option label="Normal" value="N"></el-option>
<el-option label="Disable" value="D"></el-option>
<el-option label="正常" value="N"></el-option>
<el-option label="禁用" value="D"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<div class="rightArea" style="display: flex;margin-left: 62px;line-height: 40px;align-items: center;">
<div class="margin_top10">
<el-button type="primary" @click="submitForm('roleExt')" style="background: #ED8413;border: #ED8413"><s:text name="sou_search"/></el-button>
</div>
<div class="margin_top10" style="margin-left: 30px;line-height: 40px;">
<a class="do_red_btn2" href="/webRoleAction_find.html">新增角色</a>
</div>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<script>
export default {
data() {
return {
itemList:[],
roleExt: {
rlName: '',
rlStatus: 'N',
}
}
},
methods: {
onSubmit() {
console.log('submit!');
},
queryDatas:function(url){
var that=this; //先保存当前,避免后续使用this混淆
request(url,"roleExt",that.roleExt).then(function(res) {
let rspData= res.data;
that.itemList= rspData.result;
console.log(that.itemList)
that.totalPages=rspData.rows;
}).catch(function(err){
app.$message({type: 'error', message: '出错了!'+err});
});
}
}
}
</script>
java为后台,接收表单数据是通过对象接收
后台已经获得表单数据
后面具体,请细心的看官阅读代码并多多实践