body Param Query 三个不同的入参分别是什么意思在前端要怎么传这三种不同的参数

在 NestJS 中，@Body()、@Param() 和 @Query() 用于处理不同类型的请求参数。以下是它们的含义及前端传递方式：

@Body()：请求体参数
• 含义：用于获取请求体中的数据（如 POST/PUT 请求中提交的 JSON、表单数据等）。

• 前端传递方式：

• 发送 POST/PUT/PATCH 请求，将数据放在请求体中。

• JSON 示例（Axios）：

```javascript
axios.post('/api/users', {name: 'John',age: 25
});
```

• 表单数据（如上传文件）：

```javascript
const formData = new FormData();
formData.append('name', 'John');
formData.append('avatar', file);axios.post('/api/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});
```

@Param()：路由参数
• 含义：获取 URL 路径中的动态参数（如 /users/:id 中的 id）。

• 前端传递方式：

• 直接在 URL 路径中传递参数，适用于 GET/DELETE 等请求。

• 示例（Axios）：

```javascript
axios.get('/api/users/123'); // 匹配路由 `/users/:id`
```

• 后端获取方式：

```typescript
@Get(':id')
getUser(@Param('id') id: string) {// id = '123'
}
```

@Query()：查询参数
• 含义：获取 URL 中 ? 后的键值对参数（如 /users?name=John&age=25）。

• 前端传递方式：

• 在 URL 后附加查询字符串，适用于 GET 请求。

• 示例（Axios）：

```javascript
axios.get('/api/users', {params: { name: 'John', page: 2 }
});
// 实际 URL：/api/users?name=John&page=2
```

• 后端获取方式：

```typescript
@Get()
getUsers(@Query('name') name: string, @Query() query: any) {// name = 'John'// query = { name: 'John', page: '2' }
}
```

总结对比

参数类型	装饰器	传递位置	常见场景	示例 URL
Body	`@Body()`	请求体（Request Body）	提交表单、JSON 数据	POST /api/users
Param	`@Param()`	URL 路径中	资源标识（如 ID）	GET /api/users/123
Query	`@Query()`	URL 查询字符串	过滤、分页、排序	GET /api/users?name=John

掌握这些参数的使用方式，能够更灵活地处理不同场景下的数据传递需求。

在 NestJS 中，application/x-www-form-urlencoded、application/json 和 multipart/form-data 是 HTTP 请求的 Content-Type，它们定义了请求体（@Body()）的数据格式。而 @Param() 和 @Query() 与请求体无关，只涉及 URL 路径参数和查询参数。以下是它们的联系与区别：

application/x-www-form-urlencoded
• 用途：传统的表单提交格式，数据会被编码为键值对（类似 URL 查询参数）。

• 与 @Body() 的关系：

• 数据通过 @Body() 接收。

• 前端传递时需设置 Content-Type: application/x-www-form-urlencoded。

• 示例（Axios）：

```javascript
axios.post('/api/submit', 'name=John&age=25', {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
```

• NestJS 接收：

```typescript
@Post()
submitForm(@Body() formData: any) {// formData = { name: 'John', age: '25' }
}
```

application/json
• 用途：传递 JSON 格式的复杂数据（如嵌套对象、数组）。

• 与 @Body() 的关系：

• 数据通过 @Body() 接收，NestJS 会自动解析 JSON。

• 前端需设置 Content-Type: application/json。

• 示例（Axios）：

```javascript
axios.post('/api/data', { name: 'John', hobbies: ['coding', 'music'] }, {headers: { 'Content-Type': 'application/json' }
});
```

• NestJS 接收：

```typescript
@Post()
submitData(@Body() data: any) {// data = { name: 'John', hobbies: ['coding', 'music'] }
}
```

multipart/form-data
• 用途：上传文件或混合文本和文件数据（如表单包含文件输入）。

• 与 @Body() 的关系：

• 文本字段通过 @Body() 接收。

• 文件字段需结合 @UploadedFile() 或 @UploadedFiles()（需使用 multer 中间件）。

• 示例（Axios）：

```javascript
const formData = new FormData();
formData.append('name', 'John');
formData.append('avatar', file);axios.post('/api/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});
```

• NestJS 接收：

```typescript
@Post()
@UseInterceptors(FileInterceptor('avatar')) // 使用文件拦截器
uploadFile(@Body() formData: { name: string },@UploadedFile() file: Express.Multer.File
) {// formData.name = 'John'// file 包含上传的文件信息
}
```

@Param() 和 @Query()
• 与 Content-Type 无关：

• @Param() 从 URL 路径中获取参数（如 /users/:id）。

• @Query() 从 URL 查询字符串中获取参数（如 /users?name=John）。

• 示例：

```javascript
// 前端请求
axios.get('/api/users/123?name=John');
```
```typescript
// NestJS 接收
@Get(':id')
getUser(@Param('id') id: string,  // id = '123'@Query('name') name: string // name = 'John'
) {}
```

总结对比

Content-Type	数据位置	适用场景	NestJS 接收方式
`application/x-www-form-urlencoded`	请求体（Body）	简单键值对表单提交	`@Body()`
`application/json`	请求体（Body）	复杂结构化数据（JSON）	`@Body()`
`multipart/form-data`	请求体（Body）	文件上传或混合数据	`@Body()` + `@UploadedFile()`
N/A	URL 路径	资源标识（如 ID）	`@Param()`
N/A	URL 查询字符串	过滤、分页、排序参数	`@Query()`