bubucuo - 全栈低代码项目

后端开发

课程简介

这门课的主题很明确：用 React 写一个真正能跑起来的低代码编辑器，并把它从画布交互一路做到后端接口与部署。它和市面上常见的「拖拽组件 demo」不太一样，重心放在数据结构、状态流转和前后端衔接上，适合拿来对照自己的工程做重构参考。技术栈与整体结构前端以 React 为核心，围绕画布区、组件面板、属性配置面板三块展开，配套的状态管理承担组件树的增删改…

已有 2 人浏览发布 2026-09-10 更新 2026-09-13

这门课的主题很明确：用 React 写一个真正能跑起来的低代码编辑器，并把它从画布交互一路做到后端接口与部署。它和市面上常见的「拖拽组件 demo」不太一样，重心放在数据结构、状态流转和前后端衔接上，适合拿来对照自己的工程做重构参考。

技术栈与整体结构

前端以 React 为核心，围绕画布区、组件面板、属性配置面板三块展开，配套的状态管理承担组件树的增删改查与历史记录。后端的选型与接口设计在课程中被单独拿出来讲，重点不是堆框架特性，而是让前端编辑出来的页面配置能够被序列化、持久化、再还原。最后一段落在部署与持续集成上，把本地能跑的项目推到线上环境。

换句话说，这套资料覆盖的是「编辑器 + 服务端 + 上线」的闭环，而不是只停留在 UI 层。对做后端或全栈方向的开发者来说，能借此看清低代码系统里前后端各自的边界在哪里。

画布相关的几个硬骨头

低代码编辑器真正费时间的部分几乎都在画布上，课程在这块的篇幅也最重。比较有含金量的几个点：

画布的缩放，以及缩放后坐标系的换算——拖拽过程中鼠标位移要还原成画布内坐标，这一步做不对就会出现「越拖越偏」。
组件的拖拽与移动，包括从组件面板拖入画布、画布内部调整位置两种不同来源的交互。
往页面动态添加组件，涉及组件树的插入位置计算与唯一标识的生成。
图片组件这类具体物料，牵涉到资源地址、尺寸约束和属性面板的联动。
清空画布、撤销与回退，本质是一个操作历史栈的设计，需要考虑哪些操作入栈、栈的粒度多大、重做时怎么恢复。
组件的批量操作，考验的是选择集与单组件状态之间的解耦程度。

这些点单独看都不算新，但要在同一个项目里互相兼容，就需要一套稳定的状态模型。跟着做一遍，比只看结论更容易发现自己项目里埋的坑。

可复用的模块与工程参考点

这份资料的价值更多体现在可迁移的设计上，而不是最终产物本身。几处可以直接借鉴的地方：

组件的元数据描述方式——如何用一份配置声明组件的默认属性、可编辑字段和渲染逻辑，这决定了后续加物料要不要改核心代码。
属性面板与画布的通信路径，避免把编辑器状态散落到各个组件内部。
撤销重做的历史管理，稍作抽象就能复用到表单、表格等需要回退能力的场景。
页面配置的序列化格式与后端存储的对应关系，直接影响后续能不能做版本对比、模板复用。

如果你手头正好在做可视化搭建、表单引擎或运营配置平台，这些结构层面的取舍比某个 API 怎么写更值得对照。

怎么用这份资料更划算

建议不要顺着一路看下去。可以先挑画布缩放与拖拽、撤销重做这两段，边看边在自己的编辑器里复现，遇到坐标或状态不对再回看讲解。前端部分跑通之后，再单独过一遍后端接口与部署，把配置的存取链路补全。全程以「我能不能不看视频再写一遍」为标准，比按课时打卡有效得多。

另外，低代码项目的复杂度往往在需求变化时才暴露，所以看的过程中可以主动给自己加条件：多加一种组件类型、让属性面板支持联动、把历史记录做成可持久化。这些改动会逼着你去理解原有设计的意图，也是这份资料真正能提供工程参考的地方。

bubucuo - 全栈低代码项目

全栈低代码项目实战教程

编辑点评

系统学习低代码开发，涵盖前端、后端、部署全流程，适合初学者快速上手。

⭐ 编辑推荐

从零开始，掌握低代码开发全栈技能，轻松构建项目。

✨ 课程亮点

✦全栈低代码开发

✦React低代码项目

✦后端技术选型

✦部署与持续集成

课程目录

📁 05 React低代码项目
1-14_lesson13画布的缩放与组件的拖拽、移动.mp4 [333.3 MB]
1-1_lesson1低代码基础.mp4 [279.3 MB]
1-4_lesson4往页面动态添加组件【持续更新‖免费提供：CunworknoteS】.mp4 [590.0 MB]
1-8_lesson7-添加图片组件.mp4 [313.2 MB]
1-15_lesson14清空画布、撤销与回退.mp4 [535.5 MB]
1-19_lesson18组件的批量操作.mp4 [1.0 GB]
1-7_lesson6-升级React18，并改变组件大小.mp4 [349.5 MB]
1-25_后端技术选型.mp4 [416.1 MB]
1-22_lesson21注册与登录【优质资源‖关注：cunWorkNotes 解锁】.mp4 [163.5 MB]
1-5_lesson5演示效果【更多精选‖公众号：CunWorknotes】 .mp4 [18.0 MB]
1-23_lesson22添加typescript【整理不易‖记得关注：CunWorKNotes】.mp4 [143.3 MB]
1-11_lesson10组件的旋转、拖拽、上下左右键的移动.mp4 [725.9 MB]
1-17_lesson16组件的层级修改【不易整理‖请关注：CunWorkNoteS】.mp4 [335.4 MB]
1-24_lesson23title、跳转、其他【公重号：CunWorkNotes】.mp4 [306.3 MB]
1-3_lesson3状态管理【公重号：CunWorkNotes】.mp4 [447.6 MB]
1-13_lesson12添加图形组件.mp4 [173.6 MB]
1-10_lesson9缂栬緫缁勪欢.mp4 [599.9 MB]
1-20_lesson19链接服务端，部署项目.mp4 [365.2 MB]
1-21_lesson20部署，路由守卫.mp4 [174.7 MB]
1-6_lesson5拖拽移动组件.mp4 [800.4 MB]
1-12_lesson11实现模板添加与画布缩放.mp4 [225.4 MB]
1-2_lesson2项目搭建.mp4 [330.4 MB]
1-18_lesson17支持文本组件的多行编辑.mp4 [487.5 MB]
1-9_lesson8-编辑画布区域【更多精选‖公众号：CunWorknotes】 .mp4 [420.0 MB]
1-16_lesson15组件的复制与删除【不易整理‖请关注：CunWorkNoteS】.mp4 [432.9 MB]
📁 02 前端-生成器
前端-生成器002.2. SSR渲染【资源精选‖更多关注：CunworkNotes】.mp4 [70.7 MB]
前端-生成器003.3. SSG渲染.mp4 [42.1 MB]
前端-生成器004.4. CSR与SSR与SSG渲染对比.mp4 [12.3 MB]
前端-生成器001.1. 生成器项目基础-CSR渲染.mp4 [55.9 MB]
📁 03 部署与持续集成
部署与持续集成003.2. 使用Pm2实现进程守护.mp4 [48.3 MB]
部署与持续集成013.12. 使用Pm2 Monitor 实现异常监控.mp4 [18.1 MB]
部署与持续集成002.1. 使用Docker实现容器化封装.mp4 [39.4 MB]
部署与持续集成006.5. Linux安装Docker【资源精选‖更多关注：CunworkNotes】.mp4 [25.1 MB]
部署与持续集成008.7. 申请域名服务配置DNS.mp4 [20.7 MB]
部署与持续集成005.4. 学会基础的Linux操作.mp4 [51.2 MB]
部署与持续集成004.3. 使用华为云平台ECS+Linux搭建应用服务【优质资源‖关注：cunWorkNotes 解锁】.mp4 [44.2 MB]
部署与持续集成001.0. Docker基础【不易整理‖请关注：CunWorkNoteS】.mp4 [147.6 MB]
部署与持续集成010.9. Nginx基础配置 - 静态服务、Gzip、反向代理【公重号：CunWorkNotes】.mp4 [45.2 MB]
部署与持续集成012.11. 使用GithubAction实现持续集成【公重号：CunWorkNotes】.mp4 [85.8 MB]
部署与持续集成011.10. 开发、测试、生产多分支与工作流设计【优质资源‖关注：cunWorkNotes 解锁】.mp4 [28.8 MB]
部署与持续集成009.8. 申请HTTPS证书【优质资源‖关注：cunWorkNotes 解锁】.mp4 [48.2 MB]
部署与持续集成007.6. Linux安装Node环境 - Node、Pm2.mp4 [51.5 MB]
📁 04 服务端-NestJS
1-8_8基础篇：异常过滤器-异常处理.mp4 [416.0 MB]
1-5_5基础篇：利用Pipe通道实现数据校验【公重号：CunWorkNotes】.mp4 [618.6 MB]
1-18_18 实战篇：用户登录、鉴权【整理不易‖记得关注：CunWorKNotes】.mp4 [132.8 MB]
1-14_14 实战篇：实现通用数据项-逻辑删除、时间戳.mp4 [70.7 MB]
1-19_19实战篇：模版管理.mp4 [23.6 MB]
1-10_10基础篇：数据持久化-TypeORM.mp4 [1.1 GB]
1-12_12 实战篇：三层架构与目录规范【公重号：CunWorkNotes】.mp4 [62.2 MB]
1-3_3基础篇：Swagger接口文档【不易整理‖请关注：CunWorkNoteS】.mp4 [779.1 MB]
1-11_11基础篇：使用Winston实现分级日志收集.mp4 [127.7 MB]
1-1_1基础篇：NestJS简介.mp4 [1.1 GB]
1-13_13 实战篇：实现分页功能.mp4 [102.6 MB]
1-17_17 实战篇：用户注册、密码强化.mp4 [136.2 MB]
1-15_15 实战篇：拦截器实现统一应答处理【资源精选‖更多关注：CunworkNotes】.mp4 [103.6 MB]
1-6_6基础篇：控制反转IOC与DI.mp4 [783.7 MB]
1-7_7基础篇：模块化Modules.mp4 [507.2 MB]
1-2_2基础篇：RESTfulAPI风格.mp4 [777.8 MB]
1-9_9基础篇：配置中心-环境变量.mp4 [709.2 MB]
1-16_16 实战篇：过滤器实现统一异常应答【整理不易‖记得关注：CunWorKNotes】.mp4 [66.8 MB]
1-4_4基础篇：Controller与HTTP接口实现【整理不易‖记得关注：CunWorKNotes】.mp4 [887.2 MB]
1-20_20实战篇：使用无头浏览器实现缩略图生成【整理不易‖记得关注：CunWorKNotes】.mp4 [98.7 MB]
📁 01 前端-编辑器端
前端-编辑器端017.17. 编辑文本组件的文本值.mp4 [47.9 MB]
前端-编辑器端001.1. 编辑器项目搭建.mp4 [24.9 MB]
前端-编辑器端018.18.1 撤销与回退.mp4 [98.4 MB]
前端-编辑器端022.21. 组件的层级修改.mp4 [60.0 MB]
前端-编辑器端031.30. 显示缩略图，页面生成可下载图片【资源精选‖更多关注：CunworkNotes】.mp4 [47.3 MB]
前端-编辑器端016.16. 修改画布与选中组件的属性.mp4 [100.3 MB]
前端-编辑器端021.20. 复制选中的单个或者多个组件.mp4 [28.7 MB]
前端-编辑器端003.3. 查询列表页【持续更新‖免费提供：CunworknoteS】.mp4 [29.7 MB]
前端-编辑器端024.23. 显示附近组件.mp4 [36.5 MB]
前端-编辑器端034.33. 离开页面的数据清理与其它细节代码修改【公重号：CunWorkNotes】.mp4 [62.7 MB]
前端-编辑器端036.34.2 组合组件-实现组合与取消组合.mp4 [97.1 MB]
前端-编辑器端042.38. 删除form组件【优质资源‖关注：cunWorkNotes 解锁】.mp4 [28.8 MB]
前端-编辑器端040.36. 组合组件的复制.mp4 [16.5 MB]
前端-编辑器端039.35. 组合组件的层级【优质资源‖关注：cunWorkNotes 解锁】.mp4 [46.4 MB]
前端-编辑器端041.37. form组件.mp4 [150.2 MB]
前端-编辑器端037.34.3 组合组件-删除、拉伸、拖拽与选中.mp4 [82.4 MB]
前端-编辑器端043.39. 发布【不易整理‖请关注：CunWorkNoteS】.mp4 [34.4 MB]
前端-编辑器端038.34.4 组合组件-EditBox.mp4 [37.4 MB]
前端-编辑器端008.8. 添加图片、图形组件【整理不易‖记得关注：CunWorKNotes】.mp4 [29.5 MB]
前端-编辑器端006.6. 拖拽添加组件.mp4 [68.0 MB]
前端-编辑器端002.2. 嵌套路由与权限路由【更多精选‖公众号：CunWorknotes】 .mp4 [48.2 MB]
前端-编辑器端007.7. 添加组件的相关渲染优化【公重号：CunWorkNotes】.mp4 [24.6 MB]
前端-编辑器端014.14. 画布的缩放.mp4 [54.0 MB]
前端-编辑器端010.10. 保存与查询画布信息【更多精选‖公众号：CunWorknotes】 .mp4 [64.9 MB]
前端-编辑器端004.4. 搭建编辑页布局.mp4 [22.3 MB]
前端-编辑器端015.15. 伸缩改变组件大小【不易整理‖请关注：CunWorkNoteS】.mp4 [61.5 MB]
前端-编辑器端005.5. 画布数据管理【公重号：CunWorkNotes】.mp4 [82.9 MB]
前端-编辑器端029.28. 旋转单个组件.mp4 [53.0 MB]
前端-编辑器端027.26. 吸附线-单个组件对齐可视区域内的其它组件【更多精选‖公众号：CunWorknotes】 .mp4 [84.1 MB]
前端-编辑器端011.11. 清空画布【资源精选‖更多关注：CunworkNotes】.mp4 [15.8 MB]
前端-编辑器端026.25. 吸附线-单个组件对齐画布.mp4 [93.2 MB]
前端-编辑器端009.9. axios拦截器，添加全局loading.mp4 [157.2 MB]
前端-编辑器端035.34.1 组合组件-原理.mp4 [61.6 MB]
前端-编辑器端020.19. 右键菜单，并实现删除选中的组件【优质资源‖关注：cunWorkNotes 解锁】.mp4 [34.4 MB]
前端-编辑器端019.18.2 撤销与回退.mp4 [14.4 MB]
前端-编辑器端023.22. 添加保存与上下左右移动组件位置的快捷键.mp4 [49.0 MB]
前端-编辑器端032.31. 给组件加动画属性.mp4 [72.7 MB]
前端-编辑器端030.29. 页面复制、生成模板【持续更新‖免费提供：CunworknoteS】.mp4 [51.2 MB]
前端-编辑器端028.27. 参考线【整理不易‖记得关注：CunWorKNotes】.mp4 [70.2 MB]
前端-编辑器端012.12. 选中单个、多个组件.mp4 [110.9 MB]
前端-编辑器端025.24. 修改边框线-过渡章节【整理不易‖记得关注：CunWorKNotes】.mp4 [17.4 MB]
前端-编辑器端033.32. 编辑页面，离开之前，做路由判断【整理不易‖记得关注：CunWorKNotes】.mp4 [30.8 MB]
前端-编辑器端013.13. 拖拽选中的组件.mp4 [35.0 MB]

适合人群

编程初学者
全栈开发爱好者
低代码开发者

🎯 学习收获

掌握低代码开发流程
构建全栈项目
提升开发效率

🎉 祝您学习愉快！