如何在ubuntu上自定义swagger界面 - 问答

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

使用Docker安装Swagger UI

安装Docker：

sudo apt update
sudo apt install docker.io

拉取Swagger UI Docker镜像：

docker pull swaggerapi/swagger-ui-express

运行Swagger UI容器：

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

访问Swagger UI：

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

使用Node.js和Express集成Swagger UI

安装Node.js和npm：

sudo apt update
sudo apt install nodejs npm

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

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

安装Swagger UI Express：

npm install swagger-ui-express

创建一个简单的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}`);
});

创建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

运行应用：

node app.js

访问Swagger UI：

在浏览器中访问 http://localhost:3000/api-docs，你应该能看到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的项目）允许通过修改源码实现样式自定义。
swagger-ui-bootstrap（一个为Java项目提供的Swagger UI实现）则允许你使用Bootstrap快速定制UI。

直接修改Swagger UI源代码

如果你具备丰富的开发经验，可以直接修改Swagger UI的源代码。从GitHub克隆Swagger UI仓库，根据你的需求修改代码，重新编译并部署即可。

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

0 赞

0 踩