【异常解决】Spring Boot 返回排序后的 Map 但前端接收顺序不对的解决方案

No8g攻城狮

于 2025-04-23 16:23:05 发布

阅读量1.6k

点赞数 37

CC 4.0 BY-SA版权

分类专栏：异常解决方案文章标签： spring boot 前端后端 json java spring

本文链接：https://blog.csdn.net/weixin_44299027/article/details/147457316

异常解决方案专栏收录该内容

154 篇文章

订阅专栏

博主介绍：✌全网粉丝22W+，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌

技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。

感兴趣的可以先关注收藏起来，在工作中、生活上等遇到相关问题都可以给我留言咨询，希望帮助更多的人。

一、背景描述

返回给页面的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() {
    // 实现...
}