CN110795095B - 建立业务逻辑组件与业务组件及生成页面的方法与系统 - Google Patents

Abstract

本发明涉及前端开发技术领域，公开一种业务逻辑组件、业务组件的建立方法与系统、及基于模板生成页面的方法与系统。所述建立方法包括：提取页面中的业务逻辑；建立关于业务逻辑的业务流程函数组件；及在业务流程函数组件中预留用于与第一用户界面组件和/或业务组件连接的第一槽位，以形成第一业务逻辑组件，业务组件由第二业务逻辑组件通过第二槽位连接第二用户界面组件组成。本发明可实现业务逻辑组件与用户界面(UI)组件的解耦，且可通过预留的槽位实现业务逻辑组件与UI组件的灵活配置，进而实现业务逻辑组件与UI组件的增量或定制化的持续迭代，高效完成业务组件的建立过程，此外，还可基于模板及灵活配置的业务组件实现多样且定制化的页面。

Description

建立业务逻辑组件与业务组件及生成页面的方法与系统

技术领域

本发明涉及前端开发技术领域，具体地涉及一种业务逻辑组件、业务组件的建立方法与建立系统、及基于模板生成页面的方法与系统。

背景技术

目前，在前端页面开发中，大幅度地普及推广了以组件化的开发方式来提升开发效率的措施。前端页面的组件化开发是指将页面的某一部分独立出来，并将该部分的数据层(M)、视图层(V)和控制层(C)用黑盒的形式全部封装到一个组件内，与此同时，暴露出一些开箱即用的函数和属性以供外部组件调用。前端页面的组件包含HTML、CSS、JavaScript及组件的模板、样式与交互等内容。外部组件只要按照前端页面的组件提前设定的属性、函数及事件处理等进行调用即可，完全不用考虑内部的实现逻辑，也就是说，对外部来说前端页面的组件是一个完全的黑盒。

有许多企业向开源社区开发贡献了许多充分设计开发的页面中常用的用户界面组件库，如Antd、element等。但是，仅仅利用用户界面组件开发页面，简化的仅仅是页面的部分展示与交互的开发工作。前端研发想要根据业务需求完整的实现一个页面开发，不但要组合使用适合的用户界面组件，还要每次编码大量的业务逻辑代码，且这部分业务逻辑代码无法在不同的项目之间复用。然而，对于一个业务快速迭代和拓展的企业来说，不同业务项目之间客观存在许多相同的业务逻辑，且在项目本身的迭代中，业务逻辑的变更有时需要保持历史版本的有效性，而不是只将原有逻辑修改为新逻辑。例如，关于合同页面的逻辑，在需要保存历史合同的逻辑的同时，还需要开发与新合同对应的新的业务逻辑。在这种情形下，如果项目页面中的业务逻辑无法被抽离复用，就需要编写大量重复的业务逻辑代码，或者大量的兼容历史逻辑的业务逻辑代码难以维护。因此，前端页面中的业务逻辑代码同样需要实现组件化复用。

发明内容

本发明的目的是提供一种业务逻辑组件、业务组件的建立方法与建立系统、及基于模板生成页面的方法与系统，其可实现业务逻辑组件与用户界面组件的解耦，并且可通过预留的槽位实现大量的业务逻辑的复用，即可实现业务逻辑组件与用户界面组件的灵活配置，进而可实现业务逻辑组件与用户界面组件的增量或定制化的持续迭代，高效地完成业务组件的建立过程，此外，还可基于模板及灵活配置的业务组件实现多样且定制化的页面。

为了实现上述目的，本发明第一方面提供一种业务逻辑组件的建立方法，该建立方法包括：提取页面中的业务逻辑；建立关于所述业务逻辑的业务流程函数组件；以及在所述业务流程函数组件中预留用于与第一用户界面组件和/或业务组件连接的第一槽位，以形成第一业务逻辑组件，其中，所述业务组件由第二业务逻辑组件通过第二槽位连接第二用户界面组件组成。

优选地，所述在所述业务流程函数组件中预留用于与第一用户界面组件和/或业务组件连接的第一槽位包括：通过renderprops技术在所述业务流程函数组件中预留所述第一槽位。

通过上述技术方案，本发明创造性地首先提取页面中的业务逻辑，然后在建立关于业务逻辑的业务流程函数组件之后，在业务流程函数组件中预留槽位以用于连接用户界面组件和/或业务组件，从而形成业务逻辑组件，由此，其可实现业务逻辑组件与用户界面组件的解耦，并且通过预留的槽位实现大量的业务逻辑的复用，从而实现业务逻辑组件与用户界面组件的灵活配置。

本发明第二方面提供一种业务组件的建立方法，该建立方法包括：响应于业务场景的需求，调用与所述需求相对应的通过所述的业务逻辑组件的建立方法建立的业务逻辑组件及用户界面组件和/或业务组件；以及通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述用户界面组件和/或所述业务组件连接。

优选地，在所述用户界面组件为父子组件的情况下，该建立方法还包括：通过工具函数接收第一参数与第二参数，所述第一参数对应于父组件，所述第二参数对应于子组件；以及通过所述业务逻辑组件中的槽位将所述业务逻辑组件与所述父组件及所述子组件连接。

优选地，该建立方法还包括：通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面组件和/或所述业务组件。

优选地，在所述业务场景的需求为更新版本的情况下，所述通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面组件和/或所述业务组件包括：通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面组件和/或业务组件。

优选地，在执行所述通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面组件和/或业务组件的步骤的同时或之后，所述建立方法还包括：通过所述槽位将更新前的原版本的业务数据与业务流程函数传递给与所述原版本相对应的用户界面组件和/或业务组件。

通过上述技术方案，本发明创造性地根据业务场景的需求，调用相应的业务逻辑组件及用户界面组件和/或业务组件，然后通过业务逻辑组件中的槽位将业务逻辑组件与相应的用户界面组件和/或所述业务组件连接，由此，其可通过复用业务逻辑来灵活配置解耦的业务逻辑组件与用户界面组件，从而可实现业务逻辑组件与用户界面组件的增量或定制化的持续迭代，高效地完成业务组件的建立过程。

本发明第三方面提供一种基于模板生成页面的方法，所述方法包括：基于所述模板所设定的顺序规则，获取所述页面所需的多个业务组件的信息；根据所述的业务组件的建立方法及所述多个业务组件的信息，建立所述多个业务组件；以及基于所述模板所设定的结构布局，调整所述多个业务组件的位置，以生成所述页面。

优选地，所述获取所述页面所需的多个业务组件的信息包括：基于所述模板所设定的顺序规则，获取与所述多个业务组件相对应的特征信息；以及基于所述与所述多个业务组件相对应的特征信息及预先配置的特征信息与业务组件的信息之间的对应关系，解析所述页面所需的多个业务组件的信息。

优选地，所述预先配置的特征信息与业务组件之的信息间的对应关系以预设的配置数据结构方式存储在所述模板的配置文件中。

通过上述技术方案，本发明创造性地根据模板所设定的顺序规则获取页面所需的多个业务组件的集合；然后根据该集合识别与多个预设编号相对应的多个业务组件；根据模板所设定的结构布局调整该多个业务组件的位置，从而生成定制化的页面，由此，可基于模板及可灵活配置的业务组件实现多样且定制化的页面。

本发明第四方面提供一种业务逻辑组件的建立系统，该建立系统包括：提取装置，用于提取页面中的业务逻辑；建立装置，用于建立关于所述业务逻辑的业务流程函数组件；以及预留装置，用于在所述业务流程函数组件中预留用于与第一用户界面组件和/或业务组件连接的第一槽位，以形成第一业务逻辑组件，其中，所述业务组件由第二业务逻辑组件通过第二槽位连接第二用户界面组件组成。

优选地，所述预留装置用于在所述业务流程函数组件中预留用于与第一用户界面组件和/或业务组件连接的第一槽位包括：通过renderprops技术在所述业务流程函数组件中预留所述第一槽位。

有关本发明提供的业务逻辑组件的建立系统的益处可参阅上述针对业务逻辑组件的建立方法的描述，于此不再赘述。

本发明第五方面还提供一种业务组件的建立系统，该建立系统包括：调用装置，用于响应于业务场景的需求，调用与所述需求相对应的通过所述的业务逻辑组件的建立系统建立的业务逻辑组件及用户界面组件和/或业务组件；以及第一连接装置，用于按照所述业务流程函数，通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述用户界面组件和/或所述业务组件连接。

优选地，在所述用户界面组件为父子组件的情况下，该建立系统还包括：接收装置，用于通过工具函数接收第一参数与第二参数，所述第一参数对应于父组件，所述第二参数对应于子组件；以及第二连接装置，用于通过所述业务逻辑组件中的槽位将所述业务逻辑组件与所述父组件及所述子组件连接。

优选地，该建立系统还包括：传递装置，用于通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面组件和/或所述业务组件。

优选地，在所述业务场景的需求为更新版本的情况下，所述传递装置用于通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面组件和/或所述业务组件包括：通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面组件和/或业务组件。

优选地，所述传递装置还用于，通过所述槽位将更新前的原版本的业务数据与业务流程函数传递给与所述原版本相对应的用户界面组件和/或业务组件。

有关本发明提供的业务组件的建立系统的益处可参阅上述针对业务组件的建立方法的描述，于此不再赘述。

本发明第六方面提供一种基于模板生成页面的系统，所述系统包括：信息获取装置，用于基于所述模板所设定的顺序规则，获取所述页面所需的多个业务组件的信息；所述的业务组件的建立系统，用于基于所述多个业务组件的信息，建立所述多个业务组件；以及生成装置，用于基于所述模板所设定的结构布局，调整所述多个业务组件的位置，以生成所述页面。

优选地，所述信息获取装置包括：特征信息获取模块，用于基于所述模板所设定的顺序规则，获取与所述多个业务组件相对应的特征信息；以及信息解析模块，用于基于所述与所述多个业务组件相对应的特征信息及预先配置的特征信息与业务组件的信息之间的对应关系，解析所述页面所需的多个业务组件的信息。

优选地，所述预先配置的特征信息与业务组件的信息之间的对应关系以预设的配置数据结构方式存储在所述模板的配置文件中。

有关本发明提供的基于模板生成页面的系统的益处可参阅上述针对基于模板生成页面的方法的描述，于此不再赘述。

本发明第七方面提供一种机器可读存储介质，所述机器可读存储介质上存储有指令，该指令用于使得机器执行所述的业务逻辑组件的建立方法、所述的业务组件的建立方法或所述的基于模板生成页面的方法。

本发明的其它特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本发明的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本发明，但并不构成对本发明的限制。在附图中：

图1是本发明实施例提供的业务逻辑组件的建立方法的流程图；

图2是本发明实施例提供的业务组件的建立方法的流程图；

图3是本发明实施例提供的基于模板生成页面的方法的流程图；

图4是本发明实施例提供的基于模板生成页面的过程的流程图；

图5是本发明实施例提供的业务逻辑组件的建立系统的结构图；

图6是本发明实施例提供的业务组件的建立系统的结构图；

图7是本发明实施例提供的业务组件的建立系统的结构图；

图8是本发明实施例提供的业务组件的建立系统的结构图；

图9是本发明实施例提供的基于模板生成页面的系统的结构图；以及

图10是本发明实施例提供的信息获取装置的结构图。

附图标记说明

10 提取装置 20 建立装置

30 预留装置 40 调用装置

50 第一连接装置 60 接收装置

70 第二连接装置 80 传递装置

90 信息获取装置 91 特征信息获取模块

92 信息解析模块 100 建立系统

110 生成装置

具体实施方式

以下结合附图对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。

在描述本发明的技术方案之前，对以下几个术语进行简单的介绍。

用户界面(UI)组件：UI组件负责获取业务逻辑组件赋予的业务数据来展示页面，并提供交互方式，能够触发执行业务逻辑组件赋予的业务流程操作。

业务逻辑组件：业务逻辑组件中实现业务所涉及的数据获取和初始化过程，并负责处理UI组件触发的交互事件实际的业务处理流程。可通过react中的renderprops技术，预留出组合子组件的“槽位”，将业务数据、业务流程函数传递授予给子组件。

业务组件：业务组件通过“槽位”将业务逻辑组件与UI组件进行连接配置而成。

图1是本发明实施例提供的业务逻辑组件的建立方法的流程图。如图1所示，所示建立方法可包括以下步骤：步骤S101，提取页面中的业务逻辑；步骤S102，建立关于所述业务逻辑的业务流程函数组件；以及步骤S103，在所述业务流程函数组件中预留用于与第一用户界面(UI)组件和/或业务组件连接的第一槽位，以形成业务逻辑组件。其中，所述业务组件由第二业务逻辑组件通过第二槽位连接第二UI组件组成。

对于步骤S101，将从页面中的展示和交互的UI组件中抽离出业务逻辑。其中，所述业务逻辑可包括：业务流程的初始化逻辑以及交互事件需要执行的交互逻辑。

对于步骤S102，将步骤S101提取的业务逻辑集中编写为独立的业务流程函数组件(即纯函数组件，例如，由图4所示的业务流程一与业务流程二形成的纯函数组件)。这样在后续复用或迭代业务逻辑的过程中，可对实际的业务流程进行高效的变更，并且，由于业务逻辑与展示无关，故在UI组件之间的应用程序编程接口(API)稳定的前提下，能够灵活任意更换展示交互方式而保持复用原有的业务逻辑。

对于步骤S103，可以通过react中的renderprops技术在所述业务流程函数组件中预留下插入UI组件的“槽位”，从而形成业务逻辑组件(例如，如图4所示的业务逻辑组件一)。该“槽位”技术在于让业务逻辑组件对外提供稳定的完成初始化的业务数据或交互事件的业务处理流程，由此，可通过组合业务逻辑及“槽位”中的UI组件来获得完整的业务组件(例如，如图4所示的业务组件一)，因此，两者之间必须通过稳定一致的API约定来实现组合关系。并且，在执行步骤S103之后，可将所述业务逻辑组件存储在组件库内。

另外，在业务逻辑组件的“槽位”中，除了连接UI组件外，还能够嵌套其他业务组件(例如，如图4所示的业务组件三)，由此可实现复杂的业务流程。所述业务逻辑组件对外提供可充分扩展或定制化的配置API，这样不仅可实现自身的业务流程与子组件的业务流程，还可提升自身可复用的程度。

通过上述技术方案，本发明创造性地首先提取页面中的业务逻辑，然后在建立关于业务逻辑的业务流程函数组件之后，在业务流程函数组件中预留槽位以用于连接UI组件和/或业务组件，从而形成业务逻辑组件，由此，其可实现业务逻辑组件与UI组件的解耦，并且通过预留的槽位实现大量的业务逻辑的复用，从而实现业务逻辑组件与UI组件的灵活配置。

图2是本发明实施例提供的业务组件的建立方法的流程图。如图2所示，所示建立方法可包括以下步骤：步骤S201，响应于业务场景的需求，调用与所述需求相对应的通过所述的业务逻辑组件的建立方法建立的业务逻辑组件及用户界面组件和/或业务组件；以及步骤202，通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述UI组件和/或所述业务组件连接。

对于步骤S201，若业务场景的需求为“更新合同版本”，则调用组件库中的与更新合同版本相对应的业务逻辑组件及UI组件和/或已建立好的业务组件。另外，也可以提前在配置文件中配置业务场景所需的业务逻辑组件及UI组件和/或业务组件的信息，然后根据配置文件中所配置的上述信息调用相应的业务逻辑组件及UI组件和/或业务组件。

对于步骤S202，通过“槽位”将业务逻辑组件与所调用的UI组件和/或业务组件进行连接。由此，可实现业务逻辑组件与用户界面组件的增量或定制化的持续迭代，高效地完成业务组件的建立过程

在执行步骤S202之后，该建立方法还可包括：通过所述业务逻辑组件中的槽位将所述业务数据及所述业务流程函数传递给所述UI组件和/或所述业务组件。

其中，所述UI组件可为单独的UI组件、包括具有展示交互逻辑的UI组件组合(如图4所示)或者父子组件。例如，UI组件组合可为登陆页面中的具有交互逻辑的用户信息输入组件与登陆(或提交)组件的组合，而展示交互逻辑是指在用户没有完成用户名与密码等信息的输入之前，需要将登陆(或提交)组件设置在不可点击状态(或灰状态)。父子组件可为由表单(Form)组件作为父组件，且输入框(Input)组件与下拉选择框(Select)组件作为子组件的组合。

在基于react开发中，父子组件的实现通常是将子组件嵌套在父组件结构体内，但该种实现方式的过程非常繁琐。为了能够使不同的业务逻辑组件与UI组件的组合方式高效替换，可以通过开发工具函数将两类组件进行快速的组合。

具体地，在所述UI组件为父子组件的情况下，该建立方法还可包括：通过工具函数接收第一参数与第二参数，所述第一参数对应于父组件，所述第二参数对应于子组件；以及通过所述业务逻辑组件中的槽位将所述业务逻辑组件与所述父组件及所述子组件连接。以由表单(Form)组件作为父组件，且输入框(Input)组件与下拉选择框(Select)组件作为子组件组成的父子组件为例，首先通过LogicRender工具函数接收父组件(表单组件)及子组件(输入框组件与下拉选择框组件)两个参数；然后，通过“槽位”将业务逻辑组件与父组件及子组件连接，从而不仅组合形成了相应的父子组件，还建立了相应的业务组件。与现有技术中的将子组件嵌套在父组件结构体内的组合方式相比，上述通过“槽位”建立父子组件的过程更为简单高效，由此，通过与以该种方式组合的父子组件连接形成业务组件的过程也更为简单高效。

在所述业务场景的需求为更新版本的情况下，所述通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述UI组件和/或所述业务组件可包括：通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的UI组件和/或业务组件。并且，在执行所述传递步骤的同时或之后，所述建立方法还可包括：通过所述槽位将更新前的原版本的业务数据与业务流程函数传递给与所述原版本相对应的UI组件和/或业务组件。由此，可以便于更新前的原版本的业务逻辑组件的复用和查看。

具体地，以业务场景的需求为“更新合同版本”为例，在一个复杂的可编辑电子合同页面中，每一项合同条款都可能包含着复杂的业务逻辑，但随着公司业务的发展，某些合同款项的业务逻辑需要发生变更，此时就可以通过修改或替换原合同页面中的业务逻辑组件来版本的更新。如果组件库中的组件无法满足新需求，也只需采取增量式的业务逻辑组件或UI组件开发，同时也能为后续同类项目积累可复用的业务组件，最大限度提升页面开发效率。也就是说，由于不能变更已签约的合同条款的业务逻辑，而新的合同又要采用新合同条款的业务逻辑。此时，可首先根据“更新合同版本”场景所需的业务逻辑组件及UI组件的信息调用相应的业务逻辑组件及UI组件；然后可通过业务逻辑组件中的“槽位”将更新版本合同的相关数据(例如，版本信息)与业务流程函数传递至与更新版本合同相对应的UI组件和/或业务组件；以及通过“槽位”将原版本合同的相关数据(例如，版本信息)与业务流程函数传递至与原版本合同相对应的UI组件和/或业务组件。由此，可在保持原版本合同有效的基础上，通过更改业务逻辑来实现新版本的变更。

具体而言，以“用户信息”业务组件为例，对用户登陆页面的“用户信息”业务组件复用用户信息页面(用于展示用户名、昵称、邮箱等用户信息)的“用户信息”业务组件的过程进行说明。

假设用户登录界面也同样需要用户名、昵称、邮箱等信息，并且除了需要切换可输入状态以及增加密码输入框组件和登陆(或提交)组件之外，两页面在展示效果上也大致相同，那么用户登录页面的实现就可以通过复用用户信息页面的业务逻辑组件与UI组件的组合来提升开发效率。具体地，首先，对用户信息页面的UI组件进行扩展，以增加与可编辑输入及提交的登录状态(默认为不可编辑状态)相关的组件，此时，可以完整复用用户信息页面中的扩展后的UI组件与原业务逻辑组件的组合(这是因为需要先展示当前用户信息)；然后通过父子组件的组合方式，将用户登录页面的业务逻辑组件的功能增强(即复用并扩展)到用户信息页面的“用户信息”业务组件上(也就是说，用户信息页面的“用户信息”业务组件可复用用户登录页面的业务逻辑组件)，但需要注意，除了负责对外提供自身API功能与数据外，业务逻辑组件还应透传其自身获取的额外数据(例如，包括可编辑状态标识在内的用户登录API)，这样外层的用户登录页面的“用户信息”业务组件就能够将包括可编辑状态标识在内的用户登录API通过槽位透传给用户信息页面的UI组件；然后，用户信息页面的UI组件接收所透传的可编辑状态标识，切换成可输入状态，并提供登录(或提交)组件的交互方式来触发用户登录页面的业务流程。由此，用户登录页面的业务组件能够通过组合已有的用户信息页面的UI组件来实现，其不仅能够提供用户信息页面的内容，同时也能够支持扩展的登录功能。

综上所述，本发明创造性地根据业务场景的需求，调用相应的业务逻辑组件及用户界面组件和/或业务组件，然后通过业务逻辑组件中的槽位将业务逻辑组件与相应的UI组件和/或所述业务组件连接，由此，其可通过复用业务逻辑来灵活配置解耦的业务逻辑组件与UI组件，从而可实现业务逻辑组件与UI组件的增量或定制化的持续迭代，高效地完成业务组件的建立过程。

图3是本发明实施例提供的基于模板生成页面的方法的流程图。如图3所示，所述方法可包括以下步骤：步骤S301，基于所述模板所设定的顺序规则，获取所述页面所需的多个业务组件的信息；步骤S302，根据所述的业务组件的建立方法及所述多个业务组件的信息，建立所述多个业务组件；以及步骤S303，基于所述模板所设定的结构布局，调整所述多个业务组件的位置，以生成所述页面。

对于步骤S301，所述获取所述页面所需的多个业务组件的信息可包括：基于所述模板所设定的顺序规则，获取(或解析出)与所述多个业务组件相对应的特征信息(例如编号，或其他具体唯一性特征的其他信息)；以及基于所述与所述多个业务组件相对应的特征信息及预先配置的特征信息与业务组件的信息(例如名称)之间的对应关系，解析所述页面所需的多个业务组件的信息。其中，所述设定的顺序规则可为页面展示的时间顺序；所述预先配置的特征信息与业务组件的信息之间的对应关系以预设的配置数据结构方式存储在所述模板的配置文件中；所述预设的配置数据结构可为JSON配置数据结构。

具体地，可提前将所述多个业务组件组合形成卡片数组队列(命名为cardList)，并将该cardList被写入配置文件中。该cardList内以JSON配置数据结构方式呈现业务组件的名称与预设编号的对应关系：编号“1”-“版本控制”业务组件；编号“2”-“用户信息”业务组件；以及编号“3”-“合同信息”业务组件等。可将一个完整的H5页面按展示的时间顺序划分成多个业务组件，从而获取与所述多个业务组件对应的编号；然后，根据cardList中的编号与业务组件的名称之间的对应关系，通过map函数识别与所获取的多个编号相应的多个业务组件的名称；然后在下面的步骤S302中，可根据识别得到的多个业务组件的名称及上述业务组件的建立方法，建立相应的多个业务组件。

对于步骤S302，根据步骤S301获取的多个业务组件的名称，调用页面所需的业务逻辑组件及UI组件和/或业务组件，然后通过所调用的业务逻辑组件来获取相应的业务数据，以对整个页面执行初始化；接着通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述UI组件和/或所述业务组件进行连接，从而可实时建立所述多个业务组件。

对于步骤S303，根据模版所设定的结构布局，将所述多个业务组件按展示需要调整各自的展示位置，从而生成所需的页面。

由此，基于创建的配置模版，结合业务逻辑组件库与UI组件库，可在业务场景的需求变更有限的情况下，只修改配置文件或创建新的解析规则的模板即可。具体而言，现以图4所示的流程对基于模板生成页面的过程进行解释和说明。

步骤S401，将模板所设定的卡片数组队列(cardList)、顺序规则及结构布局写入模板中的配置文件内。

其中，所述cardList中显示业务组件的名称与编号的对应关系。

步骤S402，基于配置文件内的顺序规则，解析页面所需的多个业务组件的编号。

步骤S403，基于卡片数组队列，识别与所解析的多个编号相对应的所述多个业务组件的名称。

步骤S404，基于所述多个业务组件的名称，调用组件库中相应的业务逻辑组件及UI组件。

步骤S405，基于所调用的业务逻辑组件及UI组件，按照业务组件的建立方法建立所述多个业务组件。

业务组件可按照上述业务组件的建立方法，通过“槽位”对组件库内的业务逻辑组件与UI组件和/或其他业务组件进行连接配置而成。

步骤S406，基于配置文件内的结构布局，调整所述多个业务组件的位置，以生成所述页面。

综上所述，本发明创造性地根据模板所设定的顺序规则获取页面所需的多个业务组件的信息；然后根据上述业务组件的建立方法及所述多个业务组件的信息，实时建立所述多个业务组件；根据模板所设定的结构布局调整所述多个业务组件的位置，从而生成定制化的页面，由此，可基于模板及可灵活配置的业务组件实现多样且定制化的页面。

相应地，图5是本发明实施例提供的业务逻辑组件的建立系统的结构图。如图5所示，所述建立系统可包括：提取装置10，用于提取页面中的业务逻辑；建立装置20，用于建立关于所述业务逻辑的业务流程函数组件；以及预留装置30，用于在所述业务流程函数组件中预留用于与第一UI组件和/或业务组件连接的第一槽位，以形成第一业务逻辑组件。其中，所述业务组件由第二业务逻辑组件通过第二槽位连接第二UI组件组成。

优选地，所述预留装置30用于在所述业务流程函数组件中预留用于与第一用户界面组件和/或业务组件连接的第一槽位可包括：通过renderprops技术在所述业务流程函数组件中预留所述第一槽位。

有关本发明提供的业务逻辑组件的建立系统的细节及益处可参阅上述针对业务逻辑组件的建立方法的描述，于此不再赘述。

相应地，图6是本发明实施例提供的业务组件的建立系统100的结构图。如图6所示，所述建立系统100可包括：调用装置40，用于响应于业务场景的需求，调用与所述需求相对应的通过所述的业务逻辑组件的建立系统建立的业务逻辑组件及用户界面组件和/或业务组件；以及第一连接装置50，用于通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述用户界面组件和/或业务组件连接。

在所述用户界面组件为父子组件的情况下，该建立系统100还可包括：接收装置60，用于通过工具函数接收第一参数与第二参数，所述第一参数对应于父组件，所述第二参数对应于子组件；以及第二连接装置70，用于通过所述业务逻辑组件中的槽位将所述业务逻辑组件与所述父组件及所述子组件连接，如图7所示。其中，所述第一连接装置50与所述第二连接装置70可以为同一连接装置，也可为不同的连接装置。

另外，所述建立系统100还可包括：传递装置80，用于通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面组件和/或所述业务组件，如图8所示。

在所述业务场景的需求为更新版本的情况下，所述传递装置80用于通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面组件和/或所述业务组件可包括：通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面组件和/或业务组件。

优选地，所述传递装置80还用于，通过所述槽位将更新前的原版本的业务数据与业务流程函数传递给与所述原版本相对应的用户界面组件和/或业务组件。

有关本发明提供的业务组件的建立系统的细节及益处可参阅上述针对业务组件的建立方法的描述，于此不再赘述。

相应地，图9是本发明实施例提供的基于模板生成页面的系统的结构图。如图9所示，所述系统可包括：信息获取装置90，用于基于所述模板所设定的顺序规则，获取所述页面所需的多个业务组件的信息；所述的业务组件的建立系统100，用于基于所述多个业务组件的信息，建立所述多个业务组件；以及生成装置110，用于基于所述模板所设定的结构布局，调整所述多个业务组件的位置，以生成所述页面。

所述信息获取装置90可包括：特征信息获取模块91，用于基于所述模板所设定的顺序规则，获取与所述多个业务组件相对应的特征信息；以及信息解析模块92，用于基于所述与所述多个业务组件相对应的特征信息及预先配置的特征信息与业务组件的信息之间的对应关系，解析所述页面所需的多个业务组件的信息，如图10所示。

优选地，所述预先配置的特征信息与业务组件的信息之间的对应关系以预设的配置数据结构方式存储在所述模板的配置文件中。

有关本发明提供的基于模板生成页面的系统的细节及益处可参阅上述针对基于模板生成页面的方法的描述，于此不再赘述。

本发明还提供一种机器可读存储介质，所述机器可读存储介质上存储有指令，该指令用于使得机器执行所述的业务逻辑组件的建立方法、所述的业务组件的建立方法或所述的基于模板生成页面的方法。

所述机器可读存储介质包括但不限于相变内存(相变随机存取存储器的简称，Phase Change Random Access Memory，PRAM，亦称为RCM/PCRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体(Flash Memory)或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备等各种可以存储程序代码的介质。

以上结合附图详细描述了本发明的优选实施方式，但是，本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种简单变型，这些简单变型均属于本发明的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。

此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

Claims (21)

1.一种业务逻辑组件的建立方法，其特征在于，该建立方法包括：

提取页面中的业务逻辑；

建立关于所述业务逻辑的业务流程函数组件，其中所述业务流程函数组件为纯函数组件；以及

在所述业务流程函数组件中预留用于与第一用户界面UI组件和/或业务组件连接的第一槽位，以形成第一业务逻辑组件，

其中，所述业务组件由第二业务逻辑组件通过该第二业务逻辑组件的第二槽位连接第二用户界面UI组件组成。

2.根据权利要求1所述的业务逻辑组件的建立方法，其特征在于，所述在所述业务流程函数组件中预留用于与第一用户界面UI组件和/或业务组件连接的第一槽位包括：通过renderprops技术在所述业务流程函数组件中预留所述第一槽位。

3.一种业务组件的建立方法，其特征在于，该建立方法包括：

响应于业务场景的需求，调用与所述需求相对应的通过根据权利要求1或2所述的业务逻辑组件的建立方法建立的业务逻辑组件及用户界面UI组件和/或业务组件；以及

通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述用户界面UI组件和/或所述业务组件连接。

4.根据权利要求3所述的业务组件的建立方法，其特征在于，在所述用户界面UI组件为父子组件的情况下，该建立方法还包括：

通过工具函数接收第一参数与第二参数，所述第一参数对应于父组件，所述第二参数对应于子组件；以及

通过所述业务逻辑组件中的槽位将所述业务逻辑组件与所述父组件及所述子组件连接。

5.根据权利要求3所述的业务组件的建立方法，其特征在于，该建立方法还包括：

通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面UI组件和/或所述业务组件。

6.根据权利要求5所述的业务组件的建立方法，其特征在于，在所述业务场景的需求为更新版本的情况下，所述通过所述业务逻辑组件中的槽位将与该需求对应的业务数据及业务流程函数传递给所述用户界面UI组件和/或所述业务组件包括：

通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面UI组件和/或业务组件。

7.根据权利要求6所述的业务组件的建立方法，其特征在于，在执行所述通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面UI组件和/或业务组件的步骤的同时或之后，所述建立方法还包括：

通过所述槽位将更新前的原版本的业务数据与业务流程函数传递给与所述原版本相对应的用户界面UI组件和/或业务组件。

8.一种基于模板生成页面的方法，其特征在于，所述方法包括：

基于所述模板所设定的顺序规则，获取所述页面所需的多个业务组件的信息；

根据权利要求3-7中任一项权利要求所述的业务组件的建立方法及所述多个业务组件的信息，建立所述多个业务组件；以及

基于所述模板所设定的结构布局，调整所述多个业务组件的位置，以生成所述页面。

9.根据权利要求8所述的基于模板生成页面的方法，其特征在于，所述获取所述页面所需的多个业务组件的信息包括：

基于所述模板所设定的顺序规则，获取与所述多个业务组件相对应的特征信息；以及

基于所述与所述多个业务组件相对应的特征信息及预先配置的特征信息与业务组件的信息之间的对应关系，解析所述页面所需的多个业务组件的信息。

10.根据权利要求9所述的基于模板生成页面的方法，其特征在于，所述预先配置的特征信息与业务组件的信息之间的对应关系以预设的配置数据结构方式存储在所述模板的配置文件中。

11.一种业务逻辑组件的建立系统，其特征在于，该建立系统包括：

提取装置，用于提取页面中的业务逻辑；

建立装置，用于建立关于所述业务逻辑的业务流程函数组件，其中所述业务流程函数组件为纯函数组件；以及

预留装置，用于在所述业务流程函数组件中预留用于与第一用户界面UI组件和/或业务组件连接的第一槽位，以形成第一业务逻辑组件，

其中，所述业务组件由第二业务逻辑组件通过该第二业务逻辑组件的第二槽位连接第二用户界面UI组件组成。

12.根据权利要求11所述的业务逻辑组件的建立系统，其特征在于，所述预留装置用于在所述业务流程函数组件中预留用于与第一用户界面UI组件和/或业务组件连接的第一槽位包括：通过renderprops技术在所述业务流程函数组件中预留所述第一槽位。

13.一种业务组件的建立系统，其特征在于，该建立系统包括：

调用装置，用于响应于业务场景的需求，调用与所述需求相对应的通过根据权利要求11或12所述的业务逻辑组件的建立系统建立的业务逻辑组件及用户界面UI组件和/或业务组件；以及

第一连接装置，用于通过所述业务逻辑组件中的槽位将该业务逻辑组件与所述用户界面UI组件和/或所述业务组件连接。

14.根据权利要求13所述的业务组件的建立系统，其特征在于，在所述用户界面UI组件为父子组件的情况下，该建立系统还包括：

接收装置，用于通过工具函数接收第一参数与第二参数，所述第一参数对应于父组件，所述第二参数对应于子组件；以及

第二连接装置，用于通过所述业务逻辑组件中的槽位将所述业务逻辑组件与所述父组件及所述子组件连接。

15.根据权利要求13所述的业务组件的建立系统，其特征在于，该建立系统还包括：

传递装置，用于通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面UI组件和/或所述业务组件。

16.根据权利要求15所述的业务组件的建立系统，其特征在于，在所述业务场景的需求为更新版本的情况下，所述传递装置用于通过所述业务逻辑组件中的槽位将与所述需求对应的业务数据及业务流程函数传递给所述用户界面UI组件和/或所述业务组件包括：

通过所述槽位将更新版本的业务数据与该更新版本的业务流程函数传递给与该更新版本相对应的用户界面UI组件和/或业务组件。

17.根据权利要求16所述的业务组件的建立系统，其特征在于，所述传递装置还用于，通过所述槽位将更新前的原版本的业务数据与业务流程函数传递给与所述原版本相对应的用户界面UI组件和/或业务组件。

18.一种基于模板生成页面的系统，其特征在于，所述系统包括：

信息获取装置，用于基于所述模板所设定的顺序规则，获取所述页面所需的多个业务组件的信息；

根据权利要求13-17中任一项权利要求所述的业务组件的建立系统，用于基于所述多个业务组件的信息，建立所述多个业务组件；以及

生成装置，用于基于所述模板所设定的结构布局，调整所述多个业务组件的位置，以生成所述页面。

19.根据权利要求18所述的基于模板生成页面的系统，其特征在于，所述信息获取装置包括：

特征信息获取模块，用于基于所述模板所设定的顺序规则，获取与所述多个业务组件相对应的特征信息；以及

信息解析模块，用于基于所述与所述多个业务组件相对应的特征信息及预先配置的特征信息与业务组件的信息之间的对应关系，解析所述页面所需的多个业务组件的信息。

20.根据权利要求19所述的基于模板生成页面的系统，其特征在于，所述预先配置的特征信息与业务组件的信息之间的对应关系以预设的配置数据结构方式存储在所述模板的配置文件中。

21.一种机器可读存储介质，其特征在于，所述机器可读存储介质上存储有指令，该指令用于使得机器执行根据权利要求1或2所述的业务逻辑组件的建立方法、根据权利要求3-7中任一项权利要求所述的业务组件的建立方法或根据权利要求8-10中任一项权利要求所述的基于模板生成页面的方法。

Images