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} />;
}
複製代碼