基于axios写了一个方便后台（java）系统用来接收表单数据的小程序

先讲实现原理：

页面表单通过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为后台，接收表单数据是通过对象接收

 

后台已经获得表单数据

后面具体，请细心的看官阅读代码并多多实践