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 カーネル デバイス ドライバーのメモリ管理に関する注意事項

推薦する

Linux7で仮想ホストを実装する3つの方法

1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...

React dva実装コード

目次ドヴァdvaの使用DVAの実装非同期をサポートルーターの実装成し遂げる:ドヴァdva は、red...

MySql のグループ化と各グループからランダムに 1 つのデータを取得する

アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...

MySQLのCOUNT(*)のパフォーマンスについてお話しましょう

序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...

MySQL でデータ復旧に binlog を使用する方法

序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

Office ファイルのオンライン プレビュー用の Vue サンプル コード

最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...

MySQLを5.7にアップグレードすると、WordPressはデータをインポートするときにエラー1067を報告します

最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...

MySQL binlog_ignore_dbパラメータの具体的な使用法

序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...

jQueryは検証コード送信のコントロールボタンを無効にする機能を実装します

必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...

vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明

目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

Dockerサーバーのストレージリソースプール不足問題の解決

目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...

Docker Desktop で rocketmq をインストールするための非常に詳細なチュートリアル

Dockerデスクトップをインストールするダウンロード先: Docker Desktop for M...