vue項目如何解決數(shù)字計算精度問題
更新時間：2023年10月10日 09:11:03 作者：前端小白在寫bug
這篇文章主要介紹了vue項目如何解決數(shù)字計算精度問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目數(shù)字計算精度問題
js計算精度問題解決步驟
1.進入指定項目 終端安裝依賴：
npm install mathjs --save
2.引入依賴包，在需要解決精度問題的頁面引入
mathjs： const math = require(‘mathjs')
使用math.format方法
math.format(a*b,num)
a,b表示需要計算的兩個數(shù)，可以進行加減乘除平方等等計算
num表示精度，最大為14，表示單一文本框最大的數(shù)字位數(shù)，包括小數(shù)點前后，如
如果用戶輸入99.9999(6個9)
- 當num為5時，輸入的數(shù)字顯示為99.999
- 當num為6時，輸入的數(shù)字顯示為99.9999
- 當num大于6時，輸入的數(shù)字顯示為99.9999
vue處理超過16位數(shù)字精度丟失問題
當我們使用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進行數(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項目添加動態(tài)瀏覽器頭部title的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了關(guān)于vant的時間選擇器使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家詳細介紹了vue路由嵌套的SPA實現(xiàn)步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)按鈕可隨意移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經(jīng)幫我們控制臺輸出警告，并且不會讓組件中的data合并到options中去，那么，很友好的處理了開發(fā)者的強行將data寫成對象的可能性，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端input上傳視頻、音頻，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Vue-Cli如何在index.html中進行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進行環(huán)境判斷問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue使用Tinymce富文本自定義toolbar按鈕的實踐
本文主要介紹了Vue使用Tinymce富文本自定義toolbar按鈕，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12