Я работал над платформой с низким кодом, которая использует открытую спецификацию API swagger или json в качестве входных данных и генерирует код java или основной код с точечной сетью в качестве вывода (конечно, с возможностью добавления дополнительных зависимостей. !!)
Первоначально мы использовали для этого swagger-hub, но он позволяет одновременно редактировать не более 4 файлов swagger. Поэтому мы решили создать собственный редактор чванства. Я искал пакеты npm для swagger editors и нашел это. Посмотрев на него, я понял, что должен добавить это в свой проект, но не было достаточно документации о том, как это сделать. Итак, я пишу этот блог для тех, кто хочет добавить эту функцию в свое приложение для реагирования.
Установите этот модуль с помощью — npm install swagger-editor
Добавьте приведенный ниже импорт в свой файл -
импортировать SwaggerEditor, {плагины} из «swagger-editor»;
импортировать «swagger-editor/dist/swagger-editor.css»;
Теперь в вашем render() добавьте ниже div с точным идентификатором -
‹div id=’swagger-editor’›‹/div›
Следующим шагом является инициализация вашего редактора с некоторыми значениями по умолчанию, вы можете сделать это, добавив этот код в ваш componentDidMount() -
window.editor = SwaggerEditor({ dom_id: '#swagger-editor', layout: 'EditorLayout', plugins: Object.values(plugins), swagger2GeneratorUrl: 'https://generator.swagger.io/api/swagger.json' , oas3GeneratorUrl: 'https://generator3.swagger.io/openapi.json', swagger2ConverterUrl: 'https://converter.swagger.io/api/convert', });
Нам нужно добавить необходимые стили в наш файл index.css. В противном случае встроенный swagger-ui не сможет прокручиваться.
#swagger-editor {размер шрифта: 1.3em;} .container {высота: 100%; максимальная ширина: 880 пикселей; поле слева: авто; margin-right: auto;} #editor-wrapper { height: 100%; граница: 1em сплошная #000; граница: нет;} .Pane2 {переполнение-у: прокрутка;}
Теперь все готово. Если вы нажмете npm start, вы увидите экран ниже:
Теперь мы можем редактировать swagger и видеть время выполнения изменений, у него также есть встроенная зона перетаскивания, поэтому вы можете перетащить свой файл swagger и отредактировать его, но как мы можем получить из него обновленный контент?
Хитрость заключается в том, что редактор Swagger использует локальное хранилище для хранения содержимого редактора с помощью ключа ‘swagger-editor-content’. Вы можете легко получить обновленное содержимое из редактора swagger, выполнив просто —
localStorage.getItem('swagger-editor-content');
Надеюсь, вы найдете это полезным. :)
