express集成swagger

若梦plus

于 2024-06-20 13:35:31 发布

阅读量390

点赞数 4

分类专栏： Node.js 文章标签： express 前端 node.js

本文链接：https://blog.csdn.net/qq_40588441/article/details/139830214

版权

Node.js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

express集成swagger

前置环境

如果node服务是用ts+nodejs相关框架编写，需要安装一下环境
```
npm install -g typescript
npm install -g ts-node@8.5.4
```

引入静态资源和插件

安装express-swagger-generator

cnpm i express-swagger-generator@1.1.17

引入swagger静态资源

静态资源下载地址

https://wwi.lanzouv.com/iGTCH00qzw6f

将所下载的public文件夹下对应的静态资源，替换到自己的node项目public文件夹

同样，将当前项目的index.html替换为所下载的蓝奏云压缩包中的index.html内容

index.html核心内容如下：

<body>
  <div id="swagger-ui"></div>

  <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
  <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
  <script>
    window.onload = function () {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        // 端口与node服务启动端口一致
        url: "http://localhost:3000/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })
      // End Swagger UI call region

      window.ui = ui
    }
  </script>
</body

编写配置项

 let options: {
    swaggerDefinition: {
      info: {
        description: "接口文档",
        title: "Swagger",
        version: require("../../package.json").version,
      },
      host: `localhost:3000`,
      basePath: "/",
      produces: ["application/json", "application/xml"],
      schemes: ["http", "https"],
      securityDefinitions: {
        JWT: {
          type: "apiKey",
          in: "header",
          name: "Authorization",
          description: "Bearer Authorization",
        },
      },
    },
    route: {
      url: "./swagger-ui.html",
      docs: "/swagger.json", //swagger文件 api
    },
    basedir: __dirname, //app absolute path
    files: ["../router/api/*.ts"], //Path to the API handle folder
  },

按照规则编写注释

https://www.npmjs.com/package/express-swagger-generator

引入配置项

在app.js/app.ts中引入

const expressSwagger = require("express-swagger-generator")(app);
expressSwagger(options);

app
  .listen(3000, () => {
    console.log(`
    ################################################
    🛡️  Swagger文档地址: http://localhost:3000 🛡️
    ################################################
  `);
  })
  .on("error", (err) => {
    process.exit(1);
  });