Springboot Long类型数据太长返回给前端,精度丢失问题 复现、解决

news2024/11/20 14:23:24

前言

惯例,收到兄弟求救,关于long类型丢失精度的问题:

存在一个初学者不会,就会有第二个初学者不会,所以我出手。

正文

不多说,开搞。



如题, 后端返回的数据 给到 前端, Long类型数据太长导致精度丢失。

复现示例



比如我们写个接口:

我们特意去把 Long类型 14位 到 20位的数据都 塞到返回值里面
 

    @RequestMapping("/test")
    @ResponseBody
    public TestDTO test(){
        TestDTO testDTO=new TestDTO();
        testDTO.setNumStr("12345678901234568901234567890123456890");
        testDTO.setNum14(12345678901234L);
        testDTO.setNum15(123456789012345L);
        testDTO.setNum16(1234567890123456L);
        testDTO.setNum17(12345678901234567L);
        testDTO.setNum18(123456789012345678L);
        testDTO.setNum19(123456789012345689L);
        testDTO.setNum20(1234567890123456890L);
        return testDTO;
    }

TestDTO.java:
 

public class TestDTO {

    private String numStr;

    private Long num14;
    private Long num15;
    private Long num16;
    private Long num17;
    private Long num18;
    private Long num19;
    private Long num20;
  
    //省略set、get
}

这时候前端调用看看效果,可以看到出现了精度丢失的场景:

原因

 js数字的精度是有限的,Java的Long类型的数字超出了JavaScript的处理范围。
 内部只有一种数字类型Number,双精度64位格式存储,即使整数也是如此。
 最大的数值应该是2的53次方-1,十进制是【9007199254740991】,16位。
 所以说超过16位,那么如果属于Number类型去解析的,就会丢失精度。

解决方案:

@JsonSerialize(using=ToStringSerializer.class)



 看看效果:

 好了,该篇就到这。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制

文章目录问题描述解决过程玩味Vue Scoped知识点解决方法问题描述 ​ 在开发的前期,我清晰的记得使用动画完成了图片放大的效果,当时还写了一篇博文 http://t.csdn.cn/lA9aq上了热榜。可是过了几天之后,这个效果居然“失效了”,我…

若依前后端分离新窗口打开页面,如何使用this.$router.resolve解决

若依前后端分离新窗口打开页面this.$router.resolve 欢迎遇到同样问题的同学阅读 例如系统后台要求点击【可视化大屏】菜单,需要打开新窗口显示,但不能影响原窗口显示系统页面,网上查询了一圈都是比较片面的只提到了this.$router.resolve&a…

JS时间戳转换方式

前言 在js中将时间戳转换为常用的时间格式,有三种主要的方式 1、使用JS中已有的函数,例如getFullYear(),getMonth()等,将时间戳直接转换成对应的年月; 2、创建时间过滤器,在其他的页面中直接调用该过滤器,转…

npm install 安装失败常见问题解决办法

安装cnpm npm install -g cnpm --registryhttp://registry.npm.taobao.org安装完之后可以通过cnpm -v 检验是否安装成功。 显示当前的镜像网址 npm get registrycnpm install安装依赖 cnpm install在运行cnpm install 中,你可以会遇到cnpm : 无法加载文件 C:\Us…

微信小程序搜索框实现模糊查询

目录 前言一、概述二、步骤三、效果展示总结前言 主要实现功能,无美化,如需请自设 一、概述 开发工具:微信开发者工具 通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 二、步骤 在文件中新建一个goodFilter.wxs文…

THREE.js

电子书网站http://www.webgl3d.cn链接 特定版本three.js下载 github链接:https://github.com/mrdoob/three.js github链接查看所有版本:https://github.com/mrdoob/three.js/releases 选择你需要的版本three.js文件包下载,然后解压即可。…

【node进阶】浅析Koa框架---ejs模板|文件上传|操作mongoDB

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

NodeJS配置相关问题 报错原因路径配置 报错 1.无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 2.终端输入node -v,发出提示:nodejs在cmd提示不是内部或外部命令解决方法 3.终端输入npm -v,发出提示:n…

用jQuery实现轮播图——超简单(代码解释)

先看效果 鼠标悬浮时停止轮播&#xff0c;离开时自动轮播&#xff0c;点下一张小圆点会随着动 直接上代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.wrapper {width: 600px;height: 350…

uniapp 前端获取微信小程序 URL Link (HTTPS调用)

前端基于 uniapp 获取微信小程序 URL Link 短链&#xff0c;适用于短信、邮件、网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放。 前言&#xff1a;微信小程序此前可以在小程序管理后台-工具 中直接快捷生成小程序指定页面的 https 短链&#xff…

chrome插件-Web开发者助手 FeHelper

FeHelper是一个非常好用的插件&#xff0c;支持Chrome、Firefox、MS-Edge浏览器&#xff0c;工具集包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工…

使用el-upload组件实现递归多文件上传

一、需求描述&#xff1a;在页面上点击按钮弹出选择电脑文件的界面&#xff0c;可以一次性选择多个文件一起上传到服务器上&#xff0c;并把上传成功的文件展示在页面上。 二、问题阐述&#xff1a;el-upload是支持多文件上传的&#xff0c;但是是同步进行的&#xff0c;你点击…

Three.js学习五——让模型沿着轨迹移动

目录流程搭建场景环境添加模型增加运动轨迹让模型沿轨迹运动完整代码和效果流程 基本流程 1、添加模型 2、增加运动轨迹 3、让模型沿轨迹运动 工程文件结构如下图&#xff1a; static&#xff1a;存放静态资源文件 three.js-master&#xff1a;为官网下载的代码包&#xff0c;…

Edge DEV 侧边栏没有Chat的解决办法。

最近陆陆续续又有很多人通过了new bing 的申请&#xff0c;体验时又发现了自己的侧边栏的bing没有chat&#xff0c;现在解决这个问题有一个比较成熟的方案。一.安装mitmproxyWindowsWindows安装建议用官方提供的客户端访问mitmproxy官方网址点击访问mitmproxy - an interactive…

持久化 pinia 状态

pinia的状态与vuex一样把数据存在内存中&#xff0c;在刷新页面后会清理内存&#xff0c;数据会丢失。 要解决这个问题非常简单&#xff0c;在状态改变时将其同步到浏览器的存储中&#xff0c;如 cookie、localStorage、sessionStorage 。 可以搭配 pinia-persistedstate-plu…

uniapp中table表格设置宽度无效的原因及解决办法

table表格设置标题无效解决办法及原因探索 此属性并不只限于uniapp同时适用于普通表格设置文章目录table表格设置标题无效解决办法及原因探索前言一、示例二、原因三、拓展总结前言 本篇文章讲解了&#xff0c;实际开发中发现表格设置的宽度没有生效&#xff0c;无论是设置行…

css元素定位:通过元素的标签或者元素的id、class属性定位

前言 大部分人在使用selenium定位元素时&#xff0c;用的是xpath元素定位方式&#xff0c;因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观&#xff0c;更好理解一些。 css元素定位方式往往被忽略掉了&#xff0c;其实css元素定位方式也有它的价值&…

微信公众号获取openId——开发阶段

1、注册测试号 微信公众平台 2、理解获取逻辑 获得微信的openid&#xff0c;需要先访问微信提供的一个网址来获取code。 再访问微信提供的另一网址从而获取openId。 两个链接分别为&#xff1a; https://open.weixin.qq.com/connect/oauth2/authorize?appidAPPID&redire…

JavaScript 基础语法

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录JavaScript 的组成第一个程序JavaScript 的书写形式:注释输出JS 变量理解动态类型基本数据类型运算符数组创建数组访问数组元素…

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy

前言&#xff1a; 在前端发出Ajax请求的时候&#xff0c;有时候会产生跨域问题&#xff0c;报错如下: Access to XMLHttpRequest at http://127.0.0.1/api/post from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the…