Vue向后台传数组数据,springboot接收vue传的数组数据实例


Posted in Javascript onNovember 12, 2020

用axios前台代码:

let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组
    this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{
      console.log(result)
    })

后台代码:

@RequestMapping("/addBath1")
 public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid",required=false) Integer[] menusid) {
 //处理代码。。。。。。。
 return responseObj;
 }

前台报错:

xhr.js?ec6c:178 GET http://localhost:8080/api/epidemic/roleMenus/addBath1?roleid=2&menusid[]=1&menusid[]=101&menusid[]=102&menusid[]=103&menusid[]=104&menusid[]=2&menusid[]=201&menusid[]=202&menusid[]=203&menusid[]=3&menusid[]=301&menusid[]=302&menusid[]=303&menusid[]=304&menusid[]=4&menusid[]=401&menusid[]=402&menusid[]=403&menusid[]=404 400 (Bad Request)
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:52
Promise.then (async)
request @ Axios.js?5e65:61
Axios.<computed> @ Axios.js?5e65:76
wrap @ bind.js?24ff:9
updRoleMenus @ AuthList.vue?e7ca:131
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
invokeWithErrorHandling @ vue.esm.js?efeb:1863
Vue.$emit @ vue.esm.js?efeb:3897
handleClick @ element-ui.common.js?ccbf:9417
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7565
createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 400
at createError (createError.js?16d0:16)
at settle (settle.js?db52:17)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:61)

Vue向后台传数组数据,springboot接收vue传的数组数据实例

百度到后台改为:

@RequestMapping("/addBath1")
 public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid[]",required=false) Integer[] menusid) {
 //、、、、、、、、
 return responseObj;
 }

请求前台依然报错,这次后台也报错:

java.lang.IllegalArgumentException: Invalid character found in the request target [/epidemic/roleMenus/addBath1?roleid=2&menusid[]=1&menusid[]=101&menusid[]=102&menusid[]=103&menusid[]=104&menusid[]=2&menusid[]=201&menusid[]=202&menusid[]=203&menusid[]=3&menusid[]=301&menusid[]=302&menusid[]=303&menusid[]=304&menusid[]=4&menusid[]=401&menusid[]=402&menusid[]=403&menusid[]=404]. The valid characters are defined in RFC 7230 and RFC 3986
at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:491) ~[tomcat-embed-core-9.0.36.jar:9.0.36]
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:260) ~[tomcat-embed-core-9.0.36.jar:9.0.36]
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65) [tomcat-embed-core-9.0.36.jar:9.0.36]
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:868) [tomcat-embed-core-9.0.36.jar:9.0.36]
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1590) [tomcat-embed-core-9.0.36.jar:9.0.36]
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) [tomcat-embed-core-9.0.36.jar:9.0.36]
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) [na:1.8.0_121]
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) [na:1.8.0_121]
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) [tomcat-embed-core-9.0.36.jar:9.0.36]
at java.lang.Thread.run(Thread.java:745) [na:1.8.0_121]

Vue向后台传数组数据,springboot接收vue传的数组数据实例

后来试了百度的一堆操作,依然没解决,貌似tocmat版本太高?不清楚

最后百般尝试,前台用路径传参:

解决办法:

前台vue传参代码:

let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组

 this.$axios.get("/api/epidemic/roleMenus/addBath1?roleid="+this.roleid+"&menusid="+menus_id).then((result)=>{
   console.log(result)
   }).catch((err)=>{
    console.log("---出错---!"+err.message)
   })
  },

后台接收:

@RequestMapping("/addBath1")
 public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid",required=false) Integer[] menusid) {
 //处理代码。。。。。。。
 return responseObj;
 }

通过这样路径传参结果解决问题。。。。

补充知识:vue+springboot项目,前端传送的对象中含有数组、对象等属性,传到后端变为String,出现数据类型转换问题:String不能转换为数组或对象

问题背景:

一个项目中包含员工、部门两个表,员工和部门是多对一的关系。

员工表对应的bean是EmpBean,部门表对应的bean是DepBean。

EmpBean的属性包含员工表的所有字段(基本数据类型),还包含一个depBean(对应其所在部门的信息,数据类型为DepBean)。

从数据库查员工时,将员工信息封装在empBean(数据类型为EmpBean)中,也会通过表连接,将其所在的部门的信息查出来封装在depBean中。

前端有一个自定义的对象:emp(只包含员工表中字段),更新员工信息,先将后端传过来的empBean复制给前端的bean,然后通过数据绑定,将用户更改的信息绑定到前端emp相应的属性中,此时前端emp中也有depBean了。

前端用户提交更新,会将前端emp传给后端,此时,前端emp中depBean就是字符串而不是对象,后端如果用empBean接收数据,就会出现数据类型转换问题。

问题分析:

数据流如下:

表->后端bean->前端object1->前端object2->后端bean->表

前端接收数据之后,呈现在前端的页面表格中。每一行数据对应着后端的一个empBean。

前端编辑emp信息后,传到后端,更新数据库。

通过问题背景中的描述也可以知道,两个方向的数据流动并不是平衡的,后端无论传什么,前端都能接收,但是前端只能传字符串,且后端只有在类型兼容时才能接收数据。

复杂的数据类型(对象、数组)可以顺利地从后端传到前端,但是再从前端传回来时都变成了字符串,后端不能接收了。

而且,上述问题中的depBean即使被成功传到后端也没什么用。如果有用,也可以单独作为一个对象,而不是前端emp的属性传到后端。

解决方案:

前端呈现员工信息时,需要部门信息。

前端更新员工信息后,只需把更新的员工信息传回到后端即可。

1.empBean中包含depBean中所含有的全部字段,但是不包含depBean对象。

可行,但是不规范,EmpBean中有大量的DepBean就很奇怪了。

2.后端单独单独查所有部门信息,并把所有部门信息封装,传递到前端,然后前端呈现员工信息时,根据关联字段取出需要的部门信息。

可行,但是需要两次查询数据库,且如果部门特别多呢?前端呈现员工信息可以分页,需要的数据是很少的。如果部门特别多,又需要单独传递所有的部门信息,数据量可能会很大。

3.根据分页获取的员工信息,获取相应的部门,并单独封装传递给前端。

可行,但是也是需要两次查询,而且后端处理数据的逻辑会变得比较复杂。

4.删除object2中对象属性(数据类型为对象等非基础类型的属性)

不可行。两种删除方法:

(1)、delete删除的结果是undefined,但是还是存在这个属性的。

(2)、属性=undefined,也没能删除掉属性,属性为object object

(为什么不删除object1中属性?object1用来接收后端数据并作为呈现数据的数据源,所以不适合删除。object2用来接收object的数据作为初始数据,并用来接收用户输入数据,然后传回给后端,所以可以删除其中无用的属性)

5.在前端object1->前端object2这个过程中,使用可以排除对象中非基础数据类型属性的复制方法。

可行,object1接收后端数据,并根据需要呈现数据,且在编辑时复制给object2,作为初始数据。object2接收用户通过浏览器(页面)输入或更新的数据,然后传回给后端。数据从后端->前端,和从前端->后端需求是不一样的,转换就可以在前端object1->前端object2这个过程中进行。

6.在后端添加中间层dto,接收前端传过来的对象empDto,再进行相应的处理,直接用来进行数据库操作。或根据实际情况按需传给empBean后,再进行数据库操作。

可行,但是增加了一层,系统结构变了,而且除非创建封装数据类型转化的类或方法,不然将empDto数据传递给empBean的过程还是比较麻烦的(将empDto中对应员工信息的属性(基础类型属性)复制给empBean,将empBean中的depBean设置为null就好,因为不需要)。

而且前端传过来的depBean,就是原来的depBean(更新员工信息时),即使接收了,也没什么用。

总结:

我最终采取的是解决方案5。

方案4、5、6都尝试过,1、2、3没有尝试过。

以上这篇Vue向后台传数组数据,springboot接收vue传的数组数据实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
vue 解决provide和inject响应的问题
Nov 12 #Javascript
vue的$http的get请求要加上params操作
Nov 12 #Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 #Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 #Javascript
vue 获取url里参数的两种方法小结
Nov 12 #Javascript
You might like
php SQL之where语句生成器
2009/03/24 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python unittest单元测试框架总结
2018/09/08 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
挂科检讨书范文
2014/02/20 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP