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

本次专题目录 - 每周一更

  1. 提纲
  2. 前后端搭建
  3. 完成基本模块增删改查与打包嵌入
  • 接口增删改查
  • 图片上传与静态资源
  1. 权限 登录拦截
  2. 编辑系统开发
  • 图层面板
  • 图层编辑系统
  • 整体放大缩小与画布和坐标轴
  • 编辑记录与移动碰撞辅助线算法

技术栈

  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 规范

后端服务表设计

navicat 下载

前端设计

  1. processon 免费在线作图、实时协作
  2. 墨刀 原型绘制

难点

  1. 自定义拖拽布局的对齐
  1. 整体素材打包后,输出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} />;
}
复制代码

求点赞呀 ❤️

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

分类:
前端