vue前端页面传JSON数组到后台报400错误问题解决

前段时间写的项目中写到了前端页面传json数组到后台的一个功能,一开始本来是好的,后来过了段时间别的地方也要写这个功能,就照着之前写的,没想到这次报了400的错误。

前端用的vue+elementui,后台是springboot

之前我的后台是这样接收前台传过来的数组的

public R<Integer> saveMoneyHistoryList(@RequestParam(value = "moneyHistoryList[]") String[] moneyHistoryList ,String orgId) {
		Integer add= channelService.saveMoneyHistoryList(moneyHistoryList,orgId);
		return R.data(add);
	}

后来报400,网上搜了一些解决办法,参考了一下成功解决
这是修改后的后端方法
用的是阿里巴巴的fastjson

public R<Integer> saveTimeHistoryList(@RequestParam(value = "tempDatas") String tempDatas ,String orgId) {

		JSONObject object=JSON.parseObject(tempDatas);
		JSONArray newArray=new JSONArray();
		int size=object.size();
		if(size>0){
			for (int i = 0; i <size ; i++) {
				newArray.add(object.get(i));
			}
		}

		String date=newArray.toString();
		Integer add= channelService.saveTimeHistoryList(date,orgId);

		return R.data(add);
	}

前端将数组转为字符串

  	const tempData = Object.assign({}, _this.flagHistoryList);
    const tempDatas = JSON.stringify(tempData);
       saveFlagHistoryList(tempDatas, this.orgId)
         .then(res => {

          var datas = res.data.data;
         console.log("历史", datas);
       });

因为我的需求是将json数组转成字符串存到表里面,页面回显需要这样写,主要记录一下前端传json数组到后台报400错误的解决方法,仅供参考

Vue.js中,动态生成表单通常通过模板绑定和数据驱动的方式来进行。当从后端获取JSON数据时,可以按照数据结构创建动态的HTML元素,并将其插入到页面上。 以下是基本步骤: 1. **设置数据模型**: 首先,在Vue实例的data选项中定义一个对象,表示你希望生成的表单结构。比如: ```javascript data() { return { formSchema: [] // 这里是一个空数组,用于存储动态表单字段的对象 } }, async created() { const response = await axios.get('your-api-url'); // 获取后端JSON数据 this.formSchema = response.data; // 更新表单字段 } ``` 2. **模板渲染**: 使用`v-for`指令遍历`formSchema`数组,生成对应字段的输入组件。例如,如果你有`input`、`select`等基础组件库: ```html <div v-for="(field, index) in formSchema" :key="index"> <label :for="field.name">{{ field.label }}</label> <!-- 使用v-bind绑定属性,如输入框 --> <input type="text" v-model="field.value" :id="field.name" :name="field.name"> <!-- 更复杂的数据类型,如选择器或其他自定义组件 --> <your-custom-component :options="field.options" :value="field.value"></your-custom-component> </div> ``` 3. **事件处理**: 如果需要,可以在每个表单元素上添加相应的事件处理器,如提交按钮的点击事件,或者校验功能。 **相关问题--:** 1. Vue中如何处理表单验证? 2. 如何在动态生成的表单中更新数据并同步至后端? 3. 当后端JSON结构发生变化时,如何保证前端表单的适应性?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值