Как спроектировать хранилище компонентов для платформы визуального построения?

Статьи по Теме:Как быстро разработать страницы H5 со строительными блоками?
Демонстрационный адрес:Платформа для производства страниц H5-Dooring
Примечание: ⚠️Эта статья является первой подписанной статьей сообщества Nuggets, и её перепечатка без разрешения запрещена.

делал это раньшеlowcodeПроекты, связанные с визуализацией, также выпустили серию технических статей о технологии визуализации.Сегодня я продолжу говорить с вами на темы, связанные с платформами визуализации-магазин компонентов. Это требование на самом деле очень рано в моем открытом исходном кодеH5-DooringПосле публикации предложенissue,следующим образом:

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

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

• Что такое хранилище компонентов и почему вы должны разработать хранилище компонентов
• Дизайн рабочего процесса хранилища компонентов
• Реализация конкретной схемы рабочего процесса хранилища компонентов
  • Реализовать онлайн-редактор кода
  • Схема представления компонентов
  • Схема утверждения компонентов
  • План обновления запуска компонента
• Сводка хранилища компонентов визуальной строительной платформы и последующее планирование

Представление статьи выглядит следующим образом: вы также можете систематизировать свои идеи с помощью интеллект-карт на работе.

Что такое хранилище компонентов и зачем разрабатывать хранилище компонентов

Вы можете быть знакомы с "магазинами", не так ли?ПользовательС точки зрения , его основная цель состоит в том, чтобы удовлетворить нормальные потребительские потребности;поставщикМагазины предоставляют канал маркетинга и продвижения для продажи собственной продукции;магазинС одной стороны, он получил пассажиропоток и прибыль, а с другой стороны, может обеспечить расширение собственной ценности в космосе.

С помощью приведенной выше иллюстрации мы можем легко придумать слово -экология. Потому что каждая ссылка продвигает и влияет друг на друга. тогда длямагазинПосле того, как эта сущность получит конкретное познание, давайте посмотрим на «техническое поле».магазин компонентов".

Для платформы визуального построения одной из основных ссылок являетсякомпоненты активов. Пользователи будут использовать различные компоненты при разработке и создании страниц, но для разных пользователей требования к компонентам часто различаются.lowcodeилиnocodeНи одна из платформ не может решить эти индивидуальные требования пользователей компонентов, поэтому для решения этой проблемы,магазин компонентовРожденный для зачатия.

Нам нужно предоставить механизм на платформе, чтобы помочь производителям производить компоненты, определять компоненты, а менеджеры могут классифицировать и управлять компонентами, произведенными производителями (например, перечисление/удаление/удаление/сортировка и т. д.). Друзья, которые работали в системе электронной коммерции, могут обнаружить, что это логичный процесс с запуском продуктов на платформе электронной коммерции:

Затем я предлагаю вам разработать подобный процесс для ознакомления.

Дизайн рабочего процесса хранилища компонентов

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

• Модуль онлайн редактирования (загрузки) компонента
• Модуль аудита компонентов
• Модуль обновления/выпуска компонентов
• Управление компонентами (вверх/вниз/удалить/загрузить)

При поддержке вышеперечисленных 4 блоков базовое хранилище компонентов может бытьwork. Конкретный процесс выглядит следующим образом:

Реализация конкретной схемы рабочего процесса хранилища компонентов

После того, как у нас есть конкретное планирование и дизайн, мы можем реализовать его шаг за шагом.

1. Внедрить онлайн-редактор кода

На рынке есть несколько зрелых решений для онлайн-редакторов кода, таких как:

• react-monaco-editor
• react-codemirror2
• ace | Производительность и функциональность сопоставимы с нативными редакторами кода

Вы можете выбрать любой из вышеперечисленных вариантов, здесь автор принимаетreact-codemirror2реализовать. Эффект после внедрения следующий:

Как видно из приведенного выше рисунка, мы можем написать онлайнReact,Css,Jsкод и может настраивать информацию о компонентах. Во-первых, давайте установим плагин:

yarn add react-codemirror2 codemirror2

codemirrorПредоставляет нам много языковой поддержки и различные стили тем кода, мы можем легко создавать панели редактирования на разных языках. Далее, я возьму вас, чтобы понять одинReactРедактор кода:

import {UnControlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/jsx/jsx');

const react_code = `import styles from './index.less';
import React, { memo, useState } from 'react';
import ReactDOM from 'react-dom';

const MenuCp = memo((props) => {
  const { visible, list, bgColor, top } = props;
  return ReactDOM.createPortal(
    <div className={styles.menuWrap} style={{display: visible ? 'block' : 'none', backgroundColor: bgColor, top: (top + 6) + 'px'}}>
      H5-Dooring
    </div>,
    (document as any).querySelector('.react-grid-layout').parentNode,
  )
})`

const ReactEditPanel = () => {
  const codeEditorChange = (
      _editor: CodeMirror.Editor,
      _data: CodeMirror.EditorChange,
      value: string, 
      type: string
      ) => {
      console.log(_data, value, type)
    }
  return <CodeMirror
          value={react_code}
          className={styles.codeWrap}
          options={{
              mode: 'jsx',
              theme: 'material',
              lineNumbers: true
          }}
          onChange={(editor, data, value) => codeEditorChange(editor, data, value, 'react')}
      />
}

Вышеприведенное реализует простойReactРедактор кода, это очень просто?css,jsРедактор кода, точно так же, нам просто нужно определитьCodeMirrorатрибутmodeдляcss,javascriptВот и все. Мы также можем установитьthemeПерейдем к нашей любимой теме кода, здесь автор используетmaterialстиль.

Недостаточно просто реализовать онлайн-редактор кода, нам также необходимо обработать, сохранить и определить компоненты.Далее давайте посмотрим, как компоненты отправляются.

2. Схема представления компонентов

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

Информация об описании компонента Автор разработал здесь следующие поля:

• Название компонента (китайский)
• Название компонента (английское, простое в наличии)
• Классификация компонентов (базовые, визуализация, маркетинг, медиа и т. д.)
• Размер компонента по умолчанию (ширина и высота)
• Значок компонента (удобный для распознавания и поиска пользователями)

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

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

Логика отправки компонента также очень проста:

form.validateFields().then(values => {
  codeRef.current['form'] = {
    ...values,
    icon: values.icon[0].url
  };
  req.post('/visible/cp/save', codeRef.current).then(res => {
    setIsModalVisible(false);
  })
}).catch(errorInfo => {
  console.log(errorInfo)
  setCurTab("4")
})

нам просто нужно использоватьantdизFormДанные, введенные пользователем, могут быть собраны и отправлены в фоновый интерфейс. Поскольку мой бэкэнд используетnodejsРеализация, интерфейс загрузки — это не что иное, как сохранение данных компонентов, реализация относительно проста, и я не буду представлять их здесь по одному. правильноnodejsЗаинтересованные друзья могут обратиться к моим предыдущим проектам с открытым исходным кодом.Создайте CMS с полным стеком с нуля.

3. Схема утверждения компонентов

Утверждение компонента в основном управляется администраторами веб-сайта.Когда пользовательский компонент успешно отправлен, клиент уведомляет администратора с помощью сигнализации сообщения, и администратор просматривает компонент после получения сообщения. Тогда весь процесс также очень прост, мы можем использоватьwebsocketДля достижения двусторонней передачи сообщений полный процесс выглядит следующим образом:

Давайте сделаем это первымsocketСвязь, здесь я использую более зрелый рынокsocket.io, чтобы просто открыть процесс двусторонней связи между клиентом и сервером.

Во-первых, давайте проследим за зависимостями:

# 服务端
yarn add socket.io

# 客户端
yarn add socket.io-client

Для сервера нам нужно переписать следующим образом:

import koa from 'koa';
import http from 'http';

const app = new koa();
const server = http.createServer(app.callback());
const io = require('socket.io')(server);

// 一些业务逻辑...

// socket通信
io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('component upload success', (msg) => {
      // 通知审批
      io.emit('component review', msg)
    })
  });

server.listen(config.serverPort, () => {
    console.log(`服务器地址:xxx.xxx.xxx`)
});

Для клиента логика следующая:

import io from 'socket.io-client'
import { serverUrl } from '@/utils/tool'

const socket = io(serverUrl);

// ... 一些逻辑
useEffect(() => {
   socket.on('connect', function(){
     console.log('connect')
   });
   socket.on('htmlWorked', function(data){
     const { result, message } = data
     if(result !== 'error') {
       // ...
     }else {
       // ...
     }
     
   });
   socket.on('disconnect', function(e){
     console.log('disconnect', e)
   });
 }, [])

Благодаря описанным выше методам реализации клиент и сервер могут общаться в любое время. Далее давайте посмотрим на эффект одобрения:

пользователь вH5-DooringКомпоненты, представленные платформой, перейдут в фоновый режим управления, и администратор сможет просмотреть компоненты и загрузить исходный код. Одобрение также будет использоватьсяcodemirrorЭта библиотека в основном выполняет строковый код, хранящийся в базе данных.эхо. Конечно, вы также можете предварительно просмотреть эффект компонента онлайн-просмотра после его выхода в сеть.Если вам интересно, вы можете попробовать план реализации самостоятельно.Принцип также очень прост. Давайте посмотрим на демо утверждения:

4. План обновления запуска компонента

Существует также множество схем для составления списка компонентов, таких как ручное перечисление и обновление или автоматическое завершение программ. Итак, здесь я представлю свой план автоматического листинга в Интернете, здесь мне все еще нужно использовать приведенное выше введение.socket.ioа такжеnodejs. Принцип примерно выглядит следующим образом:

Полный процесс заключается в том, что после того, как администратор платформы одобрит компонент, он автоматически будет использоватьsocketОтправьте сигнал утверждения на сервер, сервер проанализирует данные компонента, запишет их в библиотеку компонентов в соответствующей категории (то есть в хранилище компонентов) и запишет информационный элемент компонента в базу редактора. для того, чтобы обновить Чтобы получить последние эффекты на базе, вам нужноnodejsРазберите инструкцию по сборке, чтобы упаковать базу онлайн, которая будет использоваться после обновления базы.socketотправить сообщениеH5-Dooring, уведомить пользователя о том, что библиотека компонентов была обновлена, и предложить пользователю обновить список компонентов.На этом завершается полный процесс обновления компонентов. Здесь мы реализуем, как запаковать базу редактора онлайн.

Во-первых, нам нужноnodejsПроцесс родительского ребенка имеет определенное понимание, напримерchild_process. я хотел бы использоватьchild_processизexecРеализуйте синтаксический анализ и выполните инструкции командной строки, если вы правыnodejsПроцесс родитель-потомок не очень знаком, вы также можете обратиться к моей предыдущей статьеСоздайте автоматизированный онлайн-процесс упаковки с нуля на основе NodeJS..

Поскольку весь процесс должен быть автоматизирован, его нельзя выполнить вручную, как мы делали это раньше, когда упаковывали проект.npm run buildилиyarn build. Нам нужна программа для автоматического выполнения этой команды командной строки для нас Конкретная схема выглядит следующим образом:

import { exec } from 'child_process'
const outWorkDir = resolve(__dirname, '../h5_base_frame')
const fid = uuid(8, 16)
const cmdStr = `cd ${outWorkDir} && yarn build ${fid}`

router.post(api.generalConfig,
    auth,
    ctx => {
      // ...
      exec(cmdStr, function(err, stdout, stderr){
       if(err) {
         console.log('api error:'+stderr);
         io.emit('htmlWorked', { result: 'error', message: stderr })
       } else {
         io.emit('component update success', { result: 'success', message: 'xxxx' })
       }
      })
      // ...
    }
);

С помощью вышеуказанных методов мы можем упаковать и обновить базу нашего проекта онлайн, а также внедрить любые параметры.Если нам нужно динамически записывать файлы, нам нужно только использоватьfsМодульная обработка может быть выполнена.Благодаря такому онлайн-процессу мы также можем реализовать более сложную логику и даже реализовать небольшой интерфейс.Рабочий процесс КИ. Затем, если у вас есть более элегантное и лучшее решение, вы также можете в любое время сообщить об этом в области комментариев.

Сводка хранилища компонентов визуальной строительной платформы и последующее планирование

Все вышеперечисленные схемы проектирования разработаны на основе реальных потребностей.Конечно, есть еще много деталей, которые необходимо обрабатывать и оптимизировать.С учетом сложности спроса и сложного бизнеса, статистики компонентов, анализа данных компонентов, мониторинга компонентов, и т. д. Вы также можете обратиться к приведенному выше плану дизайна, разработать свой собственныймагазин компонентов.

Если вас интересует визуальное конструирование или low-code/zero-code, вы также можете обратиться к моим предыдущим статьям или поделиться своими мыслями и опытом в области комментариев.

Прошлые статьи

• Проектирование механизма визуализации большого экрана с нуля
• Используйте электрон для создания настольного визуального редактора Dooring с нуля
• (Low Code) Платформа визуализации Анализ дизайна источника данных
• Создайте редактор страниц для ПК PC-Dooring с нуля
• Как быстро разработать страницы H5 со строительными блоками?