Моя жизнь моя, и рукописные формы отнимают много времени

предисловие

Все мы знаем, что форма, с которой мы чаще всего имеем дело в фоновом проекте, - это форма, и время, затрачиваемое на форму, варьируется от человека к человеку.Можно сказать, что форма занимает большую часть нашего времени разработки страницы, потому что сначала единого коллектива в команде не было.Спецификацию формы страницы, можно сказать, что все написали очень вольно. Может быть, мы просто постучали по нему какое-то время и продолжали стучать все время. Но задолженность рано или поздно будет погашена. Есть поговорка: "Программист, который не может быть ленивым, не является хорошим программистом".Для такого старого Ченга, как я, который любит быть ленивым, я действительно считаю, что писать повторяющиеся вещи — это пустая трата жизни Я всегда чувствую, что жизнь не должна быть такой, в ней должны быть поэзия и дистанция.Так называемое: «Моя жизнь зависит от меня, а рукописные формы требуют времени». Поэтому я пошел против неба и встал на путь невозврата к рефакторингу формы.

Расширенная форма

Первичный: Разработайте компонент формы, предпочтительно для стандартизации разработки страниц формы (здесь находится схема элемента-формы)
Промежуточный: на основе фрагментов кода VS разработайте несколько фрагментов компонентов element-ui (здесь идет element-form-schema.json.code-snippets)
Расширенный: на основе функции подключаемого модуля IDE VS code разработайте подключаемый модуль для перетаскивания интерактивной формы пользовательского интерфейса для создания файлов страниц (редактор схемы элементов находится здесь).

Первичный: Разработайте компонент формы, предпочтительно для стандартизации разработки страниц формы (здесь находится схема элемента-формы)

На самом деле, разрабатывая компоненты форм, я исследовал несколько подобных решений в отрасли, существует множество реактивных решений, таких как uform (Ali), amis (Baidu) и т. д., которые относятся к решениям крупных компаний, но для общего назначения в рамках Vue framework и может удовлетворить потребности проектаВ бизнесе очень мало схем форм.Даже если вы их найдете, вы не сможете увидеть ямы с первого взгляда. закопает ямы в команде. Позвольте мне привести несколько функций, которые должна поддерживать схема формы: она должна поддерживать все компоненты (пользовательские компоненты, глобальные зарегистрированные компоненты), компоненты должны поддерживать сложные условия, подобные v-if (необходимость компоновки), должны поддерживать случай, когда компоненты содержат массивы, должны Поддерживаться произвольные слоты между компонентами. После долгих размышлений была разработана схема формы элемента.

element-form-schema — это компонент формы, разработанный на основе vue render, element-ui, целью которого является:

В целях стандартизации разработки единой и последовательной формы;
В целях повышения эффективности разработки формы;
Сделать форму ремонтопригодной;

Особенности схемы формы элемента:

Поддержка требований «формы запроса», «всплывающего окна», «новой формы».
Поддерживает требования «развернуть/скрыть» для форм запросов.
Поддержка установки компонента формы для использования «правил» проверки «элемент-форма-элемент», вы можете вызвать метод «resetFields» через «ref»
[Основное] Поддержка индивидуальной установки встроенной специфики в компонентах формы.
[Основное] Поддержка унифицированной настройки компонентов: `размер`, `ширина`
[Основное] Поддержка простой и сложной связи между компонентами формы `hidden: vif: 'condition'`, `disabled: props: { disabled: 'condition' }`
[Основное] Поддержка двусторонней привязки массивов в форме, которая может быть обработана с помощью `{ tag: 'slot', slot: 'slot-name' }`
【Основные】Поддержка бизнес-компонентов

На самом деле форма появляется не более чем в двух ситуациях, которые можно обобщить следующим образом:Форма запроса списка, форма новой страницы

Простой сценарий:

Более сложные сценарии:

Фрагмент кода компонента формы element-form-schema:

Промежуточный: на основе фрагментов кода VS разработайте несколько фрагментов компонентов element-ui (здесь идет element-form-schema.json.code-snippets)

Некоторые люди могут спросить, как вы обновляете сниппеты, копируете и вставляете? На самом деле, мы разработали внутренний инструмент node cli для единообразного обслуживания и обновления (Примечание: если у вас есть хорошие предложения, вы можете сказать мне)

Расширенный: на основе функции подключаемого модуля IDE VS code разработайте подключаемый модуль для перетаскивания интерактивной формы пользовательского интерфейса для создания файлов страниц (редактор схемы элементов находится здесь).

очень много здесьблагодарныйJakHuangплагинВдохновение для меня:GitHub.com/jaghuang/fo…

Форма запроса списка:

Форма новой страницы:

Настройки свойства компонента:

Демонстрация GIF:

Резюме: я считаю, что есть еще много разработчиков, таких как я, которые все еще ежедневно пишут рукописные формы.Я также надеюсь, что эта статья может дать вам некоторые идеи и вдохновение.

Уже 2020 год, подростки, помните: «Моя жизнь зависит от меня, а рукописные формы требуют времени».