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

19 篇文章 1 订阅

先讲实现原理:

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

 

后台已经获得表单数据

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值