用axios前臺(tái)代碼：

let menus_id = this.$refs.tree.getCheckedKeys(); //菜單id [1,2,3]數(shù)組 this.$axios.get('/api/epidemic/roleMenus/addBath1',{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) })

后臺(tái)代碼：

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

前臺(tái)報(bào)錯(cuò)：

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:178xhrAdapter @ xhr.js?ec6c:12dispatchRequest @ dispatchRequest.js?c4bb:52Promise.then (async)request @ Axios.js?5e65:61Axios.<computed> @ Axios.js?5e65:76wrap @ bind.js?24ff:9updRoleMenus @ AuthList.vue?e7ca:131invokeWithErrorHandling @ vue.esm.js?efeb:1863invoker @ vue.esm.js?efeb:2188invokeWithErrorHandling @ vue.esm.js?efeb:1863Vue.$emit @ vue.esm.js?efeb:3897handleClick @ element-ui.common.js?ccbf:9417invokeWithErrorHandling @ vue.esm.js?efeb:1863invoker @ vue.esm.js?efeb:2188original._wrapper @ vue.esm.js?efeb:7565createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 400at createError (createError.js?16d0:16)at settle (settle.js?db52:17)at XMLHttpRequest.handleLoad (xhr.js?ec6c:61)

百度到后臺(tái)改為：

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

請(qǐng)求前臺(tái)依然報(bào)錯(cuò)，這次后臺(tái)也報(bào)錯(cuò)：

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 3986at 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]

后來(lái)試了百度的一堆操作，依然沒(méi)解決，貌似tocmat版本太高？不清楚

最后百般嘗試，前臺(tái)用路徑傳參：

解決辦法：

前臺(tái)vue傳參代碼：

let menus_id = this.$refs.tree.getCheckedKeys(); //菜單id [1,2,3]數(shù)組 this.$axios.get('/api/epidemic/roleMenus/addBath1?roleid='+this.roleid+'&menusid='+menus_id).then((result)=>{ console.log(result) }).catch((err)=>{ console.log('---出錯(cuò)---！'+err.message) }) },

后臺(tái)接收：

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

通過(guò)這樣路徑傳參結(jié)果解決問(wèn)題。。。。

補(bǔ)充知識(shí)：vue+springboot項(xiàng)目，前端傳送的對(duì)象中含有數(shù)組、對(duì)象等屬性，傳到后端變?yōu)镾tring，出現(xiàn)數(shù)據(jù)類(lèi)型轉(zhuǎn)換問(wèn)題：String不能轉(zhuǎn)換為數(shù)組或?qū)ο?/b>

問(wèn)題背景：

一個(gè)項(xiàng)目中包含員工、部門(mén)兩個(gè)表，員工和部門(mén)是多對(duì)一的關(guān)系。

員工表對(duì)應(yīng)的bean是EmpBean，部門(mén)表對(duì)應(yīng)的bean是DepBean。

EmpBean的屬性包含員工表的所有字段（基本數(shù)據(jù)類(lèi)型），還包含一個(gè)depBean（對(duì)應(yīng)其所在部門(mén)的信息,數(shù)據(jù)類(lèi)型為DepBean）。

從數(shù)據(jù)庫(kù)查員工時(shí)，將員工信息封裝在empBean（數(shù)據(jù)類(lèi)型為EmpBean）中，也會(huì)通過(guò)表連接，將其所在的部門(mén)的信息查出來(lái)封裝在depBean中。

前端有一個(gè)自定義的對(duì)象：emp（只包含員工表中字段），更新員工信息，先將后端傳過(guò)來(lái)的empBean復(fù)制給前端的bean，然后通過(guò)數(shù)據(jù)綁定，將用戶(hù)更改的信息綁定到前端emp相應(yīng)的屬性中，此時(shí)前端emp中也有depBean了。

前端用戶(hù)提交更新，會(huì)將前端emp傳給后端，此時(shí)，前端emp中depBean就是字符串而不是對(duì)象，后端如果用empBean接收數(shù)據(jù)，就會(huì)出現(xiàn)數(shù)據(jù)類(lèi)型轉(zhuǎn)換問(wèn)題。

問(wèn)題分析：

數(shù)據(jù)流如下：

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

前端接收數(shù)據(jù)之后，呈現(xiàn)在前端的頁(yè)面表格中。每一行數(shù)據(jù)對(duì)應(yīng)著后端的一個(gè)empBean。

前端編輯emp信息后，傳到后端，更新數(shù)據(jù)庫(kù)。

通過(guò)問(wèn)題背景中的描述也可以知道，兩個(gè)方向的數(shù)據(jù)流動(dòng)并不是平衡的，后端無(wú)論傳什么，前端都能接收，但是前端只能傳字符串，且后端只有在類(lèi)型兼容時(shí)才能接收數(shù)據(jù)。

復(fù)雜的數(shù)據(jù)類(lèi)型（對(duì)象、數(shù)組）可以順利地從后端傳到前端，但是再?gòu)那岸藗骰貋?lái)時(shí)都變成了字符串，后端不能接收了。

而且，上述問(wèn)題中的depBean即使被成功傳到后端也沒(méi)什么用。如果有用，也可以單獨(dú)作為一個(gè)對(duì)象，而不是前端emp的屬性傳到后端。

解決方案：

前端呈現(xiàn)員工信息時(shí)，需要部門(mén)信息。

前端更新員工信息后，只需把更新的員工信息傳回到后端即可。

1.empBean中包含depBean中所含有的全部字段，但是不包含depBean對(duì)象。

可行，但是不規(guī)范，EmpBean中有大量的DepBean就很奇怪了。

2.后端單獨(dú)單獨(dú)查所有部門(mén)信息，并把所有部門(mén)信息封裝，傳遞到前端，然后前端呈現(xiàn)員工信息時(shí)，根據(jù)關(guān)聯(lián)字段取出需要的部門(mén)信息。

可行，但是需要兩次查詢(xún)數(shù)據(jù)庫(kù)，且如果部門(mén)特別多呢？前端呈現(xiàn)員工信息可以分頁(yè)，需要的數(shù)據(jù)是很少的。如果部門(mén)特別多，又需要單獨(dú)傳遞所有的部門(mén)信息，數(shù)據(jù)量可能會(huì)很大。

3.根據(jù)分頁(yè)獲取的員工信息，獲取相應(yīng)的部門(mén)，并單獨(dú)封裝傳遞給前端。

可行，但是也是需要兩次查詢(xún)，而且后端處理數(shù)據(jù)的邏輯會(huì)變得比較復(fù)雜。

4.刪除object2中對(duì)象屬性（數(shù)據(jù)類(lèi)型為對(duì)象等非基礎(chǔ)類(lèi)型的屬性）

不可行。兩種刪除方法：

（1）、delete刪除的結(jié)果是undefined，但是還是存在這個(gè)屬性的。

（2）、屬性=undefined，也沒(méi)能刪除掉屬性，屬性為object object

（為什么不刪除object1中屬性？object1用來(lái)接收后端數(shù)據(jù)并作為呈現(xiàn)數(shù)據(jù)的數(shù)據(jù)源，所以不適合刪除。object2用來(lái)接收object的數(shù)據(jù)作為初始數(shù)據(jù)，并用來(lái)接收用戶(hù)輸入數(shù)據(jù)，然后傳回給后端，所以可以刪除其中無(wú)用的屬性）

5.在前端object1->前端object2這個(gè)過(guò)程中，使用可以排除對(duì)象中非基礎(chǔ)數(shù)據(jù)類(lèi)型屬性的復(fù)制方法。

可行，object1接收后端數(shù)據(jù)，并根據(jù)需要呈現(xiàn)數(shù)據(jù)，且在編輯時(shí)復(fù)制給object2，作為初始數(shù)據(jù)。object2接收用戶(hù)通過(guò)瀏覽器（頁(yè)面）輸入或更新的數(shù)據(jù)，然后傳回給后端。數(shù)據(jù)從后端->前端，和從前端->后端需求是不一樣的，轉(zhuǎn)換就可以在前端object1->前端object2這個(gè)過(guò)程中進(jìn)行。

6.在后端添加中間層dto，接收前端傳過(guò)來(lái)的對(duì)象empDto，再進(jìn)行相應(yīng)的處理，直接用來(lái)進(jìn)行數(shù)據(jù)庫(kù)操作。或根據(jù)實(shí)際情況按需傳給empBean后，再進(jìn)行數(shù)據(jù)庫(kù)操作。

可行，但是增加了一層，系統(tǒng)結(jié)構(gòu)變了，而且除非創(chuàng)建封裝數(shù)據(jù)類(lèi)型轉(zhuǎn)化的類(lèi)或方法，不然將empDto數(shù)據(jù)傳遞給empBean的過(guò)程還是比較麻煩的（將empDto中對(duì)應(yīng)員工信息的屬性（基礎(chǔ)類(lèi)型屬性）復(fù)制給empBean,將empBean中的depBean設(shè)置為null就好，因?yàn)椴恍枰?/p>

而且前端傳過(guò)來(lái)的depBean，就是原來(lái)的depBean（更新員工信息時(shí)），即使接收了，也沒(méi)什么用。

總結(jié)：

我最終采取的是解決方案5。

方案4、5、6都嘗試過(guò)，1、2、3沒(méi)有嘗試過(guò)。

以上這篇Vue向后臺(tái)傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。