ホームページ >ウェブフロントエンド >フロントエンドQ&A >vueのqsの2つの方法とは何ですか

vueのqsの2つの方法とは何ですか

青灯夜游
青灯夜游オリジナル
2022-12-21 18:19:002657ブラウズ

qs の 2 つのメソッドは次のとおりです。 1. stringify メソッドは、オブジェクトを URL 形式の文字列にシリアル化し、「&」記号で結合するために使用されます。構文は「qs. stringify(data)"; 2. parse メソッドは、URL 形式の文字列をオブジェクトに解析するために使用されます。構文は「qs.parse(data)」です。

vueのqsの2つの方法とは何ですか

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1.qsとは何ですか?

qs は、セキュリティを追加するクエリ文字列の解析と文字列のシリアル化のためのライブラリです。オブジェクトと文字列間の変換を実行できます。

2. qs

qs のインストールは axios に付属しており、npm ウェアハウスによって管理されるパッケージでもあります。

インストール方法:

npm install qs

Vue プロジェクトのインポート方法: Vue プロジェクトの

import qs from 'qs'

main .js でグローバル プロパティを設定する方法:

Vue.prototype.$qs = qs

3. QS アプリケーション シナリオ

axios を使用してバックエンド インターフェイスを呼び出します。

リクエスト メソッドは post、axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded'、パラメータには qs.stringify() を使用します。オブジェクトまたは配列 シリアル化変換を実行します。

4. QS は、

2 つのメソッドを導入します: stringify と parse。

qs.stringify(data)

stringify メソッドは、オブジェクト

を、& 記号を使用して URL 形式の文字列にシリアル化します。継ぎ合わされています。

onst Qs = require('qs');
let obj= {
 method: "query_sql_dataset_data",
 projectId: "85",
 appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
 datasetId: " 12564701"
};
Qs.stringify(obj);
console.log(Qs.stringify(obj));
上記のコードに示すように、出力結果は次のようになります

#
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als

vueのqsの2つの方法とは何ですかqs.parse(data)

parse メソッドは、URL 形式の文字列をオブジェクトに解析します。

例と出力結果は次のとおりです:

import qs from 'qs'

const userStr = 'name=xiaoming&password=123456'
//qs.parse(userStr)
console.log('转换后的格式:',qs.parse(userStr))

// Object{
//          name:'xiaoming',
//          password:'123456'
//        }

5. qs と JSON

qs と JSON の違いがよくわかりません。 !オンラインで注意深く調べて次のようにまとめました。

qs と JSON の違い

#qs同じ点すべてオブジェクトと文字列間の変換に関するものですstringif メソッドデータを通常の JSON 文字列形式に変換しますオブジェクト データ: {名前:'xiaoming'、パスワード:'123123 '}変換されたデータ: 変換されたデータ: 文字列データ: name=xiaoming&password=123123'{"名前":"xiaoming","パスワード":"123123"}'vuejs ビデオ チュートリアル、 Web フロントエンド開発


JSON
類似点と相違点
フロントエンドとバックエンドが対話するとき、オブジェクトは URL 形式のデータにシリアル化され、結合されます。 with &

name=xiaoming&password=123123

オブジェクト データ: {name:'xiaoming',password:'123123'}

'{"name":"xiaoming","password":"123123"}'

parse メソッド

変換されたデータ:

{name:'xiaoming',password:'123123' }

文字列データ:

変換後のデータ :

{名前:'xiaoming'、パスワード:'123123'}

##[関連する推奨事項:
]

以上がvueのqsの2つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。