Vue легко реализует визуальное оформление магазина

Визуальное оформление магазина можно отнести к визуальной конфигурации страницы, такой как наша общая конфигурация визуальной активности, конфигурация редактирования страницы H5, оформление магазина и т. д. Основное взаимодействие заключается в быстром создании страницы путем перетаскивания компонентов страницы.

Далее мы реализуем店铺装修необходимо рассматривать такие сценарии.

статья опубликована ранееИнтерфейсный визуальный редактор действий Vue, главным образом, чтобы представить функцию, вы можете посмотреть, если вы заинтересованы, вот как ее реализовать.

фон спроса

Требование примерно состоит в том, чтобы выполнить аналогичное требование оформления магазина Taobao, позволяя пользователям выбирать необходимые компоненты страницы и перетаскивать их, а затем настраивать данные для успешного сохранения для предварительного просмотра или публикации своих собственных страниц магазина. .

Вот небольшой каштан: (Например, на рисунке ниже перетащите данные конфигурации требуемого компонента слева)

Организовать анализ

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

1. В первую очередь необходимо реализовать управление библиотекой компонентов страницы и поддержку выбора пользователем конфигурации при использовании (поддержка максимального количества конфигураций, ставить ли верх и низ и т.д.)
2. Требуется контейнер для хранения компонентов, перетаскиваемых пользователем, поддержка (перемещение вверх и вниз, сортировка перетаскиванием, удаление и т. д.)
3. Реализуйте каждый компонент страницы в соответствии с реальным бизнесом, включаяView组件показать иForm组件Данные конфигурации.
4. Вам нужно только добавлять компонент в библиотеку компонентов каждый раз, когда вы добавляете новую функцию в свой бизнес.

Для вышеперечисленного:

• Функция1Вам необходимо определить собственный формат данных для описания соответствующих компонентов и настраиваемой информации.
• Функция2Сложный момент заключается в том, чтобы добиться добавления или сортировки перетаскивания и т. д., вы можете использоватьdragСобытия, чтобы реализовать себя, или выбрать зрелую библиотеку с открытым исходным кодом.
• Функция3 View组件Необходимость совмещения бизнеса не спасти, но если каждый компонент View будет написан вручнуюForm组件На более позднем этапе будет сложнее настроить обслуживание, и здесь необходимо рассмотреть схемы оптимизации.

В сочетании с вышеизложенным функциональная точка1 2В основном они используются для реализации всего редактора страниц, принадлежащего一劳永逸После этого вам нужно только разрабатывать компоненты и настраивать их при появлении новых компонентов.

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

В ответ на вышеуказанные проблемы легко подумать, что форма может быть сгенерирована через конфигурацию данных, тогда схема здесь также генерируется через конфигурацию, но эта конфигурация основана наJSON SchemaКаноническая структура данных.

JSON SchemaПреимущества очевидны, потому что он входит в стандартную спецификацию, а для каждого языка есть соответствующая библиотека проверки, что удобно для кросс-энд проверки. Исходя из этого, нам нужно решение для генерации соответствующей формы Form через JSON Schema.На github есть некоторые существующие библиотеки с открытым исходным кодом, но они не очень подходят для нашего собственного проекта, поэтому я написал его сам, на основе фреймворка ElementUi. .

Примечание:JSON SchemaПростое понимание — это спецификация, специально используемая для описания структуры данных JSON, которую можно использовать для проверки данных JSON.

решение

Основываясь на приведенном выше анализе и сортировке, вот наше решение.

сначала через数据配置Для управления библиотекой компонентов, поддерживающих конфигурацию, используйтеvuedraggableЧтобы добиться перетаскивания, страница поддерживает динамическую визуализацию компонентов, настроенных в данный момент пользователем, а форма конфигурации компонента появляется при нажатии на компонент.Для этой формы мы передаемJSON Schemaдля сборки, и можем поместить наш код при выпуске кода в производствоJSON SchemaВыталкивается на сервер, чтобы сервер также мог быть использованJSON Schemaдля проверки данных.

** Давайте продемонстрируем конфигурацию поддержки на следующей странице.轮播图组件а также纯文本组件Реализация кода **

• 轮播图 纯文本Конфигурация данных следующая

// 轮播图
import componentPackCarouselImg from '../viewComponentsM/CarouselImg';

// 纯文本
import componentPackText from '../viewComponentsM/Text';

const components = [
    {
        groupName: '图文类',
        componentList: [{
            title: '轮播图',
            maxNum: 2,
            icon: 'el-icon-picture',
            componentPack: componentPackCarouselImg
        }, {
            title: '纯文本',
            maxNum: 20,
            icon: 'el-icon-notebook-1',
            componentPack: componentPackText
        }]
    }
];

componentPackTextСодержимое выглядит следующим образом: (Примечание: componentPackCarouselImg аналогичен)

import propsSchema from './propsSchema.json';
import View form './View.vue';

export default {
    propsSchema,
    View
};

propsSchema.jsonКонфигурация схемы JSON текстового компонента содержит два поля: текстовое содержимое и цвет, код выглядит следующим образом:

  {
      "$schema": "http://json-schema.org/draft-07/schema#",
      "id": "Text",
      "title": "纯文本组件",
      "description":"纯文本输入组件，用于在页面配置一条文字信息" ,
      "type": "object",
      "required": ["text"],
      "properties": {
          "text": {
              "title": "文字",
              "type": "string"
          },
          "textColor": {
              "title": "选择文字颜色",
              "type": "string",
              "default": "#ff0132"
          }
      }
  }

• Отображение списка модулей страницы и заполнение данными

первыйJSON Schemaдолжны быть настроены уникальноid, используется для идентификации текущего компонента, используется список компонентов, добавленных пользователемcomponentкомпоненты для динамического рендеринга. Сохраненные данные содержат конфигурацию пользователя и текущиеid, когда страница отображается, ее можно сопоставить с соответствующим компонентом по идентификатору.

Следующие компоненты должны принимать только одинformDataПараметры formData сохраняются и передаются формой.

<component
    :is="item.componentViewName"
    :form-data="item.componentValue"
>
</component>

Сохраненная структура данных примерно такая: (nameсоответствующий предыдущему уникальномуid,valueнастраиваемые пользователем данные)

[
	...,
    {
        name: 'Text', // 纯文本组件
        value: {
            txt: '推荐商品',
            txtColor: '#e46028'
        }
    },
]

Подводя итог, когда нам нужно добавить новый компонент страницы, нам просто нужно добавить новыйJSON SchemaЧтобы описать структуру данных нового компонента, убедитесь, что идентификатор уникален, и реализуйте компонент View для отображения, и все готово. Поскольку мы поставилиJSON SchemaФайл проталкивается на сервер, поэтому не нужно беспокоиться о проверке данных на сервере (здесь только проверка структуры данных, но если речь идет о правильности бизнес-данных, проверка на сервере еще требуется).

наконец

На основе вышеперечисленных методов базовая версия店铺装修интерфейсный код.

• Предварительный просмотр эффекта:форме.Несколько слов.Что/v UE-редактор.…
• Адрес источника:GitHub.com/несколько слов-маленький/v UE-…

Репозиторий содержит три проекта:

• packages/lib - vjsf(vue-json-schema-form) основная библиотека, компоненты Vue, которые генерируют формы на основе схемы JSON.
• packages/docs - vjsfДокументация
• пакеты/демо - на основеvjsfприложений, включая店铺装修页面с однимform表单展示编辑器

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

• Минимальная конфигурация новых компонентов должна быть толькоJSON Schema, и компоненты показываютView组件, что упрощает другие ненужные настройки
• Скорректирован общий стиль
• Сделал мобильную страницу конфигурации
• vjsfИнформация о пользовательском интерфейсе формы и конфигурация личности ошибки проверки поддерживают отдельные параметры или настраиваются непосредственно в схеме.

Файл конфигурации мобильной страницы украшения магазина находится по адресу: packages/demo/src/vue-editor/views/editor/config/mTools.js Если вам нужно добавить новые компоненты, вам нужно только настроить новые компоненты в этом файле. в формате, описанном выше. Легко добавить в библиотеку компонентов за считанные минуты.

Наконец, все желающие могут поставить звездочку и оставить комментарий.