ubuntu如何自定义swagger UI

在Ubuntu上自定义Swagger UI可以通过以下几种方法实现：

使用Node.js和Express集成Swagger UI

1. 安装Node.js和npm：

sudo apt update
sudo apt install nodejs npm

2. 创建一个新的Node.js项目：

mkdir swagger-ui-project
cd swagger-ui-project
npm init -y

3. 安装Swagger UI Express：

npm install swagger-ui-express

4. 创建一个简单的Express应用：

创建一个名为 app.js 的文件，并添加以下内容：

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

// Load Swagger document
const swaggerDocument = YAML.load('./swagger.yaml');
const app = express();

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

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

5. 创建Swagger文档：

在项目目录中创建一个名为 swagger.yaml 的文件，并添加你的API文档。例如：

swagger: '2.0'
info:
  title: Sample API
  description: A sample API to demonstrate Swagger UI integration
  version: '1.0.0'
host: localhost:3000
basePath: /api
schemes:
  - http
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

6. 运行应用：

在项目文件夹中运行以下命令来启动应用：

node app.js

7. 访问Swagger UI：

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

使用Docker安装Swagger UI

1. 安装Docker：

sudo apt update
sudo apt install docker.io

2. 拉取Swagger UI Docker镜像：

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模块版本，例如 knife4j-openapi3-ui。
• 修改样式：主要的样式文件位于 /src/style/knife4j.less 中。你可以通过修改这个文件来自定义Swagger UI的主题。如果你使用的是 knife4j-vue 项目，那么你需要使用 npm run build 进行打包，生成 dist 文件夹并替换依赖。
• 自定义Swagger UI主题（使用前端框架）：如果你使用Vue、React或Angular等前端框架，可以充分利用框架特性来定制Swagger UI。例如，在Vue项目中，你可以修改 docs.html 文件，解析JSON数据并渲染自定义UI界面。
• 自定义Swagger UI样式（借助第三方库或插件）：一些第三方库或插件能简化Swagger UI的样式定制过程。例如，swagger-ui-layer（基于Vue的项目）允许通过修改源码实现样式自定义。

通过以上方法，你可以在Ubuntu上自定义Swagger界面，提升接口文档的可读性和美观度。