前后端传参

后端接收参数

参考文章：@PathVariable@RequestParam@RequestBody接收参数区别

前端发送请求

引入axios实现发送请求

npm install axios

引入qs实现传参格式化

因为axios自带qs，引入了axios后可直接引入

import Qs from 'qs'

qs是否启用，需要根据后端的接收参数形式进行判断

axios基本写法

axios.js

import axios from "axios";
import { Message } from "element-ui";
import { getStore, setStore } from "./storage";let base = '/xx';
axios.defaults.timeout = 15000;//添加请求拦截器
axios.interceptors.request.use(function(config) {// 在发送请求之前做些什么return config;
}, function(error) {Message.error('请求出错');//对请求错误做些什么return Promise.reject(error);
})//添加响应拦截器
axios.interceptors.response.use(function(response) {// const data = response.data;//对响应数据做点什么return response;
}, function(error) {//对响应错误做点什么return Promise.reject(error)
})/*** 发送登录get请求*/
export const getRequest = (url,params) => {let accessToken = getStore('accessToken');return axios({method: 'get',url:`${base}${url}`,params:params,headers: {'Authorization': accessToken,}});
};/*** 发送未登录get请求*/
export const getNoAuthRequest = (url,params) => {return axios({method: 'get',url: `${base}${url}`,params: params});
};/*** 发送已登录 表单格式 post请求*/
export const postRequest = (url,params) => {let accessToken = getStore('accessToken');return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function(data){let ret = '';for (let it in data){ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0,ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8','Authorization': accessToken}});
};/*** 发送已登录 body post请求*/
export const postBodyRequest = (url,params) => {let accessToken = getStore('accessToken');return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Authorization': accessToken,'Content-Type': 'application/json;charset=UTF-8'}});
};/*** 发送未登录 form post请求*/
export const postNoAuthRequest = (url,params) => {return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function(data){let ret = '';for (let it in data){ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}ret = ret.substring(0,ret.length - 1);return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',}});
};/*** 发送未登录 body post请求*/
export const postNoAuthBodyRequest = (url,params) => {return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Content-Type': 'application/json;charset=UTF-8'}});
};

前后端传参

将数组转化为单个Json字符串传输

前端发送

let data = [1,2,3]
sendPostRequest(JSON.stringfy(data)).then(res => {if(res.data.code == 200){console.log('请求成功')}else{console.log('请求失败')}
})

后端接收

@PostMapping("/receive")
public Result receiveParams(@RequstBody String ids){System.out.println(ids);return Result.ok();
}

将数组转换为json对象进行传输

前端发送请求

const ids = [1,2,3]
const data = qs.stringify({
"ids": JSON.stringify(ids)
})
sendPostRequest(JSON.stringfy(data)).then(res => {if(res.data.code == 200){console.log('请求成功')}else{console.log('请求失败')}
})

后端接受请求

@PostMapping("/receive")
public Result receiveParams(@RequstBody Map<String,Object> idsMap){System.out.println(idsMap);return Result.ok();
}

直接传输数组

前端发送请求

const ids = [1,2,3]
sendPostRequest(JSON.stringfy(data)).then(res => {if(res.data.code == 200){console.log('请求成功')}else{console.log('请求失败')}
})

后端接收请求

@PostMapping("/receive")
public Result receiveParams(@RequstBody List<Integer> ids){System.out.println(ids);return Result.ok();
}

前后端发送请求格式需要对应起来

• get请求：最好使用@GetMapping进行接收
• post请求：最好使用@PostMapping进行接收
• @RequestMapping接收post请求时容易出现参数对应不上的情况

总结

发送Get请求，后端可以直接使用@RequestParam接收，前后端名称要对应

发送Post请求，后端最好使用@RequestBody接收参数

传输数组时，前后端传输的格式要对应