フロントエンドとバックエンドがやり取りする場合、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 カーネル デバイス ドライバーのメモリ管理に関する注意事項
シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...
目次1. プロパティを型リストに制限する2. デフォルトのコンテンツと拡張ポイント3. ネストされた...
目次1. React.Children.map 2. React.Children.forEach ...
> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...
目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...
目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...
目次背景メインコンテンツ1. コンポーネントの比較2. 実装のアイデア3. キーメソッドソースコード...
span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...
Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...
MySQL データベースが Centos7 システムにインストールされており、オペレーティング シス...
コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...
目次1. はじめに2. Vue JS のパフォーマンス最適化が必要な理由は何ですか? 3. Vueの...
jdk をインストールします: Oracle 公式ダウンロード https://www.oracl...
この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...