Vue中使用Axios传递数组参数给SpringBoot后台时的实现方式

我就是我 2023-10-06 13:44 23阅读 0赞

## 场景 ##

在前端需要实现多选，然后将所选的序号的数组传递到后台Springboot接口

![20200728102323843.jpg][]

需要传递的参数是一个int数组。

handleCompleted() {
          if (this.ids == null || this.ids.length == 0) {
            this.$alert("请先选择一条数据", "提示", {
              confirmButtonText: "确定",
            });
          } else {
            handCompletedRequest(this.ids).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("处理完成成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

其中handleCompleted对应的是按钮的点击方法，通过

<el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleCompleted"
                  v-hasPermi="['kqgl:ddjl:add']"
                >处理完成</el-button>

绑定。

然后先进行判断是否选中了一条数据，如果没有则提示，否则传递到后台

首先将公共模块Axios抽离出requeest请求对象request.js

这里还引入了请求码与错误码等模块

import axios from 'axios'
    import { Notification, MessageBox, Message } from 'element-ui'
    import store from '@/store'
    import { getToken } from '@/utils/auth'
    import errorCode from '@/utils/errorCode'
    
    axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    // 创建axios实例
    const service = axios.create({
      // axios中请求配置有baseURL选项，表示请求URL公共部分
      baseURL: process.env.VUE_APP_BASE_API,
      // 超时
      timeout: 10000
    })
    // request拦截器
    service.interceptors.request.use(config => {
      // 是否需要设置 token
      const isToken = (config.headers || {}).isToken === false
      if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
        console.log(error)
        Promise.reject(error)
    })
    
    // 响应拦截器
    service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200;
        // 获取错误信息
        const message = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
          MessageBox.confirm(
            '登录状态已过期，您可以继续留在该页面，或者重新登录',
            '系统提示',
            {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          })
        } else if (code === 500) {
          Message({
            message: message,
            type: 'error'
          })
          return Promise.reject(new Error(message))
        } else if (code !== 200) {
          Notification.error({
            title: message
          })
          return Promise.reject('error')
        } else {
          return res.data
        }
      },
      error => {
        console.log('err' + error)
        Message({
          message: error.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(error)
      }
    )
    
    export default service

然后在需要的模块通过

import request from '@/utils/request'

引入。

这里handCompletedRequest如果采用get请求

export function handCompletedRequest(ids) {
      return request({
        url: '/kqgl/ddjl/dealCompleted',
        method: 'get',
        params:
     {
      ids:ids
     }
      })

那么后台对应的是

@GetMapping("/dealCompleted")
        public AjaxResult dealCompleted(@RequestParam(required = true) int[] ids)
        {
            return AjaxResult.success(kqDdjlService.dealCompleted(ids));
        }

但是即使是使用params的方式传递参数，也是讲数组参数拼接到Url上。

对于长度也会有显示，此时请求时会提示：

Error parsing HTTP request header

所以这里要使用post请求

export function handCompletedRequest(ids) {
      return request({
        url: '/kqgl/ddjl/dealCompleted',
        method: 'post',
        data: ids
      })
    }

注意这里是使用的data不是params了。

然后在后台Springboot对应的是

@PostMapping("/dealCompleted")
        public AjaxResult dealCompleted(@RequestBody(required = true) int[] ids)
        {
            return AjaxResult.success(kqDdjlService.dealCompleted(ids));
        }

使用@RequestBody进行接收

![20200728102431995.jpg][]

[20200728102323843.jpg]: https://img-blog.csdnimg.cn/20200728102323843.jpg
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[20200728102431995.jpg]: https://img-blog.csdnimg.cn/20200728102431995.jpg