课程：React18 系统精讲
章节：hooks
讲师：阿莱克斯刘
课程内容：
【需求分析】
对于旅游路线，一般来说，在主页会有热门旅游路线的产品推荐，接着，用户应该也可以凭借关键词来搜索旅游路线；
第二，既然老用户可以登陆，那么新用户也得可以注册才行；
第三，登陆的用户可以选择满意的路线放进购物车，也可以删除不想购买的产品。
第四，最后除了下单支付，用户也需要时不时产去查看一下过去的订单历史记录。于是，很自然的，我们的网站就可以被划分为4个业务模块，第一，旅游路线资源模块（也就是产品模块），第二，用户模块，第三，购物模块，第四，订单模块。
【产品模块】
对于产品模块，我们需要实现3个业务，推荐、关键词搜索、以及展示旅游路线。而这三个业务互相独立，可以分别使用三个页面来进行处理。于是，对于推荐，我们就有了主页；对于关键词搜索功能，我们产生了产品搜索页面；而对于展示旅游路线功能，我们可以在产品详情页中展示所有旅游路线的具体信息。
【用户模块】
而对于用户模块，需要实现的是登录和注册这两个功能。二这两个功能互相独立，我们同样可以分别使用独立的页面来进行处理。于是，我们就有了登录，以及注册这两个页面。
【购物模块】
接下来是购物模块，这里比较特殊，因为购物车的结算、商品的添加、以及删除这三个功能互相之间都有依赖关系，无法独立存在，所以我们只能使用一个页面来处理，这就是用户的购物车页面。在购物车中，详细显示了产品列表，如果用户点击清空按钮可以删除购物车中的商品，而如果用户点击下单支付按钮，系统则会根据购物车的内容创建一张新的订单，让用户来支付购买。
【订单模块】
最后一个就是订单模块，我们需要实现的是两个功能，下单购买以及查看订单历史记录。二这两个功能就没有重叠的部分了，业务相互独立，没有依赖，所以我们应该分为两个页面进行处理。于是，对于下单购买功能，我们就有了在线支付页面；而不管支付有没有完成，我们都可以对订单的历史记录进行查询，于是，我们也就有了，订单历史记录页面。
所以，当我们从业务的角度来分析需求的时候，我们会惊奇的发现，需求中所隐含的业务路线实际上与页面逻辑形成了某种特定的一一对应的关系。而我们就应该使用这种对应关系，来完成网站的所有的页面开发。
【项目预览】
本课的实战案例在课程第一章已经展示过了，不过还是让我再回顾一下。课程的实战项目是一个类似携程旅游网的旅游电商网站。我们主要实现了四个模块的功能，第一个是商品展示模块，在首页我们可以看到商品推荐的展示，而在搜索页面，我们可以通过关键词来过滤商品，点击每个商品都可以打开自己独立的详情页面，在这里标注了商品的所有细节以及图片。
第二个模块是用户模块，网站用户可以在这里登陆以及注册，网站的权限功能使用JWT（也就是web josn token）技术来实现用户的无状态登陆模式，网站会根据用户权限对路由以及页面做出调整，只有登陆用户才能打开或者查看自己的购物车以及订单信息。而网站的登录状态也会通过redux保存在浏览器上。这样，下次用户打开网站的时候就不需要重复输入用户名密码了。
第三个模块就是购物模块，用户可以把自己喜欢的商品放入购物车，然后在购物车页面中浏览挑选自己喜欢的产品，为了完整用户的购物体验，我们还有一个购物车总计窗口来显示购物车中商品的总体价格、总体折扣等。
而网站的最后一个模块就是订单系统，在购物车页面中点击下单按钮，这个时候结算工作就正式开始了，首先会给用户创建一张新的订单，同时清空用的购物车，最后在订单页面显示这张新的订单。用户将会在这个页面输入支付信息，完成最后的购买。请注意，课程的支付系统是为了演示电商网站的支付流程，采用的支付系统是完全虚拟的，不会连接到任何第三方支付平台，请同学们放心学习。
【前后端分离构建原则】
我们的实战项目遵循了目前主流的前后端分离构建原则，网站数据都是通过网络请求，使用RESTful API服务得到的。课程的后端api已经提前部署在阿里云服务器上了在学习过程中同学们可以凭借自己慕课网的icode代码进行访问，关于如何正确访问api，我会在接下来的课程中详细讲解。而这些api数据将会支撑起网站的全部的业务流程，包括展示、搜索旅游路线、用户登陆注册、添加购物车、以及下单购买等功能。虽然课程不涉及后端搭建，但我们还是将会花一整节课的时间来介绍课程后端api的使用方法、前后端分离的理念、以及RESTful的思维方式。
【实战项目规划】
那么，我们的课程是如何规划实战项目的呢？软件开发、网站开发会按照一定的的原则和流程，一般来说，开发流程会分为需求分析阶段、系统设计阶段、开发阶段、测试阶段、以及上线阶段。而我们的课程也将会从遵循这样的流程来进行开发。在本节课中，我们解决了需求分析。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
