解决BigDecimal序列化科学计数法前端展示问题(大坑)

解决BigDecimal序列化科学计数法前端展示问题(大坑)

前言:在生产中出现一个问题,就是BigDecimal类型的字段在前端页面展示变成科学计数法,通过排查,发现里面的坑还是挺多的,所以特意记录下处理过程。Json序列化,不同项目中配置的都不一样,有些项目是使用springboot里面自带的jackson的,有些是使用fastjson处理,不同的序列化的处理方式也不一样。

1、fastJson对BigDecimal序列化和反序列化

字段返回完整的数字,避免科学计数法

我们看下JSON.toJSONString()的方法,我们可以看到,可以传进SerializerFeature的枚举

public static String toJSONString(Object object, SerializerFeature... features) {
    return toJSONString(object, DEFAULT_GENERATE_FEATURE, features);
}

所以,我们这边传进WriteBigDecimalAsPlain枚举,就可以将数字完整返回

private static final SerializerFeature[] features = {
        SerializerFeature.WriteBigDecimalAsPlain};
public static String toString(Object data) {
        return JSON.toJSONString(data, features);
    }

PS: 大坑,我们可以发现这时候后端返回给前端是完整的数字,但是由于字段是数字类型,所以前端JS会把数字变成科学计数法展示,如下图展示,左边的数据是浏览器响应的数据,右边的数据是postman调用返回的数据,可以看到后端返回是没问题,但是由于前端JS的问题导致展示出现科学计数法。这时候,我们就需要考虑是不是返回给前端序列化成字符串类型返回。

在这里插入图片描述

1.1 fastJson对BigDecimal转成字符串类型返回(全局处理,推荐)

自定义序列化类实现ObjectSerializer接口重写里面write方法,并且把自定义序列化类放到fastJson序列化配置中

public class BigDecimalConfig implements ObjectSerializer {
    public static final BigDecimalConfig instance = new BigDecimalConfig();
    @Override
    public void write(JSONSerializer serializer, Object object, Object fieldName, Type fieldType,
                      int features) throws IOException {
        SerializeWriter out = serializer.out;
        if (object == null) {
            out.writeNull();
            return;
        }
        out.writeString(((BigDecimal) object).stripTrailingZeros().toPlainString());
    }
}
public class JsonUtils {

    private static final SerializerFeature[] features = {
            SerializerFeature.WriteBigDecimalAsPlain	};
    
    private static final SerializeConfig serializeConfig  = SerializeConfig.globalInstance;

    static {
        ParserConfig.getGlobalInstance().setAutoTypeSupport(true);//打开autotype功能
        serializeConfig.put(BigDecimal.class, BigDecimalConfig.instance);//将BigDecimal转成字符串类型
    }

    /**
     * 生成JSON字符串
     */
    public static String toString(Object data) {
        return JSON.toJSONString(data, serializeConfig, features);// 需要传入自定义的配置
    }
}
1.2 fastJson对BigDecimal转成字符串类型返回(局部特定处理)

由于项目前端历史问题,如果把BigDecimal类型的字段全部变成字符串类型,就有可能会引起其他问题,为了减少不必要的麻烦,特意搞了局部处理的方法,对某个字段做特殊处理。同样需要自定义序列化类实现ObjectSerializer接口重写里面write方法,然后在字段上加上序列化注解即可。@JSONField(serializeUsing = BigDecimalSerializer.class)

public class BigDecimalSerializer implements ObjectSerializer {

    @Override
    public void write(JSONSerializer serializer, Object object, Object fieldName, Type fieldType, int features) throws IOException {
        if (object == null) {
            serializer.out.writeNull();
            return;
        }
        if (object instanceof BigDecimal) {
            // 将BigDecimal转换为字符串形式
            serializer.write(((BigDecimal) object).stripTrailingZeros().toPlainString());
        } else {
            // 非BigDecimal类型,使用默认序列化方式
            serializer.write(object);
        }
    }
}
@JSONField(serializeUsing = BigDecimalSerializer.class)
private BigDecimal logisticsPrice;//物流单价

2、jackson对BigDecimal序列化和反序列化

自定义序列化和反序列类,然后编写配置类

public class BigDecimalSerializer extends JsonSerializer<BigDecimal> {
    @Override
    public void serialize(BigDecimal value, JsonGenerator gen, SerializerProvider serializerProvider) throws IOException {
        gen.writeString(value.stripTrailingZeros().toPlainString());
    }
}
public class BigDecimalDeserializer extends JsonDeserializer<BigDecimal> {

    @Override
    public BigDecimal deserialize(JsonParser p, DeserializationContext ctxt) throws IOException {
        return new BigDecimal(p.getValueAsString());
    }
}
@Configuration
public class JacksonConfig {

    @Bean
    public Jackson2ObjectMapperBuilder jacksonBuilder() {
        Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder();
        builder.modules(new SimpleModule().addSerializer(BigDecimal.class, new BigDecimalSerializer())
                .addDeserializer(BigDecimal.class, new BigDecimalDeserializer()));
        return builder;
    }
}
2.1 jackson对BigDecimal转成字符串类型返回(全局处理)

自定义Jackson的JsonSerializer实现

public class BigDecimalToStringSerializer extends JsonSerializer<BigDecimal> {

    @Override
    public void serialize(BigDecimal value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
        gen.writeString(value.stripTrailingZeros().toPlainString());
    }
}

配置类中注册这个JsonSerializer

@Configuration
public class JacksonConfig {

//    @Bean
//    public Jackson2ObjectMapperBuilder jacksonBuilder() {
//        Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder();
//        builder.modules(new SimpleModule().addSerializer(BigDecimal.class, new BigDecimalSerializer())
//                .addDeserializer(BigDecimal.class, new BigDecimalDeserializer()));
//        return builder;
//    }

    @Bean
    public ObjectMapper objectMapper() {
        ObjectMapper objectMapper = new ObjectMapper();
        SimpleModule module = new SimpleModule();
        module.addSerializer(BigDecimal.class, new BigDecimalToStringSerializer());
        objectMapper.registerModule(module);
        return objectMapper;
    }
}

2.1 jackson对BigDecimal转成字符串类型返回(局部处理)

第一步跟之前一样,自定义BigDecimalToStringSerializer序列化类,然后在某个字段上加上注解即可,@JsonSerialize(using = BigDecimalToStringSerializer.class)

@JsonSerialize(using = BigDecimalToStringSerializer.class)
private BigDecimal rate;

在这里插入图片描述

3、总结

BigDecimal里面的坑还是挺多的,页面该类型字段科学计数法展示的话,我们要找清楚是什么原因,是后端返回有问题还是前端的问题,首先一定要保证后端返回的数据是正常完整的,不管是数字类型还是字符串类型。只要确保后端返回的数据是完整,剩下如果还有问题就可以协助前端一起排查处理了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/327706.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用dbever连接 hsqldb

完整的url为 jdbc:hsqldb:hsql://ip:端口/别名 注意&#xff0c;hsqldb跟随应用启动和停止&#xff0c;所以当应用断点时&#xff0c;hsqldb也会连接不上导致查询数据失败&#xff0c;可以断点前进一步

Angular系列教程之路由守卫

文章目录 前言路由守卫的类型CanLoadCanActivateCanActivateChildCanDeactivateResolve总结 前言 在Angular中&#xff0c;路由守卫是一个非常有用的功能&#xff0c;可以帮助我们控制用户在导航过程中的权限和访问限制。通过使用路由守卫&#xff0c;我们可以拦截导航并根据需…

Mybatis 常用条件语句,大于小于、if、for、模糊搜索、case when、choose

大于小于 方法1&#xff1a; > 大于 &#xff0c; < 小于 <if test"startTime ! null ">and a.create_time > #{startTime} </if> <if test"endTime ! null ">and a.create_time < #{endTime} </if> 方法2(建议写这…

Macbook空间不足怎么解决?

随着使用时间的增长&#xff0c;我们会发现Mac电脑的存储空间越来越少&#xff0c;这时候我们就需要对Mac电脑进行清理&#xff0c;以释放更多的存储空间。那么&#xff0c;Mac空间不足怎么解决呢&#xff1f; 1.清理垃圾文件 Mac空间不足怎么解决&#xff1f;首先要做的就是清…

图像表示方法

RGB表示 RGB是使用三基色合成的原理&#xff0c;我们看到的彩色图片&#xff0c;都有三个通道&#xff0c;分别为红、绿、蓝通道&#xff0c;如果需要透明度则还有alpha分量. 通常每个通道用8bit表示&#xff0c;8bit能表示256种颜色&#xff0c;所以可以组成 256256256167772…

Vue 如何把computed里的逻辑提取出来

借用一下百度的ai 项目使用&#xff1a; vue 文件引入 <sidebar-itemv-for"route in routes":key"route.menuCode":item"route":base-path"route.path"click"onColor"/>import { handleroutes } from "./handle…

分布式搜索引擎ElasticSearch——基础

分布式搜索引擎ElasticSearch——基础 文章目录 分布式搜索引擎ElasticSearch——基础初识elasticsearch什么是elasticsearchelasticsearch的发展正向索引和倒排索引安装elasticsearch&#xff0c;kibana部署单点es创建网络加载镜像运行 部署kibana部署DevTools 安装IK分词器在…

力扣白嫖日记(sql)

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 175.组合两个表 表&#xff1a;Courses 列名类型studentvarcharclassvarchar 在 SQL 中&#xff0c;(stude…

物流信息管理系统的设计与实现:从数据库到前端的全流程解析

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

CSS3中多列布局详解

多列布局 概念&#xff1a;在CSS3之前&#xff0c;想要设计类似报纸那样的多列布局&#xff0c;有两种方式可以实现&#xff1a;一种是"浮动布局"&#xff0c;另一种是“定位布局”。 这两种方式都有缺点&#xff1a;浮动布局比较灵活&#xff0c;但不容易控制&…

vue3__Provide / Inject (依赖注入)和mixins

一、 Provide提供和Inject 注入 Provide提供 <script setup> import { provide } from vueprovide(/* 注入名 */ message, /* 值 */ hello!) </script> 例如父组件中提供方法 <template> <div class"home">dfhualsf<div><button…

npm link 后怎么查看软连接和删除软连接的

一&#xff1a;在你的npm项目中&#xff0c;进行打包&#xff0c;形成一个dist文件 npm run build // 这是我的打包命令&#xff0c;具体可查看 package.json 文件 二&#xff1a; 打包完成后&#xff0c;运行pwd命令&#xff0c;可查看到你npm项目的路径。 pwd // 输出一…

FFMPEG解码实时流,支持cpu、gpu解码

官网下载的ffmpeg目前只能下载到X64版本的库&#xff0c;具体编译请参考windows编译ffmpeg源码&#xff08;32位库&#xff09;_windows 32位ffmpeg动态库-CSDN博客 直接上代码 int VideoDecodeModule::Open(std::string strUrl) {AVFormatContext *pFormatCtx nullptr;AVCo…

Next.js 开发指​南(GitHub 115k star​)

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架&#xff0c;它扩展了最新的 React 特性&#xff0c;集成了基于 Rust 的 JavaScript 工具&#xff0c;可以帮助你快速创建全栈 Web 应用 &#xff08;full-stack Web applications&#xff09; 。 对于有一定 React 基础…

虚拟机 以及 Centos 7的 安装全过程

目录 安装VMwere Workstion 虚拟机的操作过程 CentOS 7 安装过程 install CentOS 7 安装操作系统 安装VMwere Workstion 虚拟机的操作过程 更改安装位置 到下面图片中的这一个步骤&#xff0c;可以点击许可证&#xff0c;输入密钥就可以使用了&#xff0c; 密钥可以去某度或…

网络安全B模块(笔记详解)- 文件包含

文件包含的渗透与加固 1.使用渗透机场景kali中工具扫描服务器,将服务器上 File Inclusion首页概述页中的Flag提交; Flag:iloveu 2.使用渗透机场景windows7访问服务器场景网站中的File Inclusion(local)页面,找到根目录下Flag文件夹下的Flag.txt文件并将其内容提交; Flag:…

Linux中SSH远程管理服务

一、SSH服务 1.1.什么是SSH服务器&#xff1f; SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;主要用来实现字符界面的远程登录、远程 复制等功能。SSH 协议对通信双方的数据传输进行了加密处理&#xff0c;其中包括用户登录时输入的用户口令&#…

回环检测算法:Stable Trangle Descriptor

回环检测是指检测传感器的两次测量&#xff08;如图像、激光雷达扫描&#xff09;是否发生在同一场景&#xff0c;它是对于SLAM问题至关重要。基于激光雷达的回环检测应该满足如下要求&#xff1a; 无论视点如何变化&#xff0c;回环检测方法应该实现旋转和平移不变性&#xf…

从零开始:Golang中JSON解析与生成的完全指南

从零开始&#xff1a;Golang中JSON解析与生成的完全指南 引言Golang与JSON&#xff1a;基础概念JSON简介为何在Golang中使用JSON Golang中JSON数据的解析使用encoding/json解析JSON解析成基本数据类型解析成自定义结构体错误处理和常见问题 Golang中生成JSON数据将Golang对象转…

两数之和(Hash表)[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个整数数组nums和一个整数目标值target&#xff0c;请你在该数组中找出"和"为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元…
最新文章