当前位置：首页 > wzjs >正文

做响应式网站是不是都用rem抖音推广平台联系方式

wzjs 2025/8/8 14:20:56

做响应式网站是不是都用rem,抖音推广平台联系方式,佛山顺德容桂网站制作,凡科互动游戏怎么玩高分博主介绍：✌全网粉丝22W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

博主介绍：✌全网粉丝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() {// 实现...
}