Vueはバックグラウンドに配列データを転送し、springbootはvue送信を受信する配列データの例
axiosフロントコードを使う:
xhr.js？c:178 GEThttp://localhost:8080/api/epidemic/roleMenus/addBath1?ロレックス=2&menusid[]=1&menusid[]=101&mennusid[]=102& mennusid[]=103&menusid===104&mennusid[]=2&mennusid[===201&mennnnusid[]=2023&mennnnusid[===2023&mennnnnnnmeid=2033[meid]=30=30[meddd= 30=30[memememmmmmmmmmmmmmmmmmmmmmmmmmid=30[/[/[/[/[/[/[/[/[/[/[/[/[/id]]]]]]=30=30=30=30[/[/[/[/[/[/[/[/[/[/menusid[]=4&menusid[]=401&menusid[==402&menusid[]=403&menusid[]=404(Bad Request)
dispatch [email protected]？c:178
[email protected]？c:12
dispatch Request@dispatch Request.js？c 4 bb:52
Promise.then(async)
[email protected] e 65:61
Axios.@Axios.js？5 e 65:76
[email protected] ff:9
[email protected]？e 7 ca：131
invokeWithErrowr [email protected]？efeb：1863
[email protected]？efeb：2188
invokeWithErrowr [email protected]？efeb：1863
[email protected]？efeb：3897
[email protected]？cbf:9417
invokeWithErrowr [email protected]？efeb：1863
[email protected]？efeb：2188
オリジナル[email protected]？efeb：7565
createErrror.js16 d 0:16 Unicagt Error:Request failed with status code 400
at createError（createError.js？16 d 0:16）
atセット(settle.js？db 52:17)
at XMLttpRequest.handleLoad（xhr.js？c：61）
Baiduはバックグラウンドに変更されました。
java.lang.IllagalAgment Exception：Invalid character found in the request target[/epidemic/roleMenus/addBath 1？ロレックス=2&menusid[]=1&menusid[]=101&mennusid[]=102& mennusid[]=103&menusid===104&mennusid[]=2&mennusid[===201&mennnnusid[]=2023&mennnnusid[===2023&mennnnnnnmeid=2033[meid]=30=30[meddd= 30=30[memememmmmmmmmmmmmmmmmmmmmmmmmmid=30[/[/[/[/[/[/[/[/[/[/[/[/[/id]]]]]]=30=30=30=30[/[/[/[/[/[/[/[/[/[/menusid==4&menusid[]=401&menusid==402&menusid==403&menusid[]=404].The valid characters are defined in RFC 7230 and RFC 3986
at org.apphe.co yote.http 11 Input Buffer.parseRequest Line(Http 11 InputBuffer.java:491)~[tomcat-embed-core-9.0.36]
at org.apache.co yote.http 11 Processe.service(Http 11 Processe.java:260)~[tomcat-embed-core-9.0.36]
at org.apache.co.yote.Abstract Processight.process(AbstractProcess orlight.java:65)[tomcat-embed-core-9.0.36]
at org.apacho.com yote.AbstractProtocol$Connection Handler.process(AbstractProtocol.java:868)[tomcat-embed-core-9.0.36]
at org.appache.tomcat.util.net.NioEnd point$SocketProcess.doRun(NioEndpoint.java:1590)[tomcat-embed-9.0.36 jar:9.0.36]
at org.apaache.tomcat.util.net.SocketProcessorsorBase.run(SocketProcesssorBase.java:49)[tomcat-embed-core-9.0.36]
at java.util.co ncurrent.ThreadPool Exector.runWorker(ThreadPool Exector.java:1142)[na:1.8.0_]121)
at java.util.co ncurrent.ThreadPool ExectorドルWorker.run(ThreadPool Exector.java:617)[na:1.8.0_]121)
at org.apaache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)[tomcat-embed-core-9.0.36]
at java.lang.Thread.run(Thread.java:745)[na:1.8.0_]121)
その後百度の操作を試しましたが、まだ解決されていません。tocmatバージョンは高すぎますか？よく分かりません
最後にいろいろ試してみます。フロントはパスでパスします。
解決策：
フロントvueパスコード：
補足知識：vue+springboot項目、先端転送の対象には配列、オブジェクトなどの属性が含まれています。後端にSteringが流れ、データタイプの変換問題があります。Stringは配列やオブジェクトに変換できません。
問題の背景:
一つのプロジェクトには従業員と部門の二つの表が含まれています。従業員と部門は複数対一の関係です。
社員表に対応するbeanはEmpBeanで、部門表に対応するbeanはDepBeanです。
EmpBeanの属性は、従業員テーブルのすべてのフィールド（ベースデータタイプ）を含み、一つのdepBeanも含まれています。
データベースから従業員を調べる時、従業員の情報をempBean（データの種類はEmpBean）に入れても、表を通して接続し、その所在する部門の情報を調べてdepBenに入れます。
フロントエンドにはカスタムのオブジェクトがあります。emp（従業員テーブルのフィールドのみを含む）は、従業員情報を更新し、バックエンドから送られてきたempBenをフロントエンドのbeanにコピーして、データバインディングを通じて、ユーザーが変更した情報をフロントエンドempに対応する属性に結びつけます。この時、フロントエンドempにもdepBenがあります。
フロントエンドユーザが更新を提出すると、フロントエンドempをバックエンドに転送します。この時、フロントエンドempのdepBenは文字列であり、オブジェクトではなく、バックエンドがempBenでデータを受信すると、データタイプの変換問題が発生します。
問題の分析:
データの流れは以下の通りです
表->バックエンドbean->フロントエンドobject 1->フロントエンドobject 2->バックエンドbean->表
フロントエンドがデータを受信すると、フロントエンドのページテーブルに表示されます。各ラインのデータは後端のempBenに対応しています。
先端がemp情報を編集したら、バックエンドに進み、データベースを更新します。
問題背景における記述によっても、両方向のデータの流れはバランスではなく、バックエンドは何を伝えてもフロントエンドは受信できますが、フロントエンドは文字列しか伝えられず、バックエンドはタイプ互換性がある場合のみデータを受信できます。
複雑なデータタイプ（オブジェクト、配列）は、バックエンドからフロントエンドにスムーズに伝えられますが、フロントエンドからバックエンドに戻ると文字列になり、バックエンドは受信できません。
また、上記の問題の中のdepBeanは、成功して後端にまで運ばれても無駄です。有用であれば、フロントエンドempの属性ではなく、個別にオブジェクトとしてバックエンドに送ることもできる。
ソリューション:
フロントエンドが社員情報を提示する場合、部門情報が必要です。
フロントエンドで社員情報を更新したら、更新された従業員情報をバックエンドに戻すだけでいいです。
1.empBeanにはdepBeanに含まれるすべてのフィールドが含まれていますが、depBeanオブジェクトは含まれていません。
可能ですが、規範ではないです。EmpBeanの中に大量のDepBeanがあるとおかしいです。
2.バックエンドは単独ですべての部門の情報を調べ、すべての部門の情報をカプセル化し、フロントエンドに伝達し、そしてフロントエンドが従業員情報を提示する場合、関連フィールドによって必要な部門情報を取り出す。
可能ですが、データベースを二回確認する必要があります。部門が特に多い場合は？フロントエンドには従業員の情報が表示され、ページを分けることができます。必要なデータは少ないです。部門が特に多い場合、部門ごとの情報を個別に伝える必要があるので、データ量が大きいかもしれません。
3.ページごとに取得した従業員情報に基づき、該当部門を取得し、個別にパッケージ化してフロントエンドに渡す。
可能ですが、2回のクエリーが必要です。そしてバックエンドのデータ処理のロジックが複雑になります。
4.object 2のオブジェクト属性（データタイプを対象とするなど、ベース以外のタイプの属性）を削除します。
いけません。二つの削除方法：
(1)、delete削除の結果はundefinedですが、まだこの属性があります。
（2）、属性=undefinedも削除できませんでした。属性はobject objectです。
（なぜobject 1のプロパティを削除しないですか？Object 1は、バックエンドデータを受信し、レンダリングデータのデータソースとして使用するため、削除には適していない。Object 2は、Objectのデータを初期データとして受信し、ユーザの入力データを受信してバックエンドに戻すために使用されるので、不要な属性を削除することができる）
5.先端object 1->先端object 2では、対象から除外できる基礎データタイプの属性をコピーする方法があります。
可能であれば、Object 1はバックエンドデータを受信し、必要に応じてデータを提示し、編集時にObject 2にコピーして、初期データとします。object 2は、ユーザがブラウザ（ページ）を介して入力または更新したデータを受信し、後端に転送する。データはバックエンド->フロントエンドから、フロントエンドからのバックエンドの需要とは異なり、変換はフロントエンドのobject 1->フロントエンドのobject 2というプロセスで行うことができます。
6.バックエンドに中間層dtoを追加し、先端から送られてきたオブジェクトempDtoを受信し、対応する処理を行い、直接にデータベース操作を行う。あるいは、必要に応じて、必要に応じてempBeanに伝えてから、データベース操作を行います。
可能性がありますが、システム構造が変わりました。パッケージデータの類型転化の類型または方法を作成しない限り、empDtoデータをempBenに渡す過程は面倒です。
しかもフロントからのデベベルは、元のデベベル（社員情報を更新する時）です。受け取っても、何の役にも立たないです。
まとめ:
私は最終的に解決策をとりました。
案4、5、6は全部試しました。1、2、3は試したことがありません。
以上のこのVueはバックグランドに配列データを伝えています。springbootはvue送信を受信した配列データの実例は小編集が皆さんに共有した内容の全部です。
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？c:178 GEThttp://localhost:8080/api/epidemic/roleMenus/addBath1?ロレックス=2&menusid[]=1&menusid[]=101&mennusid[]=102& mennusid[]=103&menusid===104&mennusid[]=2&mennusid[===201&mennnnusid[]=2023&mennnnusid[===2023&mennnnnnnmeid=2033[meid]=30=30[meddd= 30=30[memememmmmmmmmmmmmmmmmmmmmmmmmmid=30[/[/[/[/[/[/[/[/[/[/[/[/[/id]]]]]]=30=30=30=30[/[/[/[/[/[/[/[/[/[/menusid[]=4&menusid[]=401&menusid[==402&menusid[]=403&menusid[]=404(Bad Request)
dispatch [email protected]？c:178
[email protected]？c:12
dispatch Request@dispatch Request.js？c 4 bb:52
Promise.then(async)
[email protected] e 65:61
Axios.
[email protected] ff:9
[email protected]？e 7 ca：131
invokeWithErrowr [email protected]？efeb：1863
[email protected]？efeb：2188
invokeWithErrowr [email protected]？efeb：1863
[email protected]？efeb：3897
[email protected]？cbf:9417
invokeWithErrowr [email protected]？efeb：1863
[email protected]？efeb：2188
オリジナル[email protected]？efeb：7565
createErrror.js16 d 0:16 Unicagt Error:Request failed with status code 400
at createError（createError.js？16 d 0:16）
atセット(settle.js？db 52:17)
at XMLttpRequest.handleLoad（xhr.js？c：61）
Baiduはバックグラウンドに変更されました。
@RequestMapping("/addBath1")
public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid[]",required=false) Integer[] menusid) {
//、、、、、、、、
return responseObj;
}java.lang.IllagalAgment Exception：Invalid character found in the request target[/epidemic/roleMenus/addBath 1？ロレックス=2&menusid[]=1&menusid[]=101&mennusid[]=102& mennusid[]=103&menusid===104&mennusid[]=2&mennusid[===201&mennnnusid[]=2023&mennnnusid[===2023&mennnnnnnmeid=2033[meid]=30=30[meddd= 30=30[memememmmmmmmmmmmmmmmmmmmmmmmmmid=30[/[/[/[/[/[/[/[/[/[/[/[/[/id]]]]]]=30=30=30=30[/[/[/[/[/[/[/[/[/[/menusid==4&menusid[]=401&menusid==402&menusid==403&menusid[]=404].The valid characters are defined in RFC 7230 and RFC 3986
at org.apphe.co yote.http 11 Input Buffer.parseRequest Line(Http 11 InputBuffer.java:491)~[tomcat-embed-core-9.0.36]
at org.apache.co yote.http 11 Processe.service(Http 11 Processe.java:260)~[tomcat-embed-core-9.0.36]
at org.apache.co.yote.Abstract Processight.process(AbstractProcess orlight.java:65)[tomcat-embed-core-9.0.36]
at org.apacho.com yote.AbstractProtocol$Connection Handler.process(AbstractProtocol.java:868)[tomcat-embed-core-9.0.36]
at org.appache.tomcat.util.net.NioEnd point$SocketProcess.doRun(NioEndpoint.java:1590)[tomcat-embed-9.0.36 jar:9.0.36]
at org.apaache.tomcat.util.net.SocketProcessorsorBase.run(SocketProcesssorBase.java:49)[tomcat-embed-core-9.0.36]
at java.util.co ncurrent.ThreadPool Exector.runWorker(ThreadPool Exector.java:1142)[na:1.8.0_]121)
at java.util.co ncurrent.ThreadPool ExectorドルWorker.run(ThreadPool Exector.java:617)[na:1.8.0_]121)
at org.apaache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)[tomcat-embed-core-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]
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項目、先端転送の対象には配列、オブジェクトなどの属性が含まれています。後端にSteringが流れ、データタイプの変換問題があります。Stringは配列やオブジェクトに変換できません。
問題の背景:
一つのプロジェクトには従業員と部門の二つの表が含まれています。従業員と部門は複数対一の関係です。
社員表に対応するbeanはEmpBeanで、部門表に対応するbeanはDepBeanです。
EmpBeanの属性は、従業員テーブルのすべてのフィールド（ベースデータタイプ）を含み、一つのdepBeanも含まれています。
データベースから従業員を調べる時、従業員の情報をempBean（データの種類はEmpBean）に入れても、表を通して接続し、その所在する部門の情報を調べてdepBenに入れます。
フロントエンドにはカスタムのオブジェクトがあります。emp（従業員テーブルのフィールドのみを含む）は、従業員情報を更新し、バックエンドから送られてきたempBenをフロントエンドのbeanにコピーして、データバインディングを通じて、ユーザーが変更した情報をフロントエンドempに対応する属性に結びつけます。この時、フロントエンドempにもdepBenがあります。
フロントエンドユーザが更新を提出すると、フロントエンドempをバックエンドに転送します。この時、フロントエンドempのdepBenは文字列であり、オブジェクトではなく、バックエンドがempBenでデータを受信すると、データタイプの変換問題が発生します。
問題の分析:
データの流れは以下の通りです
表->バックエンドbean->フロントエンドobject 1->フロントエンドobject 2->バックエンドbean->表
フロントエンドがデータを受信すると、フロントエンドのページテーブルに表示されます。各ラインのデータは後端のempBenに対応しています。
先端がemp情報を編集したら、バックエンドに進み、データベースを更新します。
問題背景における記述によっても、両方向のデータの流れはバランスではなく、バックエンドは何を伝えてもフロントエンドは受信できますが、フロントエンドは文字列しか伝えられず、バックエンドはタイプ互換性がある場合のみデータを受信できます。
複雑なデータタイプ（オブジェクト、配列）は、バックエンドからフロントエンドにスムーズに伝えられますが、フロントエンドからバックエンドに戻ると文字列になり、バックエンドは受信できません。
また、上記の問題の中のdepBeanは、成功して後端にまで運ばれても無駄です。有用であれば、フロントエンドempの属性ではなく、個別にオブジェクトとしてバックエンドに送ることもできる。
ソリューション:
フロントエンドが社員情報を提示する場合、部門情報が必要です。
フロントエンドで社員情報を更新したら、更新された従業員情報をバックエンドに戻すだけでいいです。
1.empBeanにはdepBeanに含まれるすべてのフィールドが含まれていますが、depBeanオブジェクトは含まれていません。
可能ですが、規範ではないです。EmpBeanの中に大量のDepBeanがあるとおかしいです。
2.バックエンドは単独ですべての部門の情報を調べ、すべての部門の情報をカプセル化し、フロントエンドに伝達し、そしてフロントエンドが従業員情報を提示する場合、関連フィールドによって必要な部門情報を取り出す。
可能ですが、データベースを二回確認する必要があります。部門が特に多い場合は？フロントエンドには従業員の情報が表示され、ページを分けることができます。必要なデータは少ないです。部門が特に多い場合、部門ごとの情報を個別に伝える必要があるので、データ量が大きいかもしれません。
3.ページごとに取得した従業員情報に基づき、該当部門を取得し、個別にパッケージ化してフロントエンドに渡す。
可能ですが、2回のクエリーが必要です。そしてバックエンドのデータ処理のロジックが複雑になります。
4.object 2のオブジェクト属性（データタイプを対象とするなど、ベース以外のタイプの属性）を削除します。
いけません。二つの削除方法：
(1)、delete削除の結果はundefinedですが、まだこの属性があります。
（2）、属性=undefinedも削除できませんでした。属性はobject objectです。
（なぜobject 1のプロパティを削除しないですか？Object 1は、バックエンドデータを受信し、レンダリングデータのデータソースとして使用するため、削除には適していない。Object 2は、Objectのデータを初期データとして受信し、ユーザの入力データを受信してバックエンドに戻すために使用されるので、不要な属性を削除することができる）
5.先端object 1->先端object 2では、対象から除外できる基礎データタイプの属性をコピーする方法があります。
可能であれば、Object 1はバックエンドデータを受信し、必要に応じてデータを提示し、編集時にObject 2にコピーして、初期データとします。object 2は、ユーザがブラウザ（ページ）を介して入力または更新したデータを受信し、後端に転送する。データはバックエンド->フロントエンドから、フロントエンドからのバックエンドの需要とは異なり、変換はフロントエンドのobject 1->フロントエンドのobject 2というプロセスで行うことができます。
6.バックエンドに中間層dtoを追加し、先端から送られてきたオブジェクトempDtoを受信し、対応する処理を行い、直接にデータベース操作を行う。あるいは、必要に応じて、必要に応じてempBeanに伝えてから、データベース操作を行います。
可能性がありますが、システム構造が変わりました。パッケージデータの類型転化の類型または方法を作成しない限り、empDtoデータをempBenに渡す過程は面倒です。
しかもフロントからのデベベルは、元のデベベル（社員情報を更新する時）です。受け取っても、何の役にも立たないです。
まとめ:
私は最終的に解決策をとりました。
案4、5、6は全部試しました。1、2、3は試したことがありません。
以上のこのVueはバックグランドに配列データを伝えています。springbootはvue送信を受信した配列データの実例は小編集が皆さんに共有した内容の全部です。