Vue向后臺傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實(shí)例
用axios前臺代碼:
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) })
后臺代碼:
@RequestMapping("/addBath1") public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid",required=false) Integer[] menusid) { //處理代碼。。。。。。。 return responseObj; }
前臺報(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: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)
百度到后臺改為:
@RequestMapping("/addBath1") public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid[]",required=false) Integer[] menusid) { //、、、、、、、、 return responseObj; }
請求前臺依然報(bào)錯(cuò),這次后臺也報(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 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]
后來試了百度的一堆操作,依然沒解決,貌似tocmat版本太高?不清楚
最后百般嘗試,前臺用路徑傳參:
解決辦法:
前臺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) }) },
后臺接收:
@RequestMapping("/addBath1") public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid",required=false) Integer[] menusid) { //處理代碼。。。。。。。 return responseObj; }
通過這樣路徑傳參結(jié)果解決問題。。。。
補(bǔ)充知識:vue+springboot項(xiàng)目,前端傳送的對象中含有數(shù)組、對象等屬性,傳到后端變?yōu)镾tring,出現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換問題:String不能轉(zhuǎn)換為數(shù)組或?qū)ο?/strong>
問題背景:
一個(gè)項(xiàng)目中包含員工、部門兩個(gè)表,員工和部門是多對一的關(guān)系。
員工表對應(yīng)的bean是EmpBean,部門表對應(yīng)的bean是DepBean。
EmpBean的屬性包含員工表的所有字段(基本數(shù)據(jù)類型),還包含一個(gè)depBean(對應(yīng)其所在部門的信息,數(shù)據(jù)類型為DepBean)。
從數(shù)據(jù)庫查員工時(shí),將員工信息封裝在empBean(數(shù)據(jù)類型為EmpBean)中,也會(huì)通過表連接,將其所在的部門的信息查出來封裝在depBean中。
前端有一個(gè)自定義的對象:emp(只包含員工表中字段),更新員工信息,先將后端傳過來的empBean復(fù)制給前端的bean,然后通過數(shù)據(jù)綁定,將用戶更改的信息綁定到前端emp相應(yīng)的屬性中,此時(shí)前端emp中也有depBean了。
前端用戶提交更新,會(huì)將前端emp傳給后端,此時(shí),前端emp中depBean就是字符串而不是對象,后端如果用empBean接收數(shù)據(jù),就會(huì)出現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換問題。
問題分析:
數(shù)據(jù)流如下:
表->后端bean->前端object1->前端object2->后端bean->表
前端接收數(shù)據(jù)之后,呈現(xiàn)在前端的頁面表格中。每一行數(shù)據(jù)對應(yīng)著后端的一個(gè)empBean。
前端編輯emp信息后,傳到后端,更新數(shù)據(jù)庫。
通過問題背景中的描述也可以知道,兩個(gè)方向的數(shù)據(jù)流動(dòng)并不是平衡的,后端無論傳什么,前端都能接收,但是前端只能傳字符串,且后端只有在類型兼容時(shí)才能接收數(shù)據(jù)。
復(fù)雜的數(shù)據(jù)類型(對象、數(shù)組)可以順利地從后端傳到前端,但是再從前端傳回來時(shí)都變成了字符串,后端不能接收了。
而且,上述問題中的depBean即使被成功傳到后端也沒什么用。如果有用,也可以單獨(dú)作為一個(gè)對象,而不是前端emp的屬性傳到后端。
解決方案:
前端呈現(xiàn)員工信息時(shí),需要部門信息。
前端更新員工信息后,只需把更新的員工信息傳回到后端即可。
1.empBean中包含depBean中所含有的全部字段,但是不包含depBean對象。
可行,但是不規(guī)范,EmpBean中有大量的DepBean就很奇怪了。
2.后端單獨(dú)單獨(dú)查所有部門信息,并把所有部門信息封裝,傳遞到前端,然后前端呈現(xiàn)員工信息時(shí),根據(jù)關(guān)聯(lián)字段取出需要的部門信息。
可行,但是需要兩次查詢數(shù)據(jù)庫,且如果部門特別多呢?前端呈現(xiàn)員工信息可以分頁,需要的數(shù)據(jù)是很少的。如果部門特別多,又需要單獨(dú)傳遞所有的部門信息,數(shù)據(jù)量可能會(huì)很大。
3.根據(jù)分頁獲取的員工信息,獲取相應(yīng)的部門,并單獨(dú)封裝傳遞給前端。
可行,但是也是需要兩次查詢,而且后端處理數(shù)據(jù)的邏輯會(huì)變得比較復(fù)雜。
4.刪除object2中對象屬性(數(shù)據(jù)類型為對象等非基礎(chǔ)類型的屬性)
不可行。兩種刪除方法:
(1)、delete刪除的結(jié)果是undefined,但是還是存在這個(gè)屬性的。
(2)、屬性=undefined,也沒能刪除掉屬性,屬性為object object
(為什么不刪除object1中屬性?object1用來接收后端數(shù)據(jù)并作為呈現(xiàn)數(shù)據(jù)的數(shù)據(jù)源,所以不適合刪除。object2用來接收object的數(shù)據(jù)作為初始數(shù)據(jù),并用來接收用戶輸入數(shù)據(jù),然后傳回給后端,所以可以刪除其中無用的屬性)
5.在前端object1->前端object2這個(gè)過程中,使用可以排除對象中非基礎(chǔ)數(shù)據(jù)類型屬性的復(fù)制方法。
可行,object1接收后端數(shù)據(jù),并根據(jù)需要呈現(xiàn)數(shù)據(jù),且在編輯時(shí)復(fù)制給object2,作為初始數(shù)據(jù)。object2接收用戶通過瀏覽器(頁面)輸入或更新的數(shù)據(jù),然后傳回給后端。數(shù)據(jù)從后端->前端,和從前端->后端需求是不一樣的,轉(zhuǎn)換就可以在前端object1->前端object2這個(gè)過程中進(jìn)行。
6.在后端添加中間層dto,接收前端傳過來的對象empDto,再進(jìn)行相應(yīng)的處理,直接用來進(jìn)行數(shù)據(jù)庫操作?;蚋鶕?jù)實(shí)際情況按需傳給empBean后,再進(jìn)行數(shù)據(jù)庫操作。
可行,但是增加了一層,系統(tǒng)結(jié)構(gòu)變了,而且除非創(chuàng)建封裝數(shù)據(jù)類型轉(zhuǎn)化的類或方法,不然將empDto數(shù)據(jù)傳遞給empBean的過程還是比較麻煩的(將empDto中對應(yīng)員工信息的屬性(基礎(chǔ)類型屬性)復(fù)制給empBean,將empBean中的depBean設(shè)置為null就好,因?yàn)椴恍枰?/p>
而且前端傳過來的depBean,就是原來的depBean(更新員工信息時(shí)),即使接收了,也沒什么用。
總結(jié):
我最終采取的是解決方案5。
方案4、5、6都嘗試過,1、2、3沒有嘗試過。
以上這篇Vue向后臺傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關(guān)于如何解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:could?not?proxy?request的相關(guān)資料,Proxy Error指的是代理服務(wù)器無法正確處理請求的錯(cuò)誤,需要的朋友可以參考下2023-08-08Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例,幫助大家更好的理解和使用前端框架進(jìn)行開發(fā),感興趣的朋友可以了解下2021-02-02解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue使用關(guān)于speak-tss插件的詳細(xì)介紹及一些配置項(xiàng)
本文詳細(xì)介紹了speak-tss插件在Vue3中的使用方法和配置,首先需要下載依賴,然后引入插件,并進(jìn)行實(shí)例化和配置,配置項(xiàng)包括音量、語言、語音、語速、音調(diào)等,speak-tss支持多種語言和語音,適用于需要文本語音播報(bào)的場景2024-09-09vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報(bào)錯(cuò)解決方法 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容
最近遇到了一些新的需求,需要前端實(shí)現(xiàn)文件預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09基于vue+electron實(shí)現(xiàn)文件下載打開wps預(yù)覽
這篇文章主要給大家介紹了基于vue+electron實(shí)現(xiàn)文件下載打開wps預(yù)覽,文中有詳細(xì)的代碼示例供大家借鑒參考,感興趣的同學(xué)可以參考閱讀下2023-08-08