Vue处理超过16位数字精度丢失问题（数字最后两位变0）

最新推荐文章于 2024-03-01 17:47:53 发布

钢铁熊猫33

最新推荐文章于 2024-03-01 17:47:53 发布

阅读量1.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_40523572/article/details/130287952

版权

当使用MyBatis-Plus的ASSIGN_ID生成19位主键时，前端由于通常只处理16位导致精度丢失。后端可以通过@JsonSerialize注解配合ToStringSerializer处理，前端则可以引入json-bigint库，修改axios的transformResponse来避免精度问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

当我们使用MyBatis-Plus 使用 ASSIGN_ID(雪花算法) 生成的id作为主键时，因为其长度为19位，而前端一般能处理16位，如果不处理的话在前端会造成精度丢失，最后两位会变成00，感觉像是四舍五入后的效果，如下：

1648981853080055810 => 1648981853080055800

后端处理

@JsonSerialize(using = ToStringSerializer.class)
@TableId
private Long id;

前端处理

前端一般都是用axios进行数据请求，我们通过引入json-bigint来解决：

// 安装依赖
npm install json-bigint

// 使用
import JSONBIG from 'json-bigint'

axios.defaults.transformResponse = [
  function (data) {
    const json = JSONBIG({
      storeAsString: true
    })
    const res = json.parse(data)
    return res
  }
]