Используйте онлайн-редактор Swagger для создания кода внешнего интерфейса.

внешний интерфейс GitHub Swagger Angular.js

Краткое введение в Swagger

Swagger/Open API постепенно стал стандартом в области Restful API.Все больше и больше систем используют swagger для стандартизации разработки интерфейсных документов.Поскольку сам Swagger не зависит от конкретного языка и платформы разработки, он особенно подходит в качестве раздельный внешний и внутренний интерфейс, стандартный для использования. Swagger официально предоставляет две формы пользовательского интерфейса документа: одна — Swagger UI, а другая — Swagger Editor.

  • Пользовательский интерфейс Swagger часто используется как часть разработки проекта.Многие программы перенимают свои собственные характеристики и добавляют в код программы комментарии, аннотации, декораторы и т. д., чтобы завершить автоматическое создание документов интерфейса swagger и отображение документов.

  • Swagger Editor предоставляет онлайн-редактор для редактирования, который позволяет редактировать интерфейсы в виде документов и предоставляет две функции генерации: код на стороне сервера и код на стороне клиента.Генерация кода охватывает большинство основных языков и фреймворков.Удобство.

непосредственно используемый код

У многих студентов могут возникнуть вопросы, можно ли в итоге использовать сгенерированный код?

Мой ответ не только работает, но и работает хорошо. Возьмите ng-alain в качестве примера

расположение кодаGitHub.com/VE l Холодная вода/Тяня…Настройте параметр basePath поставщика.

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

Зарегистрируйте следующий модуль

ApiModule.forRoot(apiConfig),

Затем освободите каталог дляGitHub.com/VE l Холодная вода/Тяня…Этот каталог, видите ясно, сгенерированный каталог можно изменить, не меняя ни слова, если его нужно перегенерировать после изменения, не будет ли это большой проблемой?

После размещения его в проекте angular вы можете с удовольствием использовать сервис, как показано в следующем примере:GitHub.com/VE l Холодная вода/Тяня…

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

чтобы выполнить работу.

В заключение, стандартный интерфейс играет очень хорошую нормативную роль в развитии разделения внешнего и внутреннего интерфейса, а также важной частью является беспроблемный опыт разработки.Если у вас есть какие-либо вопросы или есть лучший способ, добро пожаловать общаться с автором.github.com/vellengs

Категории