vue项目通过json-bigint在前端处理java雪花id过长导致失去精度问题
这里 我简单模仿了一个接口
这里 我单纯 返回一个long类型的雪花id
然后 前端 用 axios 去请求
大家知道 axios 会对请求数据做一次处理 而我们 data才是拿到我们java这边实际返回的东西 简单说 就是输出一下我们后端返回 的内容
这里 我们网络中显示的是 358661018680954880
但神奇的一幕 发生了 我们实际输出的是 358661018680954900
这个问题 我之前的文章也解释过 这叫 java雪花id超长 导致前端接受失去精度
因为 前端js的数字类型 number 最大容量小于 java的long
导致 无法负载的值被四舍五入了
我之前说过 后端解决 直接转字符串即可
但其实 前端也可以通过第三方插件 json-bigint来处理此问题
我们还是先安装依赖
终端输入
npm install json-bigint
然后 我们可以修改一下发送请求的代码
<script>
import axios from "axios";
import JSONbig from 'json-bigint';export default {name: 'App',data(){return {}},created(){axios({url: '/books',headers: {// 可以根据需要设置请求头},// 使用transformResponse选项将响应数据进行自定义处理transformResponse: [(data) => {// 使用JSONbig对返回的数据进行处理return JSONbig.parse(data);}]}).then(res => {console.log(res.data);}).catch(error => {console.log(error);});},
}
</script>
简单说 就是 在axios的transformResponse中 用json-bigint提供的parse函数去处理一下
这样 我们返回的内容如果过程 他就会帮我们分段处理
放不下 他会帮我们分成数组
例如 一个对象中 id超长 那么 原来的id字段就会变成一个这样的数据 放不下就帮你分成两个数组下标 到时 你自己再拼合一下就好了
然后 我们想将数据传回给后端 我们可以先将他们处理成字符串
例如 我们将 then 函数中的内容改成这样
let id = res.data.c.join("");
console.log(id);
我们 拿到 c的数组
然后 将他拼成字符串
我们运行项目 看网络
然后看控制台
然后 这里一个知识点 BigInt js另一个种数字类型 而他的容量是要比Number大的
我们引入一下第三方依赖
npm install big-integer
然后 我们将代码改成这样
<script>
import axios from "axios";
import JSONbig from 'json-bigint';
import bigInt from 'big-integer';export default {name: 'App',data(){return {}},created(){axios({url: '/books',headers: {// 可以根据需要设置请求头},// 使用transformResponse选项将响应数据进行自定义处理transformResponse: [(data) => {// 使用JSONbig对返回的数据进行处理return JSONbig.parse(data);}]}).then(res => {let id = res.data.c.join("");id = bigInt(id);console.log(id);}).catch(error => {console.log(error);});},
}
</script>
这里 我们用big-integer处理超长数字类型的数据
运行结果如下
这里这个value 就是我们要的东西了
但其实 如果你想把id还给后端 就不需要big-integer了
我们直接换字符串 后端的long 会自动转换的 例如 这里我们写个属性类
就一个字段 是个long类型的id字段
然后我在写个接口
接收前端传过来的 一个 属性类对象 就是只有一个long id字段的属性类的对象
然后 前端直接改成这样
<script>
import axios from "axios";
import JSONbig from 'json-bigint';
//import bigInt from 'big-integer';export default {name: 'App',data(){return {}},created(){axios({url: '/books',headers: {// 可以根据需要设置请求头},// 使用transformResponse选项将响应数据进行自定义处理transformResponse: [(data) => {// 使用JSONbig对返回的数据进行处理return JSONbig.parse(data);}]}).then(res => {let id = res.data.c.join("");axios.post('/books', { id: id }).then(res => {console.log(res.data);}).catch(error => {console.log(error);});}).catch(error => {console.log(error);});},
}
</script>
这里 我们处理成字符串后 马上就调用 post请求 将字符串id仍会给了后端
那么 我们这个id是字符串类型的 而java属性类中是用 long接的
能行吗?
我们直接运行
前端控制台 可以看到传了一个对象 其中有一个字段 字符串的id
我们看java控制台
很明显 他已经自动帮我们 让字符串变成 long了
相关文章:

vue项目通过json-bigint在前端处理java雪花id过长导致失去精度问题
这里 我简单模仿了一个接口 这里 我单纯 返回一个long类型的雪花id 然后 前端 用 axios 去请求 大家知道 axios 会对请求数据做一次处理 而我们 data才是拿到我们java这边实际返回的东西 简单说 就是输出一下我们后端返回 的内容 这里 我们网络中显示的是 35866101868095488…...

【全志V3s】SPI NAND Flash 驱动开发
文章目录 一、硬件介绍V3s的启动顺序 二、驱动支持U-Boot驱动主线 Linux 驱动已经支持 三、烧录工具 xfel四、构建U-Boot(官方的Uboot)先编译一下开始spi nand flash 代码层面的适配修改menuconfig配置ARM architecture配置Support for SPI Nand Flash o…...

【二叉树】二叉树展开为链表-力扣 114 题
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

NLP文本生成全解析:从传统方法到预训练完整介绍
目录 1. 引言1.1 文本生成的定义和作用1.2 自然语言处理技术在文本生成领域的使用 2 传统方法 - 基于统计的方法2.1.1 N-gram模型2.1.2 平滑技术 3. 传统方法 - 基于模板的生成3.1 定义与特点3.2 动态模板 4. 神经网络方法 - 长短时记忆网络(LSTM)LSTM的核心概念PyTorch中的LST…...

OpenBA:开源模型家族再添一员!从头训练的15B中英非对称Encoder-Decoder结构双语模型...
苏州大学从头训练的双语非对称Encoder-Decoder模型OpenBA已正式开源! 主要亮点包括: 亮点一:此模型为中文开源社区贡献了一个有代表性的编码器解码器大语言模型,其训练过程(包括数据收集与清洗、模型构建与训练&#x…...

安防视频监控平台EasyNVR无法控制云台,该如何解决?
TSINGSEE青犀视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入,并能对接入的视频流进行处理与多端分发,包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。在智慧安防等视频监控场景中,EasyNVR可提供视频实时监控直播、云端…...

基座向量施密特正交化
最近再次细细的阅读了向量施密特正交化,重新系统梳理一下 一、正交基地与向量的正交分解 二、基化成标准正交基,是什么意思 将一个向量空间中的基向量通过某种方式转化为一组标准正交基,是指将原有的基向量进行调整,使得它们满足…...

OpenCV图像金字塔
什么是图像金字塔? 向上采样 :cv.pyrUp(img) 向下采样 : cv.pyrDown(img) 代码实现 import numpy as np import cv2 as cv import matplotlib.pyplot as plt#图像的读取 img cv.imread("lena.png")#进行图像采样 up_img cv.pyrUp(img) #上…...

Arduino驱动MMA7361/MMA7360三轴加速度传感器(惯性测量传感器篇)
目录 1、传感器特性 2、控制器和传感器连线图 3、驱动程序 MMA7361三轴加速度传感器是替代停产的MMA7260三轴加速度传感器,三轴加速度传感器是一种可以对物体运动过程中的加速度进行测量的电子设备,典型互动应用中的加速度传感器可以用来对物体的姿态或者运动方向进行检测…...

ceph分布式存储
目录 一、概述 1、特点 2、组件 3、架构图 二、分布式部署 1、环境拓扑 2、实验准备 3、ceph安装 安装 初始化monitor 同步管理信息 安装mgr(管理守护进程) 安装rgw 创建mds服务 OSD安装 4、dashboard安装 开启dashboard模块 生成签名 …...

DA1--用pandas查看网站用户数据
目录 1.题目描述 2.输入描述 3.输出描述 4.题目分析 5.通过代码 1.题目描述 现有一个Nowcoder.csv文件,它记录了牛客网的部分用户数据,包含如下字段(字段与字段之间以逗号间隔): Nowcoder_ID:用户ID …...
JWT令牌
一、JWT(Json Web Token)能干什么 1、安全认证(权限认证) 比如登录系统的时候,服务器会检查前端请求数据中携带的token信息,符合标准则允许访问,不符合则拒绝你的访问请求。 2、信息传递 比…...
uni-app使用CSS实现无限旋转动画
本来想用uni.createAnimation创建一个旋转动画,发现转完一圈后就不动了,没法循环旋转, 后来又用setInterval每隔一个周期就把旋转角度加180度,发现运行一段时间后动画逐渐崩坏,应该是动画的周期和定时器的周期时间没有…...

java面向对象(八)
文章目录 一、abstract关键字的使用1.概念2. abstract修饰类:抽象类3.abstract修饰方法,抽象方法4.abstract使用上的注意点:5.抽象类的匿名子类 二、计算一段代码执行所花费的时间三、接口的使用1.接口的使用2.定义接口中的成员3.代码demo4.Java类可以实…...

【proverif】proverif的下载安装和初使用
文章目录 一、proverif下载1. 下载proverif安装包2. 解压proverif安装包3. 点开其中的README,安装graphciz和gtk4. 查看安装是否成功5. 测试 一、proverif下载 1. 下载proverif安装包 官网:proverif 首先下载全过程无需开外网,而且安装包下…...

浙江大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许
浙江大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许...

Centos7.9 一键脚本部署 LibreNMS 网络监控系统
前言: LibreNMS 是个以 PHP/MySQL 为基底的自动探索网络监控系统 LibreNMS 官网 版本23.8.2-52-g7bbe0a2 - Thu Sep 14 2023 22:33:23 GMT0700数据库纲要2023_09_01_084057_application_new_defaults (259)Web 服务器nginx/1.20.1PHP8.1.23Python3.6.8DatabaseMa…...

【大数据之Kafka】十六、Kafka集成外部系统之集成Flume
Flume 是一个在大数据开发中非常常用的组件。可以用于 Kafka 的生产者,也可以用于 Kafka 的消费者。 Flume安装和部署:https://blog.csdn.net/qq_18625571/article/details/131678589?spm1001.2014.3001.5501 1 Flume生产者 (1)…...
java学习--day3 (运算符、if循环、switch-case结构)
文章目录 今天的内容1.运算符1.1关系运算符1.2逻辑运算符1.3逻辑运算符的短路原则 2.分支结构【重点】2.1if分支2.2if-else分支2.3if-else的嵌套写法2.4if-else if 分支结构2.5swicth-case结构 扩展知识点 1.八大基本数据类型整型: byte short int long浮点: float double字…...

ActiveMQ、RabbitMQ、RocketMQ、Kafka区别
一、消息中间件的使用场景 消息中间件的使用场景总结就是六个字:解耦、异步、削峰 1.解耦 如果我方系统A要与三方B系统进行数据对接,推送系统人员信息,通常我们会使用接口开发来进行。但是如果运维期间B系统进行了调整,或者推送…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...

【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...