用 React.js+Egg.js 造轮子 全栈开发旅游电商应用

这门课讲的是用 React.js 做前端、Egg.js 做后端，从零搭出一个旅游电商应用。它不是那种两倍速刷完就能上手干活的课，中间有几段会卡住人，尤其是第一次碰服务端渲染和数据表设计的时候。下面按学习节奏说一说先看哪几讲、哪里可以缓一缓、哪些章节赶时间可以先跳。

先弄清楚这门课在造什么

旅游电商不等于普通商品列表，它的麻烦集中在几处：目的地和线路是多层结构，一个产品下面有出发日期、价格档位、库存；下单涉及日期选择而不是简单的数量加减；后台还要管订单状态和退款规则。课程把这些拆成一个个"轮子"来做——自己写路由、自己封装请求、自己设计接口，而不是一上来就拉现成组件库拼页面。这一点决定了它的难度：你得接受前期慢，接受有些功能做两遍才顺。

建议的进入顺序

如果 React 和 Node 都只是"看过教程"的水平，别急着跳实战。前几讲的环境搭建和项目分层看起来枯燥，但它决定了后面接口能不能对上。我的建议是：

• 先把 Egg.js 那部分的服务分层和路由约定看懂，哪怕只是照着敲一遍，因为后面所有接口都按这套写法走。
• React 侧先跟着走一个完整的数据流：页面请求 → 状态管理 → 渲染列表，把这条线走通，再回头看组件拆分。
• 数据库设计那几讲不要倍速。表结构定错了，后面改一处要动好几处，重来比慢更费时间。

哪些章节可以快速过or先跳过

部署和容器化那一段，如果你现在只是想跑通本地流程，可以先扫一眼留个印象，等应用能完整下单了再回来补。同理，后台权限、日志、监控这类偏运维的内容，属于"以后会用到但现在不解决主要矛盾"，第一遍看个概念就行。反过来，涉及订单状态流转、价格计算、日期校验的部分不要跳，它们是旅游电商区别于其他练手项目的核心，也是最容易在面试里被追问的地方。

资料和练习怎么配合

配套的章节笔记适合在每完成两三个小节后翻一遍，用来对齐自己漏掉的配置项和接口字段。不要一边看视频一边抄代码，那样记不住；更好的做法是先看一小节，关掉视频自己写一遍，报错了再回去对照。项目做到一半如果卡住超过半小时，先记下来继续往后走，很多问题在后面的章节里会自然解释清楚。

说实话的部分

这门课不是零基础友好型的。如果你还没写过任何后端接口，或者对 React 的 hooks 完全陌生，直接进来会有一段比较难受的时期，这是正常的。全栈造轮子的代价就是两头都要顾，进度一定比只学一门慢。把它当成一个需要分多次啃的项目，每次推进一小块，比追求一次看完更实际。学完之后你未必能立刻独立接单，但至少能看懂一个真实电商项目的骨架是怎么搭起来的，这已经值回时间了。

image.webp 下载附件   保存到相册 2025-6-13 23:49 上传

课程推荐

《用 React.js+Egg.js 造轮子 全栈开发旅游电商应用》image.webp 下载附件   保存到相册 2025-6-13 23:49 上传【技能收获】学完可掌握：Vue / 前端工程化、Docker / 容器化、MySQL / 数据库、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（96 节）

*   1-1 课前须知，这里有你需要了解的一切  (1120).mp4

*   2-1 本章概览  (0432).mp4

*   2-2 前端开发环境搭建  (0411).mp4

*   2-4 UmiJs极速入门（上）  (1411).mp4

*   2-5 Umijs极速入门（下）  (0549).mp4

*   2-6 react组件生命周期（上）  (1511).mp4

*   2-7 react组件生命周期（下）  (0845).mp4

*   2-8 react组件之间的通信方式  (0850).mp4

*   2-9 Dva数据处理及数据mock  (1859).mp4

*   2-10 基于react context api 实现数据流管理  (1341).mp4

*   2-11 LazyLoad组件开发【基于lazy 与 suspense 实现的懒加载组件】  (1105).mp4

*   2-12 ErrorBoundary组件开发【基于React错误边界技术实现的组件】  (0609).mp4

*   2-13 Modal组件开发【基于createPortal 创建自定义**窗组件】  (1152).mp4

*   2-14 使用 ref api 来操作dom和组件  (1003).mp4

*   3-1 react hook api-新的组件开发模式  (1624).mp4

*   3-2 useContext和useReducer实现数据流管理  (1019).mp4

*   3-3 useTitleHook【根据url修改页面title的自定义hook】  (0644).mp4

*   3-4  useHttpHook【基于fetch api 封装具有监测功能的自定义hook】  (1151).mp4

*   3-5 使用think-react-store实现数据处理【基于React context 和 hook的数据流解决方案】  (1600).mp4

*   3-6 Fiber架构解析  (0654).mp4

*   4-1 Egg.js 企业级开发的利器概述  (0702).mp4

*   4-2 Egg.js 初体验  (0816).mp4

*   4-3 Node.js 中的进程  (1622).mp4

*   4-4 Egg.js 中多进程模式-  (0644).mp4

*   4-5 超越ExpressKoa2，Egg.js中的渐进式开发模式  (0852).mp4

*   5-1 Egg.js 中 Controller 的使用和单元测试  (1140).mp4

*   5-2 Egg.js 路由中 get 请求的处理方式  (0553).mp4

*   5-3  Egg.js 路由中 postputdelete等请求的处理及参数校验  (1052).mp4

*   5-4 Egg.js 中 Service  服务和单元测试  (0705).mp4

*   5-5 Egg.js 中使用 Ejs 模版引擎  (1402).mp4

*   5-6 Ejs 模版引擎中静态资源的使用和配置  (0734).mp4

*   5-7 Egg.js 中 Cookie 的配置和使用以及如何设置中文cookie  (1632).mp4

*   5-8 Egg.js 中 Session 的配置和使用  (1141).mp4

*   5-9 Egg.js 中使用 HttpClient 请求其他接口  (0743).mp4

*   6-1 中间件，绕不开的洋葱圈模型【实现日志中间件httpLog】  (1137).mp4

*   6-2 丰富的扩展方式，项目开发得心应手【提取公共逻辑，提升开发效率】（上）  (1159).mp4

*   6-3 丰富的扩展方式，项目开发得心应手【提取公共逻辑，提升开发效率】（下）  (1218).mp4

*   6-4 插件机制， Egg.js 灵活应用【实现用户登录验证插件egg-auth】  (0843).mp4

*   6-5 Egg.js 中的定时任务  (0525).mp4

*   7-1 安装 Mysql 数据库  (0311).mp4

*   7-2 Mysql 入门，基础增删改查操作  (0843).mp4

*   7-3 使用egg-mysql插件操作数据库  (1430).mp4

*   7-4 Egg.js 中使用 Sequelize 操作 mysql 数据库  (1404).mp4

*   8-1 本章概览  (0452).mp4

*   8-2 实现网站的底部导航功能  (1808).mp4

*   8-3 首页开发  (2309).mp4

*   8-4 为首页添加数据mock（使用useHttpHook请求数据）  (0655).mp4

*   8-5 开发搜索页面  (1519).mp4

*   8-6 初识IntersectionObserver，实现useObserverHook  (1509).mp4

*   8-7 使用useObserverHook实现滚动加载（上）  (1357).mp4

*   8-8 使用useObserverHook实现滚动加载（下）  (1013).mp4

*   8-9 使用useImgHook实现图片懒加载  (1056).mp4

*   8-10 优化-提取公共组件，使用枚举，引入project-libs  (1543).mp4

*   8-11 民宿详情页面界面开发  (2403).mp4

*   8-12 为民宿详情页面添加数据流管理（上）  (1818).mp4

*   8-13 为民宿详情页面添加数据流管理（下）  (2344).mp4

*   8-14 开发订单页面  (1213).mp4

*   8-15 为订单页面添加滚动加载效果（使用useObserverHook，但不监听数据）  (1545).mp4

*   8-16 开发我的页面（使用rc-form处理表单数据）  (1849).mp4

*   8-17 为我的页面添加数据管理  (1300).mp4

*   8-18 开发用户登录和注册页面  (1609).mp4

*   8-19 通过 umi 运行时配置，对页面进行登陆验证  (1221).mp4

*   8-20 优化-使用 React.memo 减少渲染次数  (0610).mp4

*   8-21 优化-订单页面添加骨架屏  (0721).mp4

*   9-1 本章概览  (0253).mp4

*   9-2 创用户表，建基于 Sequelize 编写用户模型  (0746).mp4

*   9-3 开发用户注册接口  (1004).mp4

*   9-4 扩展Egg.js的帮助函数  (0431).mp4

*   9-5 开发用户登陆接口  (0555).mp4

*   9-6 什么是 JWT 技术？  (0244).mp4

*   9-7 使用 JWT **注册和登陆接口，并联调登录注册接口  (1116).mp4

*   9-8 开发用户详情接口和用户退出登录接口  (1150).mp4

*   9-9 优化用户登录验证插件  (0517).mp4

*   9-10 redis 的简单使用,将用户基础信息存储在 redis 中  (1038).mp4

*   9-11 将公共逻辑写在BaseController和BaseService里面，并开发新的中间件  (1531).mp4

*   9-12 编写用户编辑接口，并与前端进行联调  (0912).mp4

*   10-1 创建民宿、评论表以及编写 Sequelize 模型  (1745).mp4

*   10-2 开发egg-notFound 插件，处理接口不存在问题  (0954).mp4

*   10-3 获取城市列表数据，基于Sequelize多表联查编写热门民宿接口  (1421).mp4

*   10-4 编写搜索民宿接口，与前端联调  (0802).mp4

*   10-5 编写民宿详情接口，与前端联调  (0652).mp4

*   10-6 编写添加评论和评论列表接口，与前端联调  (1156).mp4

*   10-7 创建订单表，基于 Sequelize 编写订单模型  (0559).mp4

*   10-8 编写预定和取消预定民宿接口，与前端联调  (2025).mp4

*   10-9 编写订单列表接口，与前端联调  (0902).mp4

*   10-10 Egg.js 模拟支付过程，与前端联调  (0640).mp4

*   10-11 优化用户信息获取方式，对egg框架进行扩展  (0424).mp4

*   11-1 XSS 常见**方式与解决思路  (0900).mp4

*   11-2 CSRF 常见**方式与解决思路(开发egg-allowHosts插件)  (0851).mp4

*   11-3 如何对接口限流，避免无限制请求(开发egg-interfaceLimit插件)  (0540).mp4

*   11-4 接口缓存问题处理(开发egg-interfaceCache插件)  (0600).mp4

*   12-1 Docker简介  (0423).mp4

*   12-2 Docker基础入门  (1159).mp4

*   12-3 阿里云后台介绍  (0442).mp4

*   12-4 项目部署  (1928).mp4

*   12-7 课程总结  (0802).mp4