프로젝트 개발 전 백엔드 공동 디버깅: GET 요청에서 매개변수/여러 매개변수를 전달하는 방법

머리말

나는 아직도 당신에게 말하고 싶습니다 :

이렇게 하면 당신의 모든 결점이 드러날 것이다

오랫동안 프로젝트 개발에 손을 대지 않아서 프론트엔드와 백엔드의 조인트 디버깅을 정말 다 잊어버렸는데, 이 부분의 지식을 오늘 다시 복습하고 이 노트를 썼습니다.

텍스트

GET 요청에서 매개변수를 전달하는 방법에는 두 가지가 있습니다.

http://localhost/test/1

http://localhost/test?id=1

프론트엔드 데모

사전 준비

//axios配置
const config:object = {
    //这部分省略...
}

//实例化axios
const service = axios.create(config);

http://localhost/test/ 매개변수

이 방법은 요청 경로 바로 뒤에 요청 매개변수를 전달하는 것 입니다 . 코드는 다음과 같습니다.

프런트엔드 요청 API

service.get(`http://localhost/test/${id}`) //占位符直接放入id的值
    .then(res => console.info("请求结果是: ", res));

백엔드 인터페이스

백엔드 인터페이스를 작성할 때 형식 매개변수 유형이 경로 매개변수 유형과 일치해야 하고 형식 매개변수 이름이 경로 매개변수 자리 표시자의 이름과 일치해야 매개변수가 가능하다는 사실에 주의해야 합니다. 받았다.

@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 데이터를 수신하는 데 사용됩니다.

후문

이 노트 역시 아주 기초적이어서 헷갈리기 쉬운 지식들을 정리한 것 뿐이고, 지식을 되찾기 위한 나의 학습 과정의 작은 발걸음이기도 합니다.

미리보기: "프런트엔드 및 백엔드 조인트 디버깅: 양식 매개변수 전달 방법"