前端传参中带有特殊符号导致后端接收时乱码或转码失败的解决方案
文章目录
- bug背景
- 解决思路1:
- 解决思路2
- 解决思路3(最终解决方案)
- 后记
bug背景
项目中采用富文本编辑器后传参引起的bug,起因如下:
数据库中存入的数据会变成这种未经转码的URL编码
解决思路1:
使用JSON方式传参,但富文本编辑器不支持将内容转成JSON,会遗失标签,显然不符合把富文本文章存入数据库的需求,所以PASS
解决思路2
使用URL拼接方式传参,而缺点也是明显的,URL拼接的参数长度有限,用户就不能编写长文本了。
且用此种方法,后端接收到的数据依旧会因特殊字符而转码失败(不知道是不是框架MVC配置的拦截器逻辑有问题,遇到特殊字符后就不去处理了),用URLDecoder.decode
方法手动转码又过于不优雅,也不符合高可用的理念
解决思路3(最终解决方案)
前端使用URLSearchParams 对象
以键值对方式传参
似乎是目前比较合适的解决方法
// 创建URLSearchParams对象,将参数用append方法以键值对一个个放入
const params = new URLSearchParams();params.append('key1', 'value1');params.append('key2', 'value2');
URLSearchParams 对象参考:【JS】URLSearchParams 对象(以对象的形式上传参数到url)
需要考虑各浏览器兼容性问题和解决方案
vue3前端请求方法:
const onSubmit = async function (formEl: FormInstance | undefined) {console.log(formEl)formEl.validate(async valid => {if (valid) {try {const params = new URLSearchParams()params.append('content.content', form.contentStr)params.append('destId', form.destId.toString())params.append('title', form.title)params.append('travelTime', form.travelTime)params.append('coverUrl', form.coverUrl)params.append('isPublic', form.isPublic ? '1' : '0')params.append('person', form.person)params.append('days', form.days)params.append('avgConsume', form.avgConsume)params.append('summary', form.summary)// let params = {// destId: form.destId,// title: form.title,// travelTime: form.travelTime,// coverUrl: form.coverUrl,// isPublic: form.isPublic ? '1' : '0',// person: form.person,// days: form.days,// avgConsume: form.avgConsume,// summary: form.summary,// contentStr: form.contentStr// }//params['content.content'] = params.contentStrconst res = await travelsAdd(params)ElMessage.success('提交日志成功')router.push('/personal/travels')} catch (err) {console.log(err)ElMessage.error(err.msg)}} else {return false}})
}
前端控制台:
后端请求接收,富文本context数据正常
写入数据库正常,大功告成~!
后记
自从成为全栈后感觉思考问题和找bug的视野更广了,写代码也觉得越来越有趣,越来越顺畅。相信自己选择的路,即使它不一定对,只要努力让自己不后悔就好。学有所成,劳有所获,加油~!
相关文章:
前端传参中带有特殊符号导致后端接收时乱码或转码失败的解决方案
文章目录 bug背景解决思路1:解决思路2解决思路3(最终解决方案)后记 bug背景 项目中采用富文本编辑器后传参引起的bug,起因如下: 数据库中存入的数据会变成这种未经转码的URL编码 解决思路1: 使用JSON方…...
【扩散模型】深入理解图像的表示原理:从像素到张量
【扩散模型】深入理解图像的表示原理:从像素到张量 在深度学习中,图像是重要的数据源之一,而图像的表示方式对于算法的理解和处理至关重要。本文将带你深入探讨图像的底层表示原理,从像素到张量,让你对图像表示有更清…...
WPS论文写作——公式和公式序号格式化
首先新建一个表格,表格尺寸按你的需求来确定,直接 插入--》表格 即可。 然后在表格对应位置填上公式(公式要用公式编辑器)和公式序号,然后可以按照单独的单元格或者整行或整列等来设置样式,比如居中对齐、…...
ChatGPT一周年,奥特曼官宣 OpenAI 新动作!
大家好,我是二狗。 今天是11月30日,一转眼,ChatGPT 发布已经一周年了! 而就在刚刚,ChatGPT一周年之际。 OpenAI 正式宣布Sam Altman回归重任CEO, Mira Murati 重任CTO,Greg Brockman重任总裁,O…...
JVM 运行时内存篇
面试题: 讲一下为什么JVM要分为堆、方法区等?原理是什么?(UC、智联) JVM的分区了解吗,内存溢出发生在哪个位置 (亚信、BOSS) 简述各个版本内存区域的变化࿱…...
Docker安装postgres最新版
1. postgres数据库 PostgreSQL是一种开源的关系型数据库管理系统(RDBMS),它是一种高度可扩展的、可靠的、功能丰富的数据库系统。以下是关于PostgreSQL的一些介绍: 开源性:PostgreSQL是一个开源项目,可以…...
浅析计算机网络安全的的防范与措施
摘 要 随着信息和通讯的高速发展使得人们对计算机的依赖逐渐增强,生活与工作当中计算机都担任着那个不可或缺的角色,已经是人们生活当中的一部分,充分影响着我们生活和工作中的很多关键点,但计算机过多地在工作和生活中使用也带来…...
多表操作、其他字段和字段参数、django与ajax(回顾)
多表操作 1 基于对象的跨表查 子查询----》执行了两句sql,没有连表操作 2 基于双下滑线的连表查 一次查询,连表操作 3 正向和反向 放在ForeignKey,OneToOneField,ManyToManyField的-related_namebooks:双下滑线连表查询,反向…...
您知道计算机是怎么分类的嘛
地表最强计算机 第 61 版全球最强大的超级计算机已经发布。名为 Top500,顾名思义,该列表列出了全球 500 台最强大的超级计算机。榜单显示,美国的AMD、英特尔和IBM处理器是超级计算系统的首选。在 TOP10 中,有四个系统使用 AMD 处理…...
[MTK]安卓8 ADB执行ota升级
需求 adb 推送update.zip进行安卓的OTA升级 环境 平台:mtk SDK:Android 8 命令方式 需要root adb root adb remount adb push update.zip /data/media/0/ adb shell uncrypt /data/media/0/update.zip /cache/recovery/block.map adb shell echo /data/media/0/update.zi…...
python-比较Excel两列数据,并分别显示差异
利用 openpyxl 模块,操作Excel,比较Excel两列数据,并分别显示差异 表格数据样例如下图 A,B两列是需要进行比较的数据(数据源为某网站公开数据);C,D两列是比较结果的输出列 A&#…...
RT-DETR手把手教程:NEU-DET钢材表面缺陷检测任务 | 不同网络位置加入EMA注意力进行魔改
💡💡💡本文独家改进:本文首先复现了将EMA引入到RT-DETR中,并跟不同模块进行结合创新;1)多种Rep C3结合;2)直接作为注意力机制放在网络不同位置; NEU-DET钢材表面缺陷检测: 原始 rtdetr-r18 map0.5为0.67 rtdetr-r18-EMA_attention map0.5为0.691 rtdetr-r18-…...
WebGL笔记:矩阵缩放的数学原理和实现
矩阵缩放的数学原理 和平移一样,以同样的原理,也可以理解缩放矩阵让向量OA基于原点进行缩放 x方向上缩放:sxy方向上缩放:syz方向上缩放:sz 最终得到向量OB 矩阵缩放的应用 比如我要让顶点在x轴向缩放2,y轴…...
处理器中的TrustZone之安全状态
在这篇博客中,我们将讨论处理器内对TrustZone的支持。其他部分则涵盖了在内存系统中的支持,以及建立在处理器和内存系统支持基础上的软件情况。 3.1 安全状态 在Arm架构中,有两个安全状态:安全状态和非安全状态。这些安全状态映射…...
开发一款短剧视频小程序软件多少钱?
今年最炙手可热的互联网项目之一当属短剧小程序,常常受到客户的咨询,他们想了解开发一套短剧小程序需要多少费用。今天,我将详细介绍相关费用及开发细节。 小程序认证费用: 每年300元,是确保小程序正常运营所必需的认证…...
『PyTorch学习笔记』分布式深度学习训练中的数据并行(DP/DDP) VS 模型并行
分布式深度学习训练中的数据并行(DP/DDP) VS 模型并行 文章目录 一. 介绍二. 并行数据加载2.1. 加载数据步骤2.2. PyTorch 1.0 中的数据加载器(Dataloader) 三. 数据并行3.1. DP(DataParallel)的基本原理3.1.1. 从流程上理解3.1.2. 从模式角度理解3.1.3. 从操作系统角度看3.1.…...
揭秘C语言结构体:通往内存对齐的视觉之旅
揭秘C语言结构体:通往内存对齐的视觉之旅 引言 在C语言的编程旅程中,结构体(structs)是一个关键而强大的概念。结构体不仅允许我们组织和存储不同类型的数据,而且通过深入了解内存对齐,我们可以更好地优化…...
java中可重入锁的作用是什么?
可重入锁的主要作用是允许同一个线程在持有锁的情况下多次进入同步代码块或方法,而不会被阻塞。这样做的主要目的是为了简化编程模型,增强程序的灵活性,并避免死锁的发生。 1. 简化编程模型: 可重入锁使得同一个线程在执行临界区…...
适合炎热天气的最佳葡萄酒有哪些?
每年的夏天,白葡萄酒和玫瑰红葡萄酒总会是葡萄酒爱好者的首选,这是为什么呢?随着春天的逝去,夏天悄悄地到来,空气变得炎热和沉重,树木变得越来越郁郁葱葱,白天的时间更长而晴朗了。多雨的五月变…...
软件工程 课后题 选择 查缺补漏
在一张状态图中只能有一个初态,而终态则可以没有,也可以有多个 所有的对象可以成为各种对象类,每个对象类都定义了一组 方法 通过执行对象的操作可以改变对象的属性,但它必须经过 消息 的传递 UML应用于 基于对象的面向对象的方…...
PyQt基础_011_对话框类控件QMessage
基本功能 import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class WinForm( QWidget): def __init__(self): super(WinForm,self).__init__() self.setWindowTitle("QMessageBox") self.resize(300, 100) self.myButt…...
SpringMvc集成开源流量监控、限流、熔断降级、负载保护组件Sentinel | 京东云技术团队
前言:作者查阅了Sentinel官网、51CTO、CSDN、码农家园、博客园等很多技术文章都没有很准确的springmvc集成Sentinel的示例,因此整理了本文,主要介绍SpringMvc集成Sentinel SpringMvc集成Sentinel 一、Sentinel 介绍 随着微服务的流行&…...
[LeetCode] 12. 整数转罗马数字
12. 整数转罗马数字 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 …...
深入了解Java Period类,对时间段的精确控制
阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概2900多字,预计阅读时间长需要3分钟。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&#x…...
企业软件的分类有哪些|app小程序定制开发
企业软件的分类有哪些|app小程序定制开发 企业软件是指为了满足企业运营和管理需求而开发的软件系统。根据不同的功能和应用领域,企业软件可以分为以下几个分类: 1. 企业资源计划(Enterprise Resource Planning,ERP)软…...
选择更好的Notes索引附件方式
大家好,才是真的好。 首先介绍最近产品更新消息。在上一周,HCL主要发布了以下几个产品更新:HCL Verse 3.2.0、HCL Volt MX Go 2.0.2、HCL Domino Rest API 1.0.8。 HCL Verse是今后Domino的产品当中主要使用的webmail功能,这一次…...
Vue混淆与还原
Vue混淆与还原 引言 Vue是一种流行的JavaScript框架,用于构建用户界面。它简单易用且功能强大,备受开发者喜爱。然而,在传输和存储过程中,我们需要保护Vue代码的安全性。混淆是一种有效的保护措施,可以加密和压缩代码…...
R语言单因素方差分析+差异显著字母法标注+逐行详细解释
R语言单因素方差分析 代码如下 df <- read.csv("data.csv",header TRUE,row.names 1) library(reshape2) df <- melt(df,idc()) names(df) <- c(trt, val) df aov1 <- aov(val~trt,datadf) summary(aov1)library(agricolae) data <- LSD.test(aov…...
linux 消息队列apache-activemq服务的安装
1.下载 官网下载地址:https://activemq.apache.org/ 操作如下: 2. 解压 执行:tar -zxvf apache-activemq-5.18.3-bin.tar.gz -C /user/ 3. 进入目录 执行:cd /user/apache-activemq-5.18.3 4.修改配置文件 执行࿱…...
前端数据加密相关问题
什么是数据加密? 数据加密是一种安全性技术,通过使用算法将明文转换为密文,以保护数据的保密性和完整性。数据加密通常用于保护机密信息,例如个人身份、财务信息、企业机密等。在数据传输过程中,数据可以被拦截或窃听…...
Vue3中reactive和ref对比
Vue3中reactive和ref对比 数据角度对比原理角度对比使用角度对比 数据角度对比 ref用来定义: 基本类型reactive用来定义: 对象(或数组)类型数据备注:ref也可以定义对象或数组类型数据,它内部会调用reactive转为代理对象. 原理角度对比 ref通过Object.defineProperty()中的ge…...
【尘缘送书第五期】Java程序员:学习与使用多线程
目录 1 多线程对于Java的意义2 为什么Java工程师必须掌握多线程3 Java多线程使用方式4 如何学好Java多线程5 参与方式 摘要:互联网的每一个角落,无论是大型电商平台的秒杀活动,社交平台的实时消息推送,还是在线视频平台的流量洪峰…...
Linux C语言 34-库封装操作
Linux C语言 34-库封装操作 本节关键字:C语言 封装库 动态库 相关C库函数: 什么是库? 库是现成的,可以复用的代码。从本质上看,库是一种可执行代码的二进制形式,可以被操作系统载入内存执行。在C语言的编…...
JavaWeb-Tomcat
1. Web服务器 web服务器由硬件和软件组成: 硬件:计算机系统软件:计算机上安装的服务器软件,安装后可以为web应用提供网络服务。 常见的JavaWeb服务器: Tomcat(Apache):应用最广泛的…...
k8s之Pod常用命令详解、镜像拉取策略(imagePullPolicy)
常用命令 kubectl api-resources #查询可操作的资源对象列表kubectl get pod #查看默认命名空间下所有pod kubectl describe pod podname #获取默认命名空间下POD详情# 如果要查看制定命名空间则使用 -n nsname kubectl get pod -n ns kubectl describe pod podname -n ns# 以Y…...
Spark低版本适配Celeborn
Spark-3.5版本以下使用Celeborn时,无法使用动态资源,对于低版本的Spark,Celeborn提供了patch。各版本patch如下 https://github.com/apache/incubator-celeborn/tree/main/assets/spark-patch 下载patch,这里下载spark-3版本&am…...
idea报错:Error:java: 不允许在使用 -release 时从系统模块 java.xml 导出程序包?
File->Settings, 把红框编译选中选项全部删除掉...
Vector Quantized Diffusion Model for Text-to-Image Synthesis
Vector Quantized Diffusion Model for Text-to-Image Synthesis Shuyang Gu, University of Science and Technology of China, Microsoft, CVPR2022, Cited: 340, Code, Paper 1. 前言 我们提出了用于文本到图像生成的矢量量化扩散(Vector Quantized Diffusion Model&…...
solidity实现ERC1155多代币标准
文章目录 1、NFT - 维基百科2、IERC1155MetadataURI3、IERC1155Receiver4、IERC11555、ERC11556、NFT11557、开源地址 1、NFT - 维基百科 ERC-1155 标准于2018年6月由Witek Radomski、Andrew Cooke、Philippe Castonguay、James Therien、Eric Binet及Ronan Sandford提出。此标…...
10、外观模式(Facade Pattern,不常用)
外观模式(Facade Pattern)也叫作门面模式,通过一个门面(Facade)向客户端提供一个访问系统的统一接口,客户端无须关心和知晓系统内部各子模块(系统)之间的复杂关系,其主要…...
<软考>软件设计师-3程序设计语言基础(总结)
(一) 程序设计语言概述 1 程序设计语言的基本概念 1-1 程序设计语言的目的 程序设计语言是为了书写计算机程序而人为设计的符号语言,用于对计算过程进行描述、组织和推导。 1-2 程序语言分类 低级语言 : 机器语言(计算机硬件只能识别0和1的指令序列)&…...
C/C++---------------LeetCode第278. 第一个错误的版本
第一个错误的版本 题目及要求二分查找 题目及要求 你是产品经理,目前正在带领一个团队开发新的产品。不幸的是,你的产品的最新版本没有通过质量检测。由于每个版本都是基于之前的版本开发的,所以错误的版本之后的所有版本都是错的。 假设你…...
C语言三种循环输出9*9乘法表
解题思路: 1、外层循环控制1~9循环 2、内层控制循环的次数 比如: 1 * 1 1 循环一次 1 * 1 1 1 * 2 循环两次 依此类推 int i, j;printf("for 打印9*9乘法表\r\n");for(i 1; i <10; i) {for(j 1; j < i;j) {printf("%d * %d %d…...
IntelliJ IDEA 之初体验
文章目录 第一步:下载与安装 IntelliJ IDEA1)官网下载2)选择那种安装包3)开始下载4)解压 第二步:启动 IntelliJ IDEA第三步:创建第一个 Java 项目第四步:运行第一个 Java 程序1&…...
java中synchronized和Lock的区别是什么?
synchronized 和 Lock 都是 Java 中用于实现线程同步的机制,但它们在使用方式和功能上存在一些区别。 使用方式 synchronized: 是 Java 语言关键字,可用于方法或代码块。通过 synchronized 关键字实现的同步是隐式的,无需手动释…...
ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片
ESP32-Web-Server编程-通过 Base64 编码在网页中插入图片 概述 不同于上节 ESP32-Web-Server编程-在网页中通过 src 直接插入图片,本节引入 Base64 编码来显示图片。 Base64 是一种用64个字符来编码表示任意二进制数据的方法。任何符号都可以转换成 Base64 字符集…...
聊一聊大模型 | 京东云技术团队
事情还得从ChatGPT说起。 2022年12月OpenAI发布了自然语言生成模型ChatGPT,一个可以基于用户输入文本自动生成回答的人工智能体。它有着赶超人类的自然对话程度以及逆天的学识。一时间引爆了整个人工智能界,各大巨头也纷纷跟进发布了自家的大模型&#…...
pandas空格及网页空格符NBSP替换处理
df3[动作一课程内容]df3[动作一课程内容].str.replace( ,) df3[动作一课程内容]df3[动作一课程内容].str.replace( ,) 截图中代码为python展示代码,由于网页空格符和常规空格符看起来大致相同,但却不能用常规空格替换解决...
智能优化算法应用:基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码
智能优化算法应用:基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.战争策略算法4.实验参数设定5.算法结果6.参考…...
数据结构和算法-栈
数据结构和算法-栈 1. 栈的介绍 栈的介绍: 栈的英文为(stack)栈是一个先入后出的有序列表栈是限制线性表中元素的插入和删除只能在线性表的同一端进行的一种特殊线性表。允许插入和删除的一端,为变化的一端,称为栈顶,另一端为固…...