学习目标

在这里，你将系统学习了解如何使用 OpenAPI 快速生成对接后端的接口请求

我们将以最简单直接的方式为您呈现内容！

🍜 后端

🍖 推荐阅读：快速开始 | Knife4j (xiaominfo.com) (opens new window)

• 在 Spring Boot 后端项目中使用 Swagger + Knife4j 快速生成接口文档

导入依赖

• 在pom.xml文件下，导入以下依赖：

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-openapi2-spring-boot-starter</artifactId>
    <version>4.0.0</version>
</dependency>

配置管理

注意

请确保 Spring Boot 版本在2.4.0及以上，方可在application.yaml文件下做好 Swagger + Knife4j 配置

• 在 application.yaml文件下添加如下配置：(若想了解更多其他配置属性的详细信息，请点击此处跳转至官方文档：快速开始 | Knife4j (xiaominfo.com) (opens new window))

knife4j:
  enable: true
  openapi:
    title: PicMemories 接口文档
    description: PicMemories 壁纸分享小程序
    concat: 3348407547@qq.com
    url: https://deng-2022.gitee.io/blog/
    version: 1.0
    license: Apache 2.0
    group:
      test1:
        group-name: 壁纸分享

• 至此，后端快速生成Swagger + Knife4j 接口文档配置已经完毕，启动项目后，可通过配置文件中的URL 路径访问到其对应的接口文档了：http://localhost:8084/api/doc.html (opens new window)

🥣 前端

🍖 推荐阅读：Knife4j · 集 Swagger2 及 OpenAPI3 为一体的增强解决方案. | Knife4j (xiaominfo.com) (opens new window)（2023/08/25 晚）

• 在快速构建完成 Ant Design Pro 前端项目框架之后，修改config/config.ts文件下的配置：

 openAPI: [
    {
      requestLibPath: "import { request } from '@umijs/max'",
      schemaPath: 'http://localhost:8104/api/v2/api-docs?group=壁纸分享',
      projectName: 'pic-memories',
    },
  ],

• 执行以下命令，一键生成接口：

npm run openapi

• 如下，已经根据后端 Swagger + Knife4j 接口文档快速生成了对应的请求接口：

/** addInterfaceInfo POST /api/interfaceInfo/add */
export async function addInterfaceInfoUsingPOST(
  body: API.InterfaceInfoAddRequest,
  options?: { [key: string]: any }
) {
  return request<API.BaseResponseLong_>("/api/interfaceInfo/add", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    data: body,
    ...(options || {}),
  });
}