解决js丢失精度问题

大家好，我是小羽，最近做项目遇到了一个问题，js存储long类型的数据时，最多可以保证16位数字的精度，多出的位数就是丢失精度。

问题的起因

1. 当我在前台页面点击禁用按钮时，需要获取用户id，此界面是获取aaa用户的id值。

前台获取的id值为：1533035649181958100

2. 接下来再看数据库中aaa用户的id字段

   

此时数据库中的id值为：1533035649181958146

3. 在后端中员工表实体类的id字段是Long类型

由此可以分析出，js接收long类型时最多只能接收16位的数字，再多的话就会丢失精度。

那我们分析出问题产生的原因了，如何解决呢。

解决办法

后端我采用的是SpringBoot框架开发的，所以，接下来以SpringBoot为基础来解决问题。

首先我们来理一下解决办法的思路：

• js存超过16位数字就是失去精度，那我用字符串传递不就行了吗。

• 等传递到后台时再转换一下数据类型，即可解决。

1.代码实操

1. 创建对象映射器

功能：对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象

简单介绍一下序列化和反序列化：

• 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]
• 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]

下面的对象映射器可直接使用，这里是个工具类：

public class JacksonObjectMapper extends ObjectMapper {

    public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
    public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
    public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";

    public JacksonObjectMapper() {
        super();
        //收到未知属性时不报异常
        this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);

        //反序列化时，属性不存在的兼容处理
        this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);

        SimpleModule simpleModule = new SimpleModule()
                .addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))

                .addSerializer(BigInteger.class, ToStringSerializer.instance)
                .addSerializer(Long.class, ToStringSerializer.instance)
                .addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));

        //注册功能模块 例如，可以添加自定义序列化器和反序列化器
        this.registerModule(simpleModule);
    }
}

2. 在WebMvcConfig文件中配置mvc框架的消息转换器。（WebMvcConfig文件是web配置文件）

/**
 * web配置文件
 * @author shenyi
 */
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {

    /**
     * 扩展mvc框架的消息转换器
     * @param converters
     */
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        System.out.println(Thread.currentThread().getName());
        //创建消息转换器对象
        MappingJackson2HttpMessageConverter messageConverter=new MappingJackson2HttpMessageConverter();
        //设置对象转换器，底层使用JackSon将Java对象序列化为json
        messageConverter.setObjectMapper(new JacksonObjectMapper());
        //将设置的消息转换器，添加到SpringMVC框架的转换器集合中,索引为0优先级最高
        converters.add(0,messageConverter);
    }
}

2.结果截图

最后重启项目

此时可以看到js获得字符串类型的id。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-maF0Ot9z-1654398589019)(C:/Users/shenyi/AppData/Roaming/Typora/typora-user-images/image-20220605110258592.png)]

此时数据库中status的值也改为0

此时问题解决。

想了解更多的Java知识，可以关注我的微信公众号Java小羽。