怎样在Ubuntu上自定义Swagger界面

在Ubuntu上自定义Swagger界面可以通过多种方法实现，以下是一些常见的方法：

使用Node.js和Express框架

1. 安装Node.js和npm：

sudo apt update
sudo apt install nodejs npm

2. 创建Express应用：

mkdir my-swagger-ui
cd my-swagger-ui
npm init -y
npm install express swagger-ui-express

3. 创建app.js文件：

const express = require('express');
const swaggerUi = require('swagger-ui-express');
const YAML = require('yamljs');

const app = express();
const port = process.env.PORT || 3000;

// 读取Swagger JSON文件
const swaggerDocument = YAML.load('./swagger.yaml');

// 自定义Swagger UI选项
const customUiOptions = {
  deepLinking: true,
  presets: [swaggerUi.presets.apis, swaggerUi.presets.promises],
  plugins: [swaggerUi.plugins.DownloadUrl],
  layout: "StandaloneLayout",
};

// 使用自定义选项启动Swagger UI
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, customUiOptions));

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

4. 创建Swagger文档： 创建一个名为swagger.yaml的文件，并添加你的API文档。例如：

swagger: '2.0'
info:
  title: Sample API
  description: A sample API to demonstrate Swagger UI integration
  version: '1.0.0'
paths:
  /users:
    get:
      summary: List all users
      responses:
        '200':
          description: An array of users
          schema:
            type: array
            items:
              ref: '#/definitions/User'
definitions:
  User:
    type: object
    properties:
      id:
        type: integer
      name:
        type: string

5. 运行应用：

node app.js

6. 访问Swagger UI： 在浏览器中访问 http://localhost:3000/api-docs，你应该能看到Swagger UI界面。

使用Docker安装和自定义Open WebUI

1. 安装Docker：

sudo apt update
sudo apt install docker.io

2. 拉取Open WebUI镜像：

docker pull swaggerapi/swagger-ui-express

3. 运行Swagger UI容器：

docker run -p 8080:8080 swaggerapi/swagger-ui-express

4. 访问Swagger UI： 在浏览器中访问 http://localhost:8080，你应该能看到Swagger UI界面。

自定义Swagger UI样式

• 复制Swagger UI资源： 你可以从Swagger UI的GitHub仓库下载最新的资源文件，或者使用npm来获取它们。

git clone https://github.com/swagger-api/swagger-ui.git

或者

npm install swagger-ui-dist

• 自定义CSS： 在 swagger-ui-dist 目录中，你会找到一个名为 swagger-ui.css 的文件。你可以在这个文件中添加或修改CSS规则来自定义Swagger UI的外观。

• 自定义JavaScript： 如果你需要更深入的自定义，比如改变UI的行为，你可能需要编辑 swagger-ui-bundle.js 和 swagger-ui-standalone-preset.js 文件。

使用前端框架自定义Swagger UI

如果你使用Vue、React或Angular等前端框架，可以充分利用框架特性来定制Swagger UI。例如，在Vue项目中，你可以修改 docs.html 文件，解析JSON数据并渲染自定义UI界面。

通过以上方法，你可以在Ubuntu上成功自定义Swagger UI，选择适合你项目需求的方式进行操作即可。