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视频教程资源网 (https://zhilexue.tech/)