前后端传参

文章目录

后端接收参数

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

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

相关推荐
fire-flyer32 分钟前
Spring Boot 源码解析之 Logging
java·spring boot·spring·log4j·logging
遥不可及~~斌36 分钟前
Spring Boot RESTful API 设计指南:查询接口规范与最佳实践
spring boot·后端·restful
allenXer5 小时前
Spring Boot测试全景指南:JUnit 5 + Testcontainers实现单元与集成测试
spring boot·微服务·log4j
熟悉的新风景7 小时前
springboot项目或其他项目使用@Test测试项目接口配置-spring-boot-starter-test
java·spring boot·后端
军军君0113 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
草履虫建模13 小时前
Ajax原理、用法与经典代码实例
java·前端·javascript·ajax·intellij-idea
简放14 小时前
Spring-AI系列-AI模型API
spring boot·aigc·openai
泉城老铁14 小时前
Gitee上开源主流的springboot框架一探究竟
spring boot·后端·架构
Yang's15 小时前
四种高效搭建SpringBoot项目的方式详解
java·spring boot·后端
bing_15815 小时前
在Spring Boot 开发中 Bean 的声明和依赖注入最佳的组合方式是什么?
java·spring boot·后端·bean