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

先说清楚：这门课不是给零基础的人看的

如果你还没写过 React 组件、不清楚 JSX 里怎么传 props，也没碰过后端接口是怎么返回数据的，那这门课会让你在第一周就卡住。它更适合这样一类人：前端能写页面，但项目一到「要自己搭后端」就发怵；或者后端能写接口，但不想每次联调都求前端帮忙改字段。旅游电商这个选题很实在——它天然包含商品列表、详情页、下单、订单状态这几类典型场景，任何一条业务链走下来，前后端都躲不开。

换句话说，缺的不是「怎么用 React」，缺的是「一个完整需求从数据库到页面要经过哪些手」。

这门课真正补的是三处能力缺口

缺口一：接口是你自己写的，不是别人喂的

前端学了很久的人，最熟悉的动作是「找后端要接口文档」。这门课把视角翻过来：Egg.js 里怎么定义路由、怎么写控制器、参数校验放哪一层、返回结构怎么统一。你会亲手体会到，为什么有的接口改一个字段就牵动三处调用——因为你自己就是那个改字段的人。

缺口二：数据是要落库的，不是内存里的假数组

旅游电商涉及产品、库存、订单，这些数据之间有明确的关联关系。用 MySQL 建表、设计字段类型、写查询，比在代码里 mock 一堆 JSON 要麻烦，但只有走一遍，你才会理解分页、筛选、状态流转为什么会成为后端的基本功。

缺口三：部署不是「npm run dev 就完事」

课程线索里出现了容器化的内容。对前端来说，把本地能跑的代码变成一个别人访问得到的服务，中间隔着的正是环境、依赖和配置。这块不用学得多深，但至少要能自己把一套前后端服务跑起来。

配套练习怎么用才不白学

• 不要只看视频敲一遍就过。每完成一个模块，把当天的接口用自己的话写一句「它接收什么、返回什么、失败时怎样」。
• 旅游电商的功能点可以拆开替换。比如把「旅游线路」换成「课程报名」，表结构基本不变，但你会被迫重新想字段命名和状态机。
• 遇到报错先别翻笔记，先去控制台看请求的真实返回。全栈开发里八成的 bug 出在「你以为它返回了 A，其实返回了 B」。
• 最后一章的综合实战，建议合上视频自己从零搭一遍。卡住的地方才是你真正的薄弱点，笔记在那一刻才有用。

学完之后，你应该能回答这几个问题

• 一个 React 页面从发请求到渲染列表，中间经过了哪些层？每一层出问题时的表现有什么不同？
• 为什么订单状态不适合只存一个字符串字段？如果业务要求加一个「已退款」状态，你的表要怎么改？
• Egg.js 里把校验逻辑放在控制器和放在 service，各自会带来什么麻烦？
• 如果前后端部署在同一台机器上，跨域问题还需要处理吗？为什么？
• 假设接口突然变慢，你会先看数据库、看服务日志，还是先看网络请求？依据是什么？

这些问题答不上来，说明你只是跟着敲了一遍；能答上来，才说明这套轮子你真的装到自己车上了。查漏补缺的意思不是把课看完，而是看完之后知道下一次该补哪里。

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