Vue中使用Axios傳遞數組參數給SpringBoot后台時的實現方式

場景

在前端需要實現多選，然后將所選的序號的數組傳遞到后台Springboot接口

 

 

 

需要傳遞的參數是一個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
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

其中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進行接收