場景

在前端需要實現多選，然后將所選的序號的數組傳遞到后臺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-buttontype="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 => {// 是否需要設置 tokenconst isToken = (config.headers || {}).isToken === falseif (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進行接收

?

總結

以上是生活随笔為你收集整理的Vue中使用Axios传递数组参数给SpringBoot后台时的实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。