〖课程介绍〗:
课程针对有一些前端基础，但对前端框架还不够了解，不能灵活使用的同学，手把手带你用React＋React－Router从技术选型开始，直至部署上线，开发一个后台管理系统，让你在实际开发中，打开前端框架的大门，告别小白时代！
〖课程目录〗:
-
第1章 课程介绍 试看3 节 | 30分钟
-
本章整体介绍该课程的内容，让同学们了解这个课程的特点和学习方法，以及后台管理系统开发前的一些前置工作，如需求分析、技术选型和数据接口等。
-
收起列表
-
视频：1-1 课程导学 (12:20)试看
-
视频：1-2 后台管理系统的需求分析和技术选型 (09:29)
-
视频：1-3 数据接口定义 (07:44)
-
第2章 课前知识储备6 节 | 91分钟
-
本章介绍一些后面课程要用到的一些基础知识，为后面的开发打下基础，包括页面加载过程、ES6基础和本地存储相关的知识。
-
收起列表
-
视频：2-1 课前知识储备 (01:11)
-
视频：2-2 页面加载过程 (09:35)
-
视频：2-3 ES6基础（1） (25:57)
-
视频：2-4 ES6基础（2） (32:48)
-
视频：2-5 本地存储 (19:44)
-
视频：2-6 总结 (00:58)
-
第3章 前端框架的分析4 节 | 20分钟
-
本章介绍前端框架的共性和应用场景，分析前端加载原理，并对单页和多页应用，框架和原生开发，三大主流框架之间做详细的对比。
-
收起列表
-
视频：3-1 前端框架分析 (01:32)
-
视频：3-2 前端框架要解决的问题 (08:19)
-
视频：3-3 三大框架对比 (08:48)
-
视频：3-4 总结 (00:40)
-
第4章 开发环境的搭建6 节 | 98分钟
-
搭建项目依赖的开发环境，包括nodejs的安装，yarn的使用，webpack的配置，sass环境的配置以及打包工具webpack的配置方法。
-
收起列表
-
视频：4-1 开发环境的搭建 (01:50)
-
视频：4-2 git的安装和项目的建立 (18:43)
-
视频：4-3 nodejs和yarn的安装 (08:54)
-
视频：4-4 Webpack配置（1） (31:00)
-
视频：4-5 Webpack配置（2） (30:23)
-
视频：4-6 代码提交 (06:24)
-
第5章 React框架 试看8 节 | 129分钟
-
系统的介绍React的知识，基础部分通过代码的形式让大家加深理解。此外还有react周边的知识，比如路由工具React-Router，还有React中的几种数据处理方式。
-
收起列表
-
视频：5-1 React框架基础 (00:37)
-
视频：5-2 初识React (07:11)
-
视频：5-3 深入了解React（了解JSX语法） (23:49)
-
视频：5-4 深入了解React（React组件） (36:38)
-
视频：5-5 深入了解React（生命周期） (18:50)
-
视频：5-6 Router原理及React-router (32:20)试看
-
视频：5-7 React数据管理 (08:00)
-
视频：5-8 总结 (00:40)
-
第6章 通用部分的开发7 节 | 94分钟
-
本章搭建项目的通用部分，把可以抽离出来的内容用组件的形式组织起来，为业务开发打下基础。
-
收起列表
-
视频：6-1 通用部分的开发 (02:03)
-
视频：6-2 通用布局的开发（1） (22:27)
-
视频：6-3 通用布局的开发（2） (26:33)
-
视频：6-4 头部导航的开发 (12:19)
-
视频：6-5 侧边导航的开发 (15:46)
-
视频：6-6 通用页面标题的开发 (07:34)
-
视频：6-7 代码的提交和总结 (06:14)
-
第7章 基础功能模块的开发 试看10 节 | 162分钟
-
基础功能模块的包含了系统里作为辅助的页面，包括用户的登录退出。用户列表，以及首页和错误页这些基本的页面，零散但不可或缺。这一章会讲到用户登录原理相关的知识
-
收起列表
-
视频：7-1 基础功能模块的开发 (02:27)
-
视频：7-2 登录页面的开发（1） (22:37)试看
-
视频：7-3 登录页面的开发（2） (24:13)
-
视频：7-4 登录页面的开发（3） (20:24)
-
视频：7-5 登录状态管理 (22:10)
-
视频：7-6 首页的开发 (20:24)
-
视频：7-7 错误页面的开发 (05:29)
-
视频：7-8 用户列表的开发（1） (22:55)
-
视频：7-9 用户列表的开发（2） (15:25)
-
视频：7-10 代码提交及总结 (04:55)
-
第8章 商品模块的开发14 节 | 265分钟
-
本章完成商品模块的开发，包括商品的列表、商品的添加编辑和商品详情，在这一章里会了解到jquery插件改造成react插件的方法
-
收起列表
-
视频：8-1 商品模块的开发 (05:03)
-
视频：8-2 商品列表的开发（1） (20:49)
-
视频：8-3 商品列表的开发（2） (24:49)
-
视频：8-4 商品列表的开发（3） (14:33)
-
视频：8-5 商品列表的开发（4） (13:41)
-
视频：8-6 添加商品页面的开发（1） (23:47)
-
视频：8-7 添加商品页面的开发（2） (23:19)
-
视频：8-8 添加商品页面的开发（3） (25:23)
-
视频：8-9 添加商品页面的开发（4） (23:16)
-
视频：8-10 添加商品页面的开发（5） (22:02)
-
视频：8-11 添加商品页面的开发（6） (25:35)
-
视频：8-12 编辑商品页面的开发 (27:32)
-
视频：8-13 商品详情页的开发 (10:27)
-
视频：8-14 代码提交和总结 (03:56)
-
第9章 品类模块的开发4 节 | 45分钟
-
本章完成对品类模块的开发，包括品类列表，增加品类和修改品类名称等功能。这一块重点内容是对生命周期的运用，加深对生命周期的理解。
-
收起列表
-
视频：9-1 品类模块的开发 (02:12)
-
视频：9-2 品类列表页的开发 (17:55)
-
视频：9-3 添加品类页面的开发 (21:53)
-
视频：9-4 代码的提交和总结 (02:16)
-
第10章 订单模块的开发4 节 | 47分钟
-
本章完成订单模块的开发，包括订单列表和订单详情，这时候应该对React开发比较熟悉了，这一章我们会快速的完成这个业务功能，来体会这种框架开发真正的效率体现。
-
收起列表
-
视频：10-1 订单模块的开发 (01:52)
-
视频：10-2 订单列表的开发 (16:32)
-
视频：10-3 订单详情的开发 (25:33)
-
视频：10-4 代码提交及总结 (02:16)
-
第11章 后台管理系统的上线6 节 | 59分钟
-
本章我们将会把代码发布到线上服务器，让同学们可以在外网访问。这一章主要内容就是代码的适配，代码的自动化发布，Nginx的配置和域名的解析等内容。让前端工程师也可以做发布，
-
收起列表
-
视频：11-1 项目上线过程 (02:35)
-
视频：11-2 代码的上线前准备 (07:10)
-
视频：11-3 生产环境的配置 (08:42)
-
视频：11-4 代码发布过程 (16:18)
-
视频：11-5 nginx和域名的配置 (20:44)
-
视频：11-6 代码提交及总结 (02:31)
-
第12章 课程总结1 节 | 5分钟
-
总结本次课程的主要内容，对支持的同学表示感谢！
收起列表
-
视频：12-1 总结 (04:53)
有需要联系v；加客服窗口的联系方式
摘要：本文将深入探讨如何利用React16和React-Router4从零开始打造一个企业级电商后台管理系统。通过详细阐述项目规划、技术选型、开发过程和性能优化四个方面，为读者提供一套完整的开发指南。
1、项目规划
在开始开发之前，我们需要对整个项目进行详细的规划。首先，明确项目需求，包括功能模块、界面设计、性能要求等。其次，制定项目开发计划，包括时间节点、人员分工、技术路线等。最后，进行需求评审，确保项目规划符合实际需求。
在项目规划阶段，我们需要关注以下几个方面：
1.1 功能模块划分：根据业务需求，将系统划分为用户管理、商品管理、订单管理、促销活动等模块。
1.2 界面设计：采用响应式设计，确保系统在不同设备上具有良好的用户体验。
1.3 性能要求：针对高并发场景，优化系统性能，确保系统稳定运行。
2、技术选型
在技术选型方面，我们选择React16作为前端框架，React-Router4作为路由管理工具。React16具有高性能、组件化、响应式等特点，能够满足企业级电商后台管理系统的开发需求。React-Router4则提供了灵活的路由管理功能，方便实现页面跳转和权限控制。
2.1 React16的优势：
2.1.1 高性能：React16采用虚拟DOM技术，减少页面重绘，提高页面渲染速度。
2.1.2 组件化：React16支持组件化开发，提高代码复用性和可维护性。
2.1.3 响应式：React16支持响应式设计，适应不同设备屏幕尺寸。
2.2 React-Router4的优势：
2.2.1 灵活的路由管理：React-Router4支持动态路由、嵌套路由等功能，方便实现页面跳转和权限控制。
2.2.2 轻量级：React-Router4体积小巧，对性能影响较小。
3、开发过程
在开发过程中，我们需要遵循以下步骤：
3.1 创建项目：使用create-react-app创建React项目，初始化项目结构。
3.2 搭建开发环境：配置Webpack、Babel等工具，确保项目正常运行。
3.3 编写代码：根据项目需求，编写React组件、路由配置、接口调用等代码。
3.4 代码审查：定期进行代码审查，确保代码质量。
3.5 测试与部署：编写单元测试和集成测试，确保系统功能正常。完成测试后，部署到服务器。
4、性能优化
在性能优化方面，我们需要关注以下几个方面：
4.1 代码优化：优化React组件，减少不必要的渲染，提高页面性能。
4.2 资源压缩：压缩图片、CSS、JavaScript等资源，减少加载时间。
4.3 缓存策略：合理配置缓存策略，提高系统访问速度。
总结：
本文详细阐述了如何利用React16和React-Router4从零开始打造一个企业级电商后台管理系统。通过项目规划、技术选型、开发过程和性能优化四个方面的阐述，为读者提供了一套完整的开发指南。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
