Skip to content

yj-liuzepeng/swagger-ts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

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

生成目录: src/api

swagger

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文件

其他说明:

初次提交,欢迎提出问题,感谢!

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published