场景

在前端需要实现多选，然后将所选的序号的数组传递到后台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后台时的实现方式相关推荐

axios传递数组参数
axios传递数组参数最近一个练手vue项目,选择axios作为网络请求库. 后台一接口使用了数组作为参数.本以为没什么,实则遇到了一个大坑. axios.post(url,{ids: [1,2,3 ...
ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
场景需要将Excel中的数据导入到数据库中,就会用到文件上传的功能. 这里使用ElementUI的el-upload控件实现文件上传. 注: 博客: https://blog.csdn.net/ba ...
使用ajax发送数组请求,Ajax请求传递数组参数
var ids = []; var rows=$("#tt").datagrid("getSelections"); for(var i=0; i ids.pu ...
vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到
场景 ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收: https://mp.csdn.net/console/editor/html/10797 ...
超级详细的教程一步步教你Vue项目中使用axios如何进行参数拼接
文章目录一.Vue 中的网络请求二.axios的引入三.常用网络请求方式 1.get A.字符串拼接方式: B.通过params属性传递对象: C.路径拼接方式: D.无请求参数: 2.post ...
Vue项目中使用axios如何进行参数拼接
一.Vue 中的网络请求在Vue.js中发送网络请求本质还是Ajax,我们可以使用插件方便操作. ①vue-resource:Vue.js的插件,已经不维护,不推荐使用. ②axios:不是vue的 ...
MyBatis中传递数组参数和List参数时if-test判空和判断长度的写法
场景前端传递一个部门id的数组作为查询条件查询部门id在这个数组中的数据. 在MyBatis的xml中获取到了这个数组参数后怎样进行if-test的判空与长度判断. 注: 博客: https://b ...
C++中传递数组参数
C++中传递数组参数将数组作为参数进行传递有两种传递方法,一种是function(int a[]); 另一种是function(int *a).这两种两种方法在函数中对数组参数的修改都会影响到实参本 ...

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

场景

实现

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

最新文章

热门文章