本次专题目录 - 每周一更
- 提纲
- 前后端搭建
- 完成基本模块增删改查与打包嵌入
- 接口增删改查
- 图片上传与静态资源
- 权限 登录拦截
- 编辑系统开发
- 图层面板
- 图层编辑系统
- 整体放大缩小与画布和坐标轴
- 编辑记录与移动碰撞辅助线算法
技术栈
- react-antd-pro - 前端页面直接搭建
- react-dnd - 拖拽库,api简单实用十分强大
- koa.js- 后台搭建
- mysql - 数据存储
- sequelize - 一个基于promise 的Node.js ORM
- typescript - 类型定义
环境准备
写后端需要知道的知识点
后端服务表设计
前端设计
难点
- 自定义拖拽布局的对齐
- 整体素材打包后,输出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} />;
}
复制代码
求点赞呀 ❤️
欢迎各位小伙伴点赞+关注呀!!!!笔芯❤️