前后端传参

后端接收参数

参考文章：@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接收参数

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