首页 > 其他分享 >Vue中qs的使用

Vue中qs的使用

时间:2023-09-22 11:56:22浏览次数:38  
标签:xiaoming Vue name stringify qs parse 使用

1、qs是什么

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。

2、qs安装

qs,是axios中自带的,也是npm仓库所管理的包。

安装方式:

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使用

介绍它的两个方法:stringify和parse。

4.1 qs.stringif(data)

stringify方法,是将对象序列化成url形式的字符串,以&符号进行拼接。

示例及输出效果如下:

const userObj = {name:'xiaoming',password:'123123'}
qs.stringify(userObj)
console.log('转换后的格式:',qs.stringify(userObj)


// 转换后的格式:name=xiaoming&password=123123

4.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的区别

 

标签:xiaoming,Vue,name,stringify,qs,parse,使用
From: https://www.cnblogs.com/xinlightchaser/p/17721983.html

相关文章

  • Nextcloud使用OCC命令重置密码
    Nextcloud使用OCC命令重置密码  一般来说,可以使用管理员账户来修改密码如果出现了忘记了管理员密码这种糟糕的情况,就只能通过OCC命令或修改数据库的方式来解决了。本文介绍较为方便的使用OCC命令重置密码方式。OCC命令的用法occ命令是ownCloud/Nextcloud的命令行界面......
  • (MongoDB)windows 下使用 MongoDB
    1.安装MongoDBServer 访问 https://www.mongodb.com/try/download/community,找到“MongoDBCommunityServerDownload”并下载  2.安装MongoDB  安装MongoDBServer,并安装随带的MongoDBCompass 安装完成后,MongoDBServer将即时启动(需要重启), 查看......
  • 如何使用Jest生成中文测试报告
    前言Jest是一个非常流行的JavaScript测试框架,它提供了丰富的功能和易于理解的测试报告。然而,默认情况下,Jest生成的测试报告是以英文展示的。如果需要生成中文测试报告,我们需要对Jest进行一些配置。以下是一种方法,可以在Jest中生成中文测试报告:安装相关依赖首先,确保已经安装了No......
  • String.format()的使用
    java.lang.String包下自带的格式化静态方法1.简单示例Stringa=String.format("你好!%s","小扬子");System.out.println(a);输出结果:Hello小扬子%s为占位符标识,s对应字符串类型参数2.对字符串进行格式化Stringa="hello";Stringb="hi";Stringstr=Stri......
  • 中国核动力研究设计院使用 DolphinDB 替换 MySQL 实时监控仪表
    随着仪表测点的大幅增多和采样频率的增加,中国核动力研究设计院仪控团队原本基于MySQL搭建的旧系统已经无法满足大量数据并发写入、实时查询和聚合计算的需求。他们在研究DB-Engines时序数据库榜单时了解到国内排名第一的DolphinDB。经过测试,发现其非常符合业务需求,并且在2022......
  • VUE中的data(){return}与data:{}区别
    组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。data:{}data:{msg:0}使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。data(){return}data(){......
  • vue3 父子组件通信 setup
    父传子father<template><div><h2>父传子Father</h2><!--<buttonclass="bg-green-300roundedp-1">父按钮</button>--><divclass="w-[200px]h-[200px]bg-violet-200">......
  • js 中 " + " 的使用
    //加法计算consta1=2+2//4letm1=5,m2='5'letn1=11,n2='11'letk1=70,k2='70'm1++//6(等价于m1=m1+1)m1++//6n1+=1//12(等价于n1=n1+1)n2+=1......
  • react native 使用 KeyboardAvoidingView 无效
    组件介绍:该组件将根据键盘高度自动调整其高度、位置或底部填充,以在显示虚拟键盘时保持可见。官方文档:KeyboardAvoidingView文档地址遇到的问题:KeyboardAvoidingView标签要设置behavior={Platform.OS==="ios"?"padding":"height"},iOS系统要使用padding否则样式可能......
  • Ubuntu 23.10/24.04 LTS 放弃默认使用 snap 版 CUPS 打印堆栈
    导读Canonical的开发者、OpenPrinting的项目负责人TillKamppeter今年5月表示,计划在Ubuntu23.10(ManticMinotaur)上默认使用Snap版本的CUPS打印堆栈。不过经过数月的测试,官方放弃了这项决定。Ubuntu23.10(ManticMinotaur)和Ubuntu24.04LTS发行版默认还是......