开发提效工具

更新: 10/21/2025 字数: 0 字时长: 0 分钟

API 文档与代码生成

Knife4j

Knife4j 是一个专为 Java Spring Boot 项目设计的 API 文档聚合工具。它在 Swagger 的基础上进行了增强和美化，提供了更友好的 UI 界面和更强大的功能，如在线调试、文档导出、权限控制等，极大地提升了后端 API 的开发和调试效率。

核心功能：

美观的 UI：相比原生 Swagger UI，Knife4j 提供了更现代化、更易用的界面。
在线调试：可以直接在文档页面进行 API 调用和调试。
离线文档：支持将 API 文档导出为 Markdown、HTML、PDF 等多种格式。
聚合文档：能够将多个微服务的 API 文档聚合到一个网关入口，方便统一查看和管理。

使用方法：

在 Spring Boot 项目中，通常只需要引入 knife4j-openapi3-spring-boot-starter 依赖，并进行简单的配置即可。

xml

<!-- Maven 依赖 -->
<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-openapi3-spring-boot-starter</artifactId>
    <version>4.5.0</version>
</dependency>

然后通过访问 http://localhost:8080/doc.html 即可查看 API 文档页面。

Orval

Orval 是一个基于 OpenAPI/Swagger 规范生成 TypeScript 客户端代码的强大工具。它可以根据 API 定义文件（如 openapi.json）自动生成包含类型定义、请求函数、Mock 数据等在内的前端代码，确保前后端接口类型的一致性，减少手写请求代码的工作量。

核心功能：

类型安全：自动生成 TypeScript 类型，保证了调用 API 时的类型安全。
多种客户端支持：支持生成 Axios、Fetch API、React Query、Vue Query 等多种风格的客户端请求代码。
高度可定制：提供了丰富的配置选项，可以自定义生成的代码模板和输出结构。
Mock 数据生成：能够根据 API 定义生成 Mock 数据，方便前端进行开发和测试。

使用方法：

安装 Orval：

bash

npm install orval -D
# or
pnpm add orval -D

创建配置文件 orval.config.ts：

typescript

import { defineConfig } from 'orval';

export default defineConfig({
  petstore: {
    input: './petstore.yaml', // API 定义文件路径
    output: {
      target: './src/api/petstore.ts', // 输出文件路径
      client: 'react-query', // 生成 React Query 风格的代码
      mock: true, // 同时生成 mock 数据
    },
  },
});

执行生成命令：
bash
```
npx orval
```
1

UmiJS/OpenAPI

@umijs/openapi 是 UmiJS 框架生态中的一个插件，专门用于根据 OpenAPI 规范自动生成前端 Service 和 Mock 代码。它与 UmiJS 项目紧密集成，可以做到一键生成、开箱即用，特别适合在 UmiJS 或 Ant Design Pro 项目中使用。

核心功能：

与 UmiJS 集成：作为 UmiJS 插件，配置简单，能很好地融入项目开发流程。
自动生成 Service：根据 API 定义生成可以直接调用的 services 和对应的 TypeScript 类型。
自动生成 Mock：自动创建 Mock 文件，降低了前端开发的接口依赖。
命令行工具：提供 umi openapi 命令，方便手动触发更新。

使用方法：

在 UmiJS 项目中安装插件：
bash
```
pnpm add @umijs/openapi -D
```
1

在 UmiJS 配置文件（如 .umirc.ts 或 config/config.ts）中进行配置：

typescript

export default {
  openAPI: {
    requestLibPath: "import { request } from 'umi'",
    // API 定义文件来源
    schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json',
    mock: true, // 开启 mock
  },
};

启动项目或执行 umi openapi 命令即可自动生成相关代码到 src/services 和 mock 目录。

贡献者

LI SIR

页面历史

最后编辑于 2 分钟前

查看完整历史

开发提效工具 ​

API 文档与代码生成 ​

Knife4j ​

Orval ​

UmiJS/OpenAPI ​

贡献者

页面历史

开发提效工具

API 文档与代码生成

Knife4j

Orval

UmiJS/OpenAPI