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系统进行了调整,或者推送…...

DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
redis和redission的区别
Redis 和 Redisson 是两个密切相关但又本质不同的技术,它们扮演着完全不同的角色: Redis: 内存数据库/数据结构存储 本质: 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能: 提供丰…...
API网关Kong的鉴权与限流:高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中,API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关,Kong凭借其插件化架构…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...