vue 中 get / delete 传递数组参数方法


Posted in Vue.js onMarch 23, 2021

在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下:

参数:{ name : [ 1, 2, 3 ] }
转译效果:http://aaa.com?name[]=1&name[]=2&name[]=3
目标效果:http://aaa.com?name=1&name=2&name=3

解决办法:

使用 qs 插件 将数组参数序列化

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果:'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果:'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果:'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果:'a=b,c'

安装

npm install qs

使用

//在 axios 请求拦截器里面
import qs from 'qs'
axios.interceptors.request.use(request => {
 if (request.method === 'delete' || request.method === 'get') {
 request.paramsSerializer = function(params) {
  return qs.stringify(params, { arrayFormat: 'repeat' })
 }
 }
 return request
},(error) =>{
 return Promise.reject(error);
})

刚刚接触Vue2.5以上版本的新手程序员 不了解怎样传递参数的仅供参考

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
 
<body>
/*为了前后端更好的交互效果 引入axios.js 这个js文件*/
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    // axios请求参数传递
 
    // axios get请求传参
    // 传统格式的 get 请求
     axios.get('http://localhost:3000/axios?id=123')
      .then(function(ret){
      console.log(ret.data)
     })
     // restful 格式的 get 请求
     axios.get('http://localhost:3000/axios/123')
      .then(function(ret){
      console.log(ret.data)
     })
     // 携带参数的 get 请求
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret) {
      console.log(ret.data)
    })
 
    // // axios delete 请求传参
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret) {
      console.log(ret.data)
    })
 
    //-----------------------------------
 
    // 使用 axios 进行 post 请求,默认传递 json 数据
    axios.post('http://localhost:3000/axios', {
        'uname': 'lisi',
        'pwd': 123
      }).then(function(ret) {
        console.log(ret.data)
      })
      // 使用 axios 进行 post 请求,传递 form 表单数据
       var params = new URLSearchParams();
       params.append('uname', 'zhangsan');
       params.append('pwd', '111');
       axios.post('http://localhost:3000/axios', params)
        .then(function (ret) {
         console.log(ret.data)
        })
 
    // axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret) {
      console.log(ret.data)
    })
 
 
 
    // 对于 axios 来说,在 get 和 delete 请求中,参数要放入到 params 属性下
    // 在 post 和 put 请求中,参数直接放入到 对象中
  </script>
</body>
 
</html>

向后台发起请求的代码

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

关于vue 中 get / delete 传递数组参数方法的文章就介绍到这了。

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 #Vue.js
vue3.0 项目搭建和使用流程
Mar 04 #Vue.js
You might like
十天学会php之第五天
2006/10/09 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
电子商务自荐书范文
2014/01/04 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
会计工作检讨书
2015/02/19 职场文书
飞屋环游记观后感
2015/06/08 职场文书
实习感想范文
2015/08/10 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang