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

文章目录

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的视野更广了,写代码也觉得越来越有趣,越来越顺畅。相信自己选择的路,即使它不一定对,只要努力让自己不后悔就好。学有所成,劳有所获,加油~!

相关推荐
小小小小宇5 分钟前
PC和WebView白屏检测
前端
天天扭码17 分钟前
ES6 Symbol 超详细教程:为什么它是避免对象属性冲突的终极方案?
前端·javascript·面试
小矮马20 分钟前
React-组件和props
前端·javascript·react.js
懒羊羊我小弟24 分钟前
React Router v7 从入门到精通指南
前端·react.js·前端框架
DC...1 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
Mars狐狸1 小时前
AI项目改用服务端组件实现对话?包体积减小50%!
前端·react.js
H5开发新纪元1 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js
嘻嘻嘻嘻嘻嘻ys1 小时前
《Vue 3.3响应式革新与TypeScript高效开发实战指南》
前端·后端
恋猫de小郭1 小时前
腾讯 Kuikly 正式开源,了解一下这个基于 Kotlin 的全平台框架
android·前端·ios
2301_799404912 小时前
如何修改npm的全局安装路径?
前端·npm·node.js