qs.stringify 使用arrayFormat属性 + allowDots的数据处理 - 附示例

news2025/1/21 18:50:56

qs:将url中的参数转为对象;将对象转为url参数形式

一、介绍

 1、官方文档:

https://github.com/ljharb/qs

https://github.com/ljharb/qsicon-default.png?t=N7T8https://github.com/ljharb/qs

 二、准备工作

1、安装依赖包

npm install qs --save

 2、示例版本 

"qs": "^6.11.0",

三、使用步骤

1、在单页面引入 ' echarts '

import qs from 'qs';

2、使用 - 这里是在数据请求处理时使用的

qs.stringify(params, { arrayFormat: 'indices', allowDots: true });

四、arrayFormat

1、参数格式

    sorts: [

      {

        name: 'sortOrder',

        order: 'asc',

      },

    ],

2、属性

arrayFormat四个属性分别为 indices、brackets、repeat、comma,默认值indices

3、示例 - 这里的请求结果是以我需要的数据格式举例的,大家可根据自己的实际情况选择(根据后端需要的数据格式)

     

代码为qs.stringify(params, { arrayFormat: 'indices'});

1、indices  

2、repeat  

3、brackets

4、comma

代码为qs.stringify(params, { arrayFormat: 'indices', allowDots: true });

1、brackets 去除下标

2、indices [下标].属性

3、repeat .属性

4、comma 对象数组化

tip

1、根据后端格式选择不同arrayFormat属性

拓展

qs-日常实用篇 - 简书

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1347686.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java循环高级(无限循环,break,continue,Random,逢七过,平方根,判断是否是质数,猜数字小游戏)

文章目录 1.无限循环概念:for格式:while格式:do...while格式:无限循环的注意事项: 2.条件控制语句break:continue: 3. Random使用步骤: 4. 逢七过5. 平方根6.判断是否为质数7. 猜数字小游戏 1.无限循环 概…

【开源项目】智慧交通~超经典开源项目实景三维数字孪生高速

数字孪生高速运营管理平台,以提升高速公路管理水平和方便出行为主要目标,充分利用云计算、AI、大数据等,实现对高速公路控制、指挥、运营的智能化。飞渡科技以实景三维数据为基础,基于大数据、高分遥感、数据分析以及数据融合等前…

QGIS003:【08选择工具栏】-按范围选择、按属性选择、按位置选择

摘要:QGIS工程工具栏包括按范围选择、按属性选择、按位置选择、取消选择等选项,本文介绍各选项的基本操作。 实验数据: 链接:https://pan.baidu.com/s/15GfuR15CxA2OQzURjmjwaQ?pwd=u8sf 提取码:u8sf 一、按范围选择 有矩形框选、多边形选择、手绘选择以及按半径扩展…

T 检验和 Z 检验之间的区别

在统计学领域,假设检验在从数据中得出有意义的结论方面发挥着至关重要的作用。两种常用的统计检验是 T 检验和 Z 检验。虽然这两种检验都用于评估假设,但它们的应用和假设有所不同。 t 检验和 z 检验都假设数据呈正态分布(或近似正态分布&…

R_handbook_作图专题

ggplot基本作图 1 条形图 library(ggplot2) ggplot(biopics) geom_histogram(aes(x year_release),binwidth1,fill"gray") 2 堆砌柱状图 ggplot(biopics, aes(xyear_release)) geom_bar(aes(fillsubject_sex)) 3 堆砌比例柱状图 ggplot(biopics, aes(xyear_rele…

echarts常见的一些大屏示意图及配置项【好看】

双立体柱状图 示意图: 配置: initData() {let sideData [220, 182, 191, 234, 290, 330]let sideData1 [100, 110, 120, 134, 190, 230]let nameList [结算能力数, 结算金额]let yAxisData [(金额/亿元), (能力数/个)]let xData [1, 2, 3, 4, 5…

三角函数两角和差公式推导

一.几何推理 1.两角和公式 做一斜边为1的直角△ABC,任意旋转非 k Π , k N kΠ,kN kΠ,kN,补充如图,令 ∠ A B C ∠ α , ∠ C B F ∠ β ∠ABC∠α,∠CBF∠β ∠ABC∠α,∠CBF∠β ∴ ∠ D B F ∠ D B A ∠ α ∠ β 90 , ∠ D A …

vue3-13

token可以是后端api的访问依据,一般绝大多数时候,前端要访问后端的api,后端都要求前端请求需要携带一个有效的token,这个token用于用户的身份校验,通过了校验,后端才会向前端返回数据,进行相应的操作,如果没…

自动驾驶学习笔记(二十四)——车辆控制开发

#Apollo开发者# 学习课程的传送门如下,当您也准备学习自动驾驶时,可以和我一同前往: 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo开放平台9.0专项技术公开课》免费报名—>传送门 文章目录 前言 控制算法 控制标定 控制协议…

【漏洞复现】企望制造ERP系统 RCE漏洞

漏洞描述 企望制造ERP系统是畅捷通公司开发的一款领先的生产管理系统,它以集成化管理为核心设计理念,通过模块化机制,帮助企业实现生产、采购、库存等方面的高效管理。该系统存在RCE远程命令执行漏洞,恶意攻击者可利用此漏洞进行…

【解决复杂链式任务打造全能助手】大模型思维链 CoT 应用:langchain 大模型 结合 做 AutoGPT

大模型思维链 CoT 应用:langchain 大模型 结合 做 AutoGPT,解决复杂链式任务打造全能助手 思维链 CoTlangchainlangchain 大模型结合打造 AutoGPT 思维链 CoT 最初的语言模型都是基于经验的,只能根据词汇之间的相关性输出答案,根…

Android 接入第三方数数科技平台

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、数数科技平台是什么?二、使用步骤1.集成SDK2. 初始化3. 发送事件和设置账号id4. 验证发送事件是否成功 小结 前言 一个成熟的App必然不可缺少对…

FingerprintService启动-Android13

FingerprintService启动-Android13 1、指纹服务启动1.1 rc启动Binder对接指纹厂商TA库1.2 FingerprintService启动1.2.1 SystemServer启动FingerprintService1.2.2 注册Binder服务fingerprint 2、获取底层信息2.1 AIDL 对接TA中获取2.2 指纹类型判断 android13-release 1、指纹…

有限差分场的数值计算:代数、求导、积分

文章目录 前言一、代数运算1.手动计算流程2.ubermag库函数验证 二、求导运算1.手动计算流程2.ubermag库函数验证3.标量场的梯度,矢量场的散度和旋度 三、积分运算1.手动计算流程2.ubermag库函数验证 总结 靡不有初,鲜克有终。——《诗经大雅荡》 前言 …

fastApi 项目部署

方式一,Uvicorn部署 Run a Server Manually - Uvicorn - FastAPI 1,linux服务器安装 python>3.8 2,安装 uvicorn : pip install "uvicorn[standard]" 3,上传项目到服务器 main.py from typing imp…

机场信息集成系统系列介绍(6):机场协同决策支持系统ACDM*续集

目录 1、A-CDM实施效果评估背景 2、评估核心指标项 (1)机位效率 (2)登机效率 (3)推出效率 (4)滑行效率 (5)协同效率 3、其他指标项 (1&a…

使用 Hyper-V 创建虚拟机

使用 Hyper-V 创建虚拟机 官网教程修改存储目录Hyper-V管理器创建虚拟机启动虚拟机Win10安装教程Press any key to boot from CD or DVD...... 如何使用Windows自带的虚拟机工具来创建虚拟机, 快速创建虚拟机进行学习探讨,如果有环境问题可以立即创建一个…

Vue-Setup

一、setup概述 小小提示&#xff1a;vue3中可以写多个根标签。 Person.vue中内容 <template><div class"person"><h2>姓名&#xff1a;{{name}}</h2><h2>年龄&#xff1a;{{age}}</h2><!--定义了一个事件&#xff0c;点击这…

【Image】超硬核数学推导——WGAN的先“破”后“立”

GAN的实现 上一篇文章中我们说到了GAN的数学解释 min ⁡ G max ⁡ D V ( D , G ) E x ∼ p data ( x ) [ log ⁡ D ( x ) ] E z ∼ p z ( z ) [ log ⁡ ( 1 − D ( G ( z ) ) ) ] − log ⁡ 4 2 J S D ( p data ∥ p g ) ≥ − log ⁡ 4 , where [ p d a t a p g ] \mi…

node相关的args属性与<param>子标签的区别

launch文件内&#xff1a;node标签内的<param>标签示例&#xff1a; 可以看到launch文件内的<param>标签在命令行内会转化为--ros-args -p 这样格式的命令&#xff0c;说明<param>标签指定的是ros2内的参数。不能用于传递非ros2的传入参数 如果要传入非ros2…