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

以下もご興味があるかもしれません: