专栏首页JadePeng的技术博客开源小工具 - swagger API访问代码生成器(js/typescript)

开源小工具 - swagger API访问代码生成器(js/typescript)

现在流行前后端分离,后端通常会使用swagger生成api文档,提供给前端的同事来调用,一般前端是查看这个文档,根据文档说明编写调用代码。其实,swagger已经提供了足够多的描述信息,我们可以基于swagger直接生成相关的调用代码,节省前端时间。

开源地址:swagger-2-ts

实现原理

打开swagger-ui,我们可以看到请求了/v2/api-docs获取api文档信息,其中definitions里是DTO对象定义,paths是API接口列表:

因此,我们将这个api-docs下载下来,解析,就可以生成对应的调用代码了。

制作代码生成器的方法很多,大部分都是基于模板,这个也不例外。不同的是,这次我们借助 Yeoman 框架。Yeoman是一个代码生成器脚手架工具,可以访问官网查看具体介绍。

代码生成器需要用户提供一些参数,比如swagger的地址,代码类型等,Yeoman提供了prompting功能,可以定义prompts,最后可以通过this.props获取用户参数

  prompting() {
    // Have Yeoman greet the user.
    this.log(
      yosay(
        `Welcome to the swagger 2 typescript ${chalk.red(
          'generator-swagger-2-ts'
        )} generator!`
      )
    );

    const prompts = [
      {
        type: 'input',
        name: 'swaggerUrl',
        message: 'please input swagger url,eg:http://localhost:8051/swagger-ui.html',
        default: 'http://localhost:8051/swagger-ui.html'
      },
      {
        type: 'input',
        name: 'className',
        message: 'please enter class Name of the generated API',
        default: 'API'
      },
      {
        type: 'list',
        name: 'type',
        message: 'please choose generated API type , js or typescript',
        choices: [
          {
            name: 'typescript',
            value: 'typescript'
          },
          {
            name: 'javascript',
            value: 'js'
          }
        ]
      },
      {
        type: 'input',
        name: 'outPutFile',
        message: 'Please enter the API file name',
        default: 'api.ts'
      }
    ];

    return this.prompt(prompts).then(props => {
      this.props = props;
    });
  }

接着就是代码生成,实现writing函数即可:

  • 下载api-docs,让用户提供swagger-ui地址,然后计算出api-dos路径
  • 解析json
  • 根据模板生成class文件,Yeoman的模板是基于ejs
writing() {
    let swaggerUrl = this.props.swaggerUrl.replace('swagger-ui.html', 'v2/api-docs');
    let clsName = this.props.className;
    let outPutFile = this.props.outPutFile;
    let isTypescript = this.props.type === "typescript";
    axios.get(swaggerUrl).then(response => {
      if (response.status == 200) {
        let swagger = response.data;
        var swaggerData = codegen.getViewForSwagger(
          { swagger: swagger, className: clsName },
          'typescript'
        );
        swaggerData.defaultDomain = this.props.swaggerUrl.replace('/swagger-ui.html', '');
        this.fs.copyTpl(
          this.templatePath(isTypescript ? 'ts.ejs' : 'js.ejs'),
          this.destinationPath(outPutFile),
          swaggerData
        );
      } else {
        console.error("can't fond swaager api-docs");
      }
    });

安装与使用

需要同时安装 Yeomanswagger-2-ts

npm install -g yo
npm install -g generator-swagger-2-ts

然后cd到你的工作目录,执行:

yo swagger-2-ts

按提示

  • 输入swagger-ui 地址,例如http://192.168.86.8:8051/swagger-ui.html,程序包会自动将这个url地址replace('swagger-ui.html', 'v2/api-docs')得到swagger-api-docs,然后下载后解析,生成api class
  • 可选生成js 或者 typescript
  • 可以自定义生成的api class名称、api文件名
C:\Users\Administrator>yo swagger-2-ts

     _-----_     ╭──────────────────────────╮
    |       |    │ Welcome to the swagger 2 │
    |--(o)--|    │        typescript        │
   `---------´   │  generator-swagger-2-ts  │
    ( _´U`_ )    │        generator!        │
    /___A___\   /╰──────────────────────────╯
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? please input swagger url,eg:http://localhost:8051/swagger-ui.html http://localhost:8051/swagger-ui.html
? please enter class Name of the generated API API
? please choose generated API type , js or typescript typescript
? Please enter the API file name api.ts
   create api.ts

生成代码demo:

export default class API {
    $defaultDomain = 'http://localhost:8051'
    /**
    * @method
    * @name API#getSkillsUsingGET
    * @param string authorization  
    * @param $domain 
    */
    getSkillsUsingGET (parameters){ 
      let body = null;
      let config = {
        baseURL: parameters.$domain || this.$defaultDomain,
        url: '/api/skill',
        method: 'GET'
      };
      config.headers = {}
      config.headers['Accept'] = '*/*';
      config.headers['authorization'] = parameters.authorization;
      config.data = body
      return axios.request( config );
    }
}

使用生成的API Class

var API = require("./api");
var api = new API("http://192.168.86.8:8051");
api.getSkillsUsingGET({}).then(function (response) {
    console.log(response.data);
});

## 参考

License

Apache-2.0 © jadepeng


作者:Jadepeng 出处:jqpeng的技术记事本--http://www.cnblogs.com/xiaoqi 您的支持是对博主最大的鼓励,感谢您的认真阅读。 本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 使用typescript, 优雅的调用swagger API

    Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档...

    用户1177380
  • 知识图谱推理与实践(1)

    由于工作原因,需要在系统里建立图谱推理功能,因此简单学习了浙江大学 陈华钧教授 知识图谱导论课程课件,这里记录下学习笔记。

    用户1177380
  • Windows 2003 iis6 网站打不开,无法显示该页 找不到服务器错误解决方案

    首先,服务器能远程连上,可ping通,说明网络没有问题 看IIS Log,在errorlog中发现大量的 Connections_Refused 错误 20...

    用户1177380
  • Android11测试预告片

    用户5521279
  • ICIP2018 | 图像鉴黄做得好,健康上网少烦恼

    作者:Xizi Wang, Feng Cheng, Shilin Wang*, Huanrong Sun, Gongshen Liu, ChengZhou

    机器之心
  • Kubernetes发布1.10版本:开发者可自己定义API

    Container存储介面(Container Storage Interface,CSI)能让使用者像安装Pod一样,轻松安装Volume插件,而这使得第三方...

    BestSDK
  • 理解计算:从根号2到AlphaGo番外篇 眼见未必为实--漫谈图像隐写术

    有很多技术都致力于保护信息安全,其中有两类技术最为著名,一个是密码学,另一类就是密写术,也称为隐写术。应邀借此机会向大家谈谈隐写术这个很多人都不太熟悉的领域。本...

    SIGAI学习与实践平台
  • 最快最好用的文件搜索工具——Everything

    mathor
  • Oracle总结【SQL细节、多表查询、分组查询、分页】

    前言 在之前已经大概了解过Mysql数据库和学过相关的Oracle知识点,但是太久没用过Oracle了,就基本忘了…印象中就只有基本的SQL语句和相关一些概念…...

    Java3y
  • 理解计算:从根号2到AlphaGo番外篇——眼见未必为实--漫谈图像隐写术

    传递秘密消息的历史非常悠久,在公元前500年左右的波希战争时期,就有将奴隶的头发剃掉,然后在头皮上刺上字,等奴隶的头发张长后,将这个人派去传递消息,一次消息传递...

    SIGAI学习与实践平台

扫码关注云+社区

领取腾讯云代金券