课程介绍

本课程将带你在解锁 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问题处理

· 服务端限流问题处理

· 接口缓存问题处理