解决页面js接受Long型损失精度问题

旧城等待， 2023-10-11 21:01 18阅读 0赞

**目录**

一、场景描述

二、问题分析

三、解决方法

--------------------

## 一、场景描述 ##

在下面这个后台管理中，当我们点击禁用后，会向服务器发送一个请求，同时携带这个员工的19位数字的id。

![1791cba6dc2e4a41b75058123b6e7756.png][]

![ad933ce803984a6cb910b369b14c57cb.png][] 请求方式为PUT

![ea9a89fa6a0e4fd497e4b9d5cf561590.png][]

这里的禁用对应employee表中的status字段，1为启用，0为禁用。controller中对应的方法如下：

@PutMapping
        public R<String> update(HttpServletRequest request,@RequestBody Employee employee) {
            log.info("修改的用户id为{}", employee.getId());
            Long empId = (Long)request.getSession().getAttribute("employee");
            employee.setUpdateTime(LocalDateTime.now());
            employee.setUpdateUser(empId);
    
            employeeService.updateById(employee);
            return R.success("更新员工成功");
        }

当点击后发现并没有被禁用，数据库中该用户的status字段也没有更新成功。通过debug发现请求发送时携带id与数据库中的不同

![6b88cdfb31ae4fb6b8f542736d72c487.png][]

![67ec0bf1b1a04ebc899e9962a0522fb7.png][]

而页面展示的时候返回的数据id也是正常的

![fa204db7a3444d449a6a13218ed29fb2.png][]

## 二、问题分析 ##

这是因为页面js处理Long型数据只能精确到前16位，所以最终ajax提交到服务器的请求中id后几位被四舍五入了

## 三、解决方法 ##

我们可以在服务端给页面响应json数据时进行处理，将long型数据统一转为String字符串，效果如下:

![ea687ffd5a76411d81b220e2243f7ef1.png][]

具体实现步骤:

1.  提供对象转换器Jackson0bjectMapper，基于Jackson进行Java对象到json数据的转换
2.  在WebMvcConfig配置类中扩展Spring mvc的消息转换器，在此消息转换器中使用提供的对象转换器进行java对象到json数据的转换

/**
     * 对象映射器:基于jackson将Java对象转为json，或者将json转为Java对象
     * 将JSON解析为Java对象的过程称为 [从JSON反序列化Java对象]
     * 从Java对象生成JSON的过程称为 [序列化Java对象到JSON]
     */
    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);
        }
    }

webmvc配置类

@Configuration
    @Slf4j
    public class WebMvcConfig extends WebMvcConfigurationSupport {
    
    
        /*
         * 扩展MVC框架的消息转换器
         */
    
        @Override
        protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
            log.info("消息转化器添加成功");
            // 创建消息转换器
            MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();
    
            // 设置对象转换器，底层使用jackson将java对象转换为json
            converter.setObjectMapper(new JacksonObjectMapper());
            // 将上面的消息转换器添加到mvc框架的转换器集合中
            converters.add(0, converter);
    
        }
    }

[1791cba6dc2e4a41b75058123b6e7756.png]: https://img-blog.csdnimg.cn/1791cba6dc2e4a41b75058123b6e7756.png
[ad933ce803984a6cb910b369b14c57cb.png]: https://img-blog.csdnimg.cn/ad933ce803984a6cb910b369b14c57cb.png
[ea9a89fa6a0e4fd497e4b9d5cf561590.png]: https://img-blog.csdnimg.cn/ea9a89fa6a0e4fd497e4b9d5cf561590.png
[6b88cdfb31ae4fb6b8f542736d72c487.png]: https://img-blog.csdnimg.cn/6b88cdfb31ae4fb6b8f542736d72c487.png
[67ec0bf1b1a04ebc899e9962a0522fb7.png]: https://img-blog.csdnimg.cn/67ec0bf1b1a04ebc899e9962a0522fb7.png
[fa204db7a3444d449a6a13218ed29fb2.png]: https://img-blog.csdnimg.cn/fa204db7a3444d449a6a13218ed29fb2.png
[ea687ffd5a76411d81b220e2243f7ef1.png]: https://img-blog.csdnimg.cn/ea687ffd5a76411d81b220e2243f7ef1.png