文章目录
后端接收参数
参考文章：@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请求时容易出现参数对应不上的情况