爱意满满的作品展示区。
ppddtt

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

  •  1
     
  •   ppddtt · Nov 30, 2018 · 5005 views
    This topic created in 2732 days ago, the information mentioned may be changed or developed.

    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
    • [ ] 考虑泛型的优化
    Supplement 1  ·  Dec 4, 2018
    貌似 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`发布
    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2871 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 05:19 · PVG 13:19 · LAX 22:19 · JFK 01:19
    ♥ Do have faith in what you're doing.