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

文章目录

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

相关推荐
bysking14 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓29 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41133 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v34 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云44 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html