フロントエンドとバックエンドがやり取りする場合、get または delete を介してバックエンドに配列を渡す必要がある場合があります。ただし、配列パラメータは送信プロセス中に変換されるため、バックエンドはデータを直接受信できません。結果は次のようになります。
解決:qsプラグインを使用して配列パラメータをシリアル化する 1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) // 出力: 'a[0]=b&a[1]=c' 2. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) // 出力: 'a[]=b&a[]=c' 3. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) // 出力: 'a=b&a=c' 4. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'カンマ' }) // 出力: 'a=b,c' インストール npm インストール qs 使用 //axiosリクエストインターセプターで、'qs'からqsをインポートします axios.interceptors.request.use(リクエスト => { if (request.method === 'delete' || request.method === 'get') { request.paramsSerializer = function(params) { qs.stringify(params, { arrayFormat: 'repeat' }) を返します } } 返品リクエスト },(エラー) =>{ Promise.reject(error) を返します。 }) ナレッジポイント拡張: Vue でパラメータを渡す Get、Delete、Post、Put Vue2.5以降に触れたばかりで、パラメータの渡し方がわからない初心者プログラマー向けの参考資料です。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> </head> <本文> /*フロントエンドとバックエンドのやり取りを改善するために、js ファイル axios.js を導入します*/ <script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> // axios リクエスト パラメータの受け渡し // axios get リクエスト パラメータの受け渡し // 従来の形式の get リクエスト axios.get('http://localhost:3000/axios?id=123') .then(関数(ret){ コンソールログ(ret.data) }) // RESTful GET リクエスト axios.get('http://localhost:3000/axios/123') .then(関数(ret){ コンソールログ(ret.data) }) // パラメータ付きリクエストを取得 axios.get('http://localhost:3000/axios', { パラメータ: { id: 789 } }).then(関数(ret) { コンソールログ(ret.data) }) // // axios 削除リクエストパラメータ axios.delete('http://localhost:3000/axios', { パラメータ: { id: 111 } }).then(関数(ret) { コンソールログ(ret.data) }) //----------------------------------- // axios を使用して POST リクエストを作成し、デフォルトで json データを渡します axios.post('http://localhost:3000/axios', { 'uname': 'lisi', 'パスワード': 123 }).then(関数(ret) { コンソールログ(ret.data) }) // axios を使用して POST リクエストを作成し、フォーム データを渡します var params = new URLSearchParams(); パラメータを追加します('uname', 'zhangsan'); パラメータを追加します('pwd', '111'); axios.post('http://localhost:3000/axios', パラメータ) .then(関数(ret) { コンソールログ(ret.data) }) // axios はリクエストパラメータを put します axios.put('http://localhost:3000/axios/123', { uname: 'lisi', パスワード: 123 }).then(関数(ret) { コンソールログ(ret.data) }) // axios の場合、get および delete リクエストでは、パラメータは params 属性に配置されます // post および put リクエストでは、パラメータはオブジェクトに直接配置されます</script> </本文> </html> バックエンドへのリクエストを開始するコード(一部の企業ではサーバーサイドプログラマーがこれを書くのを許可していません)フロントエンドプログラマーは試験のみ app.get('/adata', (req, res) => { res.send('こんにちは axios!') }) app.get('/axios', (req, res) => { res.send('axios get pass パラメータ' + req.query.id) }) app.get('/axios/:id', (req, res) => { res.send('axios get (Restful) パラメータを渡す' + req.params.id) }) app.delete('/axios', (req, res) => { res.send('axios get pass パラメータ' + req.query.id) }) app.delete('/axios/:id', (req, res) => { res.send('axios get (Restful) パラメータを渡す' + req.params.id) }) app.post('/axios', (req, res) => { res.send('axios post pass パラメータ' + req.body.uname + '---' + req.body.pwd) }) app.put('/axios/:id', (req, res) => { res.send('axios put pass パラメータ' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd) }) これで、vue で配列パラメータを渡す get/delete メソッドに関するこの記事は終了です。vue で配列パラメータを渡す方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明
>>: Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項
1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...
% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...
目次ドヴァdvaの使用DVAの実装非同期をサポートルーターの実装成し遂げる:ドヴァdva は、red...
アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...
序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...
序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...
ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...
最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...
最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...
序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...
目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...
テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...
目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...
Dockerデスクトップをインストールするダウンロード先: Docker Desktop for M...