vue中qs的兩個方法是什麼

青灯夜游
發布: 2022-12-21 18:19:00
原創
2573 人瀏覽過

qs的兩個方法是:1、stringify方法,用於將物件序列化成url形式的字串,以「&」符號進行拼接,語法「qs.stringify(data)」;2、 parse方法,用於將URL形式的字串解析成對象,語法「qs.parse(data)」。

vue中qs的兩個方法是什麼

本教學操作環境:windows7系統、vue3版,DELL G3電腦。

一、qs是什麼?

qs 是一個增加了一些安全性的查詢字串解析和序列化字串的函式庫。可以進行物件與字串之間的一個轉換。

二、qs的安裝

qs,是axios中自帶的,也是npm倉庫所管理的套件。

安裝方式:

npm install qs
登入後複製

Vue專案中的匯入方式:

import qs from 'qs'
登入後複製

Vue專案中的main .js中設定全域屬性的方式:

Vue.prototype.$qs = qs
登入後複製

三、qs應用程式場景

使用axios,呼叫後端介面時所使用的。

請求方式為post,axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded',將物件或陣列的參數使用qs.stringify()進行序列化轉換

四、qs使用

介紹它的兩個方法: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));
登入後複製

如上面程式碼所示,輸出結果如下

vue中qs的兩個方法是什麼

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
uid=cs11&pwd=000000als&username=cs11&password=000000als
登入後複製

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'
//        }
登入後複製

五、qs與JSON的差異

一直不太了解qs與JSON到底有什麼差別? !網路上仔細查了一下,總結如下:

##qsJSON相同點都是進行物件與字串之間的轉換異同點stringif方法前後端互動時,將物件序列化為url形式的數據,用&拼接parse方法
qs與JSON的差異


資料轉換為正常的json字串格式

物件資料:{name:'xiaoming',password:'123123'}

##轉換後資料:

name=xiaoming&password=123123

物件資料:{name:'xiaoming',password:'123123'}

#轉換後資料:

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

字串資料:

name=xiaoming&password=123123

轉換後資料:

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

字串資料:

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

轉換後數據:

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

【相關推薦:

vuejs影片教學web前端開發#

以上是vue中qs的兩個方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!