Краткое руководство по облачной визуализации форм

Это может быть один из самых расширяемых конструкторов форм.

Адрес репозитория кода:

【 Репозиторий кода на кодовой облаке】

【Адрес документации】

【Тестовый адрес Имя пользователя: admin Пароль: 123456】

🏆 Технические моменты использования:

Vue 2.0, element-ui, monaco, vuedraggable, jsplumb.js, jquery, jquerytemplate и другие плагины.

🏆 Инструкция по установке

Скачайте версию Node.js с другого сайта загрузки: введите ссылку.

После первой загрузки проекта установите зависимости проекта:

npm install

Для локальной разработки:

npm run serve

Чтобы собрать проект:

npm run build

🏆 Краткое описание функций и возможностей конструктора облачных форм.

Основным преимуществом конструктора облачных форм является то, что он напрямую отображает код Vue, а не рендерит массив JSON. Большинство существующих конструкторов облачных форм визуализируют данные в виде массива JSON, но рендеринг кода Vue имеет более высокую степень агрегации, низкую связанность, высокую возможность повторного использования, сильную инкапсуляцию и лёгкую расширяемость. Поскольку режим рендеринга кода Vue использует онлайн-написание кода, который соответствует синтаксису Vue, его можно отобразить без компиляции, полностью наследуя мощные возможности расширения Vue, читаемость, агрегацию, возможность повторного использования, инкапсуляцию и т. д., и его также можно легко интегрировать со всеми существующими компонентами Vue. Например, Echart, DataV, Meituan UI, Baidu Map, Gaode Map, Ant UI и различные пользовательские компоненты.

Особенности, отличающие его от других конструкторов форм:

🚀1. Три режима проектирования для одной формы.

🚀2. Генерирует код, подходящий для ПК, iPad и мобильных устройств.

🚀3. Поддерживает онлайн-редактирование логики кода Vue без конфликтов с кодом, сгенерированным конструктором форм. Также поддерживает ввод отладчика для одновременного проектирования и отладки.

🚀4. Поддержка онлайн-кодирования CSS для адаптации стиля к форме.

🚀5. Можно загрузить исходный код Vue на локальный компьютер без изменений и сразу же просмотреть его.

🚀6. Атрибуты, компоненты, события и общие стили CSS могут быть настроены через файлы конфигурации.

🚀7. Код Vue генерируется с использованием шаблонов jquery+jquerytemplate, которые могут генерировать разные стили в соответствии с различными бизнес-сценариями и фреймворками. Например, в настоящее время существуют готовые формы, соответствующие Element-UI, Ant-UI и Mini-UI. Он также может поддерживать генерацию кода AppUI и кода для небольших программ.

🚀8. В соответствии с бизнес-потребностями можно создавать различные шаблоны для создания различных бизнес-форм, таких как анкеты, большие экраны визуализации, процессы и универсальные формы добавления, изменения, удаления и проверки. Пока бизнес имеет определённую степень универсальности, мы можем создать соответствующий шаблон для анализа.

🚀9. Предоставляет множество быстрых методов, таких как переключение кода при нажатии на событие, чтобы изменить соответствующий метод.

🚀10. После завершения перетаскивания подробных компонентов автоматически поддерживается импорт и экспорт.

🚀11. Добавлены функции управления строками и столбцами для улучшения точного макета.

🏆 Визуальное представление процесса разработки и выполнения без кода конструктора облачных форм

Из схемы мышления видно, что платформа визуализации в основном состоит из двух частей: конструктора форм и механизма синтаксического анализа MyBatis. Сгенерированный код использует синтаксис шаблона jquerytemplate, поэтому он может поддерживать разработку на основе Element-UI, Mini-UI, Ant Design и Uniapp. Однако необходимо решить проблему красного текста.

Давайте поговорим меньше и посмотрим на картинку напрямую.

Дизайн ПК	Дизайн iPad	Дизайн мобильного телефона
Предварительный просмотр ПК	Предварительный просмотр iPad	Предварительный просмотр мобильного телефона
Просмотр исходного кода JS, вы можете редактировать код онлайн, добавлять функции и объединять их с сгенерированным кодом.	Шаблон HTML-части	Часть CSS, которую можно настроить в соответствии со стилем интерфейса, настроить самостоятельно.

Экспортируйте исходный код Vue и скопируйте его непосредственно в проект, настройте маршрутизацию и получите доступ к нему.

🏆 Динамический интерфейс Mybatis

Динамический интерфейс в реальном времени, сохраните его и сгенерируйте динамические интерфейсы добавления, удаления, проверки и экспорта, импорта. Вы также можете отредактировать динамический интерфейс. Динамический интерфейс

Интерфейс редактирования, возможность интеллектуального предложения таблицы и полей	Проверка параметров интерфейса на стороне сервера	Отображение полей интерфейса списка	Онлайн-тестирование интерфейса

🏆 Использование динамического интерфейса

Mybatis — это хороший синтаксис, который может тесно связывать сущности с базой данных, уменьшая процессы хранения, представления и делая их более универсальными по сравнению с процессами хранения и представления. Некоторые говорят, что Mybatis уже достаточно зрелый, так зачем же разрабатывать ещё один компонент?

Во-первых, потому что синтаксис Mybatis можно писать только в Mapping и Dao сущностях, и его необходимо компилировать, если он написан там. Во-вторых, передаваемый объект Map не может быть проанализирован.

Мой движок синтаксиса Mybatis может динамически анализировать объекты Json, извлекать значения их атрибутов и собирать SQL. Затем я помещаю конфигурацию синтаксиса Mybatis на веб-страницу переднего плана и сохраняю её в базе данных. Я устанавливаю соглашение о том, как отправлять данные структуры объекта Json, а затем упаковываю общий API-интерфейс для вызова. Через параметры запроса я нахожу информацию о конфигурации Mybatis и отправляю данные структуры объекта JSON, чтобы реализовать универсальный интерфейс взаимодействия с базой данных. Эта модель устраняет необходимость в разработке слоя сущностей, уровня обслуживания и уровня DAO, которые мы обычно используем, и может реализовать 60% функций бэкенда. После настройки интерфейса его можно сразу использовать, и он также решает проблему разработки бэкенда без кода.

Если вы столкнётесь со сложной логикой, вы также можете вызвать код Java на бэкэнде.

Идея дизайна движка синтаксиса Mybatis заключается в том, чтобы следовать основному принципу реализации Mybatis. При написании синтаксиса Mybatis в SQL мы заранее договариваемся о структуре отправляемого объекта. Этот объект может быть любым JSON.

Через #{имя атрибута} сопоставьте значение атрибута объекта JSON. Например: {bb: «323», cc: «434», fff: 'fdsf'} — получить значение bb, например: #{bb}, получить значение cc, например: #{cc}.

Через #{имя атрибута.имя под-атрибута} сопоставить значение соответствующего под-атрибута атрибуту объекта JSON. Например, отправьте JSON: {bb:{cc:'fdsfds'}} — получите значение cc, например: #{bb.cc}.

Через #{имя атрибута[0].имя под-атрибута} сопоставление массива атрибутов, получение значения первого под-атрибута. Например, отправка JSON: {bb:[{cc:'dsad'},{cc:'324'},{cc:'434'},{cc:'343'}]} — получение значения cc первого элемента bb, например:#{bb[0].cc}.

Используя #{имя атрибута[$index0].имя под-атрибута} , используйте цикл для получения значений под-атрибутов в массиве. Например, отправив JSON: {bb:[{cc:'dsad'},{cc:'324'},{cc:'434'},{cc:'343'}]}, выберите цикл для извлечения всех значений cc select *from table where column=#{bb[$index0].cc} .

select * from AA поместите результат запроса SQL в атрибут ccc объекта JSON и используйте его позже в качестве параметра в запросе SQL.

Атрибут test также поддерживает условные суждения.

Также поддерживается #{A атрибут + B атрибут}, #{A атрибут * B атрибут}, #{A атрибут / B атрибут}, #{A атрибут - B атрибут} и #{A атрибут == ''? B атрибут: A атрибут}, что является базовой поддержкой операций и троичных выражений.

Код Mybatis, который я написал, не хранится в XML, а хранится в базе данных и обновляется в любое время.

В сочетании с текущей переменной среды #{$user} текущий объект входа в систему, #{$user.userId}, #{$user.userName}, #{$user.realaname}, #{$user.deptcode}, #{$user.deptname}, #{$user.organcode}, #{$user.organname}, #{$user.deptid}, #{$user.organid}, #{$user.password}, #{$user.phone}, #{$user.avatar}.

Подробная информация о руководстве: http://qifeng.321zou.com/pages/f8b0fc/.

🏆 Преимущества

🚀1. Можно избежать разработки различных объектов, вызовов между различными уровнями и напрямую написать синтаксис Mybatis для достижения целевой функции, что значительно повышает эффективность.

🚀2. Его можно изменить в соответствии с изменениями требований, гибко изменять соответствующий интерфейс и иметь высокую гибкость.

🚀3. Простота обслуживания и высокая скорость отклика после эксплуатации.

🚀5. Миграция и репликация очень удобны, поскольку вся конфигурация представляет собой одну таблицу, и перемещение одной записи данных завершает миграцию функции. Связь с базой данных низкая.

🚀6. Может быть тесно интегрирован с Java (если требования изменятся до такой степени, что они больше не могут быть удовлетворены, потребуется вторичная разработка, которую можно вызвать в коде Java).

🏆 Расширение мышления

🚀1. Интерфейс между системами. Поскольку формат данных интерфейса фиксирован, как идеально решить проблему синхронизации данных с нашей системой и вывода данных? Это может идеально решить различные проблемы синхронизации данных между системами и вывода данных.

🚀2. Очередь сообщений MQ. MQ принимает сообщения в формате объекта JSON, что также может идеально решать различные задачи синхронизации данных и обработки данных.

🚀3. Импорт и экспорт различных файлов Excel. Формат импорта и экспорта фиксирован и соответствует формату JSON, поэтому его также можно адаптировать для идеального решения различных задач импорта и экспорта данных.

🚀4. Разработка различных API. Данные, отправленные API, имеют фиксированный формат JSON, и теперь эта функция используется в различных функциях разработки.

🚀5. Поскольку интерфейс является компонентом, он также может поддерживать различные микросервисы интерфейса и развёртывание серверов с балансировкой нагрузки.

🏆 Платформа процесса

Платформа процесса и конструктор форм хорошо интегрированы. Каждый узел может контролировать атрибуты только для чтения, обязательные, отображаемые атрибуты формы. Лица, утверждающие форму, могут быть конкретными людьми, ролями или отделами организации, или они могут быть значениями атрибутов формы. Маршрутизация поддерживает использование данных формы в качестве условия управления направлением процесса, бизнес-данные будут автоматически сохранены, и каждый узел также может установить обратный вызов API и выполнить динамический синтаксис интерфейса Mybatis. Конструктор форм выглядит следующим образом:

Процесс инициируется на ПК

Информация о процессе	Запись утверждения	Направление процесса

Процесс инициирован на мобильном телефоне

| Информация о процессе | Запись утверждения