使用 React 构建页面可视化搭建工具

custw 9天前 10

前言

端午闲来无事,决定尝试下一个页面搭建工具。效果如下:

可以访问以下链接进行体验。

  • 编辑器:https://blog.wipi.tech/ramiko/editor
  • demo:https://blog.wipi.tech/ramiko/page/85333d78-ed24-4adf-8d09-b185fddd73fc

技术栈

  • React.js
  • nest.js
  • MySQL

思路

  1. 定义页面数据结构

既然是可视化页面搭建,那么页面必须可以以某种数据结构进行描述。比如:

{
    setting: {}; // 页面设置
    components: [] // 页面使用到的组件
}
  1. 定义组件数据结构

页面核心是由组件搭建而成的,那么就要定义组件的数据结构。

{
    name: "BaseTitle"
    props: {}
    schema: {}
}

组件都是 React 组件,这里保存组件的名称,前端渲染时,通过名字找到组件,进行渲染。

  1. 如何进行组件编辑

进行组件编辑,实际上编辑的是组件的 propsprops 改变组件的渲染结果自然改变。为了对 props 进行编辑,需要定义 props 的描述语言,通过 props 描述来进行属性编辑。这里使用如下的 schema

{
    title: "标题"
    type: "text"
}

对应组件 props.title,通过 type 可以决定如何渲染编辑器组件。

  1. 丰富功能

比如添加组件拖拽排序功能。

  1. 丰富函数

可能光能渲染组件是不够的,也许需要更多的功能包装,比如埋点。这一类函数本质上也是组件。可以通过 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'
  }
};

代码开源在 点击访问。

最新回复 (3)
返回