这门课到底解决什么痛点？

很多前端开发者在求职或转岗时，常陷入三个具体困境：一是手里只有简单的增删改查项目，缺乏能拿得出手的复杂全栈案例；二是只懂 React，后端逻辑全甩锅，导致无法与后端高效协作；三是能跑通功能，但代码结构混乱，不懂最佳实践。本课程直击这些痛点，不再教你堆砌碎片化的知识点，而是通过实战一个“在线教育平台”，让你亲手构建一套包含前端管理后台、课程播放、用户认证及支付流程的完整系统。核心在于打通前后端技术栈，让你真正理解数据从输入到输出的全链路流转，彻底告别“调接口”的被动局面。

技术栈选择与学习路径建议

项目采用 React 18 作为前端框架，TypeScript 规范类型，NestJS 构建后端微服务，并通过 GraphQL 替代传统 RESTful API 进行数据交互。这种组合旨在解决现代 Web 开发中常见的性能瓶颈和数据冗余问题。建议你先花 10 分钟浏览课程简介，明确自己是否具备 React Hooks 的基础知识，若完全零基础，请先自学 React 核心概念再开始。学习顺序应严格遵循课程逻辑：先掌握 TypeScript 的类型定义与泛型，再深入理解 NestJS 的模块划分与依赖注入，最后攻克 GraphQL 的 Schema 设计与 Resolver 编写。切勿跳过中间环节直接看成品演示，否则无法理解代码背后的设计思想，容易养成“复制粘贴”的坏习惯。

学完能独立做什么及资料配合策略

课程代码总量超过 2 万行，覆盖用户注册登录、课程发布、视频播放、订单支付及消息通知等核心业务。学完本课程后，你将具备独立开发中大型全栈应用的能力：能根据需求文档设计 GraphQL Schema，编写高效的业务逻辑，并同步开发前端组件进行渲染。资料包中包含完整的源码、数据库脚本及接口文档，但请务必注意，资料包仅作为参考底稿。练习时应先尝试根据接口文档手写一个核心功能模块（如“用户登录”），跑通后再对比课程代码，分析差异所在。重点关注代码中是如何处理异步请求、错误捕获以及状态管理的。通过这种“先动手后复盘”的方式，你才能真正掌握全栈开发的精髓，为后续承接实际商业项目打下坚实基础，而非仅仅获得一份只能复制的源码。

课程介绍

React18+TS+NestJS+GraphQL 全栈开发在线教育平台视频教程，。很多前端同学的通病：1.没有能拿的出手的面试项目 2.不懂后端技术，无法与后端同学高效交流 3.能完成需求，但不知道什么是最佳实践。本课程将指导大家应用目前热门的全栈技术，开发具有高质量的在线教育平台，并分享实用的职场技巧和面试策略，以帮助您在2023年实现进一步的突破并跨越瓶颈。该项目的代码总量将达到2万行以上，保证大家收获满满。

课程目录

├── 1-这里，将带你进行一次全面，高效的进阶/
│ ├── [ 31M] 1-1 通过本课程的学习你能得到什么？
│ ├── [ 35M] 1-2 如何更高效的学习本课程？
│ └── [ 22M] 1-3 学习本课程需要准备什么？
├── 2-了解用户需求，懂得如何做项目/
│ ├── [ 39M] 2-1 什么样项目才可以称为“企业级的项目”？
│ ├── [ 33M] 2-2 用户的需求与使用路径
│ ├── [ 17M] 2-3 职场技巧：大厂的标准项目流程是怎样的（上）
│ └── [ 30M] 2-4 职场技巧：大厂的标准项目流程是怎样的（下）
├── 3-需求分析、项目排期、项目总结一点通/
│ ├── [ 43M] 3-1 什么样的需求文档 PRD 才是好的
│ ├── [ 36M] 3-2 项目功能点拆解与设计稿展示
│ ├── [ 31M] 3-3 怎么给出一个合理的前端排期
│ ├── [2.9M] 3-4 面试讲项目如何讲出亮点（1）
│ ├── [ 14M] 3-5 面试讲项目如何讲出亮点（2）：码农和程序员的区别
│ ├── [9.5M] 3-6 面试讲项目如何讲出亮点（3）：你需要具备技术实力和个人能力
│ ├── [ 40M] 3-7 面试讲项目如何讲出亮点（4）：面试讲项目要充分准备、提炼亮点
│ ├── [ 10M] 3-8 面试讲项目如何讲出亮点（5）：使用五步法把项目讲出亮点
│ └── [ 52M] 3-9 面试讲项目如何讲出亮点（6）：我是如何介绍自己的项目的
├── 4-项目技术选型与 React 18 的核心技术/
│ ├── [ 20M] 4-1 根据需求分析结果做技术选型（上）
│ ├── [ 30M] 4-2 根据需求分析结果做技术选型（下）
│ ├── [ 29M] 4-3 React 18 的重要更新和使用之新特性
│ ├── [ 32M] 4-4 React 18 的重要更新和使用之新API
│ ├── [ 38M] 4-5 面试重点：React 18 的并发渲染原理（上）React 执行的三层架构
│ ├── [ 52M] 4-6 面试重点：React 18 的并发渲染原理（中）React 执行的三层架构
│ ├── [ 34M] 4-7 面试重点：React 18 的并发渲染原理（下）React 执行的三层架构
│ ├── [ 12M] 4-8 职场技巧：如何画一张技术架构图（上）
│ ├── [ 22M] 4-9 职场技巧：如何画一张技术架构图（中）
│ └── [ 21M] 4-10 职场技巧：如何画一张技术架构图（下）
├── 5-开发环境的搭建/
│ ├── [ 24M] 5-1 MAC 电脑上那些让你欲罢不能的开发工具（上）
│ ├── [ 26M] 5-2 MAC 电脑上那些让你欲罢不能的开发工具（下）
│ ├── [ 27M] 5-3 NodeJS安装，pnpm 安装，VSCode 配置，本地 MySQL 的安装
│ ├── [ 26M] 5-4 mysql workbench 使用方法，通过它新建数据库
│ ├── [ 33M] 5-5 面试重点：为什么要锁 npm 包的版本（上）
│ └── [ 29M] 5-6 面试重点：为什么要锁 npm 包的版本（下）
├── 6-后端基础数据准备/
│ ├── [ 26M] 6-1 编程思想：到底怎么才能写出好的代码？（上）
│ ├── [ 47M] 6-2 编程思想：到底怎么才能写出好的代码？（下）
│ ├── [ 36M] 6-3 NestJS 安装， 初始化一个项目，并启动
│ ├── [ 20M] 6-4 你需要知道的 NestJS 的基本概念（上）
│ ├── [ 26M] 6-5 你需要知道的 NestJS 的基本概念（下）
│ ├── [ 30M] 6-6 理清楚数据关系：数据库模型设计（上）
│ ├── [ 18M] 6-7 理清楚数据关系：数据库模型设计（下）
│ ├── [ 48M] 6-8 使用 TypeORM 定义数据表结构并完成 CRUD（上）
│ ├── [ 47M] 6-9 使用 TypeORM 定义数据表结构并完成 CRUD（中）
│ ├── [ 46M] 6-10 使用 TypeORM 定义数据表结构并完成 CRUD（下）
│ ├── [ 18M] 6-11 什么是 GraphQL ？（上）
│ ├── [ 16M] 6-12 什么是 GraphQL ？（下）
│ ├── [ 18M] 6-13 使用 GraphQL 创建 API（1）
│ ├── [ 23M] 6-14 使用 GraphQL 创建 API（2）
│ ├── [ 24M] 6-15 使用 GraphQL 创建 API（3）
│ ├── [ 20M] 6-16 使用 GraphQL 创建 API（4）
│ ├── [ 47M] 6-17 面试重点：大型网站技术架构的演进
│ ├── [ 16M] 6-18 职场技巧：如何打造自己在项目组里的影响力（上）
│ ├── [ 11M] 6-19 职场技巧：如何打造自己在项目组里的影响力（中）
│ └── [ 20M] 6-20 职场技巧：如何打造自己在项目组里的影响力（下）
├── 7-前端通用能力建设/
│ ├── [ 25M] 7-1 脚手架与使用 Vite 初始化前端项目（上）
│ ├── [ 12M] 7-2 脚手架与使用 Vite 初始化前端项目（下）
│ ├── [ 26M] 7-3 在灵活之中找规范， React Hooks 的最佳实践方法（上）
│ ├── [ 29M] 7-4 在灵活之中找规范， React Hooks 的最佳实践方法（下）
│ ├── [ 34M] 7-5 编写几个通用的自定义 hooks（上）
│ ├── [ 46M] 7-6 编写几个通用的自定义 hooks（下）
│ ├── [ 28M] 7-7 配置 ESLint 并使用 Apollo 创建 GraphQL Service（上）
│ ├── [ 26M] 7-8 配置 ESLint 并使用 Apollo 创建 GraphQL Service（中）
│ ├── [ 54M] 7-9 配置 ESLint 并使用 Apollo 创建 GraphQL Service（下）
│ ├── [ 51M] 7-10 使用 Apollo-server 快速创建 mock 数据
│ ├── [ 63M] 7-11 antd-mobile 的基本用法，配置主题、国际化功能
│ ├── [ 18M] 7-12 图片管理：将图片上传到阿里云 OSS（上）
│ ├── [ 70M] 7-13 图片管理：将图片上传到阿里云 OSS（中）
│ ├── [ 71M] 7-14 图片管理：将图片上传到阿里云 OSS（下）
│ ├── [ 16M] 7-15 面试重点：什么是 CSS Modules，如何使用？（上）
│ ├── [ 50M] 7-16 面试重点：什么是 CSS Modules，如何使用？（下）
│ ├── [ 11M] 7-17 职场技巧：如何优雅的求助别人？（上）
│ └── [ 32M] 7-18 职场技巧：如何优雅的求助别人？（下）
├── 8-全栈开发 PC 管理端和手机端登录注册模块/
│ ├── [ 34M] 8-1 编写 PC 端 手机号验证码登录页面（上）
│ ├── [ 60M] 8-2 编写 PC 端 手机号验证码登录页面（下）
│ ├── [ 78M] 8-3 编写登录接口，使用阿里云服务发送短信（上）
│ ├── [ 85M] 8-4 编写登录接口，使用阿里云服务发送短信（中）
│ ├── [ 76M] 8-5 编写登录接口，使用阿里云服务发送短信（下）
│ ├── [ 54M] 8-6 创建页面路由，制定接口规范（上）
│ ├── [ 93M] 8-7 创建页面路由，制定接口规范（下）
│ ├── [ 37M] 8-8 使用 JWT 保持登录状态（上）
│ ├── [ 58M] 8-9 使用 JWT 保持登录状态（下）
│ ├── [ 45M] 8-10 useContext 使用最佳实践，并用其存储全局用户信息（1）
│ ├── [ 47M] 8-11 useContext 使用最佳实践，并用其存储全局用户信息（2）
│ ├── [ 25M] 8-12 useContext 使用最佳实践，并用其存储全局用户信息（3）
│ ├── [ 48M] 8-13 useContext 使用最佳实践，并用其存储全局用户信息（4）
│ ├── [ 48M] 8-14 优化本章代码，让登录更丝滑（上）
│ ├── [ 38M] 8-15 优化本章代码，让登录更丝滑（下）
│ ├── [ 17M] 8-16 面试重点：我为什么不用 redux ，讨论其优劣势（上）
│ ├── [ 27M] 8-17 面试重点：我为什么不用 redux ，讨论其优劣势（下）
│ └── [ 30M] 8-18 职场技巧：在职场里应该怎么把事情做成？
├── 9-全栈开发 PC 管理端门店模块/
│ ├── [ 36M] 9-1 PC 管理端：使用 ProLayout 组件搭建菜单（上）
│ ├── [ 36M] 9-2 PC 管理端：使用 ProLayout 组件搭建菜单（下）
│ ├── [ 35M] 9-3 重构：让路由变的更优雅（上）
│ ├── [ 34M] 9-4 重构：让路由变的更优雅（下）
│ ├── [ 26M] 9-5 编写个人信息页面，自定义 PC 端图片上传组件（1）
│ ├── [ 31M] 9-6 编写个人信息页面，自定义 PC 端图片上传组件（2）
│ ├── [ 47M] 9-7 编写个人信息页面，自定义 PC 端图片上传组件（3）
│ ├── [ 46M] 9-8 编写个人信息页面，自定义 PC 端图片上传组件（4）
│ ├── [ 66M] 9-9 编写通用装饰器、实体和分页
│ ├── [ 15M] 9-10 创建门店增删改查接口服务（1）
│ ├── [ 65M] 9-11 创建门店增删改查接口服务（2）
│ ├── [ 52M] 9-12 创建门店增删改查接口服务（3）
│ ├── [ 47M] 9-13 创建门店增删改查接口服务（4）
│ ├── [ 15M] 9-14 以 ProTable 为例，讨论如何提升交付效率（上）
│ ├── [ 22M] 9-15 以 ProTable 为例，讨论如何提升交付效率（下）
│ ├── [ 54M] 9-16 编写门店列表和新增编辑页面（上）
│ ├── [ 34M] 9-17 编写门店列表和新增编辑页面（中）
│ ├── [ 88M] 9-18 编写门店列表和新增编辑页面（下）
│ ├── [ 16M] 9-19 面试重点：为什么很多候选人总是过不了二面？（上）
│ ├── [ 29M] 9-20 面试重点：为什么很多候选人总是过不了二面？（下）
│ └── [ 60M] 9-21 职场技巧：管理是程序员的必备技能
├── 10-全栈开发 PC 管理端课程模块/
│ ├── [ 44M] 10-1 编写全局门店选择器（上）
│ ├── [ 62M] 10-2 编写全局门店选择器（下）
│ ├── [ 41M] 10-3 TS 泛型的使用，使用泛型重构 Context 生成器
│ ├── [ 43M] 10-4 创建课程的增删改查接口（上）
│ ├── [ 62M] 10-5 创建课程的增删改查接口（下）
│ ├── [ 50M] 10-6 编写课程列表–三行代码实现一个课程列表搜索
│ ├── [ 57M] 10-7 编写课程列表–使用 ProTable Request 与接口联动
│ ├── [ 72M] 10-8 课程新建与编辑页面–使用 Form 创建信息录入表单
│ ├── [ 53M] 10-9 课程新建与编辑页面–调用接口创建课程
│ ├── [ 42M] 10-10 课程新建与编辑页面–useLazyQuery 的使用（上）
│ ├── [ 51M] 10-11 课程新建与编辑页面–useLazyQuery 的使用（下）
│ ├── [ 42M] 10-12 课程可约时间的配置–EditableProTable 的使用
│ ├── [ 45M] 10-13 课程可约时间的配置–配置 columns 的操作
│ ├── [ 51M] 10-14 课程可约时间的配置–编写保存可约时间的接口
│ ├── [ 49M] 10-15 课程可约时间的配置–调接口获取可约时间的数据
│ ├── [ 50M] 10-16 课程可约时间的配置–保存可约时间的数据
│ ├── [ 67M] 10-17 课程可约时间的配置–使用 hooks 来分离逻辑代码
│ ├── [ 23M] 10-18 弹窗抽屉小优化
│ ├── [ 86M] 10-19 添加门店选择全局控制
│ ├── [ 20M] 10-20 面试重点：到底什么是前端工程化
│ └── [ 32M] 10-21 职场技巧：如何让主管对你刮目相看？
├── 11-全栈开发 PC 管理端商品管理模块/
│ ├── [ 77M] 11-1 消费卡管理接口编写
│ ├── [ 71M] 11-2 管理消费卡的页面编写
│ ├── [ 75M] 11-3 管理消费卡接口联调
│ ├── [ 59M] 11-4 使用 plop 模板代码生成器生成 module 代码
│ ├── [ 69M] 11-5 完成商品的增删改查接口
│ ├── [ 40M] 11-6 完成商品的搜索列表功能
│ ├── [ 64M] 11-7 完成商品新建、编辑和删除功能（上）
│ ├── [ 60M] 11-8 完成商品新建、编辑和删除功能（下）
│ ├── [ 59M] 11-9 完成商品绑定消费卡功能（1）
│ ├── [ 45M] 11-10 完成商品绑定消费卡功能（2）
│ ├── [ 59M] 11-11 完成商品绑定消费卡功能（3）
│ ├── [ 43M] 11-12 完成商品绑定消费卡功能（4）
│ ├── [ 20M] 11-13 面试重点：彻底搞懂什么是宏任务和微任务？（上）
│ ├── [ 29M] 11-14 面试重点：彻底搞懂什么是宏任务和微任务？（下）
│ └── [ 54M] 11-15 职场技巧：前端该如何做用户体验？
├── 12-全栈开发 H5 精选课程模块/
│ ├── [ 50M] 12-1 完善手机端基本能力，route、reset.css、公共hooks。
│ ├── [ 76M] 12-2 手机端 Header 和 Bottom 菜单开发
│ ├── [ 53M] 12-3 使用 react-svg 解决 Icon 颜色定制的问题
│ ├── [ 42M] 12-4 添加商品分类选择的功能（上）
│ ├── [ 55M] 12-5 添加商品分类选择的功能（下）
│ ├── [ 63M] 12-6 新增商品上下架的操作
│ ├── [ 22M] 12-7 使用手机打开H5页面
│ ├── [ 89M] 12-8 添加商品分类和手机端商品列表的接口
│ ├── [ 80M] 12-9 商品卡片列表的编写
│ ├── [ 41M] 12-10 手写下拉刷新功能（上）
│ ├── [ 51M] 12-11 手写下拉刷新功能（下）
│ ├── [ 52M] 12-12 完善下拉刷新的功能
│ ├── [ 35M] 12-13 无限滚动原理讲解
│ ├── [ 41M] 12-14 手写无限滚动的功能（上）
│ ├── [ 56M] 12-15 手写无限滚动的功能（下）
│ ├── [ 36M] 12-16 面试重点：H5 页面如何做屏幕适配
│ └── [ 47M] 12-17 职场技巧：在工作中最值得修炼的四个能力？
├── 13-全栈开发 H5 门店模块/
│ ├── [ 88M] 13-1 准备测试门店距离的数据代码
│ ├── [ 93M] 13-2 商品列表按照距离排序(上)
│ ├── [ 80M] 13-3 商品列表按照距离排序(下)
│ ├── [110M] 13-4 编写 H5 门店详情页面（1）
│ ├── [ 65M] 13-5 编写 H5 门店详情页面（2）
│ ├── [ 45M] 13-6 编写 H5 门店详情页面（3）
│ ├── [ 40M] 13-7 编写 H5 门店详情页面（4）
│ ├── [ 37M] 13-8 编写 H5 门店详情页面（5）
│ ├── [ 75M] 13-9 编写 H5 门店详情页面（6）
│ ├── [104M] 13-10 编写 H5 的商品详情页面
│ ├── [ 52M] 13-11 编写购买信息页面
│ ├── [ 73M] 13-12 如何让不同环境使用不同配置？
│ ├── [ 69M] 13-13 面试重点：什么是 OAuth2.0
│ └── [ 93M] 13-14 职场技巧：如何与后端更好的协作？
├── 14-H5 端微信支付全流程开发/
│ ├── [ 91M] 14-1 通过微信授权获取 openid（上）
│ ├── [ 90M] 14-2 通过微信授权获取 openid （中）
│ ├── [ 83M] 14-3 通过微信授权获取 openid （下）
│ ├── [106M] 14-4 讲解微信支付的原理
│ ├── [ 92M] 14-5 编写微信支付完整代码（1）
│ ├── [ 85M] 14-6 编写微信支付完整代码（2）
│ ├── [ 58M] 14-7 编写微信支付完整代码（3）
│ ├── [ 74M] 14-8 统一处理接口报错
│ ├── [ 69M] 14-9 获取微信支付结果通知
│ ├── [129M] 14-10 创建微信支付订单信息（上）
… 其余 63 项略，目录共 263 项