Nest.js 从零到壹系列（七）：讨厌写文档，Swagger UI 了解一下？

本文由图雀社区认证作者 布拉德特皮 写作而成，点击阅读原文查看作者掘金链接，感谢作者的优质输出，让我们的技术世界变得更加美好????

前言

上一篇介绍了如何使用寥寥几行代码就实现 RBAC 0，解决了权限管理的痛点，这篇将解决另一个痛点：写文档。

上家公司在恒大的时候，项目的后端文档使用 Swagger UI 来展示，这是一个遵循 RESTful API 的、 可以互动的文档，所见即所得。

然后进入了目前的公司，接口文档是用 Markdown 写的，并保存在 SVN 上，每次接口修改，都要更新文档，并同步到 SVN，然后前端再拉下来更新。

这些都还好，之前还有直接丢个 .doc 文档过来的。。。。

以前我总吐槽后端太懒，文档都不愿更新，直到自己写后端时，嗯，真香。。。于是，为了不耽误摸鱼时间，寻找一个趁手的文档工具，就提上日程了。

GitHub 项目地址^[1]，欢迎各位大佬 Star。

什么是 RESTful API

怎样用通俗的语言解释 REST，以及 RESTful ？ - 覃超的回答 - 知乎^[2]

Swagger 之旅

初始化 Swagger

$ yarn add @nestjs/swagger swagger-ui-express -S  

安装完依赖包后，只需要在 main.ts 中引入，并设置一些基本信息即可：

// src/main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as express from 'express';
import { logger } from './middleware/logger.middleware';
import { TransformInterceptor } from './interceptor/transform.interceptor';
import { HttpExceptionFilter } from './filter/http-exception.filter';
import { AllExceptionsFilter } from './filter/any-exception.filter';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(express.json()); // For parsing application/json
  app.use(express.urlencoded({ extended: true })); // For parsing application/x-www-form-urlencoded
  // 监听所有的请求路由，并打印日志
  app.use(logger);
  // 使用拦截器打印出参
  app.useGlobalInterceptors(new TransformInterceptor());
  app.setGlobalPrefix('nest-zero-to-one');
  app.useGlobalFilters(new AllExceptionsFilter());
  app.useGlobalFilters(new HttpExceptionFilter());
  // 配置 Swagger
  const options = new DocumentBuilder()
    .setTitle('Nest zero to one')
    .setDescription('The nest-zero-to-one API description')
    .setVersion('1.0')
    .addTag('test')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api-doc', app, document);

  await app.listen(3000);
}
bootstrap();

接下来，我们访问 localhost:3000/api-doc/#/ （假设你的端口是 3000），不出意外，会看到下图：

这就是 Swagger UI，页面列出了我们之前写的 Router 和 DTO（即图中的 Schemas）

映射 DTO

点开 RegisterInfoDTO，发现里面是空的，接下来，我们配置一下参数信息，在 user.dto.ts 中引入 ApiPro