前端字符串转数组对象实现方式-开发bug总结6
问题描述:
后台管理系统,这次投产完线上出现了个问题!element-ui组件下拉选项框打开全部都是无数据,而且控制台报错,但是新添加的数据是正常显示的。对比了原因之后发现,新的数据前端传给后端的格式:"[{name:1}, {name:2}]",是这样的字符串,所以后端再传回来的时候,是有对应的key 和 value值的,只需将字符串处理成数组即可。
但是老的数据,后端返回给我的是这样的:"1, 2" ,这样的格式给我,那页面肯定显示不出来呀,而且也就报错。
本来就是后端的问题,但是他说不好改,于是只能前端来处理传递的入参格式了,下面分享下处理方法!
解决方法:
1)入参格式转化 "[{name:1}, {name:2}]" 转成 "1,2"这种形式传给后端
let dialogFormObj = {}
let arr = []
if (this.options && this.options.length !==0) {
this.options.map(v => {
// 此处判断下拉选是否有值,有再push进数组
if (v.name !== ' ') {
arr.push(v.name)
}
})
dialogFormObj = JSON.parse(JSON.stringify(this.dialogForm))
// 此处判断数组是否是空数组,如果是空数组就不传options这个字段,因为我的项目中还有其他类型的输入框,如果传了空的,在JSON解析的时候会报错
if (arr.length !== 0) {
dialogFormObj.options = arr.join(',')
}
}
addTemplate(dialogFormObj).then(res => {
})
2) 接口返回的出参格式转化 "1,2" 后前端再转成 [{name:1}, {name:2}]类型,进行渲染
let obj = {id: this.id}
getInfo(obj).then(res => {
let optionsArr = []
res.data.forEach(i => {
if (i.options) {
// 字符串分割成数组
i.options = i.options.split(',')
// 下一次添加前先清空之前的
optionsArr = []
// 此处遍历数组,为每一个属性添加key值,转成数组对象形式。当然这种方式仅针对key相同的,如果每一个key都不同,要采取另外的办法了
i.options.forEach(v => {
const obj = {}
obj.name = v
optionsArr.push(obj)
})
i.options = optionsArr
}
})
})
相关文章:
前端字符串转数组对象实现方式-开发bug总结6
问题描述: 后台管理系统,这次投产完线上出现了个问题!element-ui组件下拉选项框打开全部都是无数据,而且控制台报错,但是新添加的数据是正常显示的。对比了原因之后发现,新的数据前端传给后端的格式&#…...
99 颜色分类
颜色分类 题解1 双指针题解2 单指针 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在…...
计算机视觉与深度学习 | 基于GPS/BDS多星座加权图因子优化的行人智能手机导航
===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 基于GPS/BDS多星座加权图因子优化的行人智能手机导航 1、引言2、相关工…...
低代码平台,业务开发的“银弹”
目录 一、为什么需要低代码平台 二、低代码平台的搭建能力 三、低代码其他能力 四、写在最后 随着互联网和信息技术的快速发展,各行各业都在积极拥抱数字化转型。在这个过程中,软件开发成为企业实现数字化转型的关键环节。然而,传统的软件开发…...
补偿 FIR 滤波器引入的延迟
补偿 FIR 滤波器引入的延迟 对信号进行滤波会引入延迟。这意味着相对于输入,输出信号在时间上有所偏移。此示例向您说明如何抵消这种影响。 有限冲激响应滤波器经常将所有频率分量延迟相同的时间量。这样,我们就很容易通过对信号进行时移处理来针对延迟…...
图数据库Neo4j详解
文章目录 第一章 图和Neo4j1.1 图数据库概念1.1.1 图论起源1.1.2 节点-关系及图1.1.3 图数据库1.1.4 图数据库分类1.1.4 图数据库应用场景1.1.5 与关系型数据库对比1.1.6 图数据库优势 1.2 Neo4j介绍1.2.1 Neo4j是什么1.2.2 Neo4j特点1.2.3 Neo4j的优势1.2.4 Neo4j的限制1.2.5 …...
系列一、Shiro概述
一、概述 Shiro是一款主流的Java安全框架,不依赖任何容器,可以运行在JavaSE 和 JavaEE项目中,它的主要作用是对访问系统的用户进行身份认证、授权、会话管理、加密等操作。 一句话:Shiro是一个用来解决安全管理的系统框架&#x…...
SpringCloudAlibaba——Sentinel
Sentinel也就是我们之前的Hystrix,而且比Hystrix功能更加的强大。Sentinel是分布式系统的流量防卫兵,以流量为切入点,从流量控制、流量路由、熔断降级等多个维度保护服务的稳定性。 Sentinel采用的是懒加载,这个接口被访问一次&a…...
Java编写简易rabbitmq生产者与消费者
一、前言 开发时经常与其它系统用rabbitmq对接,当需要自测时,还是自己写rabbitmq生产者、消费者自测方便些。 下面总结下不用框架、使用java编写简易rabbitmq的方法。 二、代码 1.导入jar包 (1)如果是maven,那就用 <dependency>&…...
3.0.3版vsftpd所支持的FTP命令
2023年11月9日,周四下午 ABOR:中止当前的数据连接。ACCT:提供用户帐户信息,通常用于特定的站点访问控制。ALLO:为服务器上的文件分配存储空间。APPE:将数据添加到现有的远程文件中。CDUP:将当前…...
OTA包添加自定义内容
起因 新开一条线,需要上传的OTA包里加点内容,好让后台校验它是否是当前这条线(短期最小改动)。 开整 之前看过ota包结构,整包和差分包里都有一个payload_properties.txt文件,所以最简单的就是给这个txt文件里追加点自定义内容&…...
Luatos Air700 改变BL0942串口波特率
LuatOs 改变模块串口波特率思路参照 luatos 改变AIR530串口波特率 BL0942默认串口波特率可以通过SCLK_BPS引脚接3.3V电源设置到9600bps 但如果调整到38400bps需要修改0x19寄存器 bl0942 v1.06版的特殊寄存器说明,注意早期版本特殊寄存器说明存在错误 完整代码 mai…...
不可忽视的国外服务器地址IP选择指南
在如今互联网高速发展的时代,海外服务器扮演着重要的角色。选择合适的国外服务器IP地址却是一项复杂而又关键的任务。本文将为您介绍一些不可忽视的国外服务器地址IP选择指南。 私有IP地址: 私有IP地址是指在局域网内使用的IP地址,用于…...
C语言 预处理详解
目录 1.预定义符号 2.#define 2.1#define 定义标识符 2.2#define 定义宏 2.3#define 替换规则 2.4#和## 2.4.1# 的作用 2.4.2## 的作用 2.5 带有副作用的宏参数 2.6宏和函数的对比 对比 **2.7内联函数 2.8命名约定 3.#undef **4.命令行定义 5.条件编译 常…...
c++ async 使用详解,创建异步任务的多种方法
c async 使用详解 std::async 头文件 #include <future>。 函数原型: template<class Function, class... Args> std::future<std::invoke_result_t<std::decay_t<Function>,std::decay_t<Args>...>>async(std::launch polic…...
万物皆数——用matlab求解二阶微分方程
一、背景 毕达哥拉斯的“万物皆数”哲学观点表达了一个理念,即宇宙万物都可以通过数学语言来描述,数是万物的本原。 勾股定理就是毕达哥拉斯提出,因此在西方勾股定理也被叫做毕达哥拉斯定理。 工科类的专业,越到后面越感觉到数学…...
jmeter接口自动化部署jenkins教程
首先,保证本地安装并部署了jenkins,jmeter,xslproc 我搭建的自动化测试框架是jmeterjenkinsxslproc ---注意:原理是,jmeter自生成的报告jtl文件,通过xslproc工具,再结合jmeter自带的模板修改&…...
前端js实现将数组对象组装成自己需要的属性,或者去掉对象中不必要的属性
前言 提示:这里可以添加本文要记录的大概内容: 需求:前端js实现将数组对象组装成自己需要的属性,或者前端js实现去掉对象中不必要的属性 提示:以下是本篇文章正文内容,下面案例可供参考 一、示例数组对象…...
MeterSphere 任意文件读取漏洞(CVE-2023-25814)
MeterSphere 任意文件读取漏洞(CVE-2023-25814) 免责声明漏洞描述漏洞影响漏洞危害网络测绘Fofa: title"MeterSphere" 漏洞复现1. 构造poc2. 发送数据包3. 查看文件 免责声明 仅用于技术交流,目的是向相关安全人员展示漏洞利用方式,以便更好地…...
设计模式-01-单例设计模式
经典的设计模式有23种,但是常用的设计模式一般情况下不会到一半,我们就针对一些常用的设计模式进行一些详细的讲解和分析,方便大家更加容易理解和使用设计模式。 1-为什么要使用单例 单例设计模式(Singleton Design Pattern&…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
