React 配置化+Serverless 开发个人博客
第1章 课程概览 1 节 | 12分钟
本章细致介绍了整门课程的设计思路及知识体系串联脉络,从 React 语法,前端复杂项目开发、面向 Schema 的代码设计、到服务端代码开发、三方鉴权系统集成、云原生及 Serverless 代码部署,希望帮助大家得到质变得提升!
1-1 关于课程你需要了解的都在这里 (11:29)
第2章 配置化博客系统前台页面开发 9 节 | 106分钟
本章将带大家为后续项目开发打好环境基础。包含编辑器、Create React APP 脚手架等。不仅会借助 React Hook 语法,编写博客系统的前台展示页面组件,还会重点介绍工程目录设计、阿里云 OSS 文件存储、Webpack 多入口打包配置等相关内容。…
2-1 前端开发环境准备 (07:23)
2-2 前端工程目录初始化 (13:55)
2-3 项目样式初始化 (07:54)
2-4 Banner组件的代码编写 (16:25)
2-5 首页课程列表组件代码开发 (15:12)
2-6 使用 OSS 存储静态资源 (11:23)
2-7 Webpack 多页面入口的配置 (19:55)
2-8 清除自动化测试相关的干扰代码 (03:13)
2-9 目录结构优化及首页 Footer 组件代码编写 (10:04)
第3章 配置化博客系统后台页面开发10 节 | 133分钟
本章带大家使用 Antd 组件库集成 IconFont 搭建系统的后台管理页面,认识配置化编程的基本设计思想以及可扩展 Schema 的基本设计方案。实现层讲解了借助 Ref 层次拆解协议的设计方法,并通过 LocalStorage 对协议进行存储,方便前后台页面进行开发调试。…
3-1 使用 antd 进行后台管理系统布局搭建 (17:14)
3-2 iconfont 的使用及细节代码调整(上) (17:25)
3-3 iconfont 的使用及细节代码调整(下) (03:36)
3-4 动态区块展示配置功能开发 (21:25)
3-5 使用 LocalStorage 实现配置内容的持久化存储 (09:17)
3-6 增加首页配置,组件结构变更 (11:34)
3-7 使用 useRef 调取子组件数据实现配置存储 (20:45)
3-8 可扩展 Schema 协议的设计(上) (14:15)
3-9 可扩展 Schema 协议的设计(下) (11:31)
3-10 代码清理 (05:57)
第4章 配置化协议的编码实现7 节 | 108分钟
本章讲解了如何通过 Ref 逐级分解 Schema,并最终拼装协议的代码实现。通过巧妙的设计,快速便捷的实现三级协议的灵活生成及存取。同时讲解了数据重置功能的实现思路。通过协议中子节点拖拽排序的功能,衍生出对基于 Ref 设计存在不足的思考,从而讲解 Redux 在项目中使用的必要性。…
4-1 最外层 Schema 的存取逻辑 (09:23)
4-2 围绕 Schema 结构合理设计组件层次 (14:26)
4-3 二层 Schema 的存储逻辑开发 (21:06)
4-4 多层次 Schema 的标准逻辑设计 (22:48)
4-5 Schema 重置的逻辑实现 (13:44)
4-6 设计优化解决系统 BUG (15:35)
4-7 拖拽排序功能的实现以及数据设计思考 (10:55)
第5章 使用 Redux 升级协议存取方案 7 节 | 104分钟
基于 Ref 的设计虽然简单易用,但应对复杂 Schema 场景,存在明显短板。在本章我们将使用 Redux、Immer 对协议存取方案进行全面升级,解决掉前几章遗留的设计问题,完成后台页面协议存储部分的开发,并开始与前台页面进行功能调试。…
5-1 在工程中引入 Rudex, React-Redux, Immer (19:22)
5-2 根组件 Redux 升级及工程目录优化(上) (14:26)
5-3 根组件 Redux 升级及工程目录优化(下) (12:57)
5-4 子组件 Redux 架构改良(上) (18:42)
5-5 子组件 Redux 架构改良(下) (08:46)
5-6 使用 React Sortable HOC 实现列表排序 (16:35)
5-7 Schema 展示调试,实现后台配置前台灵活展示 (12:42)