在 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() |
關鍵點
@Body()的形態由 Content-Type 決定：不同 Content-Type 影響請求體的解析方式。@Param()和@Query()獨立于 Content-Type：它們只處理 URL 路徑和查詢參數。- 文件上傳需特殊處理：使用
multipart/form-data時，需結合文件攔截器（如multer）和@UploadedFile()。
