前后端交互传参收参问题

前一段时间在做项目的时候，遇到的bug问题大部分都是前后端交互的问题，当时也是我写的第一个项目，踩过来好多坑，也浪费了不少时间。最近几天也有人问我这类类似的问题，今天总结整理了一下：

首先，前端传参的方式有3种：

1.参数在url中
2.参数以表单形式提交
3.参数以json提交

后端收参的方式有4种：

1.@PathVariable收参
2.@RequestParam收参
3.@RequestBody收参
4. 不加注解收参

@PathVariable:映射 URL 绑定的占位符,通过 @PathVariable 可以将 URL 中占位符参数绑定到控制器处理方法的入参中。

简单的说：就是路径参数，把参数提到了路径上，隐藏了参数名

@RequestParam：将请求参数绑定到控制器的方法参数上，相当于
数据类型 后端形参 = request.getParameter(“前端字段”)

这个注解有一个属性request的默认值是true，所以加了这个全注解的话参数为必填

@RequestBody：作用在对象上，把前端传过来的json字符串解析赋值给对象，要求前端字段和实体类一致

首先看一下task实体类

public class Task implements Serializable {
    @TableId(type = IdType.ASSIGN_ID) //雪花算法
    private Long id;
    private String name;
    private Boolean start;
    @TableField(fill = FieldFill.INSERT)   //插入时自动填充
    private Date createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE)  //插入和更新时自动填充
    private Date updateTime;
    @TableLogic
    private Integer deleted; //数据库设置默认值0

再来看一下各种传参：

1. 参数在url中

//前端传参格式：
url：'localhost:8080/Task/add/' + uid + '?name=' + name + '?start=' + start

1.后端用@PathVariable 或者 @RequestParam收参 成功

	@PostMapping("add/{uid}")
    @ApiOperation("添加任务")
    public ResultInfo addTask2(@PathVariable Integer uid,@RequestParam("name") String name,@RequestParam("start") Boolean start){
       
       //逻辑代码

    }

结果：

2.后端用@RequestBody收参 失败

 	@PostMapping("add")
    @ApiOperation("添加任务")
    public ResultInfo addTask(@RequestBody Task task){
     
	//逻辑代码

    }

结果：

报错原因：找不到请求体的参数，因为@RequestBody是从请求体中获取参数绑定到对象里

参数以表单形式提交（action:接口url）

form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)

//前端
url: 'localhost:8080/Task/add',
data{
name: "顾知遥",
start: 1
},
header: {
//参数以表单提交（不包含file类型），这个一定要写！
"Content-Type": "application/x-www-form-urlencoded"
//参数以表单提交（不包含file类型）
//"Content-Type": "multipart/form-data"
},

1.后端用@RequestParam接收。成功

	@PostMapping("add")
    @ApiOperation("添加任务")
    public ResultInfo addTask2(@RequestParam("name") String name,@RequestParam("start") Boolean start){
	
	//逻辑代码
	
    }

结果：

2.后端用@RequestBody接收 失败

	@PostMapping("add")
    @ApiOperation("添加任务")
    public ResultInfo addTask(@RequestBody Task task){
		
	//逻辑代码
	
    }

结果：

参数以json形式提交

//前端
url: 'localhost:8080/Task/add',
data：{
name: "顾知遥",
start: 1
},

或者:

//前端
var TaskList = [
{name:"南渡", start:1},
{name:"顾知遥", start:1},
{name:"沈子昂", start:1}
]

-----------------
url: 'localhost:8080/Task/addList',
data:JSON.stringify(TaskList),
header: {
//参数以json对象提交，这个一定要写！
"Content-Type": "application/json"
},

1.后端用@RequestParm收参 失败

	@PostMapping("add")
    @ApiOperation("添加任务")
    public ResultInfo addTask2(@RequestParam("name") String name,@RequestParam("start") Boolean start){

	//逻辑代码

    }

结果：

2.后端用@RequestBody接收

 	@PostMapping("add")
    @ApiOperation("添加任务")
    public ResultInfo addTask(@RequestBody Task task){
	
	//逻辑代码     

    }

结果：

总结：

前端用url拼接传参或者表单提交数据，后端用@RequestParm,路径参数用@PathVariable映射到路径上

前端传的是json对象。后端用@RequestBody收参