前端对于Long类型的雪花ID无法识别

1.问题描述

1.在PostMan里面请求接口能够完全正确的返回雪花算法生成的主键id，但是在Swagger或者前端接口请求 浏览器之中就会出现雪花算法精度损失问题。
2.前端对于16位以上的Long类型数据精度丢失。

2.问题原因

javaScript提供的有效数字最长为53个二进制位精度最长为53个二进制位，意味着绝对值小于2^53的整数，即-2^53~2^53，都可以精确表示
所以换算成十进制，javascript数字最高精度是16位(若整数部分为0，则表示小数点后16位；若整数部分不为0，则表示整体保留16位)。
超过此范围,进制转换会存在精度问题，而雪花ID生成的数值位19位超过此范围，导致 JavaScript 不能正常存储导致。于是就出现了 
前端传递的id，找寻不到对应的记录问题。  

注意：建议雪花ID在数据库中使用 bigint 来存储，而不是使用 varchar；这样可以提高这样数据库的速度，使用索引的时候少一步字符串转换成数字的操作。

3.解决思路

后端的ID(Long转String) ==> 前端使用String类型的ID,前端使用js String精度就不会丢失了。 那前端再把String类型的19位数字传回服务端的时候，可以用Long接收么？当然可以，这是Spring反序列化参数接收默认支持的行为。
前端用String类型的雪花ID保持精度，后端及数据库继续使用Long或者BigINT类型不影响数据库查询执行效率。

4.解决方案(后端处理)

方式一:（推荐）
使用Jackson

写法一
import com.fasterxml.jackson.databind.module.SimpleModule;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
import org.springframework.context.annotation.Configuration;

@Configuration
public class JsonModuleConfig extends SimpleModule {
    public JsonModuleConfig() {
        super(JsonModuleConfig.class.getName());
        this.addSerializer(Long.class, ToStringSerializer.instance);
        this.addSerializer(Long.TYPE, ToStringSerializer.instance);
    }
}

写法二

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 org.springframework.boot.autoconfigure.jackson.Jackson2ObjectMapperBuilderCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;

import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;

@Configuration
public class JacksonConfig {

    /**
     * Date格式化字符串
     */
    private static final String DATE_FORMAT = "yyyy-MM-dd";
    /**
     * DateTime格式化字符串
     */
    private static final String DATETIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
    /**
     * Time格式化字符串
     */
    private static final String TIME_FORMAT = "HH:mm:ss";

    @Bean
    @Primary
    public Jackson2ObjectMapperBuilderCustomizer jackson2ObjectMapperBuilderCustomizer() {
        return builder -> builder.serializerByType(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DATETIME_FORMAT)))
                .serializerByType(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DATE_FORMAT)))
                .serializerByType(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(TIME_FORMAT)))
                .deserializerByType(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DATETIME_FORMAT)))
                .deserializerByType(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DATE_FORMAT)))
                .deserializerByType(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(TIME_FORMAT)))
                .serializerByType(Long.class, ToStringSerializer.instance)
                .serializerByType(Long.TYPE, ToStringSerializer.instance);
    }


}

注：如果不生效可能与jar包里面的某些类冲突，在对应启动类添加排除一下即可
@SpringBootApplication(exclude = {JacksonConfig.class})

方式二:
对应的实体类主键属性加入注解 @JsonSerialize,如下:

    @ApiModelProperty("主键ID")
    @JsonSerialize(using = ToStringSerializer.class)
    private Long id;

方式三:
自己建个配置类

@EnableWebMvc
@Configuration
public class WebDataConvertConfig implements WebMvcConfigurer {
        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);
        }
        

方式四:
使用Jackson2

@Configuration
public class JacksonConfig {

	/**
	 * Jackson全局转化long类型为String，解决jackson序列化时long类型缺失精度问题
	 * @return Jackson2ObjectMapperBuilderCustomizer 注入的对象
	 */
    @Bean
    public Jackson2ObjectMapperBuilderCustomizer jackson2ObjectMapperBuilderCustomizer() {
        return jacksonObjectMapperBuilder -> jacksonObjectMapperBuilder
                .serializerByType(Long.class, ToStringSerializer.instance)
                .serializerByType(Long.TYPE, ToStringSerializer.instance);
    }
}

方式五:
bootstrap.yml添加以下配置：将所有的数字类型都会转为字符串。

spring:
  jackson:
  #将所有的number类型转为String返回
    generator:
      write_numbers_as_strings: true
    #格式化返回时间 yyyy-MM-dd HH:mm:ss
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8

方式六：（不推荐）
简单粗暴，将所有的Lang类型，改为String，数据库改成varchar类型；

5、前端也可解决但不推荐

前端使用 json-bigint 模块进行处理，一般都是用axios数据请求

npm install json-bigint

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

或 

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

axios.create({
    baseURL: 'http://baidu.com',
    timeout: 5000,
    timeoutErrorMessage: '请求时间过长,请联系后端或者优化请求',
})