vue項目如何解決數(shù)字計算精度問題
更新時間：2023年10月10日 09:11:03 作者：前端小白在寫bug
這篇文章主要介紹了vue項目如何解決數(shù)字計算精度問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目數(shù)字計算精度問題
js計算精度問題解決步驟
1.進(jìn)入指定項目 終端安裝依賴：
npm install mathjs --save
2.引入依賴包，在需要解決精度問題的頁面引入
mathjs： const math = require(‘mathjs')
使用math.format方法
math.format(a*b,num)
a,b表示需要計算的兩個數(shù)，可以進(jìn)行加減乘除平方等等計算
num表示精度，最大為14，表示單一文本框最大的數(shù)字位數(shù)，包括小數(shù)點前后，如
如果用戶輸入99.9999(6個9)
- 當(dāng)num為5時，輸入的數(shù)字顯示為99.999
- 當(dāng)num為6時，輸入的數(shù)字顯示為99.9999
- 當(dāng)num大于6時，輸入的數(shù)字顯示為99.9999
vue處理超過16位數(shù)字精度丟失問題
當(dāng)我們使用MyBatis-Plus 使用 ID_WORKER 或者 ASSIGN_ID(雪花算法) 生成的id作為主鍵時，因為其長度,為19位，而前端一般能處理16位，如果不處理的話在前端會造成精度丟失，最后兩位會變成00
如下圖，感覺像是四舍五入后的效果
處理這種問題有兩種方案，要么后端出處理，要么前端處理
后端處理
直接把id類型改為String就行，這樣是可以，但是我們?nèi)绻且肔ong呢？
我們可以給對應(yīng)的實體類主鍵屬性加入注解@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進(jìn)行數(shù)據(jù)請求，我們通過引入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
}
]
兩種方案皆可。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue路由分文件拆分管理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
下面小編就為大家分享一篇mint-ui 時間插件使用及獲取選擇值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3 Element Plus中icon圖標(biāo)不顯示的解決方案
這篇文章主要介紹了vue3 Element Plus中icon圖標(biāo)不顯示的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文介紹了Vue項目中tsconfig.json文件的核心配置項,包括compilerOptions、include、exclude等,通過合理配置這些選項,可以提升TypeScript與Vue單文件組件、工具鏈的協(xié)作效率,增強(qiáng)類型安全性和開發(fā)體驗,同時,還分享了一些常見問題的解決方法2025-12-12
這段文章主要討論了在Vue框架中使用push操作向數(shù)組添加對象時遇到的值值改變問題,并提出了通過深拷貝解決該問題的方法,強(qiáng)調(diào)了正確使用深拷貝的重要性2026-05-05
在Vue2中,由于數(shù)據(jù)響應(yīng)式是利用object.definedProperty()實現(xiàn)的,無法深層監(jiān)聽數(shù)據(jù)變化,因此提供了$set方法來解決數(shù)據(jù)變化視圖未實時更新的問題,然而,在Vue3中,數(shù)據(jù)響應(yīng)式使用ES6的proxy進(jìn)行數(shù)據(jù)代理,因此廢棄了$set的概念2024-10-10
本文給大家分享了VUE制作點擊按鈕出現(xiàn)水波紋效果的組件過程，對此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04
Vue.js?的計算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)
在Vue.js開發(fā)中,計算屬性與偵聽器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計算屬性和偵聽器：提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧2025-04-04
Vue-admin-template?報Uncaught?(in?promise)?error問題及解決
這篇文章主要介紹了Vue-admin-template?報Uncaught?(in?promise)?error問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文會通過一個簡單的vue-toast插件，來幫助了解掌握插件的開發(fā)和使用。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03