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

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

Http请求中不同的请求方式会设置不同的Content-Type,参数的传递方式就会不一样,主要分为以下三种:Query String ParametersForm DataRequest 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
  })
}

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
  })
}

前端通过request payload方式传参

export function selectList(params) {
  return request({
    url: 'api/xxx/selectList',
    method: 'post',
    params
  })
}
  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. spring通过@requestBody,通过post提交消息主体中参数,参数值为json格式,不可以是表单格式
@PostMapping
public ResponseEntity<Record> add(@RequestBody Record record) {
    return ResponseEntity.ok(this.recordService.insert(record));
}

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. @pathVariable(@pathParam)url路径中参数
@DeleteMapping(value = "/job/{id}")
    public ResponseEntity delete(@PathVariable(value = "id", required = false, defaultValue = "0") Long id){
}

//http://localhost:8080/job/1

你可能感兴趣的:(SpringBoot,java,vue.js,axiox)