問題描述
項目中,在存儲userId和instructioId這些字段時,都是使用64為長整數Long類型(數據庫的bigint);
后端將數據從DB中查詢出來后,返回的userId和instructionId是Long類型,示例如下:
上面是前端在接收到的json數據(response原始數據),注意上面的id、instructionId、userId,這幾個字段都是Long類型
但是前端在顯示的時候,發現顯示的數據是不匹配的,如下圖所示:
前端代碼中沒有進行顯示的轉換,在接收到json數據后,解析后就有問題了,如下圖所示(preview,解析后的數據預覽)
問題原因
1.后端使用64位存儲長整數(long),最大支持9223372036854775807
2.前端的JavaScript使用53位來存放,最大支持9007199254740992,超過最大值的數,可能會出現問題(得到的溢出后的值);
解決方式
可以從后端或者前端兩方來處理(其中一方進行處理即可,或者兩方都處理),需要雙方約定好規則即可。
單從后端解決
這個問題無非就是數值移除了,那么可以將數字轉換為字符串返回給前端即可,前端解析時,因為是字符串,自然不會出現溢出的問題;
一般項目中Long類型字段的數量比較多,可以配置Jackson,將所有的數字在序列化時,都轉換為字符串
spring: jackson: generator: write_numbers_as_strings: true
如果項目涉及的、可能溢出的Long字段比較少時,直接指定哪些字段序列化時轉為字符串即可,如下所示:
@JsonSerialize(using=ToStringSerializer.class) private Long userId;
單從前端解決
后端返回給前端的Long數據,如果是只做展示,那么可以由后端處理后返回;
但是如果前端需要使用處理后的Long進行計算,那么就不能直接轉為數字,否則仍舊會出現溢出的問題;
但是前端可以使用一些插件(比如math.js)進行轉換,參考:https://www.html.cn/archives/7340