基于微前端的旅行社业务支撑系统的设计与实现

发布时间：2020-06-30 12:12

【摘要】：随着社会的飞速发展和物质水平的提高,旅游成为越来越多人的休闲方式,旅游产业正处于蓬勃发展的新时期。“互联网+”时代的来临,为旅游产业融合的发展提供了良好的机遇。互联网时代,信息化已成为优化旅游产业结构、提高旅游服务水平的重要手段。拥有一个界面友好、操作简单、功能完善、快速响应且性能优良的业务支撑系统成为旅行社的迫切需求。目前,在主流的Web应用开发中,前端通常是一个单页Web应用。为了支撑复杂的业务逻辑,开发人员需要编写大量的JavaScript代码。随着旅行社业务的拓展,项目的模块数目不断增多,前端工程会变得越发庞大,将面临打包编译时间过长的问题,无法满足快速迭代的需求。因此,本文提出了一种基于微前端的解决方案,将微服务理念应用于前端,将原来的单体应用转变为多个小型前端应用聚合的应用,解决单页Web应用开发的痛点。本文的主要研究工作分为两个方面。一方面,针对single-spa框架的不足进行改进,优化其注册机制,解决子应用之间的通讯和路由协同问题,并使用webpack构建应用。另一方面,将优化后的方案应用于旅行社业务支撑系统的实现,将其按照功能拆分为多个独立的子应用,子应用内部基于组件化思想开发,独立打包部署,最终聚合为一个完整的应用。最后,对系统进行测试,测试结果有效验证了微前端框架的可行性和系统业务功能的正确性。本论文提出的基于微前端的设计方案对开发复杂的Web应用具有一定的参考价值。
【学位授予单位】：北京邮电大学
【学位级别】：硕士
【学位授予年份】：2019
【分类号】：TP393.09
【图文】：

逐层,节点,子节点,位置

＞对于同一层次的一组子节点，它们可以通过唯一的ｋｅｙ进行区分。逡逑Ｄｉｆｆ算法的思路是将两棵树进行逐层比较，即只会对统一层次的节点进行比逡逑较。如图２－２所示，Ｒｅａｃｔ只会对相同颜色方框内的ＤＯＭ节点进行比较，即同逡逑一个父节点下的所有直接子节点。逡逑ｂｅｆｏｒｅ逦ａｆｔｅｒ逡逑Ａ逦ｆＱ｜逡逑？邋ｙ邋ｘ逦ｘ邋ｘ逡逑７＾１逡逑ｗ逦＾逦ｗ．．逡逑■邋／邋＼邋，．邋／邋＼逦／邋＼逦／＼逡逑图２－２逐层比较逡逑然后，在逐层比较的过程，当在树中的同一位置前后输出了不同类型的节点，逡逑Ｒｅａｃｔ将直接删除前面的节点及其子节点，不会将子节点用于进一步的比较，然逡逑后直接创建并插入新的节点。这样只需要对树进行一次遍历，便能完成整个逡逑ＤＯＭ树的比较。针对相同类型节点的比较，算法就相对简单。Ｒｅａｃｔ会对组件逡逑的属性进行重设从而实现节点的转换，例如对组件的样式属性进行重设。对于同逡逑一层的相同类型节点，例如列表节点，通过唯一的ｋｅｙ标识。如图２－３所示，所逡逑有节点都是相同类型的节点。当在节点Ｂ与节点Ｃ之间增加一个节点Ｅ

视图,属性,生命周期,阶段

在具体开发流程中，Ｒｅａｃｔ可以借助于Ｒｅｄｕｘ框架更优雅的实现单项数据流。逡逑Ｒｅａｃｔ通过其定义的函数来控制组件在生命周期的各个阶段的动作，在合适逡逑的时机加载ＤＯＭ、更新ＤＯＭ和卸载ＤＯＭ，从而正确地渲染视图。如图２－４所逡逑示，Ｒｅａｃｔ生命周期可划分为三个阶段：初始化阶段、运行中阶段和销毁阶段，逡逑共包含十一种状态。在Ｒｅａｃｔ不同的生命周期里，会依次触发不同的钩子函数。逡逑在运行中阶段，组件可能会多次执行ｒｅｎｄｅｒＯ方法重新渲染更新页面，而逡逑ｓｈｏｕｌｄＣｏｍｐｏｎｅｎｔＵｐｄａｔｅ0方法决定了组件是否更新。因此，开发人员在开发时可逡逑以通过重写ｓｈｏｕｌｄＣｏｍｐｏｎｅｎｔＵｐｄａｔｅ0方法减少不必要的更新进行性能优化。逡逑Ｒｅａｃｔ框架本身专注于构建用户界面，ｆａｃｅｂｏｏｋ还围绕Ｒｅａｃｔ开发了一系列逡逑的前端工具库。在Ｒｅａｃｔ项目中，这些工具不是必须的，不过它们可以和Ｒｅａｃｔ逡逑结合使用，创建功能更加丰富的应用。下面将介绍Ｒｅａｃｔ邋Ｒｏｕｔｅｒ和ａｎｔ－ｄｅｓｉｇｎ和逡逑Ｒｅｄｕｘ

【相似文献】