这门课解决什么场景

低代码平台的核心竞争力往往不在简单的表单配置，而在于如何让业务人员能够自主搭建复杂页面。这门课程聚焦于全栈低代码系统中技术含量最高、也最具工程挑战的「可视化编辑器」开发环节。它系统性解决了从页面构建器从零到一落地的实际问题，涵盖了前端画布的复杂交互逻辑、后端的画布数据持久化存储、以及基于角色的权限路由控制等关键痛点。对于希望深入理解低代码底层原理、或需要为企业搭建内部效率工具的开发者而言，这是一门针对性极强的实战课程，而非泛泛的理论讲解。

适合什么基础与学习门槛

本课程以 Vue 技术栈为核心，涉及嵌套路由、权限控制、Axios 拦截器、复杂状态管理等中高级前端知识点，同时包含后端接口的联调与数据管理。因此，学员需具备扎实的 Vue 基础，熟悉组件化开发思想，并了解基本的前后端分离架构。如果你是刚入门的初学者，建议先补足 Vue 基础和前端工程化知识，否则直接跟进课程可能会在画布逻辑和状态管理部分感到吃力。课程适合已掌握基础、希望突破「只会写业务页面」瓶颈，向低代码工具开发或中台基建方向进阶的开发者。

建议先看哪几块

学习路径建议遵循「骨架—交互—核心」的顺序。起步阶段必须优先掌握「项目搭建」与「嵌套路由与权限路由」，这是整个编辑器应用能够运行和安全访问的基础骨架。随后进入「查询列表页」与「搭建编辑页布局」，建立对数据流和页面结构的整体认知。核心难点集中在「画布数据管理」与「拖拽添加组件」，这里涉及复杂的状态设计与渲染优化，是理解数据驱动视图的关键。图片、图形组件部分可作为拓展阅读，了解非标准组件的特殊处理方式。

学完能独立做什么

完成本课程后，你将能够独立开发一个具备完整闭环能力的可视化页面编辑器。具体表现为：支持用户通过左侧组件库将元素拖拽至画布，实时调整组件属性，保存复杂的画布配置数据，并在不同权限路由下实现安全预览。你将从简单的业务页面组装者，成长为具备开发低代码底层工具能力的工程师，能够胜任中台工具开发、内部效率平台建设等高价值岗位，显著提升在职场中的技术壁垒。

资料怎么配合练习

配套资料包含完整的编辑器端前端代码与课程介绍图，是辅助理解的关键资源。建议下载后对照视频逐步还原项目结构，不要急于求成。重点跟踪「画布数据管理」模块的代码实现，尝试手动修改组件渲染逻辑，观察数据变化如何实时影响页面输出。严禁仅看视频不动手，必须亲手搭建并运行项目，调试通报错，才能在后续扩展自定义组件时真正理解数据驱动渲染的深层机制，将知识转化为实际技能。

课程目录

v2-6e2f870c370345d4d61e3852bdb83278_1440w.png (207.

62 KB,  ) 2024-9-21 12:

05 上传 

01 前端-编辑器端 前端-编辑器端001.1. 编辑器项目搭建.mp4
 前端-编辑器端002.2. 嵌套路由与权限路由.mp4
 前端-编辑器端003.3. 查询列表页.mp4
 前端-编辑器端004.4. 搭建编辑页布局.mp4
 前端-编辑器端005.5. 画布数据管理.mp4
 前端-编辑器端006.6. 拖拽添加组件.mp4
 前端-编辑器端007.7. 添加组件的相关渲染优化.mp4
 前端-编辑器端008.8. 添加图片、图形组件.mp4
 前端-编辑器端009.9. axios拦截器，添加全局loading.mp4
 前端-编辑器端010.10. 保存与查询画布信息.mp4
 前端-编辑器端011.11. 清空画布.mp4
 前端-编辑器端012.12. 选中单个、多个组件.mp4
 前端-编辑器端013.13. 拖拽选中的组件@.mp4
 前端-编辑器端014.14. 画布的缩放.mp4
 前端-编辑器端015.15. 伸缩改变组件大小.mp4
 前端-编辑器端016.16. 修改画布与选中组件的属性.mp4
 前端-编辑器端017.17. 编辑文本组件的文本值.mp4
 前端-编辑器端018.18.1 撤销与回退.mp4
 前端-编辑器端019.18.2 撤销与回退.mp4
 前端-编辑器端020.19. 右键菜单，并实现删除选中的组件.mp4
 前端-编辑器端021.20. 复制选中的单个或者多个组件.mp4
 前端-编辑器端022.21. 组件的层级修改.mp4
 前端-编辑器端023.22. 添加保存与上下左右移动组件位置的快捷键.mp4
 前端-编辑器端024.23. 显示附近组件.mp4
 前端-编辑器端025.24. 修改边框线-过渡章节.mp4
 前端-编辑器端026.25. 吸附线-单个组件对齐画布.mp4
 前端-编辑器端027.26. 吸附线-单个组件对齐可视区域内的其它组件.mp4
 前端-编辑器端028.27. 参考线.mp4
 前端-编辑器端029.28. 旋转单个组件.mp4
 前端-编辑器端030.29. 页面复制、生成模板.mp4
 前端-编辑器端031.30. 显示缩略图，页面生成可下载图片.mp4
 前端-编辑器端032.31. 给组件加动画属性.mp4
 前端-编辑器端033.32. 编辑页面，离开之前，做路由判断.mp4
 前端-编辑器端034.33. 离开页面的数据清理与其它细节代码修改.mp4
 前端-编辑器端035.34.1 组合组件-原理.mp4
 前端-编辑器端036.34.2 组合组件-实现组合与取消组合.mp4
 前端-编辑器端037.34.3 组合组件-删除、拉伸、拖拽与选中.mp4.mp4
 前端-编辑器端038.34.4 组合组件-editbox.mp4
 前端-编辑器端039.35. 组合组件的层级.mp4
 前端-编辑器端040.36. 组合组件的复制.mp4
 前端-编辑器端041.37. form组件.mp4
 前端-编辑器端042.38. 删除form组件.mp4
 前端-编辑器端043.39. 发布.mp4
 

02 前端-生成器 前端-生成器001.1. 生成器项目基础-csr渲染.mp4
 前端-生成器002.2. ssr渲染.mp4
 前端-生成器003.3. ssg渲染.mp4
 前端-生成器004.4. csr与ssr与ssg渲染对比.mp4
 

03 部署与持续集成 部署与持续集成001.0. docker基础.mp4
 部署与持续集成002.1. 使用docker实现容器化封装.mp4
 部署与持续集成003.2. 使用pm2实现进程守护.mp4
 部署与持续集成004.3. 使用华为云平台ecs+linux搭建应用服务.mp4
 部署与持续集成005.4. 学会基础的linux操作.mp4
 部署与持续集成006.5. linux安装docker.mp4
 部署与持续集成007.6. linux安装node环境 – node、pm2.mp4
 部署与持续集成008.7. 申请域名服务配置dns.mp4
 部署与持续集成009.8. 申请https证书.mp4
 部署与持续集成010.9. nginx基础配置 – 静态服务、gzip、反向代理.mp4
 部署与持续集成011.10. 开发、测试、生产多分支与工作流设计.mp4
 部署与持续集成012.11. 使用githubaction实现持续集成.mp4
 部署与持续集成013.12. 使用pm2 monitor 实现异常监控.mp4
 

04 服务端-nestjs 1-1_1基础篇：nestjs简介.mp4
 1-10_10基础篇：数据持久化-typeorm.mp4
 1-11_11基础篇：使用winston实现分级日志收集.mp4
 1-12_12 实战篇：三层架构与目录规范.mp4
 1-13_13 实战篇：实现分页功能.mp4
 1-14_14 实战篇：实现通用数据项-逻辑删除、时间戳.mp4
 1-15_15 实战篇：拦截器实现统一应答处理.mp4
 1-16_16 实战篇：过滤器实现统一异常应答.mp4
 1-17_

17 实战篇：用户注册、 1-18_18 实战篇：用户登录、鉴权.mp4
 1-19_19实战篇：模版管理@.mp4
 1-2_2基础篇：restfulapi风格@.mp4
 1-20_20实战篇：使用无头浏览器实现缩略图生成.mp4
 1-3_3基础篇：swagger接口文档.mp4
 1-4_4基础篇：controller与http接口实现.mp4
 1-5_5基础篇：利用pipe通道实现数据校验.mp4
 1-6_6基础篇：控制反转ioc与di@.mp4
 1-7_7基础篇：模块化modules.mp4
 1-8_8基础篇：异常过滤器-异常处理.mp4
 1-9_9基础篇：配置中心-环境变量.mp4
 

05 react低代码项目 1-1_lesson1低代码基础.mp4
 1-10_lesson9编辑组件.mp4
 1-11_lesson10组件的旋转、拖拽、上下左右键的移动.mp4
 1-12_lesson11实现模板添加与画布缩放@.mp4
 1-13_lesson12添加图形组件@.mp4
 1-14_lesson13画布的缩放与组件的拖拽、移动.mp4
 1-15_lesson14清空画布、撤销与回退.mp4
 1-16_lesson15组件的复制与删除.mp4
 1-17_lesson16组件的层级修改.mp4
 1-18_lesson17支持文本组件的多行编辑.mp4
 1-19_lesson18组件的批量操作.mp4
 1-2_lesson2项目搭建.mp4
 1-20_lesson19链接服务端，部署项目.mp4
 1-21_lesson20部署，路由守卫.mp4
 1-22_lesson21注册与登录.mp4
 1-23_lesson22添加typescript.mp4
 1-24_lesson23title、跳转、其他.mp4
 1-25_后端技术选型.mp4
 1-3_lesson3状态管理.mp4
 1-4_lesson4往页面动态添加组件.mp4
 1-5_lesson5演示效果.mp4
 1-6_lesson5拖拽移动组件.mp4
 1-7_lesson6-升级react18，并改变组件大小@.mp4
 1-8_lesson7-添加图片组件.mp4
 1-9_lesson8-编辑画布区域.mp4