前后端接口调用传参方式总结

前后端进行交互时方法一般就分为get和post，至于后面的delete和put都是基于post进行封装而出的。

Http请求中不同的请求方式会设置不同的Content-Type,参数的传递方式就会不一样，主要分为以下三种：Query String Parameters、Form Data、Request Payload；

GET请求

我们发送get请求时，参数是通过url的形式进行传递，即url中？后面拼接的参数，以&做连接，参数直接表现在url中。
例如：http://localhost:8801/api/selectDetail?id=1&userName=“zhang”
前端通过query String parameters方式传参，axios中指明使用params

export function selectList(params) {
  return request({
    url: 'api/xxx/selectList',
    method: 'get',
    params
  })
}
1
2
3
4
5
6
7

POST请求

Post请求有两种传递参数的形式：form data和request payload的形式
发起post请求时若未指定content-type，则默认content-type为application/x-www-form-urlencoded,参数是在请求体中，参数以form data的形式传递，不会出现在请求的url中。

若content-type为application/json，则参数会以request payload的形式进行传递，数据格式为json形式，请求表单的参数在request payload中，不会出现在请求的url中，使用原生的Ajax post请求不指定请求头默认的参数就是出现在request payload中**。 **
前端通过formData方式传参，axios中指明使用data

export function selectList(data) {
  return request({
    url: 'api/xxx/selectList',
    method: 'post',
    data
  })
}
1
2
3
4
5
6
7

前端通过request payload方式传参

export function selectList(params) {
  return request({
    url: 'api/xxx/selectList',
    method: 'post',
    params
  })
}
1
2
3
4
5
6
7

1. spring通过 @requestParam （@queryParam）（路径传参-默认传参注解）接收的参数都是url拼接 将参数放到query String parameters

• params 传参 – 推荐 params
• formData传参 – data
• Qs传参 – data ，“Content-Type”: “application/x-www-form-urlencoded”

@GetMapping(value = "/hello")
    public ResponseEntity getUser(@RequestParam String username){  
}
//http://lcoalhost:8080/hello?username=1111
1
2
3
4

2. spring通过@requestBody，通过post提交消息主体中参数，参数值为json格式，不可以是表单格式

@PostMapping
public ResponseEntity<Record> add(@RequestBody Record record) {
    return ResponseEntity.ok(this.recordService.insert(record));
}

1
2
3
4
5

POST http://localhost:5138/record/
Content-Type: application/json

{
  "objective": 1.0,
  "objRate": 1.0,
  "objDate": "2022/1/8 12:05:00",
  "outputPrice": 1.0,
}
1
2
3
4
5
6
7
8
9

3. @pathVariable（@pathParam）url路径中参数

@DeleteMapping(value = "/job/{id}")
    public ResponseEntity delete(@PathVariable(value = "id", required = false, defaultValue = "0") Long id){
}

//http://localhost:8080/job/1
1
2
3
4
5