предисловие
Всем привет, я сочный осадный лев. На этот раз поговорим о построении front-end low-code платформы. В последние годы, с быстрым развитием индустрии Saas, концепция low-code постепенно становилась популярной, и вокруг нас появлялось все больше и больше продуктов с low-code, таких как Mendix за границей, Yida, Sky, Jian Daoyun и так далее. на. Платформа создания приложений с низким кодом, разработанная нашей компанией, также обслуживала более десяти производственных проектов на стороне B. Основанный на этом новом методе разработки, графический интерфейс конфигурации с перетаскиванием совместим с пользовательскими компонентами и расширениями кода. Создание веб-сайтов управления фоном B-end значительно повысило эффективность. Сочный осадный лев также хочет пообщаться и поделиться с вами созданием интерфейсной платформы с низким кодом в этой статье.
низкий код
Когда дело доходит до лоу-кода, сначала нам нужно понять, что такое лоу-код.
При разработке с низким кодом (LCD) разработчики в основном создают прикладное программное обеспечение с помощью графического пользовательского интерфейса и конфигурации, вместо того, чтобы полагаться в основном на написанный от руки код, как в традиционном режиме. Разработчики в модели разработки с низким кодом обычно не нуждаются в очень профессиональных навыках кодирования или не нуждаются в навыках кодирования в определенной области, но могут реализовать вывод профессионального кода через функции и ограничения платформы.
На самом деле создать удобную платформу с низким кодом несложно. Прежде всего, нам нужно прояснить, что самая большая проблема, решаемая платформами с низким кодом, — это повторное использование, а повторное использование также является важной темой в текущей фронтенд-разработке, особенно в текущих основных фронтенд-фреймворках js, таких какvue,reactи т. д., все методы разработки основаны на компонентах, и появление различных библиотек компонентов пользовательского интерфейса, таких какant-design,elementИ так далее для решения проблемы повторяющихся колес.
Принципиальная схема разработки компонента vue, картинка взята с официального сайта vue
Простая платформа с низким кодом
В каркасе фронтенд-разработки мы обычно создаем некоторые общие компоненты, а затем обращаемся к каждому месту, где этот компонент необходим для повышения эффективности разработки. Ссылки на некоторые библиотеки компонентов пользовательского интерфейса в скаффолдинге также предназначены для этой цели. Позже, чтобы предотвратить повторное создание колеса, мы обычно переупаковываем компоненты в некоторые зрелые библиотеки компонентов пользовательского интерфейса в соответствии с потребностями нашего бизнеса, чтобы сформировать блок с большим количеством функций, таких как наиболее распространенный список в B-системе. Добавление данных, удаление, модификация и интерфейс запроса является таким блоком.
Изображение взято из Ant Design Pro Vue.
Мы можем описать этот блок через данные json, Данные примерно такие, как показано на рисунке ниже, включая код блока, китайское имя, а также атрибуты и начальные значения атрибутов, которые могут быть переданы в блок, например as Эта таблица содержит информацию о столбцах, кнопках и т. д. И этот json также является основной частью конструкции платформы с низким кодом.Он играет чрезвычайно важную роль в визуальном дизайне страницы с перетаскиванием, представленном позже.Он является связующим звеном между дизайном страницы и рендерингом страницы.
Когда мы показываем аналогичный интерфейс, нам нужно только сослаться на компонент шаблона формы поиска в файле страницы, а затем передать в компонент соответствующую информацию описания json. Но это все еще, кажется, использует метод кодирования для решения проблемы повторного использования, который все еще находится на некотором расстоянии от нашего низкого кода.
В это время мы можем заполнить эти динамические свойства контролируемых компонентов, заполнив линию, хранящуюся в базе данных. В переднем конце мы можем судить, что компоненты, соответствующие маршруту страницы в этот блок шаблон указывают на наш упакованный список для увеличения модифицированного шаблона. Таким образом, введите эту страницу, нам нужно только получить информацию о блоке описание только информацию, хранящуюся в базе данных через интерфейс API, а затем передавать внутреннюю часть компонента, назначить значение свойства шаблона, которое мы установили в данных JSON для каждого компонента Шаблон. Этот шаблон отображается. Это также способ, которым мы используем до реализации платформы Visual Drag и Low Code. Хотя этот подход очень прост, он решает проблему нашего компонента мультиплексирования, и требуется только для онлайн-формы, при настройке компонентных свойств, без упаковки, отпуска. Процесс этого интерфейса является основной логикой платформы с низкой кодой: собрана метаданными компонентами в качестве информационной информации о описании страницы, а затем описывает элемент PAGE DOM Conversion Information.
В дополнение к графической настройке процесс, который мы реализовали выше, может в основном реализовать разработку страницы формы поиска посредством настройки интерфейса на платформе и не требует профессиональных навыков кодирования.
Конечно, шаблоны, используемые в описанном выше процессе, на самом деле предварительно заданы нами, но некоторый дифференцированный рендеринг выполняется с помощью различных значений атрибутов фиксированных атрибутов, которые мы передаем. Расширение некоторых пользовательских функций, таких как кнопки, может быть только делается путем вставки слотов и других форм для достижения. Но когда мы хотим реализовать интерфейс других шаблонов, он кажется бессильным, потому что компоненты, из которых состоит шаблон, предустановлены нами заранее, а не строятся так гибко, как строительные блоки через компоненты.
постскриптум
Мы знаем, что некоторые современные платформы с низким кодом используют конструкторы страниц для настройки страниц в форме перетаскивания, например Yida, описанный выше. В следующих статьях мы также сосредоточимся на обсуждении графического интерфейса. Например, реализация перетаскивания, то, как компоненты на холсте связаны после настройки значения свойства, как генерируется описание json страницы и как она отображается как компонент и т. д. Заинтересованные друзья жмем на волну внимания! Увидимся в следующей статье.