предисловие
Прежде всего, я признаю, что у меня есть титульная партия. . . Это не инструмент визуального построения, а инструмент настройки страницы визуальной генерации, то есть конфигурация страницы создается путем перетаскивания, а затем страница создается на основе конфигурации через динамические компоненты фреймворка.
Сегодняшние компании начинают создавать свои собственные библиотеки компонентов одну за другой.После того, как библиотека компонентов будет построена, путем накопления бизнеса, агрегирования основных компонентов и абстрагирования части бизнес-кода будет создана библиотека блоков с относительно высокой возможностью повторного использования.Визуальное построение, которое реализован на основе библиотеки блоков.
Позвольте мне сначала рассказать о недостатке: сложно иметь дело со сложными логическими сценариями и меняющимися требованиями к продукту. . .
Введение
В ежедневной разработке обнаруживается, что многие небольшие проекты компании внешне похожи, некоторые страницы даже меняют данные различных модулей других страниц, и складывают их вместе для создания новой страницы, что особенно часто встречается в операционной деятельности. страница, и такого рода сходства аналогичны странице активности, если вы можете позволить оператору перетаскивать ее и создавать ее, не правда ли, это было бы красиво.
Дизайн
Сначала подумайте об этом, страница должна иметь такую структуру
Вся логика должна быть такой
- Нажмите на список слева, компонент появится посередине
- Несколько компонентов в середине можно сортировать, перетаскивая
- Некоторые компоненты могут нуждаться в вложении, и вам необходимо реализовать функцию перетаскивания подкомпонентов в компоненты-контейнеры
- Нажмите на один компонент в середине, чтобы развернуть элементы конфигурации компонента справа.
- После модификации с правой стороны эффект отображается в реальном времени посередине
эффект страницы
Простая страница завершается следующим образом
Слева находится список компонентов, сгенерированных на основе конфигурационного файла.
Посередине вложен iframe, который взаимодействует с внешним миром через postMessage. (Изначально я хотел нарисовать мобильный телефон, похожий на iphone6, но спустя долгое время он все еще немного похож на 5s)
Справа расположение компонента конфигурации и текстуры за эффектом.
Часть перетаскивания реализована с помощью vuedraggable, что хорошо для взрыва.
Еще один динамичный образ
Видно, что основные функции реализованы, а позиция конфигурации справа может обрабатывать данные типа String, Number, Boolean, Array и Object.
резюме
Проект это только полуфабрикат, в основном идея.На самом деле после генерации конфигурации можно многое сделать, например
- Заполнение данных в конфигурации реализовано бэкендом
- В зависимости от конфигурации конечная страница может быть реализована через несколько фреймворков.Необходимо только задать имя компонента в соответствии с соглашением и передать данные в компонент через пропсы.Vue, React и даже небольшие программы могут генерировать страницы на основе конфигурация.
- ...
У всех есть другие идеи для совместного обсуждения.
Скиньте адрес Gayhub, код немного некрасивый, если он вам покажется интересным, поставьте звездочку:
GitHub.com/LZ это смущение ZZ/v UE…