前言
依旧是要带给大家一句话:
你所有的缺陷都会在你做这件事情的时候表露无疑
许久没有碰过项目开发,前后端联调真的是忘得一干二净,今天重新复习了这部分知识,写下这篇笔记
正文
GET 请求有两种参数传递方式:
http://localhost/test/1
http://localhost/test?id=1
前端demo
初步准备工作
//axios配置
const config:object = {
//这部分省略...
}
//实例化axios
const service = axios.create(config);
http://localhost/test/params
这一种是请求参数直接跟在请求路径后的路径传参,代码如下:
前端请求api
service.get(`http://localhost/test/${id}`) //占位符直接放入id的值
.then(res => console.info("请求结果是: ", res));
后端接口
后端接口编写需要注意形参类型需要与路径参数类型一致,形参名需要与路径参数占位符中的名称一致,才能够接收到params。
也可以用 @PathVariable(value = "xx") 进行指定
@RestController
@Slf4j
public class TestController {
@GetMapping("/test/{id}")
//如果不用@PathVariable注解,形参需要与路径占位符中的名称一致,即:id
public Result queryUser(@PathVariable("id") String userId) {
//...
return Result.ok();
}
}
http://localhost/test?id=1
第二种是请求参数转换为字符串拼接在请求url后面的url地址传参,代码如下:
前端请求api
service.get('http://localhost/test', { id : 1 })
.then(res => console.info('请求结果是:', res));
后端接口
要求依旧是需要一一对应
这一种形式下后端接口参数如果没有一一对应则不再用 @PathVariable 指定传递,而是用 @RequestParam 指定
@RestController
@Slf4j
public class TestController {
@GetMapping("/test")
public Result queryUser(@RequestParam("id") String userId) {
//...
return Result.ok();
}
}
拓展
注解 | 说明 |
@PathVariable | 用于接收路径传参,使用占位符描述路径参数,如 {参数名称} |
@RequestParam | 用于接收url地址传参或者表单传参 |
@RequestBody | 用于接收 json 数据 |
后话
这一篇笔记也是很基础的,只是对容易混淆的知识做一个整理,也是我在学习过程的一个重拾知识的小步骤。
预告: 《前后端联调:如何进行表单传参》