首页 实战 React+React Hook+Egg造轮子 全栈开发旅游电商应用
收藏

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

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

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

¥366.00
难度 高级 时长 18小时 学习人数 462 综合评分 10.00

本课程将带你在解锁 React.js 、 React Hook 以及 EggEgg.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

万事俱备 只等你来

  • 慕斯2379460

    好评

    坦白来说,这是我学过的最实在的、贴近项目的课程了;学了几个章节发现,无论是基础课还是实战都是为项目开发准备的;尤其是开发的egg中间件和插件可以直接用到项目中。还有就是之前公司使用react hook开发项目,没有好的hook工具选择,很纠结的,现在老师提供了一个好的解决方案,学习了。一句话,良心课!

  • 是阿歪

    好评

    有点React基础,用Egg写过一个项目,这个课程刚好贴中我的开发需求,React的核心知识、自定义hooks和Egg那些扩展讲得明明白白的!有利于纠正我之前的错误用法,非常实用~我已经看完了,老师慢慢更新吧,结合之前项目遇到的问题敲完代码我会回来提问的,绝不浪费我的money,你跑不了

  • 精慕门2042257

    好评

    公司的新项目就是react和node,之前也在几个框架里纠结了一下,最后定的用egg,这门课来的刚好合适,正好学以致用!老师讲的也还行,比较干货,没那么多罗里吧嗦得,比较适合我,期待后面更多实用的课程。

查看全部103条用户评价
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题