为什么选这套“拖拽式后台”实战？
很多学习者卡在这样一个瓶颈：背了 Vue 语法，却不知道怎么把组件组合成一个可运营的后台系统。这门课的核心不是讲 API 文档，而是带你做一个基于低代码思想的可视化页面搭建器。它解决的实际问题是：如何从零构建一个支持嵌套路由、权限控制、画布数据管理、拖拽交互、全局拦截的复杂前端工程。
适合人群：已经掌握 Vue 基础（组件、指令、路由），但缺乏完整中后台项目开发经验的同学；或者想转型做 B 端产品、想要提升架构思维的前端学习者。如果你只会简单的增删改查，这套课能帮你理解“页面是如何被动态生成和管理的”，填补从单体页面到系统架构之间的能力缺口。
学习路径建议：先啃编辑器，再补数据层
课程前端部分以“编辑器端”为主线，建议按以下顺序突破，不要跳步：
- 第 1-3 节：项目搭建 + 嵌套路由与权限路由。这是整个系统的骨架，务必搞懂路由守卫如何控制菜单可见性，这是中后台项目的标配。
- 第 4-5 节：编辑页布局 + 画布数据管理。理解“画布”这个概念——它本质上是一棵树形 JSON 数据，拖拽添加组件就是操作这棵树，务必动手画一下数据流转图。
- 第 6-9 节：拖拽逻辑 + 组件渲染优化 + 图片/图形组件 + Axios 拦截器。这里是难点，尤其是拖拽时如何保持画布状态同步，以及全局 Loading 的优雅实现，建议多调试几次。
- 第 10 节起：保存与查询画布信息，进入前后端联调阶段，重点观察数据是如何从前端传递到后端并持久化的。
学完你能独立做什么？资料怎么用？
完成本阶段后，你将能够独立设计并实现一个可视化页面编辑器，支持拖拽添加组件、实时预览、数据保存。更重要的是，你将理解低代码平台的底层原理：组件树驱动视图渲染，而非手写 HTML。此外，你还将掌握中后台常见工程化方案：权限路由、全局请求拦截、加载状态管理。
资料配合建议：视频讲解核心逻辑，请动手在本地新建项目复现每一节代码。不要只看不练，尤其是“拖拽添加组件”和“画布数据管理”这两节，必须自己调试才能理解状态变化。遇到报错先尝试定位是路由配置错误还是数据绑定问题，再对照视频排查。如果课程提供源码参考，建议在独立写完后再对比，找出差距，而不是直接复制粘贴。
注意：本课程聚焦前端编辑器部分，若你后续想补充后端能力，可另行寻找 Node.js 或 Java 等后端课程衔接。当前阶段请专注理解前端架构设计，把基础打牢。
课程介绍
v2-6e2f870c370345d4d61e3852bdb83278_1440w.png 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
课程目录
v2-6e2f870c370345d4d61e3852bdb83278_1440w.png 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
