【异常解决】Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案
博主介绍:✌全网粉丝22W+,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌
技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。
感兴趣的可以先关注收藏起来,在工作中、生活上等遇到相关问题都可以给我留言咨询,希望帮助更多的人。
Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案
- 一、背景描述
- 二、问题原因
- 三、解决方案
- 3.1 方案1:使用有序集合代替 Map(推荐)
- 3.2 方案2:使用自定义对象包装
- 3.3 方案3:确保使用正确的 Map 实现类
- 3.4 方案4:前端处理方案
- 四、最佳实践建议
- 五、拓展:为什么LinkedHashMap有时也不起作用?
一、背景描述
返回给页面的VO中有一个List和一个Map,两个属性,而且都需要排序后返回,现象是List排序结果在页面中显示正常,而Map排序结果在页面中显示跟在服务器中排序后的不同。这就奇了怪了,明明是处理好排序后才返回给页面的,但是页面接收后就顺序不一致了。
二、问题原因
- Map 的实现类问题:即使你使用了
LinkedHashMap
保持顺序,在 JSON 序列化过程中可能会丢失顺序 - JSON 规范:标准的 JSON 对象本身是无序的键值对集合
- 前端处理:JavaScript 的
JSON.parse()
默认不保证对象属性的顺序
三、解决方案
3.1 方案1:使用有序集合代替 Map(推荐)
@GetMapping("/sorted-data")
public ResponseEntity<List<Map.Entry<String, Object>>> getSortedData() {Map<String, Object> data = new LinkedHashMap<>();// 添加数据并排序data.put("A", 1);data.put("B", 2);data.put("C", 3);// 转换为保持顺序的Entry列表List<Map.Entry<String, Object>> sortedList = new ArrayList<>(data.entrySet());return ResponseEntity.ok(sortedList);
}
前端将收到类似这样的结构:
[{"key": "A", "value": 1},{"key": "B", "value": 2},{"key": "C", "value": 3}
]
3.2 方案2:使用自定义对象包装
@Data // Lombok 注解
public class KeyValuePair {private String key;private Object value;// 构造方法
}@GetMapping("/sorted-data")
public ResponseEntity<List<KeyValuePair>> getSortedData() {Map<String, Object> data = new LinkedHashMap<>();// 添加数据data.put("A", 1);data.put("B", 2);data.put("C", 3);// 转换为KeyValuePair列表List<KeyValuePair> result = data.entrySet().stream().map(e -> new KeyValuePair(e.getKey(), e.getValue())).collect(Collectors.toList());return ResponseEntity.ok(result);
}
3.3 方案3:确保使用正确的 Map 实现类
@GetMapping("/sorted-data")
public ResponseEntity<Map<String, Object>> getSortedData() {// 使用LinkedHashMap保持插入顺序Map<String, Object> data = new LinkedHashMap<>();// 添加数据(已排序)data.put("A", 1);data.put("B", 2);data.put("C", 3);// 配置Jackson保留Map顺序ObjectMapper mapper = new ObjectMapper();mapper.enable(SerializationFeature.INDENT_OUTPUT);mapper.configure(MapperFeature.SORT_PROPERTIES_ALPHABETICALLY, false);return ResponseEntity.ok(data);
}
3.4 方案4:前端处理方案
如果必须返回 Map,可以在前端处理:
// 假设后端返回的是保持顺序的LinkedHashMap序列化的JSON
fetch('/api/sorted-data').then(response => response.json()).then(data => {// 转换为数组保持顺序const sortedArray = Object.entries(data);console.log(sortedArray); // 这会保持顺序});
四、最佳实践建议
- 推荐使用方案1或方案2:返回
List<Entry>
或List<自定义对象>
是最可靠的方式 - 避免依赖JSON对象的属性顺序:这是不符合JSON规范的
- 如果需要严格顺序:可以在数据结构中包含顺序字段
@Data
public class OrderedItem {private int order;private String key;private Object value;// 构造方法
}@GetMapping("/sorted-data")
public ResponseEntity<List<OrderedItem>> getSortedData() {// 实现...
}
五、拓展:为什么LinkedHashMap有时也不起作用?
即使在Java端使用了LinkedHashMap
,以下情况仍可能导致顺序丢失:
- 某些JSON库可能不保留Map顺序
- 前端JavaScript引擎对对象属性的处理
- 中间件(如网关、代理)可能重新序列化JSON
因此,使用有序的列表结构是最可靠的跨平台解决方案。
好了,今天分享到这里。希望你喜欢这次的探索之旅!不要忘记 “点赞” 和 “关注” 哦,我们下次见!🎈
本文完结!
祝各位大佬和小伙伴身体健康,万事如意,发财暴富,扫下方二维码与我一起交流!!!
相关文章:
【异常解决】Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案
博主介绍:✌全网粉丝22W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
中兴云电脑W102D_晶晨S905X2_216G_mt7661无线_安卓9.0_线刷固件包 准备工作: 工具和设备在开始刷机之前,确保你已经准备好以下物品:双公头USB线:选择一根30-50厘米长的USB线,长度适中,方便操作,…...
深度学习激活函数与损失函数全解析:从Sigmoid到交叉熵的数学原理与实践应用
目录 前言一、sigmoid 及导数求导二、tanh 三、ReLU 四、Leaky Relu五、 Prelu六、Softmax七、ELU八、极大似然估计与交叉熵损失函数8.1 极大似然估计与交叉熵损失函数算法理论8.1.1 伯努利分布8.1.2 二项分布8.1.3 极大似然估计总结 前言 书接上文 PaddlePaddle线性回归详解…...
Kotlin中实现静态
实现“类似静态” class Util {fun action1() {}//使用companion object关键字会在类的内部创建一个伴生类,每个类都允许有一个伴生类//而action2作为伴生类中的方法,可以直接通过类名进行调用,实现类似“静态”的效果companion object {fun…...
Android 回显
//执行 private void playRunTime(String cmd) throws Exception { Process p Runtime.getRuntime().exec(cmd); InputStream is p.getInputStream(); BufferedReader reader new BufferedReader(new InputStreamReader(is)); String l…...
基于大模型的胃食管反流病全周期预测与诊疗方案研究
目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、胃食管反流病概述 2.1 疾病定义与分类 2.2 流行病学特征 2.3 发病机制 三、大模型技术原理与应用基础 3.1 大模型简介 3.2 适用于胃食管反流病预测的大模型类型 3.3 数据收集与预处理 四、大模型在胃食…...
class文件(二)
字段表集合: 用于描述接口或类中声明的变量 包括类级变量以及实例级变量,不包括方法内部声明的局部变量 字段的修饰符包括: 作用域:public、private、protected修饰符 实例还是类变量:static 可变性:fin…...
Django 实现电影推荐系统:从搭建到功能完善(附源码)
前言:本文将详细介绍如何使用 Django 构建一个电影推荐系统,涵盖项目的搭建、数据库设计、视图函数编写、模板渲染以及用户认证等多个方面。🔗软件安装、环境准备 ❤ 【作者主页—📚阅读更多优质文章、获取更多优质源码】 目录 一…...
UML2.0中的14种图简介,并借助AI生成UML图
UML2.0中的14种图简介,并借助AI生成UML图 绘制流程结构图(Structure Diagrams)1. 类图(Class Diagram):2. 对象图(Object Diagram):3. 组件图(Component Diag…...
Jsoup、Selenium 和 Playwright 的含义、作用和区别
文章目录 一、Jsoup1. 含义2. 作用3. 核心特性4. 适用场景 二、Selenium1. 含义2. 作用3. 核心特性4. 适用场景 三、Playwright1. 含义2. 作用3. 核心特性4. 适用场景 四、Jsoup、Selenium 和 Playwright 的区别五、适用场景对比六、总结 Jsoup、Selenium 和 Playwright 都是用…...
服务器如何修复SSL证书错误?
修复服务器上的SSL证书错误需要根据具体错误类型逐步排查和解决。以下是常见的步骤和解决方案: --- ### **1. 确认错误类型** 首先检查浏览器或工具(如OpenSSL)报错的具体信息,常见错误包括: - **证书过期**…...
AD9253链路训练
传统方式 参考Xilinx官方文档xapp524。对于AD9253器件 - 125M采样率 - DDR模式,ADC器件的DCO采样时钟(500M Hz)和FCO帧时钟是中心对齐的,适合直接采样。但是DCO时钟不能直接被FPGA内部逻辑使用,需要经过BUFIO和BUFR缓冲后,得到s_b…...
VAE-LSTM异常检测模型复刻报告
VAE-LSTM异常检测模型复刻报告 复刻背景 本报告记录了我复刻VAE-LSTM异常检测模型的完整过程。原论文提出了一种结合变分自编码器(VAE)和长短期记忆网络(LSTM)的异常检测方法,用于时间序列数据。 环境配置 复刻过程中使用的环境配置如下: Python 3.…...
有哪些信誉良好的脂多糖供应商推荐?
一般描述 Sigma-Aldrich的脂多糖 (LPS) 是糖脂,由连接单个或多个脂肪酸的碳水化合物单元组合而成,存在于革兰氏阴性菌细胞壁中。LPS是外膜的重要组成部分,结构由脂质A、葡萄糖胺基磷脂、短核寡糖和O-抗原(远端多糖)组…...
初识分布式事务原理
事务是指符合ACID特性的操作就是事务,在同一个数据库中,如果要分别对表A和表B进行插入和删除操作,如果其中一个操作执行失败,可以对当前数据库进行回滚,使其回滚到执行操作前的状态,但是现有的系统架构都是…...
文件上传过程中出现EOFException的解决方案
文件上传过程中出现EOFException的解决方案 项目场景: 项目是一个考试测评系统,包含学生答题截图上传功能。学生通过前端界面提交答题截图,后端服务接收并处理这些图片文件,存储到MinIO对象存储中。 问题描述 前端调用’提交答…...
智能文档解析系统架构师角色定义
(根据专业写作类任务要求,以系统架构师角色定义范式进行结构化呈现) 智能文档解析系统架构师角色定义 核心技能模块 1. 多模态语义解析引擎 支持中英双语对齐的异构数据解码遵循ISO/IEC 30140标准的JSON语法校验体系 ├─ 智能字段补全机…...
翻倍缠论系统+拐点多空雷达,组合指标的使用操盘技术
如上图,单独从副图指标信号来说,在标记①的位置,开始出现副图指标【拐点多空雷达】转多的买点,红柱开始出现就是跟进做多的第一买点。 在标记②的位置,副图指标出现红柱持续,而黑色的柱线开始出现…...
Linux脏页相关参数
参数 以下是Linux内核中与脏页(Dirty Page)相关的各个参数及其含义的详细说明: 1. vm.dirty_background_bytes 含义:系统内存中脏页数量的绝对字节阈值(单位为字节),当脏页达到此值时&#x…...
C++20 module下的LVGL模拟器
ARM GCC:14.2 Toolchain:MSVC 前篇:使用SDL2搭建简易LVGL模拟器_lvgl sdl-CSDN博客 故事 从前 我所用的单片机工程本身是为了电赛设计的,由于电赛的特性,需要使用同一个实验平台通过不同外设的“排列组合”来实现不…...
Go全栈_Golang、Gin实战、Gorm实战、Go_Socket、Redis、Elasticsearch、微服务、K8s、RabbitMQ全家桶
Go全栈全家桶包含: 1、【零基础入门】Go语言核心编程零基础入门实战,B站学习地址分享: 【2025年新版】Go语言教程 2、GolangGinGorm仿小米商城企业级项目实战 3、Golang仿小米商城高并发微服务实战 4、Golang RabbitMQ高并发秒杀、抢购、预约…...
STM32提高篇: 蓝牙通讯
STM32提高篇: 蓝牙通讯 一.蓝牙通讯介绍1.蓝牙技术类型 二.蓝牙协议栈1.蓝牙芯片架构2.BLE低功耗蓝牙协议栈框架 三.ESP32-C3中的蓝牙功能1.广播2.扫描3.通讯 四.发送和接收 一.蓝牙通讯介绍 蓝牙,是一种利用低功率无线电,支持设备短距离通信的无线电技…...
Linux系统编程---精灵进程与守护进程
1、前言 精灵进程又称守护进程、后台进程,在英文中称为 daemon 进程。精灵进程是运行在一个相对干净的环境、不受终端影响、常驻内存的进程,和神话中的精灵一样,拥有不死不灭的特性,长期稳定提供某种功能或服务。 在Linux系统中&a…...
《让机器人读懂你的心:情感分析技术融合奥秘》
机器人早已不再局限于执行简单机械的任务,人们期望它们能像人类伙伴一样,理解我们的喜怒哀乐,实现更自然、温暖的互动。情感分析技术,正是赋予机器人这种“理解人类情绪”能力的关键钥匙,它的融入将彻底革新机器人与人…...
科技项目必须进行验收测试吗?项目验收测试服务机构有哪些?
在现代科技迅猛发展的背景下,各类科技项目层出不穷,从智能硬件到软件系统,乃至工业自动化解决方案,项目的质量直接关系到企业的信誉、用户体验和市场竞争力。那么科技项目必须进行验收测试吗? 简短且明确的回答是:必…...
7.7 Axios+Redux+JWT全链路实战:打通前后端API通信最佳实践
Axios+Redux+JWT全链路实战:打通前后端API通信最佳实践 连接前端与后端 API:全链路数据交互设计指南 关键词:前后端通信架构设计、RESTful API 开发、Axios 请求拦截、Redux 状态管理、JWT 认证集成 1. 前后端通信架构设计原则 我们采用分层架构实现前后端解耦,通过 RES…...
零基础入门 Verilog VHDL:在线仿真与 FPGA 实战全流程指南
摘要 本文面向零基础读者,全面详解 Verilog 与 VHDL 两大主流硬件描述语言(HDL)的核心概念、典型用法及开发流程。文章在浅显易懂的语言下,配合多组可在线验证的示例代码、PlantUML 电路结构图,让你在 EDA Playground 上动手体验数字电路设计与仿真,并深入了解从 HDL 编写…...
[蓝桥杯 2025 省 Python B] 最多次数
import sysdef max_times() -> int:s sys.stdin.readline().strip()checked {l,q,b} # set(),不存在键值对,识别为set()n len(s)time 0i 0while i < n - 2:sec s[i:i3]if set(sec) checked:i 3time 1else:i 1sys.…...
HTTP相关
目录 一、HTTP状态码 1XX信息性状态码 2XX成功状态码 3XX重定向状态码 4XX客户端错误状态码 5XX服务器错误状态码 二、GET/POST/PUT/DELETE请求 2.1GET 2.2POST 2.3PUT 2.4DELETE 2.5RESTful API例子 三、RESTful API 3.1什么是RESTful API 3.2RESTful API中的关…...
使用rclone迁移minio文件
文章目录 一、rclone简介1、工具说明2、核心特点2.1、跨平台支持2.2、多存储支持2.3、加密与安全2.4、增量同步与断点续传2.5、高性能 3、适用场景3.1、云存储迁移3.2、备份与同步3.3、跨云协作3.4、数据加密归档 二、常用命令1、基础操作2、文件传输3、文件管理4、高级功能5、…...
基于Java与MAVLink协议的多无人机(Cube飞控)集群控制与调度方案问题
基于Java与MAVLink协议的多无人机(Cube飞控)集群控制与调度方案问题 背景需求: 我们目前有一个基于Cube飞控的无人机系统,需实现以下核心功能: 多机通信:通过MAVLink协议同时连接并控制多架无人机&#x…...
Super-Vlan和MUX-Vlan的原理、配置、区别
Super-Vlan 原理 Super-Vlan也叫Aggregate-Vlan。 一般的三层交换机中,通常是采用一个VLAN对应一个vlanif接口的方式实现广播域之间的互通,这在某些情况下导致了IP地址的浪费。因为一个VLAN对应的子网中,子网号、子网定向广播地址、子网缺…...
数据一致性问题剖析与实践(二)——单机事务的一致性问题
一、前言 我们一般讲到单机事务,离不开的就是数据库,其最重要的定义就是,要么全部成功执行,要么全部不执行,保证安全的状态转化。 之前我们讨论了几种场景的一致性问题 冗余数据存储中的一致性问题分布式共识中的一…...
VUE Element-ui Message 消息提示组件自定义封装
为了让message 信息提示的更加方便快捷,减少不同地方的调用,避免代码的重复,特意再官方message 组件的基础上二次封装,使代码更加的优雅和高效。 实现效果: 代码组件: 封装成 message.js 文件,…...
HSTL详解
一、HSTL的基本定义 HSTL(High-Speed Transceiver Logic) 是一种针对高速数字电路设计的差分信号接口标准,主要用于高带宽、低功耗场景(如FPGA、ASIC、高速存储器接口)。其核心特性包括: 差分信号传输&…...
【PCB工艺】运放电路中的负反馈机制
通过运算方法器电路设计详细解释负反馈机制(Negative Feedback) 负反馈 是控制系统、电子电路、神经系统等多个领域中非常核心的概念。特别在运算放大器(Op-Amp)电路中,负反馈是实现精确控制和高稳定性的关键机制。 …...
玩转Docker | 使用Docker部署Neko自托管浏览器
玩转Docker | 使用Docker部署Neko自托管浏览器 前言一、Neko介绍简介主要特点二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署Neko服务下载镜像创建容器创建容器检查容器状态检查服务端口安全设置四、访问Neko服务访问Neko首页登录Neko五、基本使用设置键…...
聊聊自动化用例的维护
自动化测试中的农药悖论:为何长期维护至关重要 自动化测试常被视为"一次编写,永久有效"的解决方案,但随着时间的推移,即使设计最精良的测试套件也会逐渐失效。这种现象被称为农药悖论(Pesticide Paradox&am…...
OpenCV 图形API(60)颜色空间转换-----将图像从 YUV 色彩空间转换为 RGB 色彩空间函数YUV2RGB()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 将图像从 YUV 色彩空间转换为 RGB。 该函数将输入图像从 YUV 色彩空间转换为 RGB。Y、U 和 V 通道值的常规范围是 0 到 255。 输出图像必须是 8…...
Docker配置带证书的远程访问监听
一、生成证书和密钥 1、准备证书目录和生成CA证书 # 创建证书目录 mkdir -p /etc/docker/tls cd /etc/docker/tls # 生成CA密钥和证书 openssl req -x509 -newkey rsa:4096 -keyout ca-key.pem \ -out ca-cert.pem -days 365 -nodes -subj "/CNDocker CA" 2、为…...
监督学习(Supervised Learning)与无监督学习(Unsupervised Learning)
监督学习与无监督学习是机器学习的两大核心范式,主要区别在于数据是否包含明确的“标签”(目标输出)。 1. 监督学习(Supervised Learning) 定义: 数据形式:输入数据&…...
批量将多个 Excel 表格中的某张图片替换为新的图片
对于 Excel 文档,相信大家都不陌生,我们可以在 Excel 单元格中插入各种各样的图片,我们也可以将 Excel 表格中的图片替换为新的图片,常规的做法我们都是通过 Office 来进行单个处理的,但是如果我们遇到批量处理的场景&…...
数据一致性问题剖析与实践(三)——分布式事务的一致性问题
一、前言 之前我们讨论了几种场景的一致性问题 冗余数据存储中的一致性问题分布式共识中的一致性问题单机事务中的一致性问题 本文将围绕分布式事务中的一致性问题展开讨论。 二、分布式环境的最大难题 相对于单机环境,分布式环境中,一致性问题最大…...
分布式理论和事务
微服务和分布式 微服务 是一种软件架构风格,它将应用程序拆分成一系列小型、独立的服务,每个服务专注于单一功能,彼此通过轻量级通信机制(如 API)进行交互。微服务通常是松耦合的,可以独立开发、部署和扩展…...
基于Flask与Ngrok实现Pycharm本地项目公网访问:从零部署
目录 概要 1. 环境与前置条件 2. 安装与配置 Flask 2.1 创建虚拟环境 2.2 安装 Flask 3. 安装与配置 Ngrok 3.1 下载 Ngrok 3.2 注册并获取 Authtoken 4. 在 PyCharm 中创建 Flask 项目 5. 运行本地 Flask 服务 6. 启动 Ngrok 隧道并获取公网地址 7. 完整示例代码汇…...
flutter和vue3项目利用webview_flutter插件通信
近来需要实现一个功能: flutter项目的会员中心页面跳转到vue3项目的活动页,点击该活动页面的“签到”按钮后到flutter项目的积分中心页面进行签到,签到成功后手动返回上一个页面即vue3活动页面的按钮状态更新问题(需更新为“已签到”)。 实现方法:通过webview_flutter …...
sql 根据时间范围获取每日,每月,年月的模版数据
1:获取每日模版数据(参数也支持跨年) SELECT a.selected_date cdate FROM(SELECT adddate(1970-01-01,t4.i * 10000 t3.i * 1000 t2.i * 100 t1.i * 10 t0.i) selected_dateFROM( SELECT 0 i UNION SELECT 1 UNION SELECT 2 UNION SELEC…...
亚信安全与联通数科达成战略合作,成立联信事业部
4月22日,亚信安全与联通数字科技有限公司(以下简称“联通数科”)正式签署战略合作协议,双方宣布将联合成立“联信事业部”,仪式上,联通数科董事长孙江山与亚信安全董事长何政为“联信事业部”成立揭牌&…...
第五节:进阶特性高频题-Teleport与Suspense组件应用
Teleport:解决模态框/弹窗的DOM层级问题(如挂载到body) Suspense:处理异步组件加载状态(fallback内容展示) 深入解析 Vue3 的 Teleport 与 Suspense 组件 一、Teleport 组件:突破 DOM 层级限制…...
如何使用 uv 构建 Python 包并本地安装
本文将逐步指导你创建一个简单的 Python 包,并将其本地安装到机器或云环境中。完成本教程后,你将拥有一个可复用的 Python 库,可直接通过 pip 安装或在项目中导入使用。 步骤详解 Step 0: 选择构建工具 - 使用 uv 推荐理由:uv 是…...