Nest.js 实战 (三):使用 Swagger 优雅地生成 API 文档

简介: 这篇文章介绍了Swagger,它是一组开源工具,围绕OpenAPI规范帮助设计、构建、记录和使用RESTAPI。文章主要讨论了Swagger的主要工具,包括SwaggerEditor、SwaggerUI、SwaggerCodegen等。然后介绍了如何在Nest框架中集成Swagger,展示了安装依赖、定义DTO和控制器等步骤,以及如何使用Swagger装饰器。文章最后总结说,集成Swagger文档可以自动生成和维护API文档,规范API标准化和一致性,但会增加开发者工作量,需要保持注释和装饰器的准确性。

什么是 Swagger ?

Swagger 是一组围绕 OpenAPI 规范构建的开源工具,可以帮助您设计、构建、记录和使用 REST API。主要的 Swagger 工具 包括:

Nest 集成 Swagger

  1. 安装依赖
    pnpm add @nestjs/swagger swagger-ui-express
    
  2. main.ts 文件中定义并初始化 SwaggerModule

    import {
         
          NestFactory } from '@nestjs/core';
    import {
         
          DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
    
    import {
         
          AppModule } from './app.module';
    async function bootstrap() {
         
         
    const app = await NestFactory.create(AppModule);
    
    // 构建swagger文档
    const options = new DocumentBuilder()
      .setTitle('vue3-admin')
      .setDescription('Background system based on Nest.js + Vue3 full stack development')
      .setVersion('1.0')
      .build();
    const document = SwaggerModule.createDocument(app, options);
    SwaggerModule.setup('docs', app, document);
    
    await app.listen(3000);
    }
    bootstrap();
    
  3. 启动服务,访问http://localhost:3000/docs,你会看到 Swagger 页面:
    ve5yt9s0se80a5cityx55zpj01rtdcv1.png

DocumentBuilder 属性

方法 描述
setTitle 文档标题
setDescription 文档描述
setVersion 文档版本
setTermsOfService 文档服务条款
setContact 文档联系信息
setLicense 文档许可证信息
addServer 文档服务地址
setExternalDoc 文档外部链接
setBasePath 设置文档基础路径
addTag 添加文档标签
addExtension 添加扩展
addSecurity 添加安全方案
addGlobalParameters 添加全局参数
addSecurityRequirements 添加安全需求
addBearerAuth 添加 Bearer Token 认证
addOAuth2 添加 OAuth2 认证
addApiKey 添加 ApiKey
addBasicAuth 添加基础认证
addCookieAuth 添加 Cookie 认证
build 构建服务

在 Nest 中使用

  1. DTO(响应数据传输对象) 文件中使用装饰器

    import {
         
          ApiProperty } from '@nestjs/swagger';
    import {
         
          IsNumberString, IsOptional, IsUUID } from 'class-validator';
    
    export class PostParamsDto {
         
         
    @ApiProperty({
         
         
      type: String,
      description: '岗位名称',
      required: false,
      default: '前端工程师',
    })
    name?: string;
    
    @ApiProperty({
         
         
      type: String,
      description: '所属组织',
      default: 'f45cd48b-e703-49db-91be-ae7f594e73e0',
      required: false,
    })
    @IsOptional()
    @IsUUID('all', {
         
          message: 'orgId 参数不正确' })
    orgId?: string;
    
    @ApiProperty({
         
         
      type: Number,
      description: '开始日期',
      default: 1721145600000,
      required: false,
    })
    @IsOptional()
    @IsNumberString({
         
         }, {
         
          message: '开始日期必须是时间戳格式' })
    startTime?: number;
    
    @ApiProperty({
         
         
      type: Number,
      description: '结束日期',
      default: 1721318399999,
      required: false,
    })
    @IsOptional()
    @IsNumberString({
         
         }, {
         
          message: '结束日期必须是时间戳格式' })
    endTime?: number;
    }
    
  2. Controller 控制器 中使用装饰器

    import {
         
          Controller, Get, Query } from '@nestjs/common';
    import {
         
          ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger'; // swagger 接口文档
    
    import {
         
          PostParamsDto } from './dto/params-post.dto';
    import {
         
          ResponsePostDto } from './dto/response-post.dto';
    import {
         
          PostManageService } from './post-manage.service';
    
    @ApiTags('智能行政-岗位管理')
    @Controller('post-manage')
    export class PostManageController {
         
         
    constructor(private readonly postManageService: PostManageService) {
         
          }
    
    /**
    * @description: 查询岗位列表
    */
    @Get()
    @ApiOkResponse({
         
          type: ResponsePostDto })
    @ApiOperation({
         
          summary: '获取岗位管理列表' })
    findAll(@Query() params: PostParamsDto) {
         
         
    return this.postManageService.findAll(params);
    }
    }
    

常用 Swagger 装饰器

装饰器 描述
@ApiTags 为控制器或方法添加标签,用于组织 Swagger UI 文档
@ApiOperation 为控制器方法添加操作描述,包括摘要和详细描述
@ApiParam 描述路径参数、请求参数或响应参数,包括名称、类型、描述等
@ApiBody 指定请求体的 DTO 类型,用于描述请求体的结构
@ApiResponse 描述 API 的响应,包括状态码、描述等
@ApiBearerAuth 指定请求需要携带 Bearer Token,用于身份验证
@ApiProperty 为 DTO 类型的属性添加元数据,如描述、默认值等
@ApiQuery 描述查询参数,包括名称、类型、描述等
@ApiHeader 描述请求头信息,包括名称、类型、描述等
@ApiExcludeEndpoint 标记一个控制器方法不在 Swagger UI 中显示

效果图

cz9r4j5zgochx1r1xc2g6og0yx5mlv8d.png

总结

Nest 中集成 Swagger 文档可以帮助开发者自动生成和维护 API 文档,Swagger 的集成提供了在线生成、‌自动生成、‌可操作数据库等优点,规范了 API 的标准化和一致性,后期还可以把 Swagger 文档导入到其他平台,例如 ApiFox
xjt59k8vturpenfaamoxy89eqcwkajpk.png

不足之处就是会增加开发者的工作量,每一个接口都需要保持注释和装饰器的准确性和完整性,仍然需要一定的维护工作。

相关文章
|
26天前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
16天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
10天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
19天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
36 12
|
11天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
25天前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
26天前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
26天前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
|
26天前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
23天前
|
Java 测试技术 API
详解Swagger:Spring Boot中的API文档生成与测试工具
详解Swagger:Spring Boot中的API文档生成与测试工具
35 4
下一篇
DataWorks