IT视频教程资源网
标题:
React+React Hook+Egg 造轮子 全栈开发旅游电商应用
[打印本页]
作者:
admin
时间:
2022-5-18 00:18
标题:
React+React Hook+Egg 造轮子 全栈开发旅游电商应用
一门学技术、做项目、提思维的前端高手必修课
收获作品成果的同时,学会高端技术人才解决问题的思维方式
技 术
项 目
思 维
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问题处理
· 服务端限流问题处理
· 接口缓存问题处理
学员专享增值服务
问答专区
关于课程的问题都可在问答区随时提
问,讲师会进行集中答疑
源码开放
课程案例代码完全开放给你,你可以根据所
学知识,自行修改、优化,用于正式项目
适合人群
符合技术储备要求的
所有前端工程师
技术储备要求
了解React.js基本语法
了解Node.js基本使用更佳
欢迎光临 IT视频教程资源网 (http://buyallchip.top/)
Powered by Discuz! X3.2