yj-liuzepeng/swagger-ts

根据swagger文档生成前端api.ts文件

根据后端生成的swagger文档，导出生成前端需要的api.ts文件，提高开发效率。

核心代码： src/utils/index.js

配置文件： src/utils/config.js

生成目录： src/api

swagger内容项

// swagger文档
// info：API的基本信息，包括标题、版本号、描述等。
// host：API的主机名和端口号。
// basePath：API的基本路径，通常是API的前缀。
// schemes：API的协议，通常是http或https。
// tags：API的标签，可以用于对API进行分类。
// paths：API的路径和操作，包括HTTP方法、请求参数、响应内容等。
	// operationId: 用于指定操作的唯一标识符。
	// summary: 用于提供操作的简要说明。
	// description: 用于提供操作的详细说明。
	// tags: 用于对操作进行分类和组织。
	// parameters: 用于定义在操作中使用的参数，例如查询参数，请求体参数等。
	// requestBody: 用于定义操作的请求体。
	// responses: 用于定义操作的响应，包括响应代码和响应消息。
	// security: 用于指定操作所需的安全方案。
	// deprecated: 用于指定操作是否已被弃用。
// parameters：API的公共参数，可以在多个API**用。
// responses：API的响应定义，包括响应码、响应内容等。
// securityDefinitions：API的安全定义，包括认证方式、访问授权等。
// security：API的安全配置，指定哪些API需要认证或授权。

安装依赖

npm install

运行demo

npm run demo

写入配置项后获取

src/utils/config.js

/**
 * 配置项
 * swaggerUrl：swagger文档地址
 * dirIdx：按索引生成文件，比如接口  /job/rule/createOrUpdateDataChangeRules，根据job生成配置1，根据rule生成配置2
 * topConfig：单个ts文件顶部配置，如引入axios，定义返回数据类型等等
 * apiConfig： 单个接口的结构
 */

const swaggerUrl = "http://xxx/v2/api-docs";
const dirIdx = 2
const topConfig = `import http from "../utils/http";
  interface ResponseType extends Promise<any> {
    data?: object;
    code?: number;
    message?: string;
  }`;
const apiConfig = (
  summary, // 接口描述
  interface, // 接口类型定义
  requestName, // 接口名称
  interfaceParams, // 接口传入参数及类型
  requestMethod, // 请求方法 get post delete等
  requestUrl, // 接口地址
  parametersType // 传参类型 data params
) => {
  return `/**
    * @description ${summary}
    */
    ${interface}
    export const ${requestName} = (${interfaceParams}): ResponseType => {
      return http.request("${requestMethod}", "${requestUrl}", {
        ${parametersType}
      });
    };
  `;
  // 生成结构如下
  // /**
  //  * @description 执行作业流
  //  */
  // interface executeFlowIfe {
  //   /** flowName **/
  //   flowName ? : string;
  //   /** projectName **/
  //   projectName ? : string;
  // }
  // export const executeFlow = ( data ? : executeFlowIfe ): ResponseType => {
  //   return http.request( "post", "/job/flow/executeFlow", {
  //     data
  //   } );
  // };
};

module.exports = {
  swaggerUrl,
  dirIdx,
  topConfig,
  apiConfig,
};

命令行

npm run dev
或者
npm run start

导出效果：

api.ts文件

其他说明：

初次提交，欢迎提出问题，感谢！