【瑞吉外卖】js精度问题，mp生成的id是19位，而js最多处理的位数是16位问题

ВаΙΙаd

已于 2023-06-25 18:58:06 修改

阅读量391

点赞数

文章标签： javascript 前端开发语言

于 2023-06-25 15:10:04 首次发布

本文链接：https://blog.csdn.net/Familiar1/article/details/131375469

版权

瑞吉外卖–黑马程序员

一、问题描述

1.在实现功能“启用/禁用员工账号”，选择一个员工点击禁用，传的员工id和数据库中的id不一致。测试过程中没有报错，但是功能并没有实现，查看数据库中的数据也没有变化，观察控制台输出的SQL：

在这里插入图片描述
SQL执行的结果是更新的数据行数为0，仔细观察id的值和数据库中对应记录的id值并不相同

二、原因

js精度问题，mp生成的id是19位，而js最多处理的位数是16位，所以js是做了四舍五入（id后3位674–>700）

通过观察控制台输出的SQl发现页面传递过来的员工id的值和数据库中的id值不一致这是怎么回事呢？
分页查询时服务端响应给页面的数据中id的值为19位数字，类型为long
在这里插入图片描述
页面中js处理kong型数字只能精确到钱16位，所以最终通过ajax请求提交给服务端时候变为了1391586184024604700

三、解决方式

前面我们已经发现了问题的原因，即js对long型数据进行处理时丢失精度，导致提交id和数据库中的id不一致。

如何解决这个问题？
我们可以在服务端给页面响应json数据时进行处理，将long型数据统一转为String字符串，效果如下：
在这里插入图片描述

具体实现
1）提供对象转换器JacksonObjectMapper，基于Jackson进行Java对象到json数据的转换，代码如下：

package com.itheima.reggie.common;

import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalTimeDeserializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import com.fasterxml.jackson.datatype.jsr310.ser.LocalTimeSerializer;
import java.math.BigInteger;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import static com.fasterxml.jackson.databind.DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES;

/**
 * 对象映射器:基于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)  // 对于long类型转为String
                .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配置类中扩展Spring mvc的消息转换器，在此消息转换器中使用提供的对象转换器进行Java对象到json数据的转换，代码如下：

/**
     * 扩展mvc框架的消息转换器
     * @param converters
     */
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        log.info("扩展消息转换器...");
        //创建消息转换器对象
        MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
        //设置对象转换器，底层使用Jackson将Java对象转为json
        messageConverter.setObjectMapper(new JacksonObjectMapper());
        //将上面的消息转换器对象追加到mvc框架的转换器集合中
        converters.add(0,messageConverter);
    }