Linux下Swagger UI如何自定义展示 - 问答

在Linux下，要自定义Swagger UI的展示，你需要遵循以下步骤：

安装Swagger UI：首先，确保你已经在你的Linux系统上安装了Swagger UI。你可以使用npm（Node.js包管理器）来安装它。如果你还没有安装Node.js，请先安装它。然后运行以下命令来全局安装Swagger UI：

npm install -g swagger-ui-express

创建一个Express应用：在你的项目目录中，创建一个名为app.js的文件，并在其中创建一个简单的Express应用。例如：

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Swagger UI is running at http://localhost:${port}`);
});

添加Swagger定义：在项目目录中创建一个名为swagger.json的文件，并添加你的API定义。这是一个简单的示例：

{
  "swagger": "2.0",
  "info": {
    "description": "My API",
    "version": "1.0.0"
  },
  "basePath": "/",
  "paths": {
    "/users": {
      "get": {
        "summary": "List all users",
        "responses": {
          "200": {
            "description": "An array of users"
          }
        }
      }
    }
  }
}

集成Swagger UI：在你的app.js文件中，添加以下代码来集成Swagger UI：

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

现在，你可以运行你的Express应用：

node app.js

访问http://localhost:3000/api-docs，你应该能看到Swagger UI界面，其中包含了你的API定义。

自定义Swagger UI：要自定义Swagger UI，你可以修改swagger.json文件中的定义，例如添加自定义的描述、标签、参数等。此外，你还可以通过传递一个配置对象给swaggerUi.setup()函数来自定义Swagger UI的外观和行为。例如，要更改UI的主题，你可以这样做：

const customUiConfig = {
  deepLinking: true,
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  plugins: [
    SwaggerUIBundle.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout",
  requestInterceptor: (req) => {
    return req;
  },
  responseInterceptor: (res) => {
    return res;
  },
  showExtensions: true,
  docExpansion: "none",
  defaultModelsExpandDepth: 1,
  defaultModelExpandDepth: 1,
  defaultModelRendering: 'example',
  displayOperationId: false,
  displayRequestDuration: false,
  operationsSorter: 'alpha',
  tagsSorter: 'alpha',
  validatorUrl: null,
  customCss: `
    .topbar {
      background-color: #007bff;
    }
  `,
};

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, customUiConfig));

在这个例子中，我们添加了一个自定义的CSS样式来更改顶部栏的背景颜色。你可以根据需要修改customCss属性来自定义其他样式。

更多关于Swagger UI自定义的信息，请参考官方文档：https://swagger.io/tools/swagger-ui/

0 赞

0 踩