项目开发之前后端联调：GET 请求如何传递参数/多个参数

前言

依旧是要带给大家一句话：

你所有的缺陷都会在你做这件事情的时候表露无疑

许久没有碰过项目开发，前后端联调真的是忘得一干二净，今天重新复习了这部分知识，写下这篇笔记

正文

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 数据

后话

这一篇笔记也是很基础的，只是对容易混淆的知识做一个整理，也是我在学习过程的一个重拾知识的小步骤。

预告： 《前后端联调：如何进行表单传参》