后端传Long类型的值给前端vue，导致精度丢失为问题的解决

最新推荐文章于 2025-03-27 16:56:41 发布

程序员小徐同学

最新推荐文章于 2025-03-27 16:56:41 发布

阅读量2.5k

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_46607044/article/details/127463794

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

博客内容讲述了在Java后端使用Long类型作为主键，但在Vue前端查询时由于JavaScript Number类型限制导致精度丢失，从而无法正确查询数据。通过Postman测试后端接口没有问题，问题出在前端数据转换。解决办法是在Java配置中，使用Jackson库将Long类型在序列化为JSON时转换为String类型，确保精度不受损失。

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

后端传Long类型的值给前端vue，导致精度丢失为问题的解决

数据设计使用bigint类型作为主键，Java后台使用Long类型进行接收。
在前端vue中调用后端的通过id查询方法，进行对数据库中的数据查询时，发现后端查询不到数据，后经发现:用psotman对后端的查询服务进行测试，无问题。
查看前端vue获取的数据id时，发现获取的数据id和数据库中的数据的ld不一致。所以才会导致查询查不到数据
由此引导出下面的问题:
javascript的 Number类型最大长度是17位;mysql使用bigint类型长度是20位;
解决办法:配置一个配置类。用于Java传值给前端进行JSON序列化时，将Long类型转成string类型序列化。

@Configuration
@EnableWebMvc
public class CustomJsonConfiguration implements WebMvcConfigurer {
    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter();

        ObjectMapper objectMapper = new ObjectMapper();
        /**
         * 序列换成json时,将所有的long变成string
         * 因为js中得数字类型不能包含所有的java long值
         */
        SimpleModule simpleModule = new SimpleModule();
        simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
        simpleModule.addSerializer(Long.TYPE, ToStringSerializer.instance);
        objectMapper.registerModule(simpleModule);

        jackson2HttpMessageConverter.setObjectMapper(objectMapper);
        converters.add(jackson2HttpMessageConverter);
    }
}