react 打造页面可视化 自定义布局搭建 (1) 持续更新

技术栈

1. react-antd-pro - 前端页面直接搭建
2. react-dnd - 拖拽库，api简单实用十分强大
3. koa.js- 后台搭建
4. mysql - 数据存储
5. sequelize - 一个基于promise 的Node.js ORM
6. typescript - 类型定义

环境准备

1. redis下载
2. mysql下载

写后端须要知道的知识点

1. 事务
2. restful 规范

后端服务表设计

前端设计

难点

1. 自定义拖拽布局的对齐 - 碰撞检测
2. 总体素材打包后，输出bundle文件嵌入第三方

前端编辑器实现

编辑器的实现思路是：编辑器生成页面 JSON 数据，服务端负责存取 JSON 数据，并生成对应的模版文件 .jsx ，渲染时从服务端取数据 JSON 交给前端模板 .jsx 处理。

最后存入数据库的 页面数据结构

interface INode {
  type: string
  props: {
    style: CSS.Properties;
    // 空格间隔的应用于『组件顶层』的『样式列表』
    className: string;
    [key: string]: any;
  }
  children: INode[] | null
}
复制代码

前端在项目处理： 存入Map 单向链表 将其扁平化 Map<string,Node>

interface INode {
  id:string
  type: string
  canDrag:boolean // 是否absolute支持拖拽
  display:boolean // 是否在画布中展示出来
  props: {
    style: CSS.Properties;
    // 空格间隔的应用于『组件顶层』的『样式列表』
    className: string;
    [key: string]: any;
  }
  children: string[] | null
}
复制代码

核心代码

编辑器核心代码，经过获取 JSON 上对应的 componentName 加载对应的组件

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    const SpecificStory = components[props.storyType];
    return <SpecificStory story={props.story} />;
}
复制代码