CN107704243A - 前端界面的构建方法及装置、计算机设备和存储介质 - Google Patents
前端界面的构建方法及装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN107704243A CN107704243A CN201710975668.1A CN201710975668A CN107704243A CN 107704243 A CN107704243 A CN 107704243A CN 201710975668 A CN201710975668 A CN 201710975668A CN 107704243 A CN107704243 A CN 107704243A
- Authority
- CN
- China
- Prior art keywords
- end interface
- web system
- component
- system front
- interface
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
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 (10)
1.一种Web系统前端界面的构建方法,其特征在于,包括:
接收界面构建请求,所述界面构建请求中包含待构建的Web系统前端界面所属的业务领域标识;
在领域模型组件集中筛选与所述业务领域标识匹配的目标领域模型组件;
根据所述目标领域模型组件构建所述Web系统前端界面。
2.根据权利要求1所述的Web系统前端界面的构建方法,其特征在于,所述目标领域模型组件包括:领域DOM组件、业务数据模型和领域事件组件,其中,所述领域DOM组件中含有业务领域信息;以及
所述根据所述目标领域模型组件构建所述Web系统前端界面的步骤具体包括:
根据所述领域DOM组件构建所述Web系统前端界面对应的组成区域;
根据所述业务数据模型构建所述Web系统前端界面对应的用户界面视图;
根据所述领域事件组件构建所述Web系统前端界面对应的业务操作事件;
对所述组成区域、所述用户界面视图和所述业务操作事件进行渲染处理和/或初始化处理以形成所述Web系统前端界面。
3.根据权利要求2所述的Web系统前端界面的构建方法,其特征在于,在所述接收界面构建请求之前还包括:
根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件,以及根据所述通用DOM组件构建所述领域DOM组件;
根据所述基本组件集中包含的通用数据模型构建所述业务数据模型;
根据所述基本控件集中包含的基本事件控件构建所述基本组件集中的通用事件组件,以及根据所述通用事件组件构建所述领域事件组件。
4.根据权利要求3所述的Web系统前端界面的构建方法,其特征在于,还包括:
根据所述界面构建请求调用所述基本控件集中的目标基本控件和/或所述基本组件集中的目标基本组件;
根据所述目标领域模型组件、所述目标基本控件和/或所述目标基本组件构建所述Web系统前端界面。
5.一种Web系统前端界面的构建装置,其特征在于,包括:
接收模块,用于接收界面构建请求,所述界面构建请求中包含待构建的Web系统前端界面所属的业务领域标识;
第一筛选模块,用于在领域模型组件集中筛选与所述业务领域标识匹配的目标领域模型组件;
创建模块,用于根据所述目标领域模型组件构建所述Web系统前端界面。
6.根据权利要求5所述的Web系统前端界面的构建装置,其特征在于,所述目标领域模型组件包括:领域DOM组件、业务数据模型和领域事件组件,其中,所述领域DOM组件中含有业务领域信息;以及
所述创建模块具体用于:
根据所述领域DOM组件构建所述Web系统前端界面对应的组成区域;
根据所述业务数据模型构建所述Web系统前端界面对应的用户界面视图;
根据所述领域事件组件构建所述Web系统前端界面对应的业务操作事件;
对所述组成区域、所述用户界面视图和所述业务操作事件进行渲染处理和/或初始化处理以形成所述Web系统前端界面。
7.根据权利要求6所述的Web系统前端界面的构建装置,其特征在于,还包括:
第一处理模块,用于在所述接收模块接收界面构建请求之前,根据基本控件集中包含的基本DOM控件构建基本组件集中的通用DOM组件,以及根据所述通用DOM组件构建所述领域DOM组件;
第二处理模块,用于在所述接收模块接收界面构建请求之前,根据所述基本组件集中包含的通用数据模型构建所述业务数据模型;
第三处理模块,用于在所述接收模块接收界面构建请求之前,根据所述基本控件集中包含的基本事件控件构建所述基本组件集中的通用事件组件,以及根据所述通用事件组件构建所述领域事件组件。
8.根据权利要求7所述的Web系统前端界面的构建装置,其特征在于,还包括:
第二筛选模块,用于根据所述界面构建请求调用所述基本控件集中的目标基本控件和/或所述基本组件集中的目标基本组件;以及
所述创建模块还用于:根据所述目标领域模型组件、所述目标基本控件和/或所述目标基本组件构建所述Web系统前端界面。
9.一种计算机设备,其特征在于,所述计算机设备包括处理器,所述处理器用于执行存储器中存储的计算机程序时实现如权利要求1至4中任意一项所述方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至4中任意一项所述方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710975668.1A CN107704243B (zh) | 2017-10-19 | 2017-10-19 | 前端界面的构建方法及装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710975668.1A CN107704243B (zh) | 2017-10-19 | 2017-10-19 | 前端界面的构建方法及装置、计算机设备和存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN107704243A true CN107704243A (zh) | 2018-02-16 |
CN107704243B CN107704243B (zh) | 2020-12-01 |
Family
ID=61181758
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710975668.1A Active CN107704243B (zh) | 2017-10-19 | 2017-10-19 | 前端界面的构建方法及装置、计算机设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN107704243B (zh) |
Cited By (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108415704A (zh) * | 2018-02-26 | 2018-08-17 | 深圳市富途网络科技有限公司 | 一种基于云同步的可定制卡片式ui框架设计方法 |
CN108762729A (zh) * | 2018-05-07 | 2018-11-06 | 北京五八信息技术有限公司 | 一种页面构建的方法、装置、计算机设备及存储介质 |
CN109445783A (zh) * | 2018-09-25 | 2019-03-08 | 广州城市信息研究所有限公司 | 由服务驱动的动态配置应用的构建方法及装置 |
CN110362309A (zh) * | 2019-07-23 | 2019-10-22 | 深圳前海微众银行股份有限公司 | 前端项目开发方法、装置、设备及计算机可读存储介质 |
CN110413272A (zh) * | 2019-07-30 | 2019-11-05 | 广州市百果园信息技术有限公司 | 前端项目构建方法、装置、存储介质及设备 |
CN111078337A (zh) * | 2019-11-27 | 2020-04-28 | 用友网络科技股份有限公司 | 样式调整方法、系统及计算机可读存储介质 |
CN111381899A (zh) * | 2020-02-21 | 2020-07-07 | 泰康保险集团股份有限公司 | 用于开发目标系统的方法和装置 |
CN111651147A (zh) * | 2020-05-31 | 2020-09-11 | 四川亨通网智科技有限公司 | 一种系统快速搭建组件 |
CN111880860A (zh) * | 2020-07-28 | 2020-11-03 | 北京浪潮数据技术有限公司 | 一种业务处理方法、装置及相关设备 |
CN113094050A (zh) * | 2021-05-10 | 2021-07-09 | 中国工商银行股份有限公司 | 基于业务架构的前端界面生成方法、装置、系统及介质 |
CN113342337A (zh) * | 2021-05-28 | 2021-09-03 | 北京达佳互联信息技术有限公司 | 界面处理方法及装置、计算机可读存储介质和处理器 |
CN113590111A (zh) * | 2021-07-19 | 2021-11-02 | 郭睿 | 一种基于卡片组件的高可配置的低代码开发平台的实现方法 |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1794169A (zh) * | 2005-12-29 | 2006-06-28 | 吉林大学 | 框架定制的模型驱动软件生成方法 |
CN101488086A (zh) * | 2008-12-23 | 2009-07-22 | 北京中企开源信息技术有限公司 | 一种基于领域模型的软件生成方法及装置 |
EP2112593A1 (en) * | 2008-04-25 | 2009-10-28 | Facton GmbH | Domain model concept for developing computer applications |
CN103744651A (zh) * | 2013-12-20 | 2014-04-23 | 柳州职业技术学院 | 一种面向业务需求的业务处理模型自动生成方法 |
CN105022615A (zh) * | 2014-04-21 | 2015-11-04 | 大唐软件技术股份有限公司 | 一种界面的生成方法和系统 |
CN106569800A (zh) * | 2016-10-17 | 2017-04-19 | 北京小米移动软件有限公司 | 前端界面生成方法及装置 |
CN106682120A (zh) * | 2016-12-09 | 2017-05-17 | 北京深思数盾科技股份有限公司 | 一种页面生成方法及系统 |
CN106815016A (zh) * | 2016-12-23 | 2017-06-09 | 四川大学 | 一种基于领域驱动设计的mvvm设计模型 |
CN106980508A (zh) * | 2017-04-01 | 2017-07-25 | 百度在线网络技术(北京)有限公司 | 用于生成页面的方法和装置 |
CN107015791A (zh) * | 2016-10-28 | 2017-08-04 | 阿里巴巴集团控股有限公司 | 一种生成图表组件系统的处理方法、装置及系统 |
-
2017
- 2017-10-19 CN CN201710975668.1A patent/CN107704243B/zh active Active
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN1794169A (zh) * | 2005-12-29 | 2006-06-28 | 吉林大学 | 框架定制的模型驱动软件生成方法 |
EP2112593A1 (en) * | 2008-04-25 | 2009-10-28 | Facton GmbH | Domain model concept for developing computer applications |
CN101488086A (zh) * | 2008-12-23 | 2009-07-22 | 北京中企开源信息技术有限公司 | 一种基于领域模型的软件生成方法及装置 |
CN103744651A (zh) * | 2013-12-20 | 2014-04-23 | 柳州职业技术学院 | 一种面向业务需求的业务处理模型自动生成方法 |
CN105022615A (zh) * | 2014-04-21 | 2015-11-04 | 大唐软件技术股份有限公司 | 一种界面的生成方法和系统 |
CN106569800A (zh) * | 2016-10-17 | 2017-04-19 | 北京小米移动软件有限公司 | 前端界面生成方法及装置 |
CN107015791A (zh) * | 2016-10-28 | 2017-08-04 | 阿里巴巴集团控股有限公司 | 一种生成图表组件系统的处理方法、装置及系统 |
CN106682120A (zh) * | 2016-12-09 | 2017-05-17 | 北京深思数盾科技股份有限公司 | 一种页面生成方法及系统 |
CN106815016A (zh) * | 2016-12-23 | 2017-06-09 | 四川大学 | 一种基于领域驱动设计的mvvm设计模型 |
CN106980508A (zh) * | 2017-04-01 | 2017-07-25 | 百度在线网络技术(北京)有限公司 | 用于生成页面的方法和装置 |
Non-Patent Citations (2)
Title |
---|
潘杰: "基于XML及组件的Web界面柔性技术的研究与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
阙正宇: "软件界面动态生成及可视化调整的设计与实现", 《微机发展 软件技术》 * |
Cited By (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108415704A (zh) * | 2018-02-26 | 2018-08-17 | 深圳市富途网络科技有限公司 | 一种基于云同步的可定制卡片式ui框架设计方法 |
CN108762729A (zh) * | 2018-05-07 | 2018-11-06 | 北京五八信息技术有限公司 | 一种页面构建的方法、装置、计算机设备及存储介质 |
CN109445783A (zh) * | 2018-09-25 | 2019-03-08 | 广州城市信息研究所有限公司 | 由服务驱动的动态配置应用的构建方法及装置 |
CN110362309A (zh) * | 2019-07-23 | 2019-10-22 | 深圳前海微众银行股份有限公司 | 前端项目开发方法、装置、设备及计算机可读存储介质 |
CN110362309B (zh) * | 2019-07-23 | 2023-09-08 | 深圳前海微众银行股份有限公司 | 前端项目开发方法、装置、设备及计算机可读存储介质 |
CN110413272A (zh) * | 2019-07-30 | 2019-11-05 | 广州市百果园信息技术有限公司 | 前端项目构建方法、装置、存储介质及设备 |
CN110413272B (zh) * | 2019-07-30 | 2023-10-13 | 广州市百果园信息技术有限公司 | 前端项目构建方法、装置、存储介质及设备 |
CN111078337B (zh) * | 2019-11-27 | 2023-08-29 | 用友网络科技股份有限公司 | 样式调整方法、系统及计算机可读存储介质 |
CN111078337A (zh) * | 2019-11-27 | 2020-04-28 | 用友网络科技股份有限公司 | 样式调整方法、系统及计算机可读存储介质 |
CN111381899A (zh) * | 2020-02-21 | 2020-07-07 | 泰康保险集团股份有限公司 | 用于开发目标系统的方法和装置 |
CN111651147A (zh) * | 2020-05-31 | 2020-09-11 | 四川亨通网智科技有限公司 | 一种系统快速搭建组件 |
CN111880860A (zh) * | 2020-07-28 | 2020-11-03 | 北京浪潮数据技术有限公司 | 一种业务处理方法、装置及相关设备 |
CN113094050A (zh) * | 2021-05-10 | 2021-07-09 | 中国工商银行股份有限公司 | 基于业务架构的前端界面生成方法、装置、系统及介质 |
CN113342337A (zh) * | 2021-05-28 | 2021-09-03 | 北京达佳互联信息技术有限公司 | 界面处理方法及装置、计算机可读存储介质和处理器 |
CN113590111A (zh) * | 2021-07-19 | 2021-11-02 | 郭睿 | 一种基于卡片组件的高可配置的低代码开发平台的实现方法 |
Also Published As
Publication number | Publication date |
---|---|
CN107704243B (zh) | 2020-12-01 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107704243A (zh) | 前端界面的构建方法及装置、计算机设备和存储介质 | |
US9336267B2 (en) | Method and system for navigation and visualization of data in relational and/or multidimensional databases | |
CN100472434C (zh) | 智能ui记录和重放结构 | |
US7644390B2 (en) | Design tool and methodology for enterprise software applications | |
US8694953B2 (en) | Tool and methodology for enterprise software applications | |
CN108345456A (zh) | 页面代码生成方法、装置、计算机设备和存储介质 | |
CN109597954A (zh) | 数据项展示方法、装置、计算设备和介质 | |
CN105700888A (zh) | 一种基于jbpm工作流引擎的可视化快速开发平台 | |
CN110807015A (zh) | 一种大数据资产价值交付管理方法及系统 | |
CN103150165A (zh) | 用于构建户外数据采集程序的框架以及程序构建方法 | |
CN101799754A (zh) | 一种web应用开发方法及系统 | |
US6959429B1 (en) | System for developing data collection software applications | |
CN104182225B (zh) | 一种通用移动信息系统适配方法与装置 | |
US9501462B2 (en) | Form object having form representation and grid representation of form | |
CN116627418B (zh) | 一种基于递归算法的多级表单界面可视化生成方法及装置 | |
CN115840567A (zh) | 一种应用编辑方法及相关设备 | |
CN116401407A (zh) | 思维导图的节点属性配置方法、装置、设备和存储介质 | |
CN116383542A (zh) | 页面生成方法、装置、电子设备及存储介质 | |
DE69921305T2 (de) | Prozessteuerung mit activex | |
CN109344165A (zh) | 一种查询方法及存储设备 | |
JP5708715B2 (ja) | ワークフロー管理サーバおよびワークフロー管理サーバの制御方法およびプログラムおよび記録媒体 | |
CN105718434A (zh) | 一种自然语言公式编辑方法和系统 | |
US20060010081A1 (en) | Automated system for assisting the architectural process | |
CN106156352A (zh) | 可视化内容管理方法和系统 | |
CN110531972A (zh) | 资源编排资源属性的编辑方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |