根据后端接口生成前端API

最近用kiro写项目，老是遇到前后端接口不统一的问题。

步骤1：Spring Boot 端集成接口文档工具

Spring Boot 后端需先集成 Swagger 或其增强版 Knife4j（推荐 Knife4j，功能更全、UI 更友好），用于生成前端工具可解析的 OpenAPI/Swagger 标准文档。

推荐：Knife4j + Spring Boot 集成

引入依赖

<!-- Spring Boot 2.x 版本 -->
<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <version>2.0.9</version>
</dependency>
<!-- Spring Boot 3.x 版本 -->
<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <version>4.4.0</version>
</dependency>

配置类开启 Knife4j/Swagger

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2WebMvc; // Boot2.x
// import com.github.xiaoymin.knife4j.spring.annotations.EnableKnife4j; // Boot3.x

@Configuration
@EnableSwagger2WebMvc // 开启Swagger功能（Boot3.x 对应 @EnableKnife4j）
public class Knife4jConfig {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder()
                        .title("Spring Boot 接口文档")
                        .description("供前端生成 API 使用")
                        .version("1.0.0")
                        .build())
                .select()
                // 扫描后端接口所在的包（替换为你的实际接口包路径）
                .apis(RequestHandlerSelectors.basePackage("com.example.demo.controller"))
                .paths(PathSelectors.any())
                .build();
    }
}

启动 Spring Boot 项目，访问接口文档地址，确认文档可访问：
- Boot2.x：http://localhost:8080/doc.html（Knife4j UI）、http://localhost:8080/v2/api-docs（标准 Swagger 文档，供前端工具解析）
- Boot3.x：http://localhost:8080/doc.html、http://localhost:8080/v3/api-docs（OpenAPI 3.0 标准文档）

步骤2：前端工具解析文档，生成 Vue2/Vue3 通用 API

基于 Spring Boot 暴露的标准文档，推荐以下 2 个主流前端工具，生成的 API 完全兼容 Vue2（Options API）和 Vue3（Options/Composition API）。

1. `openapi-typescript-codegen`

核心优势：基于 OpenAPI/Swagger 标准文档，自动生成 TypeScript/JavaScript API 代码，自带 axios 请求封装，同时生成接口参数、返回值的类型定义，适配 Vue2/Vue3 无框架依赖。

操作步骤：

安装依赖（前端 Vue 项目中）

1 2	# 本地开发依赖安装 npm install openapi-typescript-codegen --save-dev

配置生成命令（修改 package.json，指定 Spring Boot 文档地址）

{
  "scripts": {
    // 适配 Spring Boot 2.x（Swagger 2.0 文档地址）
    "gen:api": "openapi --input http://localhost:8080/v2/api-docs --output ./src/api --client axios",
    // 适配 Spring Boot 3.x（OpenAPI 3.0 文档地址，命令格式一致，仅 input 地址不同）
    // "gen:api": "openapi --input http://localhost:8080/v3/api-docs --output ./src/api --client axios"
  }
}

执行生成命令，批量生成 API
1
npm run gen:api

Vue 项目中使用（Vue2/Vue3 通用示例）

<!-- Vue3 <script setup> 示例 -->
<script setup>
// 引入生成的用户相关 API（生成的目录结构自动按后端接口分组）
import { UserApi } from '@/api';

// 调用接口（自动带类型提示，参数/返回值类型与后端一致）
const getUserInfo = async (userId) => {
  try {
    const res = await UserApi.getUserById(userId); // 后端接口方法名自动映射
    console.log("用户信息：", res);
  } catch (err) {
    console.error("请求失败：", err);
  }
};
</script>

<!-- Vue2 Options API 示例（用法完全一致） -->
<script>
import { UserApi } from '@/api';
export default {
  methods: {
    async getUserInfo(userId) {
      try {
        const res = await UserApi.getUserById(userId);
        console.log(res);
      } catch (err) {
        console.error(err);
      }
    }
  }
};
</script>

2. `swagger-typescript-api`

核心优势：支持 Swagger/OpenAPI 文档，可自定义生成模板（适配你的 Vue 项目请求封装风格），生成的代码更简洁，支持批量导出、忽略指定接口。

快速操作：

# 安装依赖
npm install swagger-typescript-api --save-dev
# 执行生成命令（Spring Boot 2.x 示例，Boot3.x 替换为 v3/api-docs）
npx swagger-typescript-api -p http://localhost:8080/v2/api-docs -o ./src/api -n index.ts