Визуальный редактор страницы сборки nextjs + nest.js -- Ramiko

внешний интерфейс

предисловие

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

Запись GIF не очень хороша, вы можете перейти по ссылке ниже, чтобы испытать ее.

стек технологий

  • next.js: модульная фронтенд-разработка
  • sass: работает с модулями css
  • Nest.js: серверный язык
  • MySQL: хранение данных

Общая структура

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

Дизайн редактора

编辑器整体结构图
Общая схема структуры редактора
.
|____index.tsx
|____plugins               ## 组件库管理
|____Editor.tsx            ## 编辑器
|____type.ts               ## 类型定义
|____components
| |____Pannel              ## 左侧组件面板
| |____Preview             ## 中间预览面板
| |____Editor              ## 组件编辑器实现
| | |____index.tsx
| | |____PropsEditor
| | | |____index.tsx
| | | |____components
| | | | |____SwitchEditor
| | | | |____RadioEditor
| | | | |____ImgEditor
| | | | |____ColorEditor
| | | | |____TextEditor
| | | | |____TextareaEditor
| | | | |____NumberEditor
| | | |____renderEditorItem.tsx
| | | |____UnionEditor.tsx
| | |____FunctionEditor
| | |____SettingEditor
|____renderPage.tsx

структура данных

Определить структуру данных страницы

Поскольку это визуальное построение страницы, страница должна быть описана в определенной структуре данных. Например:

{
  setting: {
  } // 页面设置
  components: []; // 页面使用到的组件
}

Определите структуру данных компонентов

Ядро страницы построено из компонентов, поэтому структура данных компонентов должна быть определена.

import React from 'react';

export const Title = ({ title, style }) => {
  return <h1>{title}</h1>
};

Title.defaultProps = {
  title: '标题',
};

Title.schema = {
  title: {
    title: '标题',
    type: 'text'
  },
};

Ядро можно абстрагировать как:

{
  name: 'Title'; // 对应组件名
  props: {
  }
  schema: {
  }
}

name

Сохранение исходного кода компонента на сервер невозможно, поэтому здесь сохраняется только название компонента.При рендеринге фронтенда можно найти соответствующий компонент для рендеринга по названию (аналогично динамическому компоненту Vue.js)

props

Реквизит компонента React, используемый здесьdefaultPropsназначить значение по умолчанию

schema

вести перепискуpropsОписание каждого свойства, используемого редактором для рендеринга. Редактирование компонента, фактически редактирование компонентаprops,propsИзменение результата рендеринга компонента изменяется естественным образом. чтобыpropsДля редактирования необходимо определитьpropsязык описания, черезpropsОписание для редактирования атрибута. Здесь используйте следующееschema.

{
  title: '标题';
  type: 'text';
}

Соответствующие компонентыprops.title,пройти черезtypeМожет решить, как визуализировать компоненты редактора.

нет компонента рендеринга

Возможно, компонента рендеринга световой энергии недостаточно, может быть, нужна более функциональная упаковка, например, зарытые точки. Этот тип функции, по сути, также является компонентом. в состоянии пройтиschemaопределить поведениеpropsредактировать. Например:

import React from 'react';

export const Tracking = ({ op, pageSn, pageElSn, children }) => {
  const onClick = () => {
    alert('埋点测试：' + op + '_' + pageSn + '_' + pageElSn);
  };

  return <div onClick={onClick}>{children}</div>;
};

Tracking.defaultProps = {
  op: 'click',
  pageSn: null,
  pageElSn: null
};

Tracking.schema = {
  op: {
    title: '曝光方式',
    type: 'radio',
    options: ['click', 'pv']
  },
  pageSn: {
    title: '页面编号',
    type: 'number'
  },
  pageElSn: {
    title: '元素编号',
    type: 'number'
  }
};

богатый и совершенный

  1. Богатая библиотека компонентов
  2. Оптимизируйте редактор: например, добавьте функцию перетаскивания компонентов.

Начало проекта

Гитхаб:портал

существуетclientа такжеserverВыполнить отдельноyarn devВот и все.

В этой статье используетсяmdniceнабор текста

Категории