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

前言

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

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

• 编辑器：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. 如何进行组件编辑

进行组件编辑，实际上编辑的是组件的 props，props 改变组件的渲染结果自然改变。为了对 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' } }; 

代码开源在 点击访问。