首页 > 其他分享 >VUE - bigint解决前端精度丢失的问题

VUE - bigint解决前端精度丢失的问题

时间:2024-04-09 11:33:24浏览次数:17  
标签:yarn VUE 前端 authStr Long add bigint 丢失

VUE - bigint解决前端精度丢失的问题

问题描述

java后端long类型的范围

  • -2^63~2^63,即:-9223372036854775808~9223372036854775807,它是19位的。

  • 这个数字可以通过方法获得:Long.MAX_VALUE、Long_MIN_VALUE。

前端JS的数字类型的范围

  • -2^53~2^53,即:-9007199254740991~9007199254740991,它是16位的。

  • 这个数字可以通过方法获得:Number.MAX_SAFE_INTEGER、Number.MIN_SAFE_INTEGER。

结论

可见,Java后端的Long宽度大于前端的。雪花算法一般会生成18位或者19位宽度的数字,那么这时就会出问题。

 

1. 安装 插件

yarn add big-int 
yarn add json-bigint
yarn add bignumber.js

 

 

 2. 使用

var bigInt = require("big-int");
 let senceId = bigInt(a.SenceIdString);  

 

 

import BigNumber from 'bignumber.js';
let senceId= new BigNumber(10000000008214144);

 

 

axios接口调用返回值转换 

import JSONBIG from "json-bigint";

export async function api_GetFilesWithAuth(authStr) {
    const res = await axios({
      url: `${assistURL}/api/TFiles/GetFilesWithAuthAsync`,
      methods: 'get',
      params: {
        authStr: authStr,
      },
      transformResponse: [
        function (data) {
          // 对 data 进行任意转换处理
          debugger;
          const jsonTruns = JSONBIG({
            // storeAsString: true,
          });
          return jsonTruns.parse(data);
        },
      ],

    });
    return res;
  }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end.

标签:yarn,VUE,前端,authStr,Long,add,bigint,丢失
From: https://www.cnblogs.com/1285026182YUAN/p/18123532

相关文章

  • 外接存储设备数据丢失怎么办?(2024年恢复策略)
    在数字化时代,外接存储设备已经成为我们生活和工作中不可或缺的一部分。然而,无论是因为意外删除、格式化、病毒感染还是设备故障,数据丢失都可能是我们不得不面对的问题。当外接存储设备中的数据突然消失时,我们往往会感到焦虑和无助。本文旨在为大家提供关于外接存储设备数据丢失......
  • 基于Java+SpringBoot+Vue前后端分离大学生校园兼职求职招聘信息系统(适合毕业设计项目
    文章目录目录前言一、系统设计1、系统运行环境2.系统架构设计二、系统核心技术三.系统功能实现四.实现代码五.源码获取前言 本文旨在探讨并设计一个基于Springboot框架的大学生校园兼职求职招聘信息系统。该系统的设计与实现,旨在满足大学生寻找兼职工作的......
  • Vue中实现输入框的自动补全功能
    一、百度文心一言的结果在Vue中实现输入框的自动补全功能,可以使用原生的input事件监听用户的输入,并通过计算属性或方法来提供匹配的自动补全建议。以下是一个简单的例子:<template><div><inputtype="text"v-model="userInput"@input="updateSuggestions"><ulv-......
  • Vscode设置自动生成vue页面代码块
    1.ctrl+shift+p 2. 输入snippet->首选项:配置用户代码片段 3. 输入vue,选择vue.json(vue) 4.输入下面代码:"Printtoconsole":{      "prefix":"vue",    "body":[      "<template>",      &qu......
  • vue项目的运行流程
    assets文件夹:存放项目中用到的静态资源文件,例如:css样式表、图片资源components文件夹:程序员封装的、可复用的组件,都要放到components目录下main.js是项目的入口文件。整个项目的运行,要先执行main.jsApp.vue是项目的根组件。在工程化的项目中,vue要做的事情很单纯:通过ma......
  • 基于SpringBoot+MySQL+SSM+Vue.js的生鲜在线销售系统(附论文)
    演示视频基于SpringBoot+MySQL+SSM+Vue.js的生鲜在线销售系统技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的生鲜在线销售系统(附......
  • 用vue.js写案例——ToDoList待办事项 (步骤和全码解析)
     目录 一.准备工作二.编写各个组件的页面结构三.实现初始任务列表的渲染四.新增任务五.删除任务六.展示未完成条数七.切换状态-筛选数据八.待办事项(全)代码 一.准备工作在开发“ToDoList”案例之前,需要先完成一些准备工作,包括创建项目、引入BootStrap样式文......
  • 基于SpringBoot+MySQL+SSM+Vue.js的招聘系统(附论文)
    演示视频基于SpringBoot+MySQL+SSM+Vue.js的招聘系统技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基于SpringBoot+MySQL+SSM+Vue.js的招聘系统(附论文),用户,管理员......
  • 前端【Vuex】【使用介绍】
    1、组件下载vue与vuex的版本对应关系: Vue2匹配的Vuex3 Vue3匹配的Vuex4Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。官方网......
  • 1.引入vue.js
    Vue2: https://v2.cn.vuejs.org/Vue3:https://cn.vuejs.org/在页面中通过script引入vue.js 方式一:下载vue.js  在文件中通过绝对路径引用 方式2:引用在线vue.js  ......