数据库自增 id 过大导致前端时数据丢失

news2025/1/6 0:12:22

可以看到,前端响应参数是没有丢失精度的

 但是在接受 axios 请求参数时出现了精度丢失

解决方案一:改变 axios 字符编码

axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';

 未解决

解决方案二:手动使用 json.parse() 方法还原响应数据

axios.defaults.transformResponse = [];
const articles = ref(null);

function safeJsonParse(jsonStr) {
    const regex = /"(\w+)":([^,}]+)/g;
    let match;
    let result = '';
    let index = 0;
    while ((match = regex.exec(jsonStr))!== null) {
        const key = match[1];
        let value = match[2];
        if (key === 'id' && /^\d+$/.test(value)) {
            const numValue = Number(value);
            if (numValue > Number.MAX_SAFE_INTEGER) {
                value = `"${value}"`;
            }
        }
        result += jsonStr.slice(index, match.index) + `"${key}":${value}`;
        index = regex.lastIndex;
    }
    result += jsonStr.slice(index);
    return JSON.parse(result);
}

const getPostArticles = async () => {
    const res = await axios({
        method: 'post',
        url: '/articles',
        data: {
            page: 1,
            pageSize: 10
        }
    });
    const parsedData = safeJsonParse(res.data); // 手动解析响应数据
    console.log('手动解析后的原始响应数据:', parsedData);
    articles.value = parsedData.data;
    console.log('articles数组为',articles);
};

成功拿到一整个响应的对象,数据没有丢失

但是引发了新的问题,在跳转到文章详情页面后,文章详情发送请求成功却没有正确赋值

找到错误点,整个项目是用的同一个 axios 实例对象,当这个对象开启手动处理响应的 json 参数后,每一个 axios 请求都需要手动处理了

解决方案,请求的 axios 独立出来,选择使用新创建的 axios 实例来发送异步请求 

import axios from 'axios';

// 创建自定义的 axios 实例
const customAxios = axios.create({
  baseURL: 'http://localhost:8888',
  timeout: 5000
});
//开启自定义处理响应
customAxios.defaults.transformResponse = [];

// 获取文章列表的函数
const getPostArticles = async () => {
  try {
    const res = await customAxios.post('/articles', {
      page: 1,
      pageSize: 10
    });
    const parsedData = safeJsonParse(res.data);
    console.log('手动解析后的原始响应数据:', parsedData);
    articles.value = parsedData.data;
    console.log('articles 数组为', articles);
  } catch (error) {
    console.error('获取文章列表失败:', error);
  }
};

这个 axios 实例只为这一个页面服务

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2270636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32-笔记19-串口打印功能

复制项目文件夹03-流水灯,重命名为19-串口打印功能 打开项目 在主函数中,添加头文件、和串口初始化函数(设置波特率)和输出函数,如图所示: 软件部分就设置好了 下面是硬件部分 接线:使用USB…

GPU 进阶笔记(四):NVIDIA GH200 芯片、服务器及集群组网

大家读完觉得有意义记得关注和点赞!!! 1 传统原厂 GPU 服务器:Intel/AMD x86 CPU NVIDIA GPU2 新一代原厂 GPU 服务器:NVIDIA CPU NVIDIA GPU 2.1 CPU 芯片:Grace (ARM)2.2 GPU 芯片:Hopper/B…

黑马Java面试教程_P10_设计模式

系列博客目录 文章目录 系列博客目录前言1. 工厂方法模式1.1 概述1.2 简单工厂模式1.2.1 结构1.2.2 实现1.2.3 优缺点 1.3 工厂方法模式1.3.1 概念1.3.2 结构1.3.3 实现1.3.4 优缺点 1.4 抽象工厂模式1.4.1 概念1.4.2 结构1.4.3 实现1.4.4 优缺点1.4.5 使用场景 总结&#xff0…

RSA e与phi不互质(AMM算法进行有限域开根)

e与phi不互质 这一部分学习来自trup师傅的博客 针对CTFer的e与phi不互素的问题 - 跳跳糖 1&#xff1a;m^t<n from Crypto.Util.number import * from secret import flag flag bflag{*********} m bytes_to_long(flag) p getPrime(1024) q getPrime(1024) n p * q …

计算机体系结构期末复习3:GPU架构及控制流问题

目录 一、GPU设计思路 1.简化流水线、增加核数 2.单指令多线程&#xff08;SIMT&#xff09; 3.同时驻留大量线程 4.总思路&#xff1a;多线程单指令多线程 二、GPU的控制流问题 1.什么是控制流问题 2.怎么应对分支分歧 一、GPU设计思路 1.简化流水线、增加核数 2.单指…

【最新】沃德协会管理系统源码+uniapp前端+环境教程

一.系统介绍 一款基于FastAdminThinkPHPUniapp开发的商协会系统&#xff0c;新一代数字化商协会运营管理系统&#xff0c;以“智慧化会员体系、智敏化内容运营、智能化活动构建”三大板块为基点&#xff0c;实施功能全场景覆盖&#xff0c;一站式解决商协会需求壁垒&#xff0…

《机器学习》——线性回归模型

文章目录 线性回归模型简介一元线性回归模型多元线性回归模型误差项分析一元线性模型实例完整代码 多元线性模型实例完整代码 线性回归模型简介 线性回归是利用数理统计中回归分析&#xff0c;来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法。 相关关系&…

数字图像总复习

目录 一、第一章 二、第三章 三、第四章 四、第五章 五、第八章 六、第十章 作业一 作业二 一、第一章 1.图像文件格式由&#xff08;文件头&#xff09;及&#xff08;图像数据&#xff09;组成 2.常见的图像文件格式&#xff1a;&#xff08;JPEG&#xff09;、&…

数据中台与数据治理服务方案[50页PPT]

本文概述了数据中台与数据治理服务方案的核心要点。数据中台作为政务服务数据化的核心&#xff0c;通过整合各部门业务系统数据&#xff0c;进行建模与加工&#xff0c;以新数据驱动政府管理效率提升与政务服务能力增强。数据治理则聚焦于解决整体架构问题&#xff0c;确保数据…

革新排版机产线:一体式IO模块引领自动化高效控制新时代

在瞬息万变的制造业浪潮中&#xff0c;自动化与智能化已成为推动产业升级的关键力量。特别是在印刷行业&#xff0c;排版机的效率与精度直接关系到产品的质量与市场竞争力。近年来&#xff0c;随着技术的不断革新&#xff0c;明达技术MR20一体式IO模块凭借其高度集成、灵活配置…

vulnhub靶场【Hogwarts】之bellatrix

前言 靶机&#xff1a;hotwarts-dobby&#xff0c;ip地址为192.168.1.69 攻击&#xff1a;kali&#xff0c;ip地址为192.168.1.16 都采用虚拟机&#xff0c;网卡为桥接模式 主机发现 使用arp-scan -l或netdiscover -r 192.168.1.1/24扫描发现主机 信息收集 使用nmap扫描端…

【数据结构】链表(1):单向链表和单向循环链表

链表 链表是一种经典的数据结构&#xff0c;它通过节点的指针将数据元素有序地链接在一起&#xff0c;在链表中&#xff0c;每个节点存储数据以及指向其他节点的指针&#xff08;或引用&#xff09;。链表具有动态性和灵活性的特点&#xff0c;适用于频繁插入、删除操作的场景…

[实用指南]如何将视频从iPhone传输到iPad

概括 将视频从 iPhone 传输到 iPad 时遇到问题&#xff1f;您可能知道一种方法&#xff0c;但不知道如何操作。此外&#xff0c;您要传输的视频越大&#xff0c;完成任务就越困难。那么如何将视频从 iPhone 传输到 iPad&#xff0c;特别是当您需要发送大视频文件时&#xff1f…

GAN对抗生成网络(一)——基本原理及数学推导

1 背景 GAN(Generative Adversarial Networks)对抗生成网络是一个很巧妙的模型&#xff0c;它可以用于文字、图像或视频的生成。 例如&#xff0c;以下就是GAN所生成的人脸图像。 2 算法思想 假如你是《古董局中局》的文物造假者&#xff08;Generator,生成器&#xff09;&a…

利用 NineData 实现 PostgreSQL 到 Kafka 的高效数据同步

记录一次 PostgreSQL 到 Kafka 的数据迁移实践。前段时间&#xff0c;NineData 的某个客户在一个项目中需要将 PostgreSQL 的数据实时同步到 Kafka。需求明确且普遍&#xff1a; PostgreSQL 中的交易数据&#xff0c;需要实时推送到 Kafka&#xff0c;供下游多个系统消费&#…

在 C# 中优化 JPEG 压缩级别和文件大小

此示例可让您检查不同 JPEG 压缩级别的图像质量。使用文件菜单的打开命令加载图像文件。然后使用“JPEG 压缩指数 (CI)”组合框选择压缩级别。程序将图像保存到具有该压缩级别的临时文件中&#xff0c;并显示生成的图像和文件大小。 该程序的关键是以下SaveJpg方法&#xff0c;…

【PCIe 总线及设备入门学习专栏 4.1 -- PCI 总线的地址空间分配】

文章目录 Overview 本文转自&#xff1a;https://blog.chinaaet.com/justlxy/p/5100053219 Overview PCI 总线具有32位数据/地址复用总线&#xff0c;所以其存储地址空间为 2324GB。也就是PCI上的所有设备共同映射到这4GB上&#xff0c;每个PCI设备占用唯一的一段PCI地址&…

Linux系统离线部署MySQL详细教程(带每步骤图文教程)

1、登录官网下载对应的安装包 MySQL :: Developer Zone 2、将压缩包上传到服务器上&#xff0c;这里直接上传到/usr/local路径上 使用sftp工具上传到/usr/local目录上 3、解压压缩包 tar -xf mysql-8.0.39-linux-glibc2.17-x86_64.tar.xz 4、将mysql-8.0.39-linux-glibc2.17…

基于python的ai五子棋游戏

游戏 运行代码后&#xff0c;点击"Enable AI Opponent"按钮&#xff0c;AI将作为白棋自动下棋。 玩家作为黑棋&#xff0c;点击棋盘落子。 AI会根据当前棋盘局势自动选择落子位置。 界面 代码 import tkinter as tk from tkinter import messageboxBOARD_SIZE 15…

STM32 软件I2C读写

单片机学习&#xff01; 目录 前言 一、软件I2C读写代码框架 二、I2C初始化 三、六个时序基本单元 3.1 引脚操作的封装和改名 3.2 起始条件执行逻辑 3.3 终止条件执行逻辑 3.4 发送一个字节 3.5 接收一个字节 3.5 发送应答&接收应答 3.5.1 发送应答 3.5.2 接…