我们知道目前前端和后端进行数据传输大致的方法有以下五种。

• url param
• url query
• form-urlencoded
• form-data
• json

还有一些其他的例如xml那种方式这里就不进行说明了，目前基本不会使用，现在发现139邮箱是这种方式进行传递的。但是发现他的content-type也并没有设置application/xml。

以前也总结过express上述方式的解析方式：《重学Node.js及其框架(Express, Koa, egg.js) 之 Express框架》

下面我们来介绍一下在nestjs中如何解析这些方式传递的数据。

url param

这种方式对于我们前端来说，就是我们前端的动态路由。一般是get请求会通过这种方式进行传递，不过post请求也是可以的,只不过一般不这么用。(post请求参数系统放在请求体中)。在nest中我们使用@Param进行解析url param参数。并且可以指定获取那个具体的参数。

js
 代码解读
复制代码
  @Get('geturlparams/:id')
  getUrlParam(@Param('id') id: string) { // 指定获取id
    return `获取get请求url param参数: ${id}`;
  }

我们可以在url中传递多个参数，通过/分割。对于获取多个数据，我们一般不在@Param中指定具体的参数名。

js
 代码解读
复制代码
// @Get('geturlparams/:id/:name')
// getUrlParams(@Param('id') id: string, @Param('name') name: string) {
//   return `获取get请求url param参数: id: ${id}, name: ${name}`;
// }
@Get('geturlparams/:id/:name')
getUrlParams(@Param() obj: Record) {
    console.log('obj', obj);
    return `获取get请求url param参数: ${JSON.stringify(obj)}`;
}

url query

url query一般也是get请求进行传递参数的一种方式。我们在定义接口路由的时候不需要向url param那样事先定义参数名称，而是可以直接拿到传递的数据。

在nest中通过@Query进行获取参数，也是可以指定具体的参数名称进行获取。同url param一样post请求也是可以的，只是日常不这样用来获取参数而已。

js
 代码解读
复制代码
// @Get('geturlquery')
// getUrlQuery(@Query() obj: Record) {
//   console.log('obj', obj);
//   return `获取get请求url query参数: ${JSON.stringify(obj)}`;
// }
@Get('geturlquery')
getUrlQuery(@Query('name') name: string) {
    // 只获取name参数
    return `获取get请求url query参数: ${name}`;
}

form-urlencoded

这种方式是通过表单post请求提交数据的一种方式。其实就是把上面的url query传递的参数样式放在请求体body中传递给后端。所以说post请求用这种方式进行传递数据。

在nest中通过@Body进行获取参数，也是可以指定具体的参数名称进行获取。在get请求中也是可以进行传递的。并且content-type设置为application/x-www-form-urlencoded

js
 代码解读
复制代码
  @Post('postformurlencoded')
  postFormUrlEncoded(@Body() body: Record) {
    console.log('post-body', body);
    return `获取post请求form-urlencoded参数: ${JSON.stringify(body)}`;
  }
  
  // @Post('postformurlencoded')
  // postFormUrlEncoded(@Body('name') name: string) {
  //   return `获取post请求form-urlencoded参数: name: ${name}`;
  // }

form-data

这种方式也是通过表单post请求提交数据的一种方式。文件数据传递一般通过这种方式。他的格式是用 --------- + 一串数字做为 boundary 分隔符。

如果单纯的传递文本类型，一般不会使用这种方式，因为他是通过特殊格式进行分割数据，所以会增大请求体体积。

在nest中进行解析这种参数，我们可以通过@UploadedFiles配合下面这种方式进行获取，如果想要获取传递的文本，我们还是需要通过@Body。并且需要指定content-type为multipart/form-data

js
 代码解读
复制代码
import { AnyFilesInterceptor } from '@nestjs/platform-express';
@Post('postformdata')
@UseInterceptors(
    AnyFilesInterceptor({
      dest: './uploads/',
    }),
)
postFormData(@Body() body: any, @UploadedFiles() files: any) {
    console.log('post-files', files);
    console.log('post-body', body);
    return `获取post请求form-data参数: ${JSON.stringify({
      body,
      files,
    })}`;
}

json

这种方式是现在post传递数据最常用的方式，在nest中我们也不需要特殊处理直接通过@Body进行获取即可。nestjs会自动根据content-type去进行正确处理。

js
 代码解读
复制代码
  @Post('postjson')
  postJson(@Body() body: Record) {
    console.log('post-body', body);
    return `获取post请求json参数: ${JSON.stringify(body)}`;
  }
  
  // @Post('postjson')
  // postJson(@Body('name') name: string) {
  //   return `获取post请求form-urlencoded参数: name: ${name}`;
  // }

往期年度总结

• 四年沿海城市，刚毕业，一年3家公司
• 七月仿佛又回到了那一年（2023年中总结）
• 一位初入职场前端仔的年度终结 <回顾2022，展望2023>
• 大学两年半的前端学习

往期文章

• 半年没看vue官网，3.5刚刚发布，趁机整理下

• 啊，你还在找一款强大的表格组件吗？
• 前端大量数据层级展示及搜索定位预览
• 如何从0开始认识m3u8(提取，解析及下载)
• 展示大量数据节点(tree)，引发的一次性能排查
• ts装饰器的那点东西
• 这是你所知道的ts类型断言和类型守卫吗？
• TypeScript官网内容解读
• 经常使用ts的你，知道这些内容？
• 你有了解过原生css的scope？
• 现在比较常用的移动端调试你知道哪些？
• 众多跨标签页通信方式，你知道哪些？（二）
• 众多跨标签页通信方式，你知道哪些？
• 反调试吗？如何监听devtools的打开与关闭
• 因为原生，选择一家公司（前端如何防笔试作弊）
• 结合开发，带你熟悉package.json与tsconfig.json配置
• 如何优雅的在项目中使用echarts
• 如何优雅的做项目国际化
• 近三个月的排错，原来的憧憬消失喽
• 带你从0开始了解vue3核心（运行时）
• 带你从0开始了解vue3核心（computed, watch）
• 带你从0开始了解vue3核心（响应式）
• 3w+字的后台管理通用功能解决方案送给你
• 入职之前，狂补技术，4w字的前端技术解决方案送给你（vue3 + vite ）

专栏文章

• 重学vue及其生态
• 前端面试
• 前端工程化
• amis 低代码实战
• 协议与安全
• 重学react
• 重学nodejs
• 工作总结

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，    支持一下博主~

公众号：全栈追逐者，不定期的更新内容，关注不错过哦！