用React.js+Egg.js 造轮子_全栈开发旅游电商应用-慕课网实战

一门学技术、做项目、提思维的前端高手必修课

收获作品成果的同时，学会高端技术人才解决问题的思维方式

技术

项目

思维

React.js+Egg.js 的高级玩法

开发前端+后端轮子，可复用

前后端全栈模块化开发

覆盖开发、优化、部署全流程

造“好轮子”的思维方式

企业级框架的设计视野与实用技巧

解锁 React.js + Egg.js 的核心应用与高阶玩法
手把手带你造好用的轮子

React.js

自定义hook

自定义组件

· useTitleHook（设置页面title）

· useHttpHook（发送http请求）

· useObserverHook（监听dom元素是否
展示）

· useImgHook（图片懒加载）

第三方

UmiJs

think-react-store

project-libs

rc-form

· CreatePortal（根节点之外创建新
节点）

· ErrorBoundary（捕获错误组件）

· LazyLoad（延迟加载组件）

· Modal（弹窗组件）

· MenuBar（底部导航组件）

· ShowLoading（列表底部loading组件）

核心
应用

createPortal；ErrorBoundary（错误边界）

useState；useEffect；context api；suspense；lazy

Egg.js

自定义中间件

自定义扩展

· httpLog（日志）

· userExist（用户是否存）

自定义插件

· egg-auth（验证用户）

· egg-info（系统信息）

· egg-notFound（接口不存在）

核心
应用

路由（Router）；控制器（Controller）；

服务（Service）；框架扩展；插件；定时任务；

多进程管理；Sequelize

· Application（扩展应用）

· Helper（扩展帮助函数）

· Context（扩展上下文）

· Request（扩展请求）

· Response（扩展响应）

造轮子的过程，也是一个思维更加清晰
技术不断优化的高效学习过程

如何造一个好轮子

需求层面

技术层面

需求:

① 能够请求接口 ② 能够返回请求的状态

③ 能够按需发送请求 ④ 在函数组件内使用

需求1.1:
直接请求接口

需求1.2:
使用JWT验证用户

需求1.3:
接口返回的错误信息

自定义hook — useHttpHook

提取公共部分

header中添加token

处理登录失效问题

全栈开发旅游电商应用，覆盖项目优化及安全机制策略

带你学会高效、规范化开发企业级项目产品

开发流程及亮点

前端

界面实现

· 系统页面编写

· 实现列表滚动加载

· 实现图片懒加载

功能优化

· 优化Loading展示
(骨架屏）

· 优化自定义hook

· 优化弹窗组件

服务端

三大接口实现

· 用户/商品/订单模

· 块接口编写

功能优化

· 用户登录验证
(使用JWT技术）

· 接口拦截
(egg-auth插件）

· 提取通用函数
(框架扩展）

· 控制器与服务优化

部署

· 阿里云环境

· Docker容器化

· Nginx代理

安全

· XSS与CSRF问题处理

· 服务端限流问题处理

· 接口缓存问题处理

学员专享增值服务

问答专区

关于课程的问题都可在问答区随时提
问，讲师会进行集中答疑

源码开放

课程案例代码完全开放给你，你可以根据所
学知识，自行修改、优化，用于正式项目

环境参数

Node 12+
Yarn 1.x
React 16.8.3+
UmiJs 2.x、3.x
Egg.js 2.x
Mysql 8.x
Redis 6.0.6
IDE Visual Studio Code

向您推荐

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

￥366.00

高级难度 / 169 人在学

扫码学习

如无法下载使用图片另存为

下载海报

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

造好轮子+前后端复杂业务处理，解锁前端高手必备技能。

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