全栈技术栈的价值判断
当前前端就业市场的门槛正在提高，单纯掌握 Vue 或 React 框架 API 已难以形成核心竞争力。本课程聚焦的是一套典型的企业级全栈组合：前端采用 React 18 与 TypeScript 强化类型安全与组件架构，后端选用 NestJS 结合 GraphQL 接口设计。这套技术的核心价值在于解决两个痛点：一是填补前端工程师对服务端架构的认知空白，二是通过强类型语言（TypeScript）贯穿前后端，建立统一的数据契约思维。
从技术选型来看，NestJS 提供了接近企业级 Angular 的结构化开发体验，配合 GraphQL 解决了传统 REST API 中字段冗余和数据超 fetch 的问题。对于希望突破薪资瓶颈、具备独立交付能力的前端开发者而言，这是一次从“切图仔”向“全栈工程师”转型的高性价比实践。课程内容覆盖超过两万次代码行，意味着它不是快餐式的 Demo，而是具备一定复杂度的工程实例。
学习目标与实际产出
这门课主要解决的是“有项目经验但无工程体系”的问题。学完本套课程，你将能够独立完成一个具备完整权限管理、课程交易流程及后台数据管理的在线教育平台。具体而言，你将在实战中掌握以下独立工作能力：
- 前端侧：熟练使用 React 18 的新特性构建高可维护性的 UI 层，利用 TypeScript 定义清晰的数据模型，并理解前后端分离下的状态管理策略。
- 后端侧：掌握 NestJS 的模块化思想，理解依赖注入与设计模式在后端的应用；学会使用 GraphQL Schema 定义接口，并处理复杂的业务逻辑。
- 全栈整合：打通前后端联调链路，理解 JWT 认证、数据库交互及接口权限控制的完整闭环。
这种全链路实战经验，直接对标中高级前端岗位的实际工作场景，能有效消除面试中“只会调接口”的短板。
资料使用建议与学习路径
由于项目体量较大，建议不要试图一次性看完所有视频，而应带着问题去对照资料练习。以下是推荐的学习路径：
首先是需求与架构分析部分。在进入代码编写前，务必先理清整个平台的业务流程和数据库设计，这是后续开发不跑偏的关键。其次是核心模块实现，重点关注后端 NestJS 如何组织 Controller、Service 和 Module，以及前端如何通过 GraphQL Client 高效获取数据。这部分代码密度最大，值得反复研读。
最后是关于最佳实践与面试复盘。课程后半段通常会涉及性能优化、代码规范以及针对该项目的面试问答技巧。建议在完成主体开发后，尝试脱离视频自己复现某个核心难点，再结合这部分内容进行查漏补缺。通过这种“先做后看、再看再改”的方式，才能将两万行代码转化为真正属于自己的工程经验。
课程目录
├── 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 项
