vue项目如何解决数字计算精度问题

更新时间：2023年10月10日 09:11:03 作者：前端小白在写bug

这篇文章主要介绍了vue项目如何解决数字计算精度问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目数字计算精度问题

js计算精度问题解决步骤

1.进入指定项目终端安装依赖：

npm install mathjs --save

2.引入依赖包，在需要解决精度问题的页面引入

mathjs： const math = require(‘mathjs')

使用math.format方法

math.format(a*b,num)

a,b表示需要计算的两个数，可以进行加减乘除平方等等计算

num表示精度，最大为14，表示单一文本框最大的数字位数，包括小数点前后，如

如果用户输入99.9999(6个9)

当num为5时，输入的数字显示为99.999
当num为6时，输入的数字显示为99.9999
当num大于6时，输入的数字显示为99.9999

vue处理超过16位数字精度丢失问题

当我们使用MyBatis-Plus 使用 ID_WORKER 或者 ASSIGN_ID(雪花算法) 生成的id作为主键时，因为其长度,为19位，而前端一般能处理16位，如果不处理的话在前端会造成精度丢失，最后两位会变成00

如下图，感觉像是四舍五入后的效果

处理这种问题有两种方案，要么后端出处理，要么前端处理

后端处理

直接把id类型改为String就行，这样是可以，但是我们如果非要用Long呢？

我们可以给对应的实体类主键属性加入注解@JsonSerialize

import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
@JsonSerialize(using = ToStringSerializer.class)
@TableId
private Long id;

前端处理

前端一般都是用axios进行数据请求，我们通过引入json-bigint来解决

yarn add json-bigint
//或
npm install json-bigint

在封装的请求工具类中添加如下代码即可。

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

两种方案皆可。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3 组件与API直接使用的方法详解(无需import)
这篇文章主要介绍了vue3 组件与API直接使用的方法(无需import)，主要包括vue3自动导入和API的自动引入问题，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-09-09
用vue-cli开发vue时的代理设置方法
今天小编就为大家分享一篇用vue-cli开发vue时的代理设置方法，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
如何在vue中使用ant-design-vue组件
这篇文章主要介绍了如何在vue中使用ant-design-vue组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
Vue.js中自定义Markdown插件实现References解析(推荐)
本文主要写的是,如何编写一个插件来解析<references>标签,并将其转换为HTML,这种方法可以应用于其他自定义标签和功能,为Vue.js应用程序中的Markdown渲染提供了极大的灵活性,感兴趣的朋友跟随小编一起看看吧
2024-07-07
在vue中使用echarts图表实例代码详解
本文通过实例代码给大家介绍了在vue中使用echarts图表的方法，需要注意的事项文中给大家提到,需要的朋友可以参考下
2018-10-10
Vue EventBus自定义组件事件传递
这篇文章主要介绍了Vue EventBus自定义组件事件传递，组件化应用构建是Vue的特点之一，本文主要介绍EventBus进行数据消息传递，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
axios无法加载响应数据:no data found for resource with given i
最近在在做一个小查询功能的时候踩了一个坑,所以这篇文章主要给大家介绍了关于axios无法加载响应数据:no data found for resource with given identifier报错的解决方法,需要的朋友可以参考下
2022-11-11
vue调用swiper插件步骤教程(最易理解且详细)
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
2023-04-04
解决vue前端文件上传报错:上传失败,原因:413 Request Entity Too&
这篇文章主要介绍了解决vue前端文件上传报错:上传失败,原因:413 Request Entity Too Large,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
axios 封装上传文件的请求方法
今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09