前后端开发过程中，后端都会提供swagger、yapi类型的接口文档，开发过程中反复CV？为了开发提效，做了个codegen接口文档代码生成工具，可根据接口定义快捷生成表格、表单、api定义，typescript定义等等前端代码，更可以在线维护自定义生成方法模板，工具已发布vscode插件社区。

下图为工具全貌，类swagger-ui2.0样式页面。

 



工具支持的是open api内容格式的接口文档，如接口文档地址是https://juejin/editor/doc.html, 输入框输入https://juejin/editor，点击获取即可，当前案例提供的是swagger模板https://petstore.swagger.io/v2/swagger.json。

功能介绍

  1. api复制，api链接一键复制；复制api通过配置方法生成代码（如下，也可自定义配置方法）
/**
 * uploads an image
 */
 const postUploadImage = (params) => {
  return axios(
    {
      path: '/pet/{petId}/uploadImage',
      method: 'post'
      params
    }
  )
};

  1. 请求参数、响应参数代码生成，操作如下（勾选需要字段后生成代码）生成代码如下：
  2. 模型代码生成（方法：模型配置、TypeScript定义 等）
  3. api链接一键复制
  4. 参数名称、参数说明单击复制
  5. 枚举生成，基于参数说明#ENUM
  6. 自定义方法本地维护

 

 

TODO

  1. 在线api联调
  2. api联调请求头默认设置
  3. form代码生成前增加组件类型、rule手动页面操作
    ...

仓库链接

  1. https://github/RootLinkFE/roothub-codegen
  2. GitHub - RootLinkFE/vscode-roothub: RootHub VSCode 插件

希望工具能给你的开发提高能效，欢迎提pr

更多推荐

vscode前端代码生成器,根据接口文档生成