CN112130856A - 强扩展性的前端可视化界面生成方法、系统、介质及终端 - Google Patents
强扩展性的前端可视化界面生成方法、系统、介质及终端 Download PDFInfo
- Publication number
- CN112130856A CN112130856A CN202011053184.XA CN202011053184A CN112130856A CN 112130856 A CN112130856 A CN 112130856A CN 202011053184 A CN202011053184 A CN 202011053184A CN 112130856 A CN112130856 A CN 112130856A
- Authority
- CN
- China
- Prior art keywords
- component
- standard component
- standard
- visual interface
- tree
- 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
- 238000000034 method Methods 0.000 title claims abstract description 36
- 230000000007 visual effect Effects 0.000 title claims abstract description 36
- 238000013507 mapping Methods 0.000 claims abstract description 13
- 238000004806 packaging method and process Methods 0.000 claims abstract description 11
- 230000006870 function Effects 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 14
- 238000005516 engineering process Methods 0.000 claims description 13
- 238000005538 encapsulation Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 8
- 230000003993 interaction Effects 0.000 abstract description 4
- 238000012800 visualization Methods 0.000 abstract description 4
- 238000004891 communication Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000037237 body shape Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Images
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供一种强扩展性的前端可视化界面生成方法、系统、介质及终端,方法包括预先建立标准组件库,通过设计器从标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;将设计器中的组件树映射为预设格式的描述文件;通过对非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;通过编译器将预设格式的描述文件编译成组件树的源代码,完成前端可视化界面生成;本发明通过将非标组件封装成标准组件模板的方式,使用同样的可视化工具生成页面描述文件,再将页面描述文件反向生成组件树源代码,供二次开发与扩展,实现组件间的交互、实现具体非标组件UI及逻辑开发。
Description
技术领域
本发明涉及计算机领域,尤其涉及一种强扩展性的前端可视化界面生成方法、系统、介质及终端。
背景技术
可视化技术可以使人能够通过图形中直接对具有形体的信息进行操作,和计算机直接交流,针对目前的前端可视化界面生成方法,目前有两种比较主流的方式,一种是通过纯手工的方式进行代码堆砌,形成页面;另一种是通过一系列工具和方法和内置组件再加上人工可视化界面配置的方式生成页面。这两种方式各有优劣,第一种确实足够灵活,扩展性强,但缺乏效率;第二种效率足够高,但是耦合性强,不能够很好的进行扩展。二者在各自需求的场景下都能很好的发挥作用。
但是,在大多数场景中,通过第二种方案无法实现完全覆盖,内置组件无法考虑完整所有场景的需要,一旦有一个非标组件出现时,就只能全盘采用第一种方式,大大降低了效率。因此,需要一种新的解决方案,以提高通用性,能适应更多的业务场景需要。
发明内容
鉴于以上所述现有技术的缺点,本发明提供一种强扩展性的前端可视化界面生成方法、系统、介质及终端,以解决上述技术问题。
本发明提供的强扩展性的前端可视化界面生成方法,包括:
预先建立标准组件库,所述标准组件库包括多种通用组件;
设置设计器,通过所述设计器从所述标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;
将设计器中的组件树映射为预设格式的描述文件;
获取非标组件,通过对所述非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;
设置编译器,通过所述编译器将所述预设格式的描述文件编译成组件树的源代码;
根据所述组件树的源代码,完成前端可视化界面生成。
可选的,对所述标准组件库中的每个标准组件注入事件句柄,通过所述事件句柄与其他组件进行通信。
可选的,定义非标组件的组件名和扩展插槽,组成标准组件外壳;
在所述标准组件外壳内部注入事件句柄,并将其作为扩展插槽函数的参数注入,与其他组件进行通信;
扩展插槽函数产出并返回DOM节点;
在组件内部将扩展插槽函数产出并返回的DOM节点挂载到标准组件外壳的根节点下,形成所述标准组件模板;
通过实例化所述标准组件模板,获取标准组件。
可选的,通过所述扩展插槽函数实现非标准组件的特殊UI,所述事件句柄通过扩展插槽函数的输入参数注入扩展插槽。
可选的,根据整体技术栈的不同,对预设格式的描述文件的组件树进行遍历,并将其解释为对应的技术栈下的组件代码。
可选的,预先建立标准组件库中每个组件的代码块和组件名之间的映射关系;
遍历整个组件树,当每步进到一个组件节点时,通过组件名映射将对应代码块安装在该节点上;
当遍历完成时,完成所有源代码生成。
本发明还提供一种强扩展性的前端可视化界面生成系统,包括:
标准组件库,所述标准组件库包括多种通用组件;
设计器,用于从所述标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;
将设计器中的组件树映射为预设格式的描述文件;
非标准组件封装模块,用于获取非标组件,通过对所述非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;
编译器,用于通过所述编译器将所述预设格式的描述文件编译成组件树的源代码;
可视化界面生成模块,用于根据所述组件树的源代码,完成前端可视化界面生成。
可选的,定义非标组件的组件名和扩展插槽,组成标准组件外壳;
在所述标准组件外壳内部注入事件句柄,并将其作为扩展插槽函数的参数注入,与其他组件进行通信;
扩展插槽函数产出并返回DOM节点;
在组件内部将扩展插槽函数产出并返回的DOM节点挂载到标准组件外壳的根节点下,形成所述标准组件模板;
通过实例化所述标准组件模板,获取标准组件。
本发明还提供一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述中任一项所述方法。
本发明还提供一种电子终端,包括:处理器及存储器;
所述存储器用于存储计算机程序,所述处理器用于执行所述存储器存储的计算机程序,以使所述终端执行如上述中任一项所述方法。
本发明的有益效果:本发明中的强扩展性的前端可视化界面生成方法、系统、介质及终端,通过将非标组件封装成标准组件模板的方式将非标组件与标准组件的用法统一起来,使用同样的可视化工具生成页面描述json文件,然后通过编译器将页面描述json文件反向生成组件树源代码,供开发人员进行二次开发与扩展,实现组件间的交互、实现具体非标组件UI及逻辑开发。
附图说明
图1是本发明实施例中强扩展性的前端可视化界面生成方法的流程示意图。
图2是本发明实施例中强扩展性的前端可视化界面生成方法中的设计器示意图。
图3是本发明实施例中强扩展性的前端可视化界面生成方法中组件之间通信的示意图。
图4是本发明实施例中强扩展性的前端可视化界面生成方法的非标准组件的封装的流程示意图。
具体实施方式
以下通过特定的具体实例说明本发明的实施方式,本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用,本说明书中的各项细节也可以基于不同观点与应用,在没有背离本发明的精神下进行各种修饰或改变。需说明的是,在不冲突的情况下,以下实施例及实施例中的特征可以相互组合。
需要说明的是,以下实施例中所提供的图示仅以示意方式说明本发明的基本构想,遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制,其实际实施时各组件的型态、数量及比例可为一种随意的改变,且其组件布局型态也可能更为复杂。
在下文描述中,探讨了大量细节,以提供对本发明实施例的更透彻的解释,然而,对本领域技术人员来说,可以在没有这些具体细节的情况下实施本发明的实施例是显而易见的,在其他实施例中,以方框图的形式而不是以细节的形式来示出公知的结构和设备,以避免使本发明的实施例难以理解。
如图1所示,本实施例中的强扩展性的前端可视化界面生成方法,包括:
S1.预先建立标准组件库,标准组件库包括多种通用组件;
S2.设置设计器,通过所述设计器从标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;
S3.将设计器中的组件树映射为预设格式的描述文件;
S4.获取非标组件,通过对非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;
S5.设置编译器,通过所述编译器将预设格式的描述文件编译成组件树的源代码;
S6.根据所述组件树的源代码,完成前端可视化界面生成。
在本实施例中,在步骤S1中,首先建立一个标准组件库,包含业务中常见的通用组件,本实施例中的标准组件库是指由标准组件组合成的组件集合,支持独立发布和使用;标准组件是指包含UI层和控制层逻辑的可独立运作或与其他组件协同运作的代码集合,比如:文本输入、数字输入、车牌号输入、文件上传、标题展示、图片展示、车牌展示、列表展示、可编辑表格、下拉选择等常用UI组件。本实施例中的标准组件除了实现组件本身逻辑之外,还需要提供一个配套的属性配置器,主要用来规定组件可配置的属性以及配置方式。同时在其内部注入事件句柄,本实施例中的事件句柄是指组件用来向其它组件广播事件和接受其它组件广播事件的逻辑装置,方便组件通过事件中心与其他组件进行通信,如图3所示。
在本实施例中,在步骤S2中,实现一个设计器,能完成从标准组件库中选取组件并拖动添加到页面组件树的指定节点上并能够删除与移动,并且能对每一个目标组件设置其相关属性。鉴于组件的特性和使用场景,它们的属性并不完全相同,设计器属性设置面板需要根据不同类型的组件读取它们的属性并能有效的进行设置。可选的,本实施例中设计器的具体实现,可以基于html5拖放功能,将组件面板中的虚拟组件通过拖拽的方式放置在设计面板中,完成组件的实例化;然后再结合S1中对目标组件实现的属性配置器,可以对组件属性进行配置。设计器实现出来的最终效果如附图2所示。
在本实施例中,在步骤S3中,将设计器中的组件树映射为预设格式的描述文件。本实施例中通过设计器,读取页面上的组件树结构,生成页面描述的json(JavaScriptObject Notation,是一种轻量级的数据交互格式)文件,里面除了需要包含组件树结构的描述,还需要包含每个组件的属性描述。
在本实施例中,在步骤S4中,将非标组件封装成标准组件模板,指定组件名并保留扩展插槽。本实施例通过采用一个组件外壳来屏蔽非标组件与标准组件的差异性。该类组件需要具有两个基本属性:一个是组件名,一个是扩展插槽。根据这两个基本属性组件才能进行有效的二次开发。
如附图4所示,本实施例中的非标准组件的封装可以分为以下几步:
定义组件名,扩展插槽,组成标准组件外壳。
内部注入事件句柄,并将其作为扩展插槽函数的参数注入。
扩展插槽函数产出并返回DOM节点,包含UI层和控制层,让用户灵活的定义非标准组件UI以及与其他组件的通信。
组件内部将扩展插槽产出并返回的DOM节点挂载到标准组件外壳的根节点下,形成标准组件模板。
通过实例化标准组件模板,可以得到标准组件A,B,C等。
在本实施例中,通过这种方式,一方面,可以使得组件在UI方面具有足够扩展性,本实施例中的扩展插槽以函数的形式给出,返回值是一个DOM(Document Object Model,节点文档对象模型)节点。用户可以在内部实现非标准组件的特殊UI,扩展性得到了保证。另一方面,可以在保证扩展性的同时,兼顾组件之间的通信。参照标准组件的模式,向其内部注入事件句柄,事件句柄通过函数的入参注入扩展插槽,用户在实现UI的同时,可以通过拿到的事件句柄实现与其他组件的通信。
在本实施例中,在步骤S5中,通过编译器将预设格式的描述文件编译成组件树的源代码。本实施例中通过将组件树描述的json文件编译成组件树的源代码。编译器可以根据整体技术栈的不同,导出不同风格的代码,例如react、vue等。通过遍历json文件描述的组件树,将其解释成具体技术栈下的组件代码。不同的技术栈下对组件的写法有差异,通过预先获取各种技术栈的差异,实现多种技术栈下的编译器。
在本实施例中,预先为组件库中每个独立的组件编写好代码块,并且使用组件名在二者之间建立映射关系;遍历整棵组件树,每步进到一个组件节点,就通过组件名映射将对应代码块安装在该节点上。当遍历完成时,源代码便生成完毕。
在本实施例中,在步骤S6中,根据组件树的源代码,完成前端可视化界面生成。本实施例通过将编译好的组件树源代码导入项目工程并进行二次扩展功能开发。如果目标项目用的是react技术栈,就导出react风格的代码放入项目中;如果是vue技术栈,就导出vue风格的代码放入项目中,以此类推(基于步骤S5中实现的编译器,如果只实现了一种技术栈下的编译器,就只能导出一种风格的代码)。在获取到源代码之后,可以通过常规的开发方式进行二次开发:实现组件间的交互、实现具体非标组件UI及逻辑开发。
相应的,本实施例还提供一种强扩展性的前端可视化界面生成系统,包括:
标准组件库,所述标准组件库包括多种通用组件;
设计器,用于从所述标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;
将设计器中的组件树映射为预设格式的描述文件;
非标准组件封装模块,用于获取非标组件,通过对所述非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;
编译器,用于通过所述编译器将所述预设格式的描述文件编译成组件树的源代码;
可视化界面生成模块,用于根据所述组件树的源代码,完成前端可视化界面生成。
定义非标组件的组件名和扩展插槽,组成标准组件外壳;
在所述标准组件外壳内部注入事件句柄,并将其作为扩展插槽函数的参数注入,与其他组件进行通信;
扩展插槽函数产出并返回DOM节点;
在组件内部将扩展插槽函数产出并返回的DOM节点挂载到标准组件外壳的根节点下,形成所述标准组件模板;
通过实例化所述标准组件模板,获取标准组件,
本实施例中的强扩展性的前端可视化界面生成系统,通过上述方法,进行前端可视化界面生成。
本实施例还提供一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现本实施例中的任一项方法。
本实施例还提供一种电子终端,包括:处理器及存储器;
所述存储器用于存储计算机程序,所述处理器用于执行所述存储器存储的计算机程序,以使所述终端执行本实施例中任一项方法。
本实施例中的计算机可读存储介质,本领域普通技术人员可以理解:实现上述各方法实施例的全部或部分步骤可以通过计算机程序相关的硬件来完成。前述的计算机程序可以存储于一计算机可读存储介质中。该程序在执行时,执行包括上述各方法实施例的步骤;而前述的存储介质包括:ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
本实施例提供的电子终端,包括处理器、存储器、收发器和通信接口,存储器和通信接口与处理器和收发器连接并完成相互间的通信,存储器用于存储计算机程序,通信接口用于进行通信,处理器和收发器用于运行计算机程序,使电子终端执行如上方法的各个步骤。
在本实施例中,存储器可能包含随机存取存储器(Random Access Memory,简称RAM),也可能还包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。
上述的处理器可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital Signal Processing,简称DSP)、专用集成电路(Application SpecificIntegrated Circuit,简称ASIC)、现场可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本发明可用于众多通用或专用的计算系统环境或配置中。例如:个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。
本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
上述实施例仅示例性说明本发明的原理及其功效,而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下,对上述实施例进行修饰或改变。因此,但凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变,仍应由本发明的权利要求所涵盖。
Claims (10)
1.一种强扩展性的前端可视化界面生成方法,其特征在于,包括:
预先建立标准组件库,所述标准组件库包括多种通用组件;
设置设计器,通过所述设计器从所述标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;
将设计器中的组件树映射为预设格式的描述文件;
获取非标组件,通过对所述非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;
设置编译器,通过所述编译器将所述预设格式的描述文件编译成组件树的源代码;
根据所述组件树的源代码,完成前端可视化界面生成。
2.根据权利要求1所述的强扩展性的前端可视化界面生成方法,其特征在于,对所述标准组件库中的每个标准组件注入事件句柄,通过所述事件句柄与其他组件进行通信。
3.根据权利要求2所述的强扩展性的前端可视化界面生成方法,其特征在于,
定义非标组件的组件名和扩展插槽,组成标准组件外壳;
在所述标准组件外壳内部注入事件句柄,并将其作为扩展插槽函数的参数注入,与其他组件进行通信;
扩展插槽函数产出并返回DOM节点;
在组件内部将扩展插槽函数产出并返回的DOM节点挂载到标准组件外壳的根节点下,形成所述标准组件模板;
通过实例化所述标准组件模板,获取标准组件。
4.根据权利要求3所述的强扩展性的前端可视化界面生成方法,其特征在于,
通过所述扩展插槽函数实现非标准组件的特殊UI,所述事件句柄通过扩展插槽函数的输入参数注入扩展插槽。
5.根据权利要求1所述的强扩展性的前端可视化界面生成方法,其特征在于,根据整体技术栈的不同,对预设格式的描述文件的组件树进行遍历,并将其解释为对应的技术栈下的组件代码。
6.根据权利要求4所述的强扩展性的前端可视化界面生成方法,其特征在于,
预先建立标准组件库中每个组件的代码块和组件名之间的映射关系;
遍历整个组件树,当每步进到一个组件节点时,通过组件名映射将对应代码块安装在该节点上;
当遍历完成时,完成所有源代码生成。
7.一种强扩展性的前端可视化界面生成系统,其特征在于,包括:
标准组件库,所述标准组件库包括多种通用组件;
设计器,用于从所述标准组件库中选取组件并拖动添加到页面组件树的指定节点,并且对每一个目标组件设置相关属性;
将设计器中的组件树映射为预设格式的描述文件;
非标准组件封装模块,用于获取非标组件,通过对所述非标组件定义组件名和扩展插槽,组成标准组件外壳,进而形成标准组件模板,完成非标准组件的封装;
编译器,用于通过所述编译器将所述预设格式的描述文件编译成组件树的源代码;
可视化界面生成模块,用于根据所述组件树的源代码,完成前端可视化界面生成。
8.根据权利要求7所述的强扩展性的前端可视化界面生成系统,其特征在于,
定义非标组件的组件名和扩展插槽,组成标准组件外壳;
在所述标准组件外壳内部注入事件句柄,并将其作为扩展插槽函数的参数注入,与其他组件进行通信;
扩展插槽函数产出并返回DOM节点;
在组件内部将扩展插槽函数产出并返回的DOM节点挂载到标准组件外壳的根节点下,形成所述标准组件模板;
通过实例化所述标准组件模板,获取标准组件。
9.一种计算机可读存储介质,其上存储有计算机程序,其特征在于:所述计算机程序被处理器执行时实现权利要求1至6中任一项所述方法。
10.一种电子终端,其特征在于,包括:处理器及存储器;
所述存储器用于存储计算机程序,所述处理器用于执行所述存储器存储的计算机程序,以使所述终端执行如权利要求1至6中任一项所述方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011053184.XA CN112130856B (zh) | 2020-09-29 | 2020-09-29 | 强扩展性的前端可视化界面生成方法、系统、介质及终端 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011053184.XA CN112130856B (zh) | 2020-09-29 | 2020-09-29 | 强扩展性的前端可视化界面生成方法、系统、介质及终端 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112130856A true CN112130856A (zh) | 2020-12-25 |
CN112130856B CN112130856B (zh) | 2023-11-03 |
Family
ID=73843120
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011053184.XA Active CN112130856B (zh) | 2020-09-29 | 2020-09-29 | 强扩展性的前端可视化界面生成方法、系统、介质及终端 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112130856B (zh) |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113031947A (zh) * | 2021-03-05 | 2021-06-25 | 苏州帝博信息技术有限公司 | 在界面设计工具中使用的配置数据管理方法和装置 |
CN113126979A (zh) * | 2021-04-16 | 2021-07-16 | 多点(深圳)数字科技有限公司 | 一种脱离服务器可二次编程的可视化业务搭建系统 |
CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、系统及计算机可读存储介质 |
CN114035799A (zh) * | 2021-11-15 | 2022-02-11 | 上海闪马智能科技有限公司 | 一种网络文件编译方法、装置、存储介质及电子装置 |
CN114546568A (zh) * | 2022-02-25 | 2022-05-27 | 重庆紫光华山智安科技有限公司 | 页面元素拖放方法、装置、电子设备及存储介质 |
WO2022141724A1 (zh) * | 2020-12-31 | 2022-07-07 | 南威软件股份有限公司 | 基于 Vue 组件化的可视化配置渲染方法、系统、终端 |
CN115268861A (zh) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | 自定义组件的引入方法、系统、设备和存储介质 |
CN117573127A (zh) * | 2024-01-17 | 2024-02-20 | 中建三局信息科技有限公司 | 一种页面搭建方法、装置、电子设备及介质 |
Citations (18)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20030159129A1 (en) * | 2002-02-15 | 2003-08-21 | Tridium, Inc. | Component model for real time system control |
CN101526942A (zh) * | 2008-03-05 | 2009-09-09 | 徐邦勇 | 在线、实时及自动生成动态网页的组件实现技术 |
US20170091159A1 (en) * | 2015-09-25 | 2017-03-30 | Yahoo! Inc. | Programmatic native rendering of structured content |
CN107577515A (zh) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | 可视化组件的扩展方法、装置、电子设备及存储介质 |
CN107844299A (zh) * | 2017-12-01 | 2018-03-27 | 浪潮软件股份有限公司 | 一种Web应用开发工具的实现方法 |
CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
CN109325203A (zh) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | 一种自动化实现Web系统可视化复用的装置 |
US20190065155A1 (en) * | 2017-08-30 | 2019-02-28 | Salesforce.Com, Inc. | Base editor component in a web application builder framework |
CN109542417A (zh) * | 2018-11-20 | 2019-03-29 | 北京小米移动软件有限公司 | 一种dom渲染网页的方法、装置、终端和存储介质 |
CN110007917A (zh) * | 2019-03-08 | 2019-07-12 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
CN110442336A (zh) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | 一种网页开发方法及装置、存储介质及电子设备 |
CN110554874A (zh) * | 2019-09-12 | 2019-12-10 | 北京百度网讯科技有限公司 | 用于复用SaaS平台网页组件的方法和装置 |
CN110580174A (zh) * | 2018-06-11 | 2019-12-17 | 中国移动通信集团浙江有限公司 | 应用组件生成方法、服务器及终端 |
CN110708202A (zh) * | 2019-10-15 | 2020-01-17 | 深圳前海微众银行股份有限公司 | 插件节点的配置方法、装置、设备及存储介质 |
CN110955428A (zh) * | 2019-11-27 | 2020-04-03 | 北京奇艺世纪科技有限公司 | 一种页面显示方法、装置、电子设备及介质 |
US20200174800A1 (en) * | 2018-12-04 | 2020-06-04 | Sap Se | Web Component Design and Integration System |
CN111597484A (zh) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | 一种ui动态生成方法 |
CN111666526A (zh) * | 2020-06-17 | 2020-09-15 | 广州市百果园信息技术有限公司 | 页面生成方法、装置、设备及存储介质 |
-
2020
- 2020-09-29 CN CN202011053184.XA patent/CN112130856B/zh active Active
Patent Citations (18)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20030159129A1 (en) * | 2002-02-15 | 2003-08-21 | Tridium, Inc. | Component model for real time system control |
CN101526942A (zh) * | 2008-03-05 | 2009-09-09 | 徐邦勇 | 在线、实时及自动生成动态网页的组件实现技术 |
US20170091159A1 (en) * | 2015-09-25 | 2017-03-30 | Yahoo! Inc. | Programmatic native rendering of structured content |
US20190065155A1 (en) * | 2017-08-30 | 2019-02-28 | Salesforce.Com, Inc. | Base editor component in a web application builder framework |
CN107577515A (zh) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | 可视化组件的扩展方法、装置、电子设备及存储介质 |
CN107844299A (zh) * | 2017-12-01 | 2018-03-27 | 浪潮软件股份有限公司 | 一种Web应用开发工具的实现方法 |
CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
CN110580174A (zh) * | 2018-06-11 | 2019-12-17 | 中国移动通信集团浙江有限公司 | 应用组件生成方法、服务器及终端 |
CN109325203A (zh) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | 一种自动化实现Web系统可视化复用的装置 |
CN109542417A (zh) * | 2018-11-20 | 2019-03-29 | 北京小米移动软件有限公司 | 一种dom渲染网页的方法、装置、终端和存储介质 |
US20200174800A1 (en) * | 2018-12-04 | 2020-06-04 | Sap Se | Web Component Design and Integration System |
CN110007917A (zh) * | 2019-03-08 | 2019-07-12 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
CN110442336A (zh) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | 一种网页开发方法及装置、存储介质及电子设备 |
CN110554874A (zh) * | 2019-09-12 | 2019-12-10 | 北京百度网讯科技有限公司 | 用于复用SaaS平台网页组件的方法和装置 |
CN110708202A (zh) * | 2019-10-15 | 2020-01-17 | 深圳前海微众银行股份有限公司 | 插件节点的配置方法、装置、设备及存储介质 |
CN110955428A (zh) * | 2019-11-27 | 2020-04-03 | 北京奇艺世纪科技有限公司 | 一种页面显示方法、装置、电子设备及介质 |
CN111666526A (zh) * | 2020-06-17 | 2020-09-15 | 广州市百果园信息技术有限公司 | 页面生成方法、装置、设备及存储介质 |
CN111597484A (zh) * | 2020-07-22 | 2020-08-28 | 成都新希望金融信息有限公司 | 一种ui动态生成方法 |
Non-Patent Citations (11)
Title |
---|
BDAWN: "深入了解vue自定义组件之插槽slot", pages 1 - 5, Retrieved from the Internet <URL:https://blog.csdn.net/BDawn/article/details/101021588> * |
FAIRYEVER: "用作用域插槽和偏函数编写高复用Vue组件", pages 1 - 11, Retrieved from the Internet <URL:https://cloud.tencent.com/developer/beta/article/1473405> * |
JAVASCRIPT.INFO: "Shadow DOM and events", pages 1 - 5, Retrieved from the Internet <URL:https://javascript.info/shadow-dom-events> * |
JOHN GRUNDY: "Developing adaptable user interfaces for component-based systems", 《INTERACTING WITH COMPUTERS 》, vol. 14, no. 3, pages 175 - 194, XP055824894, DOI: 10.1016/S0953-5438(01)00049-2 * |
SAMUEL OLORUNTOBA: "Building \"Renderless\" Vue Components", pages 1 - 11, Retrieved from the Internet <URL:https://css-tricks.com/building-renderless-vue-components/> * |
SHANGWEI DUAN: "Software IC Revised: A New Approach of Component-Based Software Design with Software Slots", 2007 SIXTH INTERNATIONAL IEEE CONFERENCE ON COMMERCIAL-OFF-THE-SHELF (COTS)-BASED SOFTWARE SYSTEMS (ICCBSS\'07), pages 73 - 81 * |
TOLERIOUS: "【Vue原理】slot-源码版之作用域插槽", pages 1 - 5, Retrieved from the Internet <URL:http://www.noobyard.com/article/p-cweuduun-dt.html> * |
六小登登: "Vue一个案例引发「内容分发slot」的最全总结", pages 1 - 7, Retrieved from the Internet <URL:https://www.cnblogs.com/beevesnoodles/> * |
刘娜: "基于模板的跨平台可视化界面开发系统设计", 《电子科技》, vol. 30, no. 2017, pages 117 - 120 * |
戴翔宇: "Web前端工程组件化的分析与改进", 《中国优秀硕士学位论文全文数据库 信息科技辑》, no. 2016, pages 139 - 34 * |
谭凯: "基于ECLIPSE的WEB应用可视化组件管理平台的研究与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》, no. 2009, pages 138 - 236 * |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2022141724A1 (zh) * | 2020-12-31 | 2022-07-07 | 南威软件股份有限公司 | 基于 Vue 组件化的可视化配置渲染方法、系统、终端 |
CN113031947A (zh) * | 2021-03-05 | 2021-06-25 | 苏州帝博信息技术有限公司 | 在界面设计工具中使用的配置数据管理方法和装置 |
CN113126979A (zh) * | 2021-04-16 | 2021-07-16 | 多点(深圳)数字科技有限公司 | 一种脱离服务器可二次编程的可视化业务搭建系统 |
CN113126979B (zh) * | 2021-04-16 | 2022-03-25 | 多点(深圳)数字科技有限公司 | 一种脱离服务器可二次编程的可视化业务搭建系统 |
CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、系统及计算机可读存储介质 |
CN114035799A (zh) * | 2021-11-15 | 2022-02-11 | 上海闪马智能科技有限公司 | 一种网络文件编译方法、装置、存储介质及电子装置 |
CN114035799B (zh) * | 2021-11-15 | 2022-12-06 | 上海闪马智能科技有限公司 | 一种网络文件编译方法、装置、存储介质及电子装置 |
CN114546568A (zh) * | 2022-02-25 | 2022-05-27 | 重庆紫光华山智安科技有限公司 | 页面元素拖放方法、装置、电子设备及存储介质 |
CN115268861A (zh) * | 2022-06-21 | 2022-11-01 | 北京志凌海纳科技有限公司 | 自定义组件的引入方法、系统、设备和存储介质 |
CN117573127A (zh) * | 2024-01-17 | 2024-02-20 | 中建三局信息科技有限公司 | 一种页面搭建方法、装置、电子设备及介质 |
CN117573127B (zh) * | 2024-01-17 | 2024-04-23 | 中建三局信息科技有限公司 | 一种页面搭建方法、装置、电子设备及介质 |
Also Published As
Publication number | Publication date |
---|---|
CN112130856B (zh) | 2023-11-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112130856A (zh) | 强扩展性的前端可视化界面生成方法、系统、介质及终端 | |
US7661076B2 (en) | Two dimensional trees to edit graph-like diagrams | |
US7480897B2 (en) | Method and system for managing development objects for computer program code | |
CN109634598A (zh) | 一种页面显示方法、装置、设备及存储介质 | |
US20140172827A1 (en) | In-memory, columnar database multidimensional analytical view integration | |
CN110674227A (zh) | 数据可视化图表和页面的生成方法、系统、介质及终端 | |
US20140164895A1 (en) | Systems and methods for managing spreadsheet models | |
CN113535165A (zh) | 界面生成方法、装置、电子设备及计算机可读存储介质 | |
CN102222148A (zh) | 自动生成三维装配图的明细表的方法及装置 | |
US8413109B2 (en) | Systems and methods for metamodel transformation | |
CN113010612A (zh) | 一种图数据可视化构建方法、查询方法及装置 | |
US8612892B2 (en) | Incremental run-time layout composition | |
CN106055535A (zh) | 一种图表生成方法及装置 | |
CN107562763A (zh) | 数据变化的显示方法及装置 | |
Cruz et al. | Drawing graphs by example efficiently: Trees and planar acyclic digraphs | |
CN115827809A (zh) | 一种地理信息系统gis应用的生成方法及装置 | |
CN115691772A (zh) | 运营可视化系统及相应计算机设备和存储介质 | |
CN115599362A (zh) | 数据处理任务构建方法、商品数据处理方法及设备 | |
Dujlovic et al. | An approach to web-based visualization of automatically generated data models | |
Stoeckle et al. | Approaches to supporting software visual notation exchange | |
CN111001157A (zh) | 引用信息的生成方法和装置、存储介质及电子装置 | |
CN109471991A (zh) | 一种产品bom多视图组织及展示方法 | |
CN112988136B (zh) | 一种用户界面编辑方法及装置 | |
WO2024109400A1 (zh) | 子应用页面处理方法、装置、计算机设备和存储介质 | |
Bettig et al. | Integrating multiple information representations in a single CAD/CAM/CAE environment |
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 |