巧用 Swagger 在线编辑器生成前端接口代码
发布于 3 个月前 作者 vellengs 816 次浏览 来自 分享

Swagger 简要介绍

Swagger / Open API 在Restful API 领域已慢慢成为标准，越来越多的系统使用swagger来规范开发接口文档，由于Swagger 本身并不依赖特定的语言和开发平台，所以特别合适作为前后端分离的接口标准来使用。 Swagger 官方提供了两种文档UI形式，一种是 Swagger UI, 另一种是 Swagger Editor.

  • Swagger UI 常常作为项目工程的一部份，很多程序都采用自身的特性，在程序代码上增加注释、注解、装饰器等方式完成swagger 的接口文档自动生成和文档展示。

  • Swagger Editor 提供了一个在线编辑的编辑器，使之能以文档的方式编辑接口，并提供了两块的生成功能：服务端代码与客户端代码，代码生成涵盖了大部分的主流语言与框架非常方便。

直接可用的代码

很多同学可能有疑问，这样生成的代码到底能用吗？

我的回答不仅是能用，而且很好用。 以 ng-alain 为例

代码位置 https://github.com/vellengs/typerx/blob/master/packages/client/src/app/delon.module.ts 定制下provider 的 basePath 设置。

export function apiConfig(): Configuration {
    return new Configuration({
        basePath: `${location.protocol}//${location.host}`
    });
}

注册下模块

ApiModule.forRoot(apiConfig),

然后把目录释放到 https://github.com/vellengs/typerx/tree/master/packages/client/src/generated 这个目录，看清楚，generted目录 是可以一字不改的，如果改了以后需要重新生成岂不是大麻烦？

放置到 angular 项目里后就可以愉快的使用 service了，如下示例： https://github.com/vellengs/typerx/blob/master/packages/client/src/app/pages/system/settings/settings.ts

profileSave(event?) {
    const entry: EditProfileDto = Object.assign({}, event);
    this.coreService.userUpdate(entry).subscribe((res) => {
        if (res) {
            this.settings.setUser(res);
            this.msg.success('个人资料修改成功');
        }
    });
}

saveSysSettings(event) {
    const entry = Object.assign({}, event);

    this.coreService.settingUpdateSettingsByName('main', entry).subscribe((res) => {
        if (res) {
            this.settingsData = res;
            this.msg.success('系统设置更新成功');
        }
    });
}

load() {
    this.coreService.settingGetSettingsByName('main').subscribe((res) => {
        if (res) {
            this.settingsData = res;
        }
    });
}

方法变得可以感知了。

自动生成、下载、解压

上一步骤已经可以使用了，但是有点小小的麻烦；每次都要打开 editor.swagger.io 粘贴文档上去，然后去点生成，然后解压，这样是不是不够平滑呢？

那让我们写个脚本吧，自动完成上面的事情。 完整脚本地址

async function loadSwagger() {

    /** 读取 swagger.json 接口文档文件 */
    const jsonPath = path.resolve(process.cwd(), 'dist', 'swagger.json');
    const json = require(jsonPath);

    const client = axios.create({
        httpsAgent: new https.Agent({
            rejectUnauthorized: false
        })
    });

    /**
     * 提交 post 到服务器并获得下载链接
     */
    const result = await client.post(gateway, { spec: json });
    if (result.data && result.data.link) {
        const response = await client({
            method: 'GET',
            url: result.data.link,
            responseType: 'stream'
        })
        const local = path.resolve(process.cwd(), 'swagger.zip');
        const generatedFolder = path.resolve(process.cwd(), './../client/src/generated');
        const templateFolder = path.resolve(process.cwd(), 'decompress', 'typescript-angular-client');
        const decompress = path.resolve(process.cwd(), 'decompress');

        // 处理下载压缩包文件，解压并删除临时文件
        response.data.pipe(fs.createWriteStream(local)).on('finish', (done: any) => {
            fs.createReadStream(local).pipe(unzip.Extract({ path: 'decompress' })).on('close',
                async (done: any) => {
             
                    fs.unlinkSync(local); 
                    await removeFolder(generatedFolder);  
                    fs.renameSync(templateFolder, generatedFolder);
                    await removeFolder(decompress);
                });
        });
    }
}

/**
 * 若已经生成，则删除文件夹
 * @param folder 文件夹
 */
async function removeFolder(folder: string) {
    if (fs.existsSync(folder)) {
        await new Promise((resolve) => {
            rimraf(folder, () => {
                resolve(true);
            });
        })
    }
}

loadSwagger();

总共没几行代码，是不是觉得很简单呢，没错要的就是简单，但是很好的完成了我们的工作。

有了脚本之后你只要

ts-node  xxxxx/apigen.ts

即可完成工作。

结束语，标准的接口在前后端分离的开发中起到很好的规范作用，而平滑的开发体验也是重要的一环，如果你有疑问，或者有更好的方式，欢迎和作者交流学习 https://github.com/vellengs 首发于掘金

回到顶部