React 配置化+Serverless 开发个人博客

前端开发

课程简介

已有 28 人浏览发布 2025-12-20 更新 2026-10-02

本课程专注于利用 React 技术栈结合 Serverless 架构，构建一套具备高度灵活性的配置化个人博客系统。对于希望突破静态页面局限、深入理解前端工程化架构的开发者而言，这套资料提供了一套完整的“配置驱动”开发范式。它并非简单的组件堆砌，而是通过动态配置文件来控制页面结构与组件渲染，从而显著降低后期内容更新和维护的成本。资料包内涵盖了从底层环境搭建、Webpack 多入口配置，到静态资源云端托管及后台管理系统的全链路实战代码，非常适合拿来作为工程落地的参考蓝本，通过对照源码逐步拆解其设计逻辑，而非仅仅观看视频演示。

前置门槛与核心技术栈

学习本课程前，建议读者已掌握 React 基础语法、Hooks 常用方法以及 JavaScript ES6+ 的基本特性，并对 HTTP 请求有清晰认知。项目主要依托 React 生态中成熟的工具链，包括使用 Webpack 进行模块化打包与多页面入口配置，利用 Ant Design 快速搭建标准化的后台管理界面，以及通过 OSS 对象存储服务来高效托管图片等静态资源。在技术细节上，课程深入讲解了如何通过 iconfont 优化图标展示体验，以及如何清理自动化测试残留代码以保证生产环境的纯净度。这些内容构成了现代前端工程化的典型场景，对于正在从原型开发向正式项目迁移的工程师具有极高的参考价值，有助于理解如何在实际项目中平衡开发效率与代码质量。

建议学习顺序与实操路径

建议严格遵循资料包的章节逻辑进行循序渐进的学习。首先从前端开发环境的准备与工程目录初始化入手，重点剖析项目样式初始化的规范，理解全局样式与组件级样式的隔离策略。随后进入核心展示层，详细研读 Banner 组件与首页课程列表组件的代码实现，这是理解前台视觉呈现的关键。接着，将重心转向后台管理系统的构建，学习如何使用 Ant Design 搭建布局，并深入探究动态区块展示的配置功能开发，这是实现“配置化”的核心环节。在整个过程中，务必动手修改配置项，观察页面变化，以验证自己对数据流向的理解。资料包中的代码结构清晰，建议将其克隆至本地，通过断点调试和日志打印来追踪数据在前后端的流转路径，从而真正掌握配置驱动开发的精髓。

学完产出与资料配合方法

完成本课程的学习后，你将能够独立设计并部署一套具备后台管理能力的个人博客系统，熟练掌握 Webpack 多页面打包策略及静态资源的云端部署方案。更重要的是，你具备了解决复杂前端工程问题的能力，如目录结构优化、模块化拆分以及性能优化等。为了最大化学习效果，建议采用“阅读源码-复现功能-二次开发”的方法。不要仅停留在运行代码层面，应尝试自行增加新的页面模块或调整现有的配置规则，验证系统的扩展性。将资料包中的代码作为基线，结合自身的业务需求进行魔改，例如集成新的第三方服务或优化现有的交互体验，这样才能将理论知识转化为真正的工程能力，形成可复用的技术资产，为后续参与更复杂的中大型项目打下坚实基础。

├─第1章课程概览
│ 1-1关于课程你需要了解的都在这里.mp4
│
├─第2章配置化博客系统前台页面开发
│ 2-1前端开发环境准备.mp4
│ 2-2前端工程目录初始化.mp4
│ 2-3项目样式初始化.mp4
│ 2-4Banner组件的代码编写.mp4
│ 2-5首页课程列表组件代码开发.mp4
│ 2-6使用OSS存储静态资源.mp4
│ 2-7Webpack多页面入口的配置.mp4
│ 2-8清除自动化测试相关的干扰代码.mp4
│ 2-9目录结构优化及首页Footer组件代码编写.mp4
│
├─第3章配置化博客系统后台页面开发
│ 3-1使用antd进行后台管理系统布局搭建.mp4
│ 3-2iconfont的使用及细节代码调整（上）.mp4
│ 3-3iconfont的使用及细节代码调整（下）.mp4
│ 3-4动态区块展示配置功能开发.mp4
│ 3-5使用LocalStorage实现配置内容的持久化存储.mp4
│ 3-6使用useRef调取子组件数据实现配置存储.mp4
│ 3-7增加首页配置，组件结构变更.mp4
│ 3-8可扩展Schema协议的设计（上）.mp4
│ 3-9可扩展Schema协议的设计（下）.mp4
│ 3-10代码清理.mp4
│
├─第4章配置化协议的编码实现
│ 4-1最外层Schema的存取逻辑.mp4
│ 4-2围绕Schema结构合理设计组件层次.mp4
│ 4-3二层Schema的存储逻辑开发.mp4
│ 4-4多层次Schema的标准逻辑设计.mp4
│ 4-5Schema重置的逻辑实现.mp4
│ 4-6设计优化解决系统BUG.mp4
│ 4-7拖拽排序功能的实现以及数据设计思考.mp4
│
├─第5章使用Redux升级协议存取方案
│ 5-1在工程中引入Rudex,React-Redux,Immer.mp4
│ 5-2根组件Redux升级及工程目录优化（上）.mp4
│ 5-3根组件Redux升级及工程目录优化（下）.mp4
│ 5-4子组件Redux架构改良（上）.mp4
│ 5-5子组件Redux架构改良（下）.mp4
│ 5-6使用ReactSortableHOC实现列表排序.mp4
│ 5-7Schema展示调试，实现后台配置前台灵活展示.mp4
│
├─第6章前后台页面协议调试串联
│ 6-1 Banner 组件协议扩展的实现（下）.mp4
│ 6-2 基于协议的 Banner 代码调试测试.mp4
│ 6-4 Banner 配置化开发收尾.mp4
│ 6-5 列表组件的配置展示实现（上）.mp4
│ 6-6 列表组件的配置展示实现（中）.mp4
│ 6-7 列表组件的配置展示实现（下）.mp4
│ 6-8 Footer 配置化实现（上）.mp4
│ 6-9 Footer 配置化实现（下）.mp4
│ 6-10 React-Router 的使用及项目总结（上）.mp4
│ 6-11 Banner 组件协议扩展的实现（上）.mp4
│ 6-12 React-Router 的使用及项目总结（中）.mp4
│ 6-13 React-Router 的使用及项目总结（下）.mp4
│
├─第7章基于 Midway FaaS 的 Serverless 服务端代码开发
│ 7-1 服务端课程脉络.mp4
│ 7-2 Midway Faas?框架代码介绍.mp4
│ 7-3 使用 TypeORM 连接管理数据库.mp4
│ 7-5 接口逻辑的实现.mp4
│ 7-6 参数校验、异常处理、标准化接口.mp4
│ 7-7 Serverless FaaS 线上部署及域名绑定.mp4
│
├─第8章前后端系统的接口联调及部署
│ 8-1 前端 Proxy 配置高效进行接口联调.mp4
│ 8-2 前后端代码完整上线.mp4
│
├─第9章使用 BaaS 能力丰富 Serverless 项目功能
│ 9-1 BaaS 简介 & 使用 Authing 实现前端登录功能.mp4
│ 9-3 Server 端根据用户进行权限管控.mp4
│ 9-4 自定义Hook的拆分和鉴权请求的封装.mp4
│ 9-5 登录退出代码完善及项目上线.mp4
│
└─资料代码.zip