vue項(xiàng)目如何解決數(shù)字計(jì)算精度問(wèn)題
vue項(xiàng)目數(shù)字計(jì)算精度問(wèn)題
js計(jì)算精度問(wèn)題解決步驟
1.進(jìn)入指定項(xiàng)目 終端安裝依賴(lài)：
npm install mathjs --save
2.引入依賴(lài)包，在需要解決精度問(wèn)題的頁(yè)面引入
mathjs： const math = require(‘mathjs')
使用math.format方法
math.format(a*b,num)
a,b表示需要計(jì)算的兩個(gè)數(shù)，可以進(jìn)行加減乘除平方等等計(jì)算
num表示精度，最大為14，表示單一文本框最大的數(shù)字位數(shù)，包括小數(shù)點(diǎn)前后，如
如果用戶(hù)輸入99.9999(6個(gè)9)
- 當(dāng)num為5時(shí)，輸入的數(shù)字顯示為99.999
- 當(dāng)num為6時(shí)，輸入的數(shù)字顯示為99.9999
- 當(dāng)num大于6時(shí)，輸入的數(shù)字顯示為99.9999
vue處理超過(guò)16位數(shù)字精度丟失問(wèn)題
當(dāng)我們使用MyBatis-Plus 使用 ID_WORKER 或者 ASSIGN_ID(雪花算法) 生成的id作為主鍵時(shí)，因?yàn)槠溟L(zhǎng)度,為19位，而前端一般能處理16位，如果不處理的話(huà)在前端會(huì)造成精度丟失，最后兩位會(huì)變成00
如下圖，感覺(jué)像是四舍五入后的效果
處理這種問(wèn)題有兩種方案，要么后端出處理，要么前端處理
后端處理
直接把id類(lèi)型改為String就行，這樣是可以，但是我們?nèi)绻且肔ong呢？
我們可以給對(duì)應(yīng)的實(shí)體類(lèi)主鍵屬性加入注解@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ù)請(qǐng)求，我們通過(guò)引入json-bigint來(lái)解決
yarn add json-bigint //或 npm install json-bigint
在封裝的請(qǐng)求工具類(lèi)中添加如下代碼即可。
axios.defaults.transformResponse = [
function (data) {
const json = JSONBIG({
storeAsString: true
})
const res = json.parse(data)
return res
}
]
兩種方案皆可。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法
這篇文章主要介紹了Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了關(guān)于vant的時(shí)間選擇器使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue路由嵌套的SPA實(shí)現(xiàn)步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue項(xiàng)目實(shí)現(xiàn)按鈕可隨意移動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)按鈕可隨意移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經(jīng)幫我們控制臺(tái)輸出警告，并且不會(huì)讓組件中的data合并到options中去，那么，很友好的處理了開(kāi)發(fā)者的強(qiáng)行將data寫(xiě)成對(duì)象的可能性，需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)移動(dòng)端input上傳視頻、音頻
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端input上傳視頻、音頻，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷
這篇文章主要介紹了Vue-Cli如何在index.html中進(jìn)行環(huán)境判斷問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐
本文主要介紹了Vue使用Tinymce富文本自定義toolbar按鈕，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12