springboot vue3 前端调用后端接口传参问题

墨蓝 2024-03-25 14:55 49阅读 0赞

### 一、出现的问题 ###

今天写毕设的时候传参遇到了一个问题

用单个参数传输没有遇到 ，，只有当使用到**对象**传参的的时候会出现问题

直接看前端代码

![4d9690cf70e3bd8743c796d72f7eba5e.png][]

然后去浏览器进行操作

这里我只修改了一个名称

![a1f8d30eec0ce53daec81a8b017b8ebf.png][]

去后端编译器查看日志

![769fc4a07b03a33eea49dcac230f1adb.png][]

发现一直没有传过去数据

然后使用qs转化之后就好使了

![142395752557e772cf19a20c39282954.png][]

去控制台查看str的值

![6c05fe0380c26e6c2e585dd5c368b8de.png][]

这里我们发现他自动把对象转化为了 &连接的url

更新数据成功

### **二、传参格式 qs.stringify()使用方法** ###

qs是一个npm仓库所管理的包,可通过\`npm install qs\`命令进行安装（\[axios\]([https://so.csdn.net/so/search?q=axios&spm=1001.2101.3001.7020)][https_so.csdn.net_so_search_q_axios_spm_1001.2101.3001.7020] 自带qs , // import qs from 'qs'）

1、 qs.parse()将URL解析成对象的形式:

let url = 'user=wdx&pwd=123&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0'
    qs.parse(url)
    console.log(qs.parse(url)) 
    // {user:'wdx',pwd:'123',appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0'}

2、qs.stringify()将对象 序列化成URL的形式，以&进行拼接

let obj= {
        user:'wdx',
        pwd:'123',
        appToken:'7d22e38e-5717-11e7-907b-a6006ad3dba0'
    }
    qs.stringify(obj)
    console.log(qs.stringify(obj)) 
    // 'user=wdx&pwd=123&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0'

[4d9690cf70e3bd8743c796d72f7eba5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/244d35c17dee481395503ef4d640a9c8.png
[a1f8d30eec0ce53daec81a8b017b8ebf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/52bf513b757d4b0180d81d549a9888f9.png
[769fc4a07b03a33eea49dcac230f1adb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f0061d66be304898a4a8ee5753d850f3.png
[142395752557e772cf19a20c39282954.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/974ebd21e5114c28a3fe5a47e29304ef.png
[6c05fe0380c26e6c2e585dd5c368b8de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ad96cf25e48148d9974fd98e75e932ba.png
[https_so.csdn.net_so_search_q_axios_spm_1001.2101.3001.7020]: https://so.csdn.net/so/search?q=axios&spm=1001.2101.3001.7020%29