前端传参中带有特殊符号导致后端接收时乱码或转码失败的解决方案

文章目录

bug背景

项目中采用富文本编辑器后传参引起的bug,起因如下:

数据库中存入的数据会变成这种未经转码的URL编码


解决思路1:

使用JSON方式传参,但富文本编辑器不支持将内容转成JSON,会遗失标签,显然不符合把富文本文章存入数据库的需求,所以PASS


解决思路2

使用URL拼接方式传参,而缺点也是明显的,URL拼接的参数长度有限,用户就不能编写长文本了。

且用此种方法,后端接收到的数据依旧会因特殊字符而转码失败(不知道是不是框架MVC配置的拦截器逻辑有问题,遇到特殊字符后就不去处理了),用URLDecoder.decode方法手动转码又过于不优雅,也不符合高可用的理念


解决思路3(最终解决方案)

前端使用URLSearchParams 对象以键值对方式传参

似乎是目前比较合适的解决方法

javascript 复制代码
// 创建URLSearchParams对象,将参数用append方法以键值对一个个放入
const params = new URLSearchParams();
    params.append('key1', 'value1');
    params.append('key2', 'value2');

URLSearchParams 对象参考:【JS】URLSearchParams 对象(以对象的形式上传参数到url)

需要考虑各浏览器兼容性问题和解决方案

vue3前端请求方法:

javascript 复制代码
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.contentStr
        const res = await travelsAdd(params)
        ElMessage.success('提交日志成功')
        router.push('/personal/travels')
      } catch (err) {
        console.log(err)
        ElMessage.error(err.msg)
      }
    } else {
      return false
    }
  })
}

前端控制台:

后端请求接收,富文本context数据正常


写入数据库正常,大功告成~!


后记

自从成为全栈后感觉思考问题和找bug的视野更广了,写代码也觉得越来越有趣,越来越顺畅。相信自己选择的路,即使它不一定对,只要努力让自己不后悔就好。学有所成,劳有所获,加油~!

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端