SpringBoot雪花演演算法主鍵ID傳到前端後精度丟失問題的解決

2022-08-09 18:00:03

簡介

本文用範例介紹SpringBoot如何解決雪花演演算法主鍵ID傳到前端後精度丟失問題。

問題描述

Java後端Long型別的範圍

-2^63~2^63，即：-9223372036854775808~9223372036854775807，它是19位的。
這個數位可以通過方法獲得：Long.MAX_VALUE、Long_MIN_VALUE。

前端JS的數位型別的範圍

-2^53~2^53，即：-9007199254740991~9007199254740991，它是16位元的。
這個數位可以通過方法獲得：Number.MAX_SAFE_INTEGER、Number.MIN_SAFE_INTEGER。

結論

可見，Java後端的Long寬度大於前端的。雪花演演算法一般會生成18位元或者19位寬度的數位，那麼這時就會出問題。

專案場景

1.表結構

主鍵型別是BIGINT，儲存雪花演演算法生成的ID。

CREATE TABLE `user` (
  `id` BIGINT(32) NOT NULL COMMENT '使用者id',
	...
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='使用者表';

2.Entity

用Long 型別對應資料庫ID的BIGINT型別。

這裡使用 MybatisPlus 的雪花演演算法自動生成19位長度的純數位作為主鍵ID。（當然也可以手動用雪花演演算法生成ID）

import lombok.Data;
 
@Data
public class User {
    @TableId(type = IdType.ASSIGN_ID)
    private Long id;
	
    //其他成員
}

3.響應給前端

以JSON資料響應給前端正常

{
  "id": 1352166380631257089,
   ...
}

問題描述

範例

Controller

package com.knife.controller;
 
import com.knife.entity.UserVO;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@RequestMapping("user")
public class UserController {
 
    @GetMapping("find")
    public UserVO find(Long id) {
        UserVO userVO = new UserVO();
        userVO.setId(id);
        userVO.setUsername("Tony");
 
        return userVO;
    }
}

Entity

package com.knife.entity;
 
import lombok.Data;
 
@Data
public class UserVO {
    private Long id;
 
    private String username;
}

測試

存取：http://localhost:8080/user/find?id=1352213368413982722

結果

問題復現

從上邊可以看到，並沒有問題。

為什麼沒有出問題？

前端傳入後端：SpingMVC會自動將String型別的ID轉為Long型別，不會出問題後端響應給前端：是JSON格式，與JS沒有關係，不會出問題

什麼時候會出問題？

前端接收到JSON之後，將其序列化為JS物件，然後進行其他操作。在JSON轉JS物件時就會出問題，如下：

可以看到，原來id為1352213368413982722，序列化為JS物件後變成了 1352213368413982700

程式碼為：

const json = '{"id": 1352213368413982722, "name": "Tony"}';
const obj = JSON.parse(json);
 
console.log(obj.id);
console.log(obj.name);

解決方案

有如下兩種方案

將資料庫表設計的id欄位由 Long 型別改成 String 型別。
前端用String型別來儲存ID保持精度，後端及資料庫繼續使用Long(BigINT)型別

方案1使用String 型別做資料庫ID，查詢效能會大幅度下降。所以應該採用方案2。本文介紹方案2。

法1：全域性處理

簡介

自定義ObjectMapper。

方案1：ToStringSerializer（推薦）

package com.knife.config;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;
 
@Configuration
public class JacksonConfig {
 
    @Bean
    public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
        ObjectMapper objectMapper = builder.createXmlMapper(false).build();
 
        // 全域性設定序列化返回 JSON 處理
        SimpleModule simpleModule = new SimpleModule();
        // 將使用String來序列化Long型別
        simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
        simpleModule.addSerializer(Long.TYPE, ToStringSerializer.instance);
        objectMapper.registerModule(simpleModule);
        return objectMapper;
    }
}

測試

存取：http://localhost:8080/user/find?id=1352213368413982722

方案2：自定義序列化器（不推薦）

序列化器

package com.knife.config;
 
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.SerializerProvider;
import com.fasterxml.jackson.databind.annotation.JacksonStdImpl;
import com.fasterxml.jackson.databind.ser.std.NumberSerializer;
 
import java.io.IOException;
 
/**
 * 超出 JS 最大最小值 處理
 */
@JacksonStdImpl
public class BigNumberSerializer extends NumberSerializer {
 
	/**
	 * 根據 JS Number.MAX_SAFE_INTEGER 與 Number.MIN_SAFE_INTEGER 得來
	 */
	private static final long MAX_SAFE_INTEGER = 9007199254740991L;
	private static final long MIN_SAFE_INTEGER = -9007199254740991L;
 
	/**
	 * 提供範例
	 */
	public static final BigNumberSerializer instance = new BigNumberSerializer(Number.class);
 
	public BigNumberSerializer(Class<? extends Number> rawType) {
		super(rawType);
	}
 
	@Override
	public void serialize(Number value, JsonGenerator gen, SerializerProvider provider) throws IOException {
		// 超出範圍 序列化位字串
		if (value.longValue() > MIN_SAFE_INTEGER && value.longValue() < MAX_SAFE_INTEGER) {
			super.serialize(value, gen, provider);
		} else {
			gen.writeString(value.toString());
		}
	}
}

ObjectMapper設定

package com.knife.config;
 
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;
 
@Configuration
public class JacksonConfig {
 
    @Bean
    public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
        ObjectMapper objectMapper = builder.createXmlMapper(false).build();
 
        // 全域性設定序列化返回 JSON 處理
        SimpleModule simpleModule = new SimpleModule();
        // 將使用自定義序列化器來序列化Long型別
        simpleModule.addSerializer(Long.class, BigNumberSerializer.instance);
        simpleModule.addSerializer(Long.TYPE, BigNumberSerializer.instance);
        objectMapper.registerModule(simpleModule);
        return objectMapper;
    }
}

測試

存取：http://localhost:8080/user/find?id=1352213368413982722

法2：區域性處理

說明

在欄位上加：@JsonSerialize(using= ToStringSerializer.class)。

範例

package com.knife.entity;
 
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import lombok.Data;
 
@Data
public class UserVO {
    @JsonSerialize(using= ToStringSerializer.class)
    private Long id;
 
    private String username;
}

測試

存取：http://localhost:8080/user/find?id=1352213368413982722