Vue で配列パラメータを渡すための get / delete メソッド

Vue で配列パラメータを渡すための get / delete メソッド

フロントエンドとバックエンドがやり取りする場合、get または delete を介してバックエンドに配列を渡す必要がある場合があります。ただし、配列パラメータは送信プロセス中に変換されるため、バックエンドはデータを直接受信できません。結果は次のようになります。

パラメータ: { name : [ 1, 2, 3 ] }
翻訳効果: http://aaa.com?name[]=1&name[]=2&name[]=3
対象効果: http://aaa.com?name=1&name=2&name=3

解決:

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の get リクエストで配列パラメータを渡す方法の例
  • Vue axios データリクエストの get、post メソッドと例の詳細な説明
  • VueはURLパラメータを取得し、取得パラメータの配列を返します。
  • Vue の get メソッド\post メソッドで配列パラメータを渡す方法

<<:  Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明

>>:  Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

推薦する

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

知っておくべき 25 の Vue のヒント

目次1. プロパティを型リストに制限する2. デフォルトのコンテンツと拡張ポイント3. ネストされた...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

Docker を使用して MySQL 5.7 および 8.0 マスター スレーブ クラスターをデプロイする方法

> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...

Vueプラグインの実装で発生した問題の概要

目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...

Vue の長いリストをすばやく読み込む方法

目次背景メインコンテンツ1. コンポーネントの比較2. 実装のアイデア3. キーメソッドソースコード...

spanタグのスタイルに幅属性を設定する方法

span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...

HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...

MySQL サービスに iptables ファイアウォール ポリシーを追加するためのソリューション

MySQL データベースが Centos7 システムにインストールされており、オペレーティング シス...

ウェブページでmp3またはフラッシュプレーヤーコードを再生する

コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...

Vue.js アプリケーションのパフォーマンス最適化分析 + ソリューション

目次1. はじめに2. Vue JS のパフォーマンス最適化が必要な理由は何ですか? 3. Vueの...

tomcat をインストールし、Linux で Web サイトを展開します (推奨)

jdk をインストールします: Oracle 公式ダウンロード https://www.oracl...

鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考...