Need help with ramiko?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

fantasticit
144 Stars 26 Forks 48 Commits 2 Opened issues

Description

nextjs + nest.js 构建页面可视化编辑器 -- Ramiko

Services available

!
?

Need anything else?

Contributors list

No Data

next.js + nest.js 构建页面可视化编辑器 -- Ramiko

前言

最近看了不少关于 h5 页面制作工具。端午闲来无事,决定尝试下一个页面搭建工具。效果如下:

gif 录制效果不佳,可以访问以下链接进行体验。

技术栈

  • next.js:前端模块化开发
  • sass: 配合使用 css modules
  • 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

{title}

; };

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

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

核心可以抽象为:

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

name

不可能把组件源代码保存到服务端,所以这里只保存组件的名称,前端渲染时,根据该名称找到对应组件渲染即可(类似 Vue.js 的动态组件)

props

React 组件的 props,这里使用

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

{children}
; };

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. 优化编辑器:比如添加组件拖拽功能。

项目启动

Github:传送门

client
server
分别执行
yarn dev
即可。

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.