这门课到底解决什么问题
很多前端开发者在做企业项目时，经常遇到页面结构高度相似、每次都要手动搭建重复代码的场景。这门课专门解决这个问题，核心方法是「配置化」：把页面元素抽象成 JSON Schema，前端根据这张表自动渲染 UI，后台只需修改配置就能变更页面结构。同时引入 Serverless 和对象存储（OSS），让你体验从开发到上线的完整低代码工作流。课程涵盖前台博客页面开发和后台管理系统开发，重点讲解如何设计可扩展的 Schema 协议，以及如何通过 LocalStorage 实现配置持久化。整个系统支持动态渲染 Banner 和课程列表，后台可拖拽配置页面区块，所有配置可保存到本地或云端，让你掌握真正可用的低代码开发能力。
适合什么基础，学习顺序怎么安排
这门课适合已经掌握 React 基础语法、能独立编写组件、了解 npm 包管理的基础开发者。门槛不高，但需要你有耐心跟着视频一步步敲代码。学习顺序上，建议先完整跟随第 2 章「配置化博客系统前台页面开发」，共 10 节。这 10 节从零搭建工程环境，配置 Webpack 多页面入口，编写 Banner 组件和首页课程列表，最后用 OSS 托管静态资源。这部分是地基，必须扎实。第 3 章「后台页面开发」是进阶内容，共 13 节，重点在 3-10 和 3-11 两节——「可扩展 Schema 协议的设计」。这两节是整个课程的灵魂，讲清楚如何设计一套规则，让前后端都能理解并生成对应的 UI 组件。此外，3-5 节的 LocalStorage 持久化和 3-8 节的 useRef 调用子组件数据，也是必看的实操重点。
学完能独立做什么，资料怎么配合练习
学完这门课后，你能独立完成一个基于 React 的低代码博客系统：前台支持动态渲染 Banner 和课程列表，后台支持拖拽配置页面区块，所有配置可保存到 LocalStorage 或云端。更重要的是，你掌握了 Schema 协议设计的方法论，这套思路可以直接迁移到任何需要「动态页面搭建」的企业场景中，比如运营活动页、内部管理系统等。课程资料是一个完整的工程代码包，包含前后台的所有源码、配置文件和依赖。建议下载后对照视频逐节运行，不要只看不练。每节课结束后，尝试修改配置参数，观察页面变化；第 3 章的 Schema 部分，尝试自己手写一个简化的配置结构，验证能否正确渲染。只有通过动手，才能真正理解配置化开发的精髓，把这些技术真正转化为自己的项目能力。
课程目录
第1章 课程概览 试看 1 节 | 12分钟 1-1 关于课程你需要了解的都在这里 (11:29).mp4 第2章 配置化博客系统前台页面开发 10 节 | 106分钟 2-1 前端开发环境准备 (07:23).mp4 2-2 前端工程目录初始化 (13:55).mp4 2-3 项目样式初始化 (07:54).mp4 2-4 Banner组件的代码编写 (16:25).mp4 2-5 首页课程列表组件代码开发 (15:12).mp4 2-6 使用 OSS 存储静态资源 (11:23).mp4 2-7 Webpack 多页面入口的配置 (19:55).mp4 2-8 【思考】Webpack 多入口的打包方式能解决什么问题？.mp4 2-9 清除自动化测试相关的干扰代码 (03:13).mp4 2- 10 目录结构优化及首页 Footer 组件代码编写 (10:04).mp4 第3章 配置化博客系统后台页面开发 13 节 | 133分钟 3-1 使用 antd 进行后台管理系统布局搭建 (17:14).mp4 3-2 iconfont 的使用及细节代码调整（上） (17:25).mp4 3-3 iconfont 的使用及细节代码调整（下） (03:36).mp4 3-4 动态区块展示配置功能开发 (21:25).mp4 3-5 使用 LocalStorage 实现配置内容的持久化存储 (09:17).mp4 3-6 【思考】LocalStorage 和 Cookie 注意事项.mp4 3-7 增加首页配置，组件结构变更 (11:34).mp4 3-8 使用 useRef 调取子组件数据实现配置存储 (20:45).mp4 3-9 【思考】使用 Ref 的方式，通过父组件调用子组件的优劣.mp4 3- 10 可扩展 Schema 协议的设计（上） (14:15).mp4 3- 11 可扩展 Schema 协议的设计（下） (11:31).mp4 3- 12 代码清理 (05:57).mp4 3- 13 【拓展】Cookie 与 LocalStorage：有何不同？.mp4 第4章 配置化协议的编码实现 8 节 | 108分钟 4-1 最外层 Schema 的存取逻辑 (09:23).mp4 4-2 围绕 Schema 结构合理设计组件层次 (14:26).mp4 4-3 二层 Schema 的存储逻辑开发 (21:06).mp4 4-4 多层次 Schema 的标准逻辑设计 (22:48).mp4 4-5 Schema 重置的逻辑实现 (13:44).mp4 4-6 【思考】一个真正复杂的协议 Schema，应该考虑那些因素？.mp4 4-7 设计优化解决系统 BUG (15:35).mp4 4-8 拖拽排序功能的实现以及数据设计思考 (10:55).mp4 第5章 使用 Redux 升级协议存取方案 9 节 | 104分钟 5-1 在工程中引入 Rudex, React-Redux, Immer (19:22).mp4 5-2 【思考】在做 React 项目时，如何尽量的让项目的性能可控.mp4 5-3 根组件 Redux 升级及工程目录优化（上） (14:26).mp4 5-4 根组件 Redux 升级及工程目录优化（下） (12:57).mp4 5-5 【拓展】使用 Immer 提升 React 项目的整体性能.mp4 5-6 子组件 Redux 架构改良（上） (18:42).mp4 5-7 子组件 Redux 架构改良（下） (08:46).mp4 5-8 使用 React Sortable HOC 实现列表排序 (16:35).mp4 5-9 Schema 展示调试，实现后台配置前台灵活展示 (12:42).mp4 第6章 前后台页面协议调试串联 14 节 | 200分钟 6-1 Banner 组件协议扩展的实现（下） (07:28).mp4 6-2 基于协议的 Banner 代码调试测试 (23:14).mp4 6-3 【思考】作为前端，你在开发中是如何进行代码项目联调的？.mp4 6-4 Banner 配置化开发收尾 (12:56).mp4 6-5 列表组件的配置展示实现（上） (26:01).mp4 6-6 列表组件的配置展示实现（中） (19:03).mp4 6-7 列表组件的配置展示实现（下） (19:55).mp4 6-8 Footer 配置化实现（上） (14:24).mp4 6-9 Footer 配置化实现（下） (16:29).mp4 6- 10 React-Router 的使用及项目总结（上） (14:29).mp4 6- 11 Banner 组件协议扩展的实现（上） (18:06).mp4 6- 12 React-Router 的使用及项目总结（中） (15:02).mp4 6- 13 React-Router 的使用及项目总结（下） (12:35).mp4 6-14 【拓展】如何才能设计出有竞争力的低代码平台？.mp4 第7章 基于 Midway FaaS 的 Serverless 服务端代码开发 9 节 | 113分钟 7-1 服务端课程脉络 (05:07).mp4 7-2 Midway Faas 框架代码介绍 (16:48).mp4 7-3 使用 TypeORM 连接管理数据库 (23:19).mp4 7-4 【思考】TypeORM 带来的核心优势是什么？.mp4 7-5 接口逻辑的实现 (17:26).mp4 7-6 参数校验、异常处理、标准化接口 (22:50).mp4 7-7 Serverless FaaS 线上部署及域名绑定 (26:43).mp4 7-8 【拓展】Serverless 的优势和劣势全面整理.mp4 7-9 【思考】云原生的概念是什么？使用云上服务有什么优势？.mp4 第8章 前后端系统的接口联调及部署 2 节 | 49分钟 8-1 前端 Proxy 配置高效进行接口联调 (27:11).mp4 8-2 前后端代码完整上线 (20:59).mp4 第9章 使用 BaaS 能力丰富 Serverless 项目功能 6 节 | 79分钟 9-1 BaaS 简介 & 使用 Authing 实现前端登录功能 (19:36).mp4 9-2 【思考】Serverless = FaaS + BaaS.mp4 9-3 Server 端根据用户进行权限管控 (11:15).mp4 9-4 自定义Hook的拆分和鉴权请求的封装 (25:30).mp4 9-5 登录退出代码完善及项目上线 (22:12).mp4 9-6 【思考】关于鉴权，你有多少理解呢？.mp4
