VUE+Spring前后台传值的坑,后台接收的String参数在末尾会出现 “=”

news2024/11/15 13:42:48

一、问题

VUE+SpringBoot做增删改查时,前端使用axios.post发起请求,传输主键字符型参数 taskId 到后台,后台再进行删除处理。

实际过程中发现后台拿到的数据再末尾多了一个等号,但是通过console.log(taskId)前台打印参数是正常的,如图。

前台打印log:

后台接收:

二、原因

经过查资料发现前台发送数据的消息体的格式不同的导致。 

前端 Axios 的请求发送方式以及后端 Spring Boot 的 @RequestBody 注解的使用方式不匹配有关。

前端代码:

//使用字符串 'taskid',代表实际的参数值
axios.post('/deleteTask', 'taskid')  
.then(response => {    
    console.log(response);    
})  
.catch(error => {    
    console.error(error);    
});

后端代码:

@PostMapping("deleteTask")
@ApiOperation(value = "删除任务")
public Result<Object> deleteTask(@RequestBody String taskId) {  
    log.info("deleteTask入参:{}", taskId);  
    return new Result<>().ok(archiveDownloadService.deleteTask(taskId));  
}

axios.post 的第二个参数是一个字符串 'taskid',而不是一个 JSON 对象或 FormData 实例。当 Axios 发送这个请求时,它默认不会将字符串包装成 JSON(因为字符串不是对象),也不会设置 Content-Type 为 application/json(虽然在某些情况下,如果之前设置了全局的 Content-Type,它可能会保持那个设置)。但是,由于没有显式设置 Content-Type,并且发送的是一个简单的字符串,Axios 的行为可能会依赖于其内部实现或浏览器的默认行为,这可能会导致请求体内容或 Content-Type 头部不是想象中的默认application/json。此时的Content-Type应该是application/x-www-form-urlencoded;charset=UTF-8。

这是一种键值对的数据结构,前端传过来的内容是放在k中,v为空,而Spring Boot 并没有将请求体解析为 JSON(因为 Content-Type 不是 application/json),而是直接尝试将请求体的内容作为字符串读取,这时候取值时,内容就变成了k=,也就是为什么后端接收的数据,末尾多了一个=。

同时后端代码使用的@RequestBody接收参数,@RequestBody接收一个简单的字符串时,Spring Boot 会尝试将请求体中的内容解析为 JSON(如果 Content-Type 是 application/json),但由于请求体可能只是一个简单的字符串 'taskid' 而不是有效的 JSON(如 {"taskId":"taskid"}),解析过程可能会失败或产生意外的结果。

三、解决

  1. 更改前端请求:设置 Content-Type 为 application/json
    //使用字符串 'taskid',代表实际的参数值
    axios.post('/deleteTask', 'taskid', {
            headers: {'Content-Type': 'application/json'}
    })  
    .then(response => {    
        console.log(response);    
    })  
    .catch(error => {    
        console.error(error);    
    });
  2. 更改后端接收方式:将post改成get使用 @RequestParam 而不是 @RequestBody 来接收。

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

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

相关文章

巴洛克风格的现代演绎,戴上亚法银耳机,感受古典雕花与现代声学的碰撞

flipears耳机品牌以其独特的风格、精细的配置和卓越的音质在耳机市场中很受欢迎&#xff0c;像是我最近用过的一款Artha Argentum亚法银&#xff0c;就采用了纯银外壳&#xff0c;而且用料扎实&#xff0c;具有出众的声学表现&#xff0c;带来了更干净清澈的声底。内在配置方面…

[Linux] LVM挂载的硬盘重启就掉的问题解决

问题&#xff1a;系统重启后挂在逻辑卷的盘会掉&#xff08;必现&#xff09; 环境&#xff1a;SUSE Linux 11 SP4 原因&#xff1a;boot.lvm是关闭的 解决&#xff1a;boot.lvm设置开启 参考资料&#xff1a; linux下lvm状态Not avaliable问题排查及处理(常见Suse操作系统…

使用ubuntu串口数据收和发不一致问题

串口配置 使用virtual Serial Port Driver Pro模拟串口两个串口&#xff0c;com2和com3&#xff0c;使用默认配置&#xff1b;通过virtual box 串口映射功能&#xff0c;在Ubuntu里使用CuteCom打开com2接受和发送数据&#xff0c;在windows里使用com3发送和接收数据。 遇到问…

24/8/9算法笔记 随机森林

"极限森林"&#xff08;Extremely Randomized Trees&#xff0c;简称ERT&#xff09;是一种集成学习方法&#xff0c;它属于决策树的变体&#xff0c;通常被归类为随机森林&#xff08;Random Forest&#xff09;的一种。极限森林的核心思想是在构建决策树时引入极端…

空间推理验证码的介绍!

空间推理验证码 ​是一种验证码形式&#xff0c;‌旨在通过要求用户解决一些视觉或空间推理问题来区分计算机和人类用户。‌这种验证码形式要求用户通过完成一些视觉或空间推理任务来证明他们是真实的人类用户&#xff0c;‌而不是计算机程序。‌空间推理验证码通常涉及一些图…

智慧交通:将物联网与人工智能完美融合

智慧交通是当今社会面临的一个重要挑战&#xff0c;也是人们生活质量提高的一个重要方面。通过将物联网技术与人工智能相结合&#xff0c;我们能够实现智慧交通系统的全面升级和优化&#xff0c;为人们带来更加便捷、高效和安全的出行体验。 在智慧交通领域&#xff0c;物联网…

Java面试题--JVM大厂篇之从原理到实践:JVM 字节码优化秘籍

目录 引言&#xff1a; 正文&#xff1a; 1. JVM 字节码生成原理 2. 字节码优化的痛点 3. 字节码优化策略 3.1 方法内联&#xff08;Method Inlining&#xff09; 3.2 循环展开&#xff08;Loop Unrolling&#xff09; 3.3 常量折叠&#xff08;Constant Folding&#…

线程池原理(二)关键源码剖析

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 属性 & 构造方法 对于 ThreadPoolExecutor 有几个关键的属性&#xff0c;这里需要先大致了解&#xff1a; public class ThreadPoolExecutor extends AbstractExecutorService {// 控制变量-存放状态和…

什么是NLP分词(Tokenization)

在自然语言处理和机器学习的领域里&#xff0c;咱们得聊聊一个超基础的技巧——就是“分词”啦。这个技巧啊&#xff0c;就是把一长串的文字切分成小块&#xff0c;让机器能更容易地“消化”。这些小块&#xff0c;不管大小&#xff0c;单个的字符也好&#xff0c;整个的单词也…

汽车EDI:德国大众 EDI 项目案例

德国大众&#xff08;Volkswagen&#xff09;是成立于1937年的大型汽车制造商&#xff0c;总部位于德国沃尔夫斯堡。大众集团拥有众多知名汽车品牌&#xff0c;如奥迪、保时捷、宾利、兰博基尼、布加迪等&#xff0c;业务遍及全球。作为一个全球性企业&#xff0c;大众集团依赖…

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 文章目录 前言时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 一、VMD-TCN-BiLSTM-Attention模型1. **…

SystemUI plugin 开发

一、前言 SystemUI结构复杂,模块数量众多,最重要的是SystemUI属于常驻进程是一个系统的门面,且不能自升级,如果定制功能对主项目做复杂的修改,首先会造成适配压力,如果对主框架不甚理解,有可能会造成很多隐藏的Bug,且不易修复,一旦崩溃对整个系统的影响很大,那么怎…

【从零开始一步步学习VSOA开发】VSOA数据流

VSOA数据流 概念 实际业务中常常存在既有实时命令通信&#xff0c;又有非实时的大数据通信&#xff0c;如文件、音视频传输服务等&#xff0c;如果使用常规的 RPC 或订阅/发布功能来实现&#xff0c;将实时命令和大数据传输混在一起&#xff0c;则会影响 RPC 通道响应的实时性…

C语言程序设计-[10] for语句循环结构

1、for语句循环结构定义 for语句循环结构的一般形式、流程图和执行过程如下&#xff1a; ​ 注1&#xff1a;计算表达式2是循环的判定表达式。与前面一样&#xff0c;这个表达式可以是任意的&#xff0c;只要有值就行&#xff0c;遵循非0即真的原则。 注2&#xff1a;一个循…

(源码)Springboot项目集成Activiti工作流,前端Vue,Bpmn.js

前言 activiti工作流引擎项目&#xff0c;企业erp、oa、hr、crm等企事业办公系统轻松落地&#xff0c;一套完整并且实际运用在多套项目中的案例&#xff0c;满足日常业务流程审批需求。 一、项目形式 springbootvueactiviti集成了activiti在线编辑器&#xff0c;流行的前后端…

【Python】nn.nn.CircularPad1、2、3d函数和nn.ConstantPad1、2、3d函数详解和示例

前言 在深度学习中&#xff0c;尤其是在处理图像、音频或其他多维数据时&#xff0c;数据填充&#xff08;Padding&#xff09;是一个常见的操作。填充不仅可以保持数据的空间维度&#xff0c;还能在卷积操作中避免信息丢失。PyTorch提供了多种填充方式&#xff0c;其中nn.Cir…

unity 本地使用Json(全套)

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、Json是什么&#xff1f;二、创建Json文件1.在线编辑并转实体类&#xff08;C#&#xff09;2.Json文件 三、解析Json并使用四、报错&#xff1a;JsonError&#xff1a;JsonExce…

使用frp内网穿透将个人主机上的MySQL发布到公网上,再通过python管理MySQL

目录 1.frp内网穿透部署 1.frp服务器 1.开放端口 2.上传软件包 3.解压 4.配置文件 2.frp客户端 1.上传软件包 2.配置文件 3.启动测试 1.浏览器查看服务器上连接的客户端数量 2.启动测试 2.MySQL安装 3.python3的安装使用 4.python管理MySQL 1.pip 2.pandas 3.p…

Axure 变量魔法:揭秘局部与全局的动态协同

前言 在 Axure 的世界中&#xff0c;变量是连接设计者意图与用户行为的桥梁。 局部变量&#xff0c;以其独特的灵活性和针对性&#xff0c;允许我们在特定情境下快速响应用户的操作。 而全局变量&#xff0c;则以其广泛的覆盖范围&#xff0c;为跨页面的一致性和连贯性提供了…

003集——C#数据类型 及大小端序转换——C#学习笔记

如需得到一个类型或一个变量在特定平台上的准确尺寸&#xff0c;可以使用 sizeof 方法。表达式 sizeof(type) 产生以字节为单位存储对象或类型的存储尺寸。下面举例获取任何机器上 int 类型的存储尺寸&#xff1a; using System;namespace DataTypeApplication {class Program{…