react 打造页面可视化搭建 1 - 提纲 持续更新

本次专题目录 - 每周一更

1. 提纲
2. 前后端搭建
3. 完成基本模块增删改查与打包嵌入

• 接口增删改查
• 图片上传与静态资源

4. 权限 登录拦截
5. 编辑系统开发

• 图层面板
• 图层编辑系统
• 整体放大缩小与画布和坐标轴
• 编辑记录与移动碰撞辅助线算法

技术栈

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. processon 免费在线作图、实时协作
2. 墨刀 原型绘制

难点

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} />;
}
复制代码

求点赞呀 ❤️

欢迎各位小伙伴点赞+关注呀！！！！笔芯❤️