使用Swagger自动生成接口文档

最新推荐文章于 2025-04-29 12:59:17 发布

duhuahuaya

最新推荐文章于 2025-04-29 12:59:17 发布

阅读量4k

点赞数 2

文章标签： css python 学习

本文链接：https://blog.youkuaiyun.com/duhuahuaya/article/details/123721854

版权

本文档介绍了如何安装和应用Swagger来自动生成接口文档。首先在VSCode中通过命令安装，接着在main.ts中引入并配置Swagger，包括设置标题、描述和接口文档名称。在完成基本配置后，通过编辑controllers文件，Swagger能够自动分离并标记不同的API。通过在posts.controller.ts中添加描述，接口文档将展示详细的操作说明。最后，读者可以尝试执行GET请求以验证接口的正确性，并通过举一反三的方式了解如何扩展更多接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装swagger

链接: link
1.打开vscode，在终端输入：

npm install --save @nestjs/swagger swagger-ui-express

在这里插入图片描述

应用swagger

1.打开入口文件main.ts，在引用里面加入

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

在这里插入图片描述

2.打开入口文件main.ts，在引用里面加入

 const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

在这里插入图片描述
3.上面的引用来自于官网，我们需要进行三处更改，如下更改，

（1）建立自己的标题，可以自选
（2）添加描述，自选描述
（3）更改接口文档名字，建议更改，默认为api,会影响多个api的路径

4.在终端输入

npm run start:dev

等待程序运行，运行后打开
打开地址http://localhost:3000/api-docs/，如下图。发现接口文档已经出来了

5.上图中Get到根路径：就是我们app.controller.ts里面的内容,打开app.controller.ts
加入代码：

@ApiTags('默认')
export class AppController {

在这里插入图片描述
6.打开地址http://localhost:3000/api-docs/，如下图。发现根接口文档已经被分离出来了，然后并且加上了默认的标签。

在这里插入图片描述
7.如法炮制，在posts.controller.ts中输入代码

@ApiTags('帖子')

在这里插入图片描述
8.打开地址http://localhost:3000/api-docs/，如下图。发现post接口文档已经被分离出来了，然后并且加上了帖子的标签。

添加描述

1.在posts.controller.ts中输入代码

@ApiOperation({summary:'显示博客列表'})

在这里插入图片描述
2.打开地址http://localhost:3000/api-docs/，如下图。发现post接口文档已经添加了项目描述

测试

1.点击GET，再点击try it out
在这里插入图片描述
2.点击execute,里面会出现具体响应。

举一反三

1.在posts.controller.ts中输入代码
在这里插入图片描述
2.点击execute,查看响应