CN107704243B - 前端界面的构建方法及装置、计算机设备和存储介质 - Google Patents

Abstract

本发明提出了一种Web***前端界面的构建方法，包括：接收界面构建请求，界面构建请求中包含待构建的Web***前端界面所属的业务领域标识；在领域模型组件集中筛选与业务领域标识匹配的目标领域模型组件；根据目标领域模型组件构建Web***前端界面。相应地，本发明还提出了Web***前端界面的构建装置、计算机设备和计算机可读存储介质。通过本发明的技术方案，可以实现对Web***前端界面的智能组装构建，以灵活快速地搭建出适用于不同业务领域的前端界面，缩短前端界面的开发周期，从而提高Web***前端界面的开发效率。

Description

前端界面的构建方法及装置、计算机设备和存储介质

技术领域

本发明涉及前端界面开发技术领域，具体而言，涉及Web***前端界面的构建方法、Web***前端界面的构建装置、计算机设备和计算机可读存储介质。

背景技术

常见的Web(World Wide Web，全球广域网)***，其UI(User Interface，用户界面)前端(即前端界面)展现开发工作量巨大，且对开发人员的知识储配、开发技能要求很高：界面如何布局，控件如何选择，控件之间如何通信，前端数据模型如何和后端数据模型彼此识别，如何短时间内开发出多个页面等，都是需要开发人员解决的问题。

目前常见的Web UI开发过程，往往都是利用市面上已有的开源的框架，一个一个页面开发调试，既需要开发人员学习各种开源的前端技术，又需要开发人员学习各自领域的业务知识来完成UI开发；而当需要开发大量页面时，所需要的开发周期也相对较长。

因此，如何提升Web UI的开发效率，降低前端开发人员的技术入门门槛，以快速支撑越来越灵活、越来越复杂多变的Web UI开发要求，特别是如何针对不同的具体业务领域高效搭建Web UI已经成为亟待解决的技术问题。

发明内容

本发明正是基于上述问题，提出了一种新的技术方案，可以实现对Web***前端界面的智能组装构建，以灵活快速地搭建出适用于不同业务领域的前端界面，缩短前端界面的开发周期，从而提高Web***前端界面的开发效率。

有鉴于此，根据本发明的第一方面，提出了一种Web***前端界面的构建方法，包括：接收界面构建请求，界面构建请求中包含待构建的Web***前端界面所属的业务领域标识；在领域模型组件集中筛选与业务领域标识匹配的目标领域模型组件；根据目标领域模型组件构建Web***前端界面。

在该技术方案中，当根据用户的界面构建请求构建相应的Web***前端界面时，为了更加符合用户的具体业务要求，可以根据界面构建请求中业务领域标识在预先创建好的领域模型组件集中直接筛选获取能够直接用于构建该Web***前端界面的目标领域模型组件，以快速地通过智能筛选出的目标领域模型组件构建该Web***前端界面，其中业务领域标识为待构建的Web***前端界面所属的业务领域的标识信息以区分不同的前端界面搭建需求，即通过为不同业务领域常见的前端界面提供高度封装的领域模型组件，支撑各个业务领域的前端界面开发需求，可以大大提高Web***前端界面的开发效率，特别是能够为多页面、多人员、大团队快速开发Web***前端界面提供有利的支撑，缩短开发周期，且降低了前端开发人员的技术入门门槛。

在上述技术方案中，优选地，目标领域模型组件包括：领域DOM组件、业务数据模型和领域事件组件，其中，领域DOM组件中含有业务领域信息；以及根据目标领域模型组件构建Web***前端界面的步骤具体包括：根据领域DOM组件构建Web***前端界面对应的组成区域；根据业务数据模型构建Web***前端界面对应的用户界面视图；根据领域事件组件构建Web***前端界面对应的业务操作事件；对组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理以形成Web***前端界面。

在该技术方案中，预先创建的领域模型组件集中领域模型组件包括但不限于领域DOM组件、业务数据模型和领域事件组件，可以根据不同业务领域的具体业务需求预先构建不同的业务模型组件，以在构建对应业务领域的Web***前端界面时起到提高前端界面开发效率的作用；进而当根据界面构建请求筛选出相应的目标领域模型组件后，具体可以根据领域DOM组件构建与业务领域标识匹配的Web***前端界面的组成区域以及根据业务数据模型构建对应的用户界面视图，如此通过领域DOM组件和业务数据模型的相互配合可以实现对前端界面数据的展示和交互存储，同时根据领域事件组件可以构建Web***前端界面对应的业务操作事件，由于领域事件组件封装了面向业务领域开发人员的业务高级事件以及屏蔽了前端界面构建的底层细节技术级别低的原生事件，则更加利于开发人员高效地开发Web***前端界面，进一步地，对构建的组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理转换成Web***前端界面可识别的组件完成构建即可。

在上述任一技术方案中，优选地，Web***前端界面的构建方法在接收界面构建请求之前还包括：根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件，以及根据通用DOM组件构建领域DOM组件；根据基本组件集中包含的通用数据模型构建业务数据模型；根据基本控件集中包含的基本事件控件构建基本组件集中的通用事件组件，以及根据通用事件组件构建领域事件组件。

在该技术方案中，为了在接收到包含业务领域标识的界面构建请求能够快速构建符合用户具体业务需求的Web***前端界面，可以预先调用基本控件集中的基本DOM控件构建形成基本组件集中的通用DOM组件，进而通过调用DOM组件组装并融入业务领域信息构建形成领域模型组件集中的领域DOM组件，以及预先调用基本组件集中的通用数据模型构建形成领域模型组件集中的业务数据模型，预先调用基本控件集中的基本事件控件构建基本组件集中的通用事件组件，进而通过调用通用事件组件构建形成领域模型组件集中的领域事件组件，从而为智能高效地构建Web***前端界面提供有利的前提保障。

在上述任一技术方案中，优选地，Web***前端界面的构建方法还包括：根据界面构建请求调用基本控件集中的目标基本控件和/或基本组件集中的目标基本组件；根据目标领域模型组件、目标基本控件和/或目标基本组件构建Web***前端界面。

在该技术方案中，为了使Web***前端界面更加完善，符合用户的需求，除了根据目标领域模型组件构建该Web***前端界面，还可以根据界面构建请求自基本控件集和基本组件集中调用相应的底层控件、中层组件来完善该Web***前端界面，确保Web***前端界面的完整性和稳定性。

根据本发明的第二方面，提出了一种Web***前端界面的构建装置，包括：接收模块，用于接收界面构建请求，界面构建请求中包含待构建的Web***前端界面所属的业务领域标识；第一筛选模块，用于在领域模型组件集中筛选与业务领域标识匹配的目标领域模型组件；创建模块，用于根据目标领域模型组件构建Web***前端界面。

在该技术方案中，当根据用户的界面构建请求构建相应的Web***前端界面时，为了更加符合用户的具体业务要求，可以根据界面构建请求中业务领域标识在预先创建好的领域模型组件集中直接筛选获取能够直接用于构建该Web***前端界面的目标领域模型组件，以快速地通过智能筛选出的目标领域模型组件构建该Web***前端界面，其中业务领域标识为待构建的Web***前端界面所属的业务领域的标识信息以区分不同的前端界面搭建需求，即通过为不同业务领域常见的前端界面提供高度封装的领域模型组件，支撑各个业务领域的前端界面开发需求，可以大大提高Web***前端界面的开发效率，特别是能够为多页面、多人员、大团队快速开发Web***前端界面提供有利的支撑，缩短开发周期，且降低了前端开发人员的技术入门门槛。

在上述技术方案中，优选地，目标领域模型组件包括：领域DOM组件、业务数据模型和领域事件组件，其中，领域DOM组件中含有业务领域信息；以及创建模块具体用于：根据领域DOM组件构建Web***前端界面对应的组成区域；根据业务数据模型构建Web***前端界面对应的用户界面视图；根据领域事件组件构建Web***前端界面对应的业务操作事件；对组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理以形成Web***前端界面。

在该技术方案中，预先创建的领域模型组件集中领域模型组件包括但不限于领域DOM组件、业务数据模型和领域事件组件，可以根据不同业务领域的具体业务需求预先构建不同的业务模型组件，以在构建对应业务领域的Web***前端界面时起到提高前端界面开发效率的作用；进而当根据界面构建请求筛选出相应的目标领域模型组件后，具体可以根据领域DOM组件构建与业务领域标识匹配的Web***前端界面的组成区域以及根据业务数据模型构建对应的用户界面视图，如此通过领域DOM组件和业务数据模型的相互配合可以实现对前端界面数据的展示和交互存储，同时根据领域事件组件可以构建Web***前端界面对应的业务操作事件，由于领域事件组件封装了面向业务领域开发人员的业务高级事件以及屏蔽了前端界面构建的底层细节技术级别低的原生事件，则更加利于开发人员高效地开发Web***前端界面，进一步地，对构建的组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理转换成Web***前端界面可识别的组件完成构建即可。

在上述任一技术方案中，优选地，Web***前端界面的构建装置还包括：第一处理模块，用于在接收模块接收界面构建请求之前，根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件，以及根据通用DOM组件构建领域DOM组件；第二处理模块，用于在接收模块接收界面构建请求之前，根据基本组件集中包含的通用数据模型构建业务数据模型；第三处理模块，用于在接收模块接收界面构建请求之前，根据基本控件集中包含的基本事件控件构建基本组件集中的通用事件组件，以及根据通用事件组件构建领域事件组件。

在该技术方案中，为了在接收到包含业务领域标识的界面构建请求能够快速构建符合用户具体业务需求的Web***前端界面，可以预先调用基本控件集中的基本DOM控件构建形成基本组件集中的通用DOM组件，进而通过调用DOM组件组装并融入业务领域信息构建形成领域模型组件集中的领域DOM组件，以及预先调用基本组件集中的通用数据模型构建形成领域模型组件集中的业务数据模型，预先调用基本控件集中的基本事件控件构建基本组件集中的通用事件组件，进而通过调用通用事件组件构建形成领域模型组件集中的领域事件组件，从而为智能高效地构建Web***前端界面提供有利的前提保障。

在上述任一技术方案中，优选地，Web***前端界面的构建装置还包括：第二筛选模块，用于根据界面构建请求调用基本控件集中的目标基本控件和/或基本组件集中的目标基本组件；以及创建模块还用于：根据目标领域模型组件、目标基本控件和/或目标基本组件构建Web***前端界面。

在该技术方案中，为了使Web***前端界面更加完善，符合用户的需求，除了根据目标领域模型组件构建该Web***前端界面，还可以根据界面构建请求自基本控件集和基本组件集中调用相应的底层控件、中层组件来完善该Web***前端界面，确保Web***前端界面的完整性和稳定性。

根据本发明的第三方面，提出了一种计算机设备，计算机设备包括处理器，处理器用于执行存储器中存储的计算机程序时实现如上述第一方面的技术方案中任意一项所述方法的步骤。

根据本发明的第四方面，提出了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现如上述第一方面的技术方案中任意一项所述方法的步骤。

通过本发明的技术方案，可以实现对Web***前端界面的智能组装构建，以灵活快速地搭建出适用于不同业务领域的前端界面，缩短前端界面的开发周期，从而提高Web***前端界面的开发效率。

附图说明

图1示出了本发明第一实施例的Web***前端界面的构建方法的流程示意图；

图2示出了本发明实施例的根据目标领域模型组件构建Web***前端界面的方法流程示意图；

图3示出了本发明第二实施例的Web***前端界面的构建方法的流程示意图；

图4示出了本发明实施例的Web***前端界面构建***的组成示意图；

图5示出了图4所示的领域层的原理示意图；

图6示出了图4所示的Web***前端界面构建***的工作流程示意图；

图7示出了本发明具体实施例的Web***前端界面的构建方法的流程示意图；

图8示出了本发明实施例的Web***前端界面的构建装置的示意框图；

图9示出了本发明实施例的计算机设备的示意框图。

具体实施方式

为了可以更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

图1示出了本发明第一实施例的Web***前端界面的构建方法的流程示意图。

如图1所示，根据本发明第一实施例的Web***前端界面的构建方法，具体包括以下流程步骤：

步骤102，接收界面构建请求，界面构建请求中包含待构建的Web***前端界面所属的业务领域标识。

步骤104，在领域模型组件集中筛选与业务领域标识匹配的目标领域模型组件。

步骤106，根据目标领域模型组件构建Web***前端界面。

在该实施例中，当根据用户的界面构建请求构建相应的Web***前端界面时，为了更加符合用户的具体业务要求，可以根据界面构建请求中业务领域标识在预先创建好的领域模型组件集中直接筛选获取能够直接用于构建该Web***前端界面的目标领域模型组件，以快速地通过智能筛选出的目标领域模型组件构建该Web***前端界面，其中业务领域标识为待构建的Web***前端界面所属的业务领域的标识信息以区分不同的前端界面搭建需求，即通过为不同业务领域常见的前端界面提供高度封装的领域模型组件，支撑各个业务领域的前端界面开发需求，可以大大提高Web***前端界面的开发效率，特别是能够为多页面、多人员、大团队快速开发Web***前端界面提供有利的支撑，缩短开发周期，且降低了前端开发人员的技术入门门槛。

进一步地，在上述实施例中，目标领域模型组件包括：领域DOM组件、业务数据模型和领域事件组件，其中，领域DOM组件中含有业务领域信息。

可以理解的是，预先创建的领域模型组件集中领域模型组件包括但不限于领域DOM组件、业务数据模型和领域事件组件，可以根据不同业务领域的具体业务需求预先构建不同的业务模型组件，以在构建对应业务领域的Web***前端界面时起到提高前端界面开发效率的作用。

进一步地，在上述实施例中，步骤106可以具体执行为如图2所示的流程步骤，包括：

步骤1062，根据领域DOM组件构建Web***前端界面对应的组成区域。

步骤1064，根据业务数据模型构建Web***前端界面对应的用户界面视图。

步骤1066，根据领域事件组件构建Web***前端界面对应的业务操作事件

步骤1068，对组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理以形成Web***前端界面。

在该实施例中，预先创建的领域模型组件集中领域模型组件包括但不限于领域DOM组件、业务数据模型和领域事件组件，可以根据不同业务领域的具体业务需求预先构建不同的业务模型组件，以在构建对应业务领域的Web***前端界面时起到提高前端界面开发效率的作用；进而当根据界面构建请求筛选出相应的目标领域模型组件后，具体可以根据领域DOM组件构建与业务领域标识匹配的Web***前端界面的组成区域以及根据业务数据模型构建对应的用户界面视图，如此通过领域DOM组件和业务数据模型的相互配合可以实现对前端界面数据的展示和交互存储，同时根据领域事件组件可以构建Web***前端界面对应的业务操作事件，由于领域事件组件封装了面向业务领域开发人员的业务高级事件以及屏蔽了前端界面构建的底层细节技术级别低的原生事件，则更加利于开发人员高效地开发Web***前端界面，进一步地，对构建的组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理转换成Web***前端界面可识别的组件完成构建即可。

进一步地，在上述实施例中，Web***前端界面的构建方法在步骤102之前还包括：根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件，以及根据通用DOM组件构建领域DOM组件；根据基本组件集中包含的通用数据模型构建业务数据模型；根据基本控件集中包含的基本事件控件构建基本组件集中的通用事件组件，以及根据通用事件组件构建领域事件组件。

在该实施例中，为了在接收到包含业务领域标识的界面构建请求能够快速构建符合用户具体业务需求的Web***前端界面，可以预先调用基本控件集中的基本DOM控件构建形成基本组件集中的通用DOM组件，进而通过调用DOM组件组装并融入业务领域信息构建形成领域模型组件集中的领域DOM组件，以及预先调用基本组件集中的通用数据模型构建形成领域模型组件集中的业务数据模型，预先调用基本控件集中的基本事件控件构建基本组件集中的通用事件组件，进而通过调用通用事件组件构建形成领域模型组件集中的领域事件组件，从而为智能高效地构建Web***前端界面提供有利的前提保障。

进一步地，如图3所示，根据本发明第二实施例的Web***前端界面的构建方法，在该方法实施例中，步骤302和步骤304的内容与图1所示实施例中的步骤102和步骤104的内容基本相同，区别在于本实施例还包括以下流程步骤：

步骤306，根据界面构建请求调用基本控件集中的目标基本控件和/或基本组件集中的目标基本组件。

步骤308，根据目标领域模型组件、目标基本控件和/或目标基本组件构建Web***前端界面。

该实施例中提到的基本控件集、基本组件集与上述实施例中基本控件集、基本组件集相同；以及关于步骤308中根据目标领域模型组件构建Web***前端界面的内容可参照图2所示的步骤1062～步骤1068。

在该实施例中，为了使Web***前端界面更加完善，符合用户的需求，除了根据目标领域模型组件构建该Web***前端界面，还可以根据界面构建请求自基本控件集和基本组件集中调用相应的底层控件、中层组件来完善该Web***前端界面，确保Web***前端界面的完整性和稳定性。

下面结合图4至图7对本发明实施例的Web***前端界面构建方案进行具体说明。

如图4所示，根据本发明实施例的用于实现Web***前端界面构建的***包括：控件层(相当于基本控件集)、组件层(相当于基本组件集)、领域层(相当于领域模型组件集)、门面层。

其中控件层，负责具体UI零件的构建组装事件响应等；它是该构建***的最底层控件库，也是最精细的控件库，本层提供通用的控件接入接口，可以支撑各种自定义开发以及开源的各种控件。

组件层，由控件层通过控件总线组装而成，是更高级别的UI组件，内部包含多个控件层中的UI零件，对外提供统一的服务接口以读取和写入，同时组件内部有多个***，提供各种监听事件派发服务，用于组件之间的联动通信以及状态的广播发布。同时通过组件总线，各组件可以任意拔插组合来支撑更加灵活的UI构建，提供针对各个不同领域的通用组件服务。

领域层，是最高级别的组件区，也是该构建***的核心层，具体可以通过组件总线将各个组件拼装成领域组件，在拼装的同时通过领域模型的封装融入，使得领域组件具备独一无二的领域特性，针对具体的领域适用性更强，针对性也更强，更加高效的支撑具体某个具体领域的UI***搭建，比如集成封装ERP(Enterprise Resource Planning，企业资源计划)领域模型，对构建ERP领域的Web前端界面提供了高效强大的支撑，同时可以扩展支持其他领域的UI构建，只需编写相应的领域模型组件即可。

如图5所示，该领域层有一套通用的接口标准，用于定义领域层所需的DOM元素、事件响应、数据模型等，其内部最核心的三个装置，分别是：领域UI组装器，用于处理处理DOM元素的构建、布局样式等；领域事件包装器，用于封装高级别的业务事件，对应具体的业务要求；领域模型处理器，用于定义领域数据模型的结构，用于UI的数据展现和数据处理，是面向领域模型的整体数据处理和展示。比如，该领域层内部可以集成ERP领域模型，其他领域只需实现响应的接口即可增加领域层对其他领域的动态支持，从而使得该***有良好的扩展性。

门面层，是该构建***的对外提供服务接口层，从上到下依次支持控件层、组件层、领域层对外服务接口，前端界面开发者可以根据需要自主选择控件层或者组件层、领域模型层中的各个零部件进行前端UI的构建；可以同时支撑基本控件集的使用、领域通用组件UI的选配、以及更高级的基于领域模型的大型复杂UI的构建。

该Web***前端界面构建***构建前端界面的流程如图6所示，具体包括以下过程：

1.首先通过门面接口启动该构建***构建前端界面。

2.初始化门面配置组件，门面配置组件预处理UI构建请求。

3.门面选择器根据门面配置组件的设置自动选择领域层、组件层或者控件层组件进行自动化构建。

4.领域模型组件初始化，对领域DOM组件、领域数据模型、领域事件组件进行选择和预加载。

5.领域DOM组件负责领域级别DOM元素的构建，是更大粒度更高级的DOM层元素封装构建，本组件融入具体的领域知识信息，内部会通过低一层级的组件DOM元素来构建。

6.通用DOM组件没有携带具体领域信息，是一组通用的高内聚组件库，具有完整独立的生命周期，可以支撑各个领域的DOM组装要求，内部通过基本控件DOM组装支撑。

7.基本控件DOM是最小粒度的组件库，可以支持自定义控件、开源控件库，可以任意组装、拼接，以支撑上一级组件层的构建要求。

8.领域数据模型是高级别的业务数据模型，是UI视图对应的数据模型，由于融入了领域知识，使得该组件更容易让业务开发人员理解和使用，而不用关心其内部数据结构的构成。领域数据模型和领域DOM组件相互配合用于UI数据展示和交互存储。

9.通用组件数据模型用来支撑上一层的领域数据模型，其中未封装领域知识，是对控件组本身数据模型的封装。

10.领域事件组件封装了面向领域开发人员更高级别的事件，用于开发人员监听和实现，由于都是偏重于业务高级事件，开发人员更容易理解，同时屏蔽底层细节的低级别技术原生事件，更有利于业务开发人员高效开发。

11.通用事件组件提供跟业务无关的独立的组件事件模型，用于支撑上层领域事件模型，它反映了组件内部的状态变化，允许其他组件监听并相应状态变化。

12.基本控件事件是最底层的原生技术事件，是具体的HTML(Hyper Text Markup，超级文本标记语言)元素事件或者各种自定义控件提供的事件，又或者是开源框架提供的组件事件。

13.当领域DOM组件、领域数据模型、领域事件组件构建完成后，领域UI渲染器开始渲染DOM，初始化数据模型，完成UI前端的构建。

14.最终由门面层将构建的前端界面返回给开发者。

进一步地，可以结合图7所示的使用EPR卡片领域组件构建EPR卡片的过程说明本发明的方案，其中ERP卡片可以至ERP订单，构建过程具体可以包括以下过程：

1.首先通过门面接口启动该构建***构建ERP卡片的前端界面。

2.卡片组件配置信息构建：表头区、表体区、卡片按钮区、表体按钮区等。

3.卡片组件生成器根据卡片组件配置的设置自动选择领域层、组件层或者控件层组件进行自动化构建。

4.初始化卡片组件信息。

5.创建卡片表头、表体、按钮等组件。

6.通过单行编辑组件、多行编辑组件、按钮组组件创建表头、表体、按钮等组件。

7.通过输入控件、下拉控件、表格控件构建单行编辑组件、多行编辑组件、按钮组组件。

8.创建卡片数据模型，具体可以为主子数据模型。

9.通过二维表数据模型构建卡片数据模型。

10.创建卡片初始化事件、关闭事件、默认值事件、编辑前事件、编辑后事件等领域事件组件。

11.通过值改变事件、页面生命周期事件、行操作事件等基本事件组件构建上述领域事件组件。

12.通过Html5基本事件控件构建上述基本事件组件。

13.卡片组件UI渲染。

14.具体通过表头、表体、按钮、自定义区域渲染实现卡片组件UI渲染。

最终由门面层将卡片组件UI返回给开发者

图8示出了本发明实施例的Web***前端界面的构建装置的示意框图。

如图8所示，根据本发明实施例的Web***前端界面的构建装置80，包括：接收模块802、第一筛选模块804和创建模块806。

其中，接收模块802用于接收界面构建请求，界面构建请求中包含待构建的Web***前端界面所属的业务领域标识；第一筛选模块804用于在领域模型组件集中筛选与业务领域标识匹配的目标领域模型组件；创建模块806用于根据目标领域模型组件构建Web***前端界面。

在该实施例中，当根据用户的界面构建请求构建相应的Web***前端界面时，为了更加符合用户的具体业务要求，可以根据界面构建请求中业务领域标识在预先创建好的领域模型组件集中直接筛选获取能够直接用于构建该Web***前端界面的目标领域模型组件，以快速地通过智能筛选出的目标领域模型组件构建该Web***前端界面，其中业务领域标识为待构建的Web***前端界面所属的业务领域的标识信息以区分不同的前端界面搭建需求，即通过为不同业务领域常见的前端界面提供高度封装的领域模型组件，支撑各个业务领域的前端界面开发需求，可以大大提高Web***前端界面的开发效率，特别是能够为多页面、多人员、大团队快速开发Web***前端界面提供有利的支撑，缩短开发周期，且降低了前端开发人员的技术入门门槛。

进一步地，在上述实施例中，目标领域模型组件包括：领域DOM组件、业务数据模型和领域事件组件，其中，领域DOM组件中含有业务领域信息；以及创建模块806具体用于：根据领域DOM组件构建Web***前端界面对应的组成区域；根据业务数据模型构建Web***前端界面对应的用户界面视图；根据领域事件组件构建Web***前端界面对应的业务操作事件；对组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理以形成Web***前端界面。

在该实施例中，预先创建的领域模型组件集中领域模型组件包括但不限于领域DOM组件、业务数据模型和领域事件组件，可以根据不同业务领域的具体业务需求预先构建不同的业务模型组件，以在构建对应业务领域的Web***前端界面时起到提高前端界面开发效率的作用；进而当根据界面构建请求筛选出相应的目标领域模型组件后，具体可以根据领域DOM组件构建与业务领域标识匹配的Web***前端界面的组成区域以及根据业务数据模型构建对应的用户界面视图，如此通过领域DOM组件和业务数据模型的相互配合可以实现对前端界面数据的展示和交互存储，同时根据领域事件组件可以构建Web***前端界面对应的业务操作事件，由于领域事件组件封装了面向业务领域开发人员的业务高级事件以及屏蔽了前端界面构建的底层细节技术级别低的原生事件，则更加利于开发人员高效地开发Web***前端界面，进一步地，对构建的组成区域、用户界面视图和业务操作事件进行渲染处理和/或初始化处理转换成Web***前端界面可识别的组件完成构建即可。

进一步地，如图8所示，在上述实施例中，Web***前端界面的构建装置80还包括：第一处理模块808、第二处理模块810和第三处理模块812。

其中，第一处理模块808用于在接收模块802接收界面构建请求之前，根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件，以及根据通用DOM组件构建领域DOM组件；第二处理模块810用于在接收模块802接收界面构建请求之前，根据基本组件集中包含的通用数据模型构建业务数据模型；第三处理模块812用于在接收模块802接收界面构建请求之前，根据基本控件集中包含的基本事件控件构建基本组件集中的通用事件组件，以及根据通用事件组件构建领域事件组件。

在该实施例中，为了在接收到包含业务领域标识的界面构建请求能够快速构建符合用户具体业务需求的Web***前端界面，可以预先调用基本控件集中的基本DOM控件构建形成基本组件集中的通用DOM组件，进而通过调用DOM组件组装并融入业务领域信息构建形成领域模型组件集中的领域DOM组件，以及预先调用基本组件集中的通用数据模型构建形成领域模型组件集中的业务数据模型，预先调用基本控件集中的基本事件控件构建基本组件集中的通用事件组件，进而通过调用通用事件组件构建形成领域模型组件集中的领域事件组件，从而为智能高效地构建Web***前端界面提供有利的前提保障。

进一步地，如图8所示，在上述实施例中，Web***前端界面的构建装置80还包括：第二筛选模块814，用于根据界面构建请求调用基本控件集中的目标基本控件和/或基本组件集中的目标基本组件；以及创建模块806还用于：根据目标领域模型组件、目标基本控件和/或目标基本组件构建Web***前端界面。

在该实施例中，为了使Web***前端界面更加完善，符合用户的需求，除了根据目标领域模型组件构建该Web***前端界面，还可以根据界面构建请求自基本控件集和基本组件集中调用相应的底层控件、中层组件来完善该Web***前端界面，确保Web***前端界面的完整性和稳定性。

图9示出了本发明实施例的计算机设备的示意框图。

如图9所示，根据发明实施例的计算机设备90，包括存储器902、处理器904及存储在所述存储器902上并可在所述处理器904上运行的计算机程序，其中存储器902和处理器904之间可以通过总线连接，所述处理器904用于执行存储器902中存储的计算机程序时实现如上实施例所述的Web***前端界面的构建方法的步骤。

本发明的实施例的方法中的步骤可以根据实际需要进行顺序调整、合并和删减。

本发明的实施例的Web***前端界面的构建装置和计算机设备中的单元可以根据实际需要进行合并、划分和删减。

根据发明的实施例，提出了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上实施例所述的Web***前端界面的构建方法的步骤。

进一步地，本领域普通技术人员可以理解的是，上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质包括只读存储器(Read-Only Memory，ROM)、随机存储器(RandomAccess Memory，RAM)、可编程只读存储器(Programmable Read-only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、一次可编程只读存储器(One-time Programmable Read-Only Memory，OTPROM)、电子抹除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(Compact Disc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。

进一步地，上述计算机设备可以为服务器。

以上结合附图详细说明了本发明的技术方案，通过本发明的技术方案，可以实现对Web***前端界面的智能组装构建，以灵活快速地搭建出适用于不同业务领域的前端界面，缩短前端界面的开发周期，从而提高Web***前端界面的开发效率。

在本发明的实施例中，术语“第一”、“第二”和“第三”仅用于描述的目的，而不能理解为指示或暗示相对重要性，对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明实施例中的具体含义。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种Web***前端界面的构建方法，其特征在于，包括：

接收界面构建请求，所述界面构建请求中包含待构建的Web***前端界面所属的业务领域标识；

在领域模型组件集中筛选与所述业务领域标识匹配的目标领域模型组件；

根据所述目标领域模型组件构建所述Web***前端界面；

所述目标领域模型组件包括：领域DOM组件、业务数据模型和领域事件组件；

在所述接收界面构建请求之前还包括：

根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件，以及根据所述通用DOM组件构建所述领域DOM组件；

根据所述界面构建请求调用所述基本控件集中的目标基本控件和/或所述基本组件集中的目标基本组件；

根据所述目标领域模型组件、所述目标基本控件和/或所述目标基本组件构建所述Web***前端界面。

2.根据权利要求1所述的Web***前端界面的构建方法，其特征在于，所述领域DOM组件中含有业务领域信息；以及

所述根据所述目标领域模型组件构建所述Web***前端界面的步骤具体包括：

根据所述领域DOM组件构建所述Web***前端界面对应的组成区域；

根据所述业务数据模型构建所述Web***前端界面对应的用户界面视图；

根据所述领域事件组件构建所述Web***前端界面对应的业务操作事件；

对所述组成区域、所述用户界面视图和所述业务操作事件进行渲染处理和/或初始化处理以形成所述Web***前端界面。

3.根据权利要求2所述的Web***前端界面的构建方法，其特征在于，在所述接收界面构建请求之前还包括：

根据所述基本组件集中包含的通用数据模型构建所述业务数据模型；

根据所述基本控件集中包含的基本事件控件构建所述基本组件集中的通用事件组件，以及根据所述通用事件组件构建所述领域事件组件。

4.一种Web***前端界面的构建装置，其特征在于，包括：

接收模块，用于接收界面构建请求，所述界面构建请求中包含待构建的Web***前端界面所属的业务领域标识；

第一筛选模块，用于在领域模型组件集中筛选与所述业务领域标识匹配的目标领域模型组件；

创建模块，用于根据所述目标领域模型组件构建所述Web***前端界面；

所述目标领域模型组件包括：领域DOM组件、业务数据模型和领域事件组件；

第一处理模块，用于在所述接收模块接收界面构建请求之前，根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件，以及根据所述通用DOM组件构建所述领域DOM组件；

第二筛选模块，用于根据所述界面构建请求调用所述基本控件集中的目标基本控件和/或所述基本组件集中的目标基本组件；以及

所述创建模块还用于：根据所述目标领域模型组件、所述目标基本控件和/或所述目标基本组件构建所述Web***前端界面。

5.根据权利要求4所述的Web***前端界面的构建装置，其特征在于，所述领域DOM组件中含有业务领域信息；以及

所述创建模块具体用于：

根据所述领域DOM组件构建所述Web***前端界面对应的组成区域；

根据所述业务数据模型构建所述Web***前端界面对应的用户界面视图；

根据所述领域事件组件构建所述Web***前端界面对应的业务操作事件；

对所述组成区域、所述用户界面视图和所述业务操作事件进行渲染处理和/或初始化处理以形成所述Web***前端界面。

6.根据权利要求5所述的Web***前端界面的构建装置，其特征在于，还包括：

第二处理模块，用于在所述接收模块接收界面构建请求之前，根据所述基本组件集中包含的通用数据模型构建所述业务数据模型；

第三处理模块，用于在所述接收模块接收界面构建请求之前，根据所述基本控件集中包含的基本事件控件构建所述基本组件集中的通用事件组件，以及根据所述通用事件组件构建所述领域事件组件。

7.一种计算机设备，其特征在于，所述计算机设备包括处理器，所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1至3中任意一项所述方法的步骤。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至3中任意一项所述方法的步骤。

Images