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

您所在的位置：网站首页 › get请求如何传递数组参数数据 › 项目开发之前后端联调：GET 请求如何传递参数/多个参数

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

2024-07-08 23:55| 来源: 网络整理| 查看: 265

前言

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

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

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

正文

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

后话

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

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

【本文地址】

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

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

今日新闻

推荐新闻