linux

Linux下Swagger UI如何自定义展示

小樊
39
2025-05-03 08:05:23
栏目: 智能运维

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

  1. 安装Swagger UI:首先,确保你已经在你的Linux系统上安装了Swagger UI。你可以使用npm(Node.js包管理器)来安装它。如果你还没有安装Node.js,请先安装它。然后运行以下命令来全局安装Swagger UI:
npm install -g swagger-ui-express
  1. 创建一个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}`);
});
  1. 添加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"
          }
        }
      }
    }
  }
}
  1. 集成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定义。

  1. 自定义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
看了该问题的人还看了