V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ppddtt
V2EX  ›  分享创造

分享一个根据 swagger 自动生成 ts 代码的小工具

  •  1
     
  •   ppddtt · 2018-11-30 09:54:49 +08:00 · 4147 次点击
    这是一个创建于 1945 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://github.com/zt8989/sisyphus-cli

    sisyphus-cli(西西弗斯)

    一个从 swagger 自动生成 ts 代码的工具

    如何使用

    安装 cli

    npm install sisyhpus-cli -g

    如何增加新的项目

    1. 新建文件夹如xxx-api
    2. sisyhpus init xxx-api初始化
    3. 查看如何更新代码

    如何更新代码

    1. 进入相应文件夹如xxx-api
    2. 查看sisyhpus.json文件 file 路径是否执行对应 swagger 的地址
    3. 执行sisyhpus更新代码
    4. 执行npm run build打包
    5. 将 dist 的 js 和 d.ts 复制到项目或者使用npm publish发布

    原理

    sisyhpus-cli会根据 swagger.json 生成类似代码

    class Api {
      constructor(request){
        this.request = request
      }
    
      function getDetail(pathParams, queryParams, bodyParams){
        return this.request({
          url: bindUrl('/detail', pathParams),
          method: 'GET',
          params: queryParams,
          data: bodyParams
        })
      }
    }
    

    如何引入

    import Api from 'xxx-api';
    

    编写适配器

    由于生成的代码是按照 axios 的格式组织参数,所以针对不同的请求库,要做一层封装。 以fetch为例

    function adapter(requestInstance) {
      /**
       *
       * @param {AjaxOptions} options
       */
      return options => {
        const baseUrl = '/api';
        let { url } = options;
        const { params, data, ...restParams } = options;
        url = baseUrl + url;
        if (params) {
          url = `${url}?${stringify(params)}`;
        }
        return requestInstance(url, { ...restParams, body: data });
      };
    }
    
    const api = new Api(adapter(request));
    
    api.login({ useraname: xxx, password: xxx }).then(res => {})
    

    QA

    Q: 我遇到了中文的 model 怎么办?

    A: 修改 java 中的注解,@ApiModel("xxx") => @ApiModel(description = "xxx")

    TODO

    • [x] 生成 model 代码
    • [x] 生成 api 代码
    • [x] 优化注释
    • [x] 自动打包发布到 npm,包含可以提示的 d.ts
    • [ ] 自动生成浏览器可以用的 js
    • [ ] 考虑泛型的优化
    第 1 条附言  ·  2018-12-04 22:27:32 +08:00
    貌似 readme 命令拼写错误了

    ## 安装 cli

    `npm install sisyphus-cli -g`

    ## 如何增加新的项目

    1. 新建文件夹如`xxx-api`
    2. `sisyphus init xxx-api`初始化
    3. 查看如何更新代码

    ## 如何更新代码

    1. 进入相应文件夹如`xxx-api`
    2. 查看`sisyphus.json`文件 file 路径是否执行对应 swagger 的地址
    3. 执行`sisyphus`更新代码
    4. 执行`npm run build`打包
    5. 将 dist 的 js 和 d.ts 复制到项目或者使用`npm publish`发布
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2981 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 15:05 · PVG 23:05 · LAX 08:05 · JFK 11:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.