場景

在前端需要實(shí)現(xiàn)多選，然后將所選的序號(hào)的數(shù)組傳遞到后臺(tái)Springboot接口

?

需要傳遞的參數(shù)是一個(gè)int數(shù)組。

??? handleCompleted() {if (this.ids == null || this.ids.length == 0) {this.$alert("請(qǐng)先選擇一條數(shù)據(jù)", "提示", {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
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

其中handleCompleted對(duì)應(yīng)的是按鈕的點(diǎn)擊方法，通過

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

綁定。

然后先進(jìn)行判斷是否選中了一條數(shù)據(jù)，如果沒有則提示，否則傳遞到后臺(tái)

首先將公共模塊Axios抽離出requeest請(qǐng)求對(duì)象request.js

這里還引入了請(qǐng)求碼與錯(cuò)誤碼等模塊

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' // 創(chuàng)建axios實(shí)例 const service = axios.create({// axios中請(qǐng)求配置有baseURL選項(xiàng)，表示請(qǐng)求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超時(shí)timeout: 10000 }) // request攔截器 service.interceptors.request.use(config => {// 是否需要設(shè)置 tokenconst isToken = (config.headers || {}).isToken === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改}return config }, error => {console.log(error)Promise.reject(error) })// 響應(yīng)攔截器 service.interceptors.response.use(res => {// 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)const code = res.data.code || 200;// 獲取錯(cuò)誤信息const message = errorCode[code] || res.data.msg || errorCode['default']if (code === 401) {MessageBox.confirm('登錄狀態(tài)已過期，您可以繼續(xù)留在該頁面，或者重新登錄','系統(tǒng)提示',{confirmButtonText: '重新登錄',cancelButtonText: '取消',type: 'warning'}).then(() => {store.dispatch('LogOut').then(() => {location.reload() // 為了重新實(shí)例化vue-router對(duì)象 避免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請(qǐng)求

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

那么后臺(tái)對(duì)應(yīng)的是

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

但是即使是使用params的方式傳遞參數(shù)，也是講數(shù)組參數(shù)拼接到Url上。

對(duì)于長度也會(huì)有顯示，此時(shí)請(qǐng)求時(shí)會(huì)提示：

Error parsing HTTP request header

所以這里要使用post請(qǐng)求

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

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

然后在后臺(tái)Springboot對(duì)應(yīng)的是

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

使用@RequestBody進(jìn)行接收

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。