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
  }
]

两种方案皆可。

总结

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

您可能感兴趣的文章:

vue路由分文件拆分管理详解
这篇文章主要介绍了vue路由分文件拆分管理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
mint-ui 时间插件使用及获取选择值的方法
下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue3 Element Plus中icon图标不显示的解决方案
这篇文章主要介绍了vue3 Element Plus中icon图标不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue项目中tsconfig.json的配置项用法介绍
本文介绍了Vue项目中tsconfig.json文件的核心配置项,包括compilerOptions、include、exclude等,通过合理配置这些选项,可以提升TypeScript与Vue单文件组件、工具链的协作效率,增强类型安全性和开发体验,同时,还分享了一些常见问题的解决方法
2025-12-12
vue往数组中push对象时的问题及处理
这段文章主要讨论了在Vue框架中使用push操作向数组添加对象时遇到的值值改变问题,并提出了通过深拷贝解决该问题的方法,强调了正确使用深拷贝的重要性
2026-05-05
vue3中的this.$set写法举例
在Vue2中,由于数据响应式是利用object.definedProperty()实现的,无法深层监听数据变化,因此提供了$set方法来解决数据变化视图未实时更新的问题,然而,在Vue3中,数据响应式使用ES6的proxy进行数据代理,因此废弃了$set的概念
2024-10-10
Vue波纹按钮组件制作
本文给大家分享了VUE制作点击按钮出现水波纹效果的组件过程，对此有需求的朋友可以跟着学习下。
2018-04-04
Vue.js 的计算属性和侦听器详解(提升数据处理与交互的关键工具)
在Vue.js开发中,计算属性与侦听器是极为关键的特性,它们极大地提升了数据处理与交互逻辑实现的便捷性和高效性,本文给大家介绍Vue.js 的计算属性和侦听器：提升数据处理与交互的关键工具,感兴趣的朋友一起看看吧
2025-04-04
Vue-admin-template 报Uncaught (in promise) error问题及解决
这篇文章主要介绍了Vue-admin-template 报Uncaught (in promise) error问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue.js 插件开发详解
本文会通过一个简单的vue-toast插件，来帮助了解掌握插件的开发和使用。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03