>웹 프론트엔드 >프런트엔드 Q&A >vue에서 qs의 두 가지 방법은 무엇입니까

vue에서 qs의 두 가지 방법은 무엇입니까

青灯夜游
青灯夜游원래의
2022-12-21 18:19:002653검색

qs의 두 가지 방법은 다음과 같습니다. 1. 개체를 URL 형식의 문자열로 직렬화하고 "&" 기호로 연결하는 데 사용되는 stringify 방법이며 구문은 "qs.stringify( 2. URL 형식의 문자열을 객체로 구문 분석하는 데 사용되는 구문 분석 방법은 "qs.parse(data)"입니다.

vue에서 qs의 두 가지 방법은 무엇입니까

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

1.QS란 무엇인가요?

qs는 보안을 추가하는 쿼리 문자열 구문 분석 및 문자열 직렬화를 위한 라이브러리입니다. 객체와 문자열 간의 변환을 수행할 수 있습니다.

2. qs 설치

qs는 axios에 포함되어 있으며 npm Warehouse에서 관리하는 패키지이기도 합니다.

설치 방법:

npm install qs

Vue 프로젝트의 가져오기 방법:

import qs from 'qs'

Vue 프로젝트의 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는

을 사용하여 문자열화 및 구문 분석이라는 두 가지 방법을 소개합니다.

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'
//        }

5. qs와 JSON의 차이점

qs와 JSON의 차이점을 잘 이해한 적이 없나요? ! 인터넷에서 꼼꼼히 확인해본 결과 다음과 같이 정리했습니다.

qs와 JSONqsJSON동일점 사물 및 문자열 변환유사점과 차이점stringif 메소드프론트엔드와 백엔드와 상호작용할 때 객체를 URL 형식의 데이터로 직렬화하고 & splicingparse method


데이터를 사용하여 일반으로 변환합니다. 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" }'

전환 게시물 데이터:

{이름:'xiaoming',password:'123123'}

[관련 권장 사항:

vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]

위 내용은 vue에서 qs의 두 가지 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.