亲手写一个低代码编辑器：打通 React 可视化交互与全栈工程化

市面上绝大多数前端课程只教你调用现成的低代码平台，却鲜少有人能亲手构建一个支持拖拽、编辑和发布的画布系统。如果你只能被动使用工具，一旦需求变更或需要深度定制，往往无从下手。本课程不讲枯燥的框架原理，直接通过实战带你从零手写一个“全栈低代码项目”。它能解决你无法理解可视化编辑器底层逻辑、难以独立开发后台管理系统以及想掌握全栈工程化能力的痛点。适合有 React 和 Node.js 基础的学习者，如果你连组件状态管理都感到吃力，建议先巩固 React Hooks 和异步编程再开始本系列。

先构建画布核心交互，再攻克复杂的拖拽与数据驱动渲染

学习顺序上，课程前段会先带你完成编辑器项目的初始化搭建，配置嵌套路由与权限控制，让你快速拥有开发环境。紧接着进入最关键的“画布数据管理”与“组件渲染”环节。这里不会教你现成的拖拽库，而是深入讲解如何利用原生鼠标事件计算坐标，将画布上的拖拽操作转化为 JSON 数据，并驱动 React 组件实时渲染。你会亲手实现组件的添加、删除、选中与移动，甚至处理画布缩放与组件属性修改。学完这部分，你应能独立实现一个支持多组件自由拖拽、拖拽吸附、画布缩放以及选中组件批量操作的交互式画布，彻底理解“所见即所得”在前端的实现机理。

精通撤销重做与工程化细节，补齐可视化开发最后的短板

课程后半程将挑战高阶开发能力，重点攻克“撤销与回退”机制。你需要手动实现命令模式（Command Pattern），将每一次拖拽或属性修改封装为命令对象，从而构建操作历史记录栈。此外，课程还会覆盖右键菜单删除、组件复制、层级调整（z-index 管理）以及键盘快捷键绑定等实用功能，这些都是构建成熟可视化编辑器的标配。资料包中的代码资源已按模块分类，建议你在观看视频时暂停代码，尝试修改组件属性或重写拖拽逻辑，并在本地运行调试。学完这门课，你不仅能独立交付一个功能完备的低代码编辑器原型，更能掌握处理复杂 Canvas 交互、状态同步、性能优化及全栈数据流转的通用思路，真正补齐全栈开发中“可视化”这块关键短板。

课程目录

}2J2VIF[VP$ZLBMUBB(TN.png   下载附件 2024-5-17 11:41 上传 全栈低代码项目
01 前端-编辑器端
001.1. 编辑器项目搭建 .mp4 24.89M
002.2. 嵌套路由与权限路由 .mp4 48.16M
003.3. 查询列表页 .mp4 29.71M
004.4. 搭建编辑页布局 .mp4 22.25M
005.5. 画布数据管理 .mp4 82.88M
006.6. 拖拽添加组件 .mp4 68.02M
007.7. 添加组件的相关渲染优化 .mp4 24.59M
008.8. 添加图片、图形组件 .mp4 29.54M
009.9. axios拦截器，添加全局loading .mp4 157.25M
010.10. 保存与查询画布信息 .mp4 64.92M
011.11. 清空画布 .mp4 15.79M
012.12. 选中单个、多个组件 .mp4 110.89M
013.13. 拖拽选中的组件 .mp4 35.01M
014.14. 画布的缩放 .mp4 53.97M
015.15. 伸缩改变组件大小 .mp4 61.53M
016.16. 修改画布与选中组件的属性 .mp4 100.26M
017.17. 编辑文本组件的文本值 .mp4 47.94M
018.18.1 撤销与回退 .mp4 98.41M
019.18.2 撤销与回退 .mp4 14.45M
020.19. 右键菜单，并实现删除选中的组件 .mp4 34.43M
021.20. 复制选中的单个或者多个组件 .mp4 28.68M
022.21. 组件的层级修改 .mp4 60.05M
023.22. 添加保存与上下左右移动组件位置的快捷键 .mp4 49.02M
024.23. 显示附近组件 .mp4 36.53M
025.24. 修改边框线-过渡章节 .mp4 17.45M
026.25. 吸附线-单个组件对齐画布 .mp4 93.16M
027.26. 吸附线-单个组件对齐可视区域内的其它组件 .mp4 84.14M
028.27. 参考线 .mp4 70.16M
029.28. 旋转单个组件 .mp4 52.99M
030.29. 页面复制、生成模板 .mp4 51.25M
031.30. 显示缩略图，页面生成可下载图片 .mp4 47.26M
032.31. 给组件加动画属性 .mp4 72.71M
033.32. 编辑页面，离开之前，做路由判断 .mp4 30.81M
034.33. 离开页面的数据清理与其它细节代码修改 .mp4 62.73M
035.34.1 组合组件-原理 .mp4 61.62M
036.34.2 组合组件-实现组合与取消组合 .mp4 97.09M
037.34.3 组合组件-删除、拉伸、拖拽与选中 .mp4 .mp4 82.43M
038.34.4 组合组件-EditBox .mp4 37.45M
039.35. 组合组件的层级 .mp4 46.37M
040.36. 组合组件的复制 .mp4 16.45M
041.37. form组件 .mp4 150.24M
042.38. 删除form组件 .mp4 28.81M
043.39. 发布 .mp4 34.43M
02 前端-生成器
前端-生成器001.1. 生成器项目基础-CSR渲染 .mp4 55.89M
前端-生成器002.2. SSR渲染 .mp4 70.71M
前端-生成器003.3. SSG渲染 .mp4 42.10M
前端-生成器004.4. CSR与SSR与SSG渲染对比 .mp4 12.34M
03 部署与持续集成
001.0. Docker基础 .mp4 147.65M
002.1. 使用Docker实现容器化封装 .mp4 39.39M
003.2. 使用Pm2实现进程守护 .mp4 48.30M
004.3. 使用华为云平台ECS+Linux搭建应用服务 .mp4 44.15M
005.4. 学会基础的Linux操作 .mp4 51.24M
006.5. Linux安装Docker .mp4 25.10M
007.6. Linux安装Node环境 - Node、Pm2 .mp4 51.55M
008.7. 申请域名服务配置DNS .mp4 20.75M
009.8. 申请HTTPS证书 .mp4 48.25M
010.9. Nginx基础配置 - 静态服务、Gzip、反向代理 .mp4 45.17M
011.10. 开发、测试、生产多分支与工作流设计 .mp4 28.78M
012.11. 使用GithubAction实现持续集成 .mp4 85.81M
013.12. 使用Pm2 Monitor 实现异常监控 .mp4 18.05M
04 服务端-NestJS
1-10_10基础篇：数据持久化-TypeORM .mp4 1.06G
1-11_11基础篇：使用Winston实现分级日志收集 .mp4 127.71M
1-12_12 实战篇：三层架构与目录规范 .mp4 62.17M
1-13_13 实战篇：实现分页功能 .mp4 102.56M
1-14_14 实战篇：实现通用数据项-逻辑删除、时间戳 .mp4 70.72M
1-15_15 实战篇：拦截器实现统一应答处理 .mp4 103.63M
1-16_16 实战篇：过滤器实现统一异常应答 .mp4 66.82M
1-17_17 实战篇：用户注册、密码强化 .mp4 136.19M
1-18_18 实战篇：用户登录、鉴权 .mp4 132.76M
1-19_19实战篇：模版管理 .mp4 23.57M
1-1_1基础篇：NestJS简介 .mp4 1.07G
1-20_20实战篇：使用无头浏览器实现缩略图生成 .mp4 98.69M
1-2_2基础篇：RESTfulAPI风格 .mp4 777.79M
1-3_3基础篇：Swagger接口文档 .mp4 779.13M
1-4_4基础篇：Controller与HTTP接口实现 .mp4 887.15M
1-5_5基础篇：利用Pipe通道实现数据校验 .mp4 618.60M
1-6_6基础篇：控制反转IOC与DI .mp4 783.71M
1-7_7基础篇：模块化Modules .mp4 507.21M
1-8_8基础篇：异常过滤器-异常处理 .mp4 416.03M
1-9_9基础篇：配置中心-环境变量 .mp4 709.19M
05 React低代码项目
1-10_lesson9编辑组件 .mp4 599.93M
1-11_lesson10组件的旋转、拖拽、上下左右键的移动 .mp4 725.86M
1-12_lesson11实现模板添加与画布缩放 .mp4 225.43M
1-13_lesson12添加图形组件 .mp4 173.56M
1-14_lesson13画布的缩放与组件的拖拽、移动 .mp4 333.29M
1-15_lesson14清空画布、撤销与回退 .mp4 535.55M
1-16_lesson15组件的复制与删除 .mp4 432.88M
1-17_lesson16组件的层级修改 .mp4 335.43M
1-18_lesson17支持文本组件的多行编辑 .mp4 487.54M
1-19_lesson18组件的批量操作 .mp4 1.04G
1-1_lesson1低代码基础 .mp4 279.28M
1-20_lesson19链接服务端，部署项目 .mp4 365.20M
1-21_lesson20部署，路由守卫 .mp4 174.71M
1-22_lesson21注册与登录 .mp4 163.53M
1-23_lesson22添加typescript .mp4 143.32M
1-24_lesson23title、跳转、其他 .mp4 306.33M
1-25_后端技术选型 .mp4 416.13M
1-2_lesson2项目搭建 .mp4 330.38M
1-3_lesson3状态管理 .mp4 447.63M
1-4_lesson4往页面动态添加组件 .mp4 589.98M
1-5_lesson5演示效果 .mp4 17.96M
1-6_lesson5拖拽移动组件 .mp4 800.40M
1-7_lesson6-升级React18，并改变组件大小 .mp4 349.54M
1-8_lesson7-添加图片组件 .mp4 313.20M
1-9_lesson8-编辑画布区域 .mp4 420.03M
全栈低代码项目
00