当前位置: 首页 > news >正文

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

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

 但是在接受 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 实例只为这一个页面服务

相关文章:

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

可以看到,前端响应参数是没有丢失精度的 但是在接受 axios 请求参数时出现了精度丢失 解决方案一:改变 axios 字符编码 axios.defaults.headers[Content-Type] application/json;charsetUTF-8; 未解决 解决方案二:手动使用 json.parse() …...

第二十六天 自然语言处理(NLP)词嵌入(Word2Vec、GloVe)

自然语言处理(NLP)中的词嵌入(Word2Vec、GloVe)技术,是NLP领域的重要组成部分,它们为词汇提供了高维空间到低维向量的映射,使得语义相似的词汇在向量空间中的距离更近。以下是对这些技术的详细解…...

MongoDB 固定集合

MongoDB 固定集合 MongoDB中的固定集合(Capped Collections)是一种具有固定大小的集合,当集合中的数据达到其最大大小时,它会自动覆盖最早的文档。这种类型的集合在MongoDB中用于实现高效的、固定大小的循环缓冲区。本文将详细介…...

数据结构9.3 - 文件基础(C++)

目录 1 打开文件字符读写关闭文件 上图源自&#xff1a;https://blog.csdn.net/LG1259156776/article/details/47035583 1 打开文件 法 1法 2ofstream file(path);ofstream file;file.open(path); #include<bits/stdc.h> using namespace std;int main() {char path[]…...

Leetcode 1254 Number of Closed Islands + Leetcode 1020 Number of Enclaves

Leetcode 1254 题意 给定一个m*n的矩阵含有0和1&#xff0c;1代表水&#xff0c;0代表陆地&#xff0c;岛屿是陆地的集合&#xff0c;如果一个岛屿和四个方向的边界相连&#xff0c;则不算封闭岛屿。求有多少个封闭的岛屿。 题目链接 https://leetcode.com/problems/number…...

Junit4单元测试快速上手

文章目录 POM依赖引入业务层测试代码Web层测试代码生成测试类文件 在工作中我用的最多的单元测试框架是Junit4。通常在写DAO、Service、Web层代码的时候都会进行单元测试&#xff0c;方便后续编码&#xff0c;前端甩锅。 POM依赖引入 <dependency><groupId>org.spr…...

U盘提示格式化?原因、恢复方案与预防措施全解析

一、U盘提示格式化现象概述 在日常使用U盘的过程中&#xff0c;我们有时会遇到一个令人头疼的问题——U盘插入电脑后&#xff0c;系统却弹出一个提示框&#xff0c;告知我们U盘需要格式化才能访问。这个提示往往伴随着数据的潜在丢失风险&#xff0c;让我们不禁为之心焦。U盘提…...

HTML——13.超链接

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>超链接</title></head><body><!--超链接:从一个网页链接到另一个网页--><!--语法&#xff1a;<a href"淘宝网链接的地址"> 淘宝…...

vue中的设计模式

vue中使用了哪些设计模式 1. 观察者模式&#xff08;Observer Pattern&#xff09; 应用场景&#xff1a;Vue 的响应式系统核心就是观察者模式。 实现方式&#xff1a;通过 Object.defineProperty 或 Proxy 监听数据变化&#xff0c;当数据发生变化时&#xff0c;通知依赖的视…...

利用python将图片转换为pdf格式的多种方法,实现批量转换,内置模板代码,全网最全,超详细!!!

文章目录 前言1、img2pdf库的使用1.1 安装img2pdf库1.2 案例演示&#xff08;模板代码&#xff09; 2、Pillow库的使用2.1 pillow库的安装2.2 案例演示&#xff08;模板代码&#xff09; 3、PyMuPDF库的使用3.1 安装pymupdf库3.2 案例演示&#xff08;模板代码&#xff09;3.3 …...

tcpdump的常见方法

详解tcpdump的使用方法&#xff1a;网络数据包捕获与分析 tcpdump是一个功能强大的命令行工具&#xff0c;用于捕获和分析通过网络接口传输的数据包。它广泛应用于网络故障诊断、网络安全监控和协议分析等领域。本文将详细介绍tcpdump的使用方法&#xff0c;包括安装、基本命令…...

工控主板ESM7000/6800E支持远程桌面控制

英创公司ESM7000 是面向工业领域的双核 Cortex-A7 高性能嵌入式主板&#xff0c;ESM6800E则为单核Cortex-A7 高性价比嵌入式主板&#xff0c;ESM7000、ESM6800E都是公司的成熟产品&#xff0c;已广泛应用于工业很多领域。ESM7000/6800E板卡中Linux系统配置为linux-4.9.11内核、…...

wamp php7.4 运行dm8

背景 1、电脑安装了dm8&#xff0c;具体参照官网dm8安装 2、安装好了wamp&#xff0c;我当前的php版本切换成了7.4的&#xff0c;我wamp的安装路径d:\wamp64\ 操作 3、查看phpinfo&#xff0c;如果Thread Safet为enabled&#xff0c;则选择pdo74_dm.dll&#xff0c;否则选择…...

HTML5 进度条(Progress Bar)详解

HTML5 进度条&#xff08;Progress Bar&#xff09;详解 进度条是用于显示任务完成进度的控件&#xff0c;常用于加载、上传或下载等操作。HTML5提供了原生的<progress>元素&#xff0c;使得创建进度条变得简单和直观。 1. 基本用法 <progress>元素的基本语法如…...

LabVIEW开发中常见硬件通讯接口快速识别

在 LabVIEW 开发中&#xff0c;与硬件进行通讯是实现数据采集与控制的重要环节。准确判断通讯接口类型和协议&#xff0c;可以提高开发效率&#xff0c;减少调试时间。本文结合 LabVIEW 的实际应用&#xff0c;详细介绍如何识别和判断常见硬件通讯接口的定义&#xff0c;并提供…...

高频 SQL 50 题(基础版)_1068. 产品销售分析 I

销售表 Sales&#xff1a; (sale_id, year) 是销售表 Sales 的主键&#xff08;具有唯一值的列的组合&#xff09;。 product_id 是关联到产品表 Product 的外键&#xff08;reference 列&#xff09;。 该表的每一行显示 product_id 在某一年的销售情况。 注意: price 表示每…...

笔记:一次mysql主从复制延迟高的处理尝试

背景 mysql 5.7 主从复制 主库进行了一次灌数&#xff0c;导致多个大事务产生&#xff0c;主从延迟下不去&#xff0c;经确认该表最终truncate&#xff0c;并且该表仅有insert和select操作&#xff0c;故对该表的事务进行跳过&#xff0c;直到同步至truncate 跳过事务需谨慎&…...

基于C语言的卡丁车管理系统【控制台应用程序】

注意&#xff1a;需要提前创建对应的.dat文件 本项目实现了数据的永久存储&#xff0c;有用户的注册、登录。 管理员对卡丁车的管理、查看预约用户、修改帐户权限。 用户对个人信息的管理、查看并预约卡丁车、卡丁车维修上报。 维修员对卡丁车的维修状态上报、个人信息管理。 …...

Docker 搭建 Gogs

Docker 搭建 Gogs 准备工作 先准备配置目录和持久化目录&#xff0c;举个栗子&#xff1a;mkdir -p /opt/module/gogs/{data,backup} 拉取官方Gogs镜像 # 拉取 gogs:0.13 docker pull gogs/gogs:0.13 # 拉取最新版 gogs 镜像 docker pull gogs/gogs启动一个临时容器【通过创…...

PostgreSQL的备份方式

PostgreSQL 提供多种方式进行备份&#xff0c;适用于不同需求的场景。常用的备份方法如下&#xff1a; 1. 逻辑备份&#xff08;pg_dump 和 pg_dumpall&#xff09; 1.1 使用 pg_dump 备份单个数据库 pg_dump 是 PostgreSQL 内置的逻辑备份工具&#xff0c;可以将数据库导出为…...

保姆级教程:在RK3588开发板上编译并加载Xilinx XDMA PCIe驱动(含完整Makefile解析)

RK3588与FPGA的PCIe通信实战&#xff1a;XDMA驱动编译与深度优化指南 当RK3588遇上FPGA&#xff0c;PCIe通信便成为两者之间高速数据交互的核心桥梁。作为一款广泛应用于边缘计算和嵌入式AI场景的ARM处理器&#xff0c;RK3588的PCIe 3.0 x4接口能够提供接近4GB/s的理论带宽&am…...

seo市场推广如何应对行业竞争压力_seo市场推广有哪些常见的工作挑战

SEO市场推广如何应对行业竞争压力 在当今数字化经济的浪潮中&#xff0c;SEO市场推广已经成为企业提升在线存在感和获取客户的关键手段。随着越来越多企业进入SEO领域&#xff0c;竞争压力也日益增大。如何有效地应对这种行业竞争压力&#xff0c;成为每一个SEO从业者面临的重…...

【Mojo+Python企业级混合编程实战指南】:20年架构师亲授3大高频场景落地方法论

第一章&#xff1a;Mojo与Python混合编程的企业级价值全景图Mojo 是一种专为 AI 原生系统设计的现代系统编程语言&#xff0c;兼具 Python 的表达力与 C/Rust 级别的性能。在企业级 AI 工程实践中&#xff0c;Mojo 并非旨在替代 Python&#xff0c;而是以“无缝互操作”为核心理…...

Steane编码实战指南:用Python模拟[7,1,3]量子纠错电路(附完整代码)

Steane编码实战指南&#xff1a;用Python模拟[7,1,3]量子纠错电路&#xff08;附完整代码&#xff09; 量子计算正从实验室走向现实应用&#xff0c;但量子比特的脆弱性始终是横亘在实用化道路上的关键障碍。想象一下&#xff0c;当你精心设计的量子算法因为一个随机的相位翻转…...

3步打造智能家居音乐自由:给爱好者的开源方案详解

3步打造智能家居音乐自由&#xff1a;给爱好者的开源方案详解 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 在智能家居的日常使用中&#xff0c;许多用户都面临着…...

Wan2.2-I2V-A14B企业应用:合规可控的AI视频生成私有云部署方案

Wan2.2-I2V-A14B企业应用&#xff1a;合规可控的AI视频生成私有云部署方案 1. 企业级视频生成解决方案概述 在当今内容创作需求爆炸式增长的环境下&#xff0c;企业面临着视频制作成本高、周期长的挑战。Wan2.2-I2V-A14B私有部署镜像提供了一套完整的解决方案&#xff0c;让企…...

快速上手ms-swift:图形界面操作大模型全流程,保姆级指导

快速上手ms-swift&#xff1a;图形界面操作大模型全流程&#xff0c;保姆级指导 1. 为什么选择ms-swift&#xff1f; 在人工智能领域&#xff0c;大模型的训练和部署一直是个技术门槛较高的工作。传统方式需要处理复杂的命令行参数、环境配置和代码调试&#xff0c;这让很多非…...

AI绘画新玩法:图图的嗨丝造相-Z-Image-Turbo部署实战,轻松生成高质量渔网袜图片

AI绘画新玩法&#xff1a;图图的嗨丝造相-Z-Image-Turbo部署实战&#xff0c;轻松生成高质量渔网袜图片 1. 引言&#xff1a;解锁AI绘画的专属风格 你是否曾经遇到过这样的困扰&#xff1f;想要生成特定风格的图片&#xff0c;比如穿着精致渔网袜的人物形象&#xff0c;但使用…...

Vim编辑器的.swp文件:安全隐患与防范措施全解析

Vim编辑器.swp文件安全风险深度剖析与实战防护指南 当你深夜加班修改服务器配置文件时&#xff0c;突然断电导致Vim异常退出。第二天发现.nginx.conf.swp文件被恶意用户下载&#xff0c;内含未保存的数据库密码——这种场景在运维工作中并不罕见。.swp文件作为Vim的自动备份机制…...

SAP-MM 公司间STO实战:从主数据到收货的完整配置与流程解析

1. 公司间STO的核心概念与业务场景 第一次接触公司间库存转储订单(STO)时&#xff0c;我误以为它和普通采购订单差不多。直到实际配置时才发现&#xff0c;这里面的门道可不少。简单来说&#xff0c;公司间STO就是集团内部不同法人公司之间的库存调拨业务&#xff0c;但会计上需…...