当前位置: 首页 > 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;可以将数据库导出为…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...