CN112083920A - 一种前端页面设计方法、装置、存储介质及设备 - Google Patents
一种前端页面设计方法、装置、存储介质及设备 Download PDFInfo
- Publication number
- CN112083920A CN112083920A CN202010904310.1A CN202010904310A CN112083920A CN 112083920 A CN112083920 A CN 112083920A CN 202010904310 A CN202010904310 A CN 202010904310A CN 112083920 A CN112083920 A CN 112083920A
- Authority
- CN
- China
- Prior art keywords
- component
- determining
- end page
- instruction
- data file
- 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.)
- Pending
Links
- 238000013461 design Methods 0.000 title claims abstract description 57
- 238000000034 method Methods 0.000 title claims abstract description 45
- 230000000007 visual effect Effects 0.000 claims abstract description 35
- 238000004458 analytical method Methods 0.000 claims abstract description 16
- 238000004590 computer program Methods 0.000 claims description 8
- 238000013507 mapping Methods 0.000 claims description 7
- 230000007246 mechanism Effects 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 15
- 238000007794 visualization technique Methods 0.000 abstract description 4
- 239000002609 medium Substances 0.000 description 13
- 238000010586 diagram Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 230000006870 function Effects 0.000 description 4
- 230000006399 behavior Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 239000012120 mounting media Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008520 organization Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 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/34—Graphical or visual programming
-
- 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
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例公开了一种前端页面设计方法、装置、存储介质及设备。该方法包括:展示待编辑的可视化前端页面,采集用户输入操作;根据所述用户输入操作,确定对组件操作的指令内容;根据所述指令内容,确定对所述组件的位置布局,并确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。通过执行本技术方案,可以使用组件化、可视化方法对前端页面进行设计、在线编辑等操作,提升了前端页面开发效率。
Description
技术领域
本申请实施例涉及前端开发技术领域,尤其涉及一种前端页面设计方法、装置、存储介质及设备。
背景技术
随着互联网时代的到来,各种页面大量涌现,页面前端产生了天翻地覆的变化,各种多媒体元素的使用使得页面的内容更加生动,页面前端技术在应用开发过程中也得到了越来越广泛的使用。
各种应用的普及使得用户对站点的期望越来越高,直接导致网站前端规模不断扩大,越来越多的前端脚本代码增加到应用系统中,前端开发出现了代码规模大,组织维护困难,代码重用性低,扩展性差等问题。建立合理的前端开发架构,并遵循开发标准和规范将越来越重要。
目前,常用的前端开发框架是MVC框架和MVVM框架,使用这两种框架开发前端页面设计的难度大,开发效率低。
发明内容
本申请实施例提供一种前端页面设计方法、装置、存储介质及设备,通过使用组件化、可视化方法对前端页面进行设计、在线编辑等操作,提升了前端页面开发效率。
第一方面,本申请实施例提供了一种前端页面设计方法,该方法包括:
展示待编辑的可视化前端页面,采集用户输入操作;
根据所述用户输入操作,确定对组件操作的指令内容;
根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
第二方面,本申请实施例提供了一种前端页面设计装置,该装置包括:
用户输入操作采集模块,用户展示待编辑的可视化前端页面,采集用户输入操作;
指令内容确定模块,用于根据所述用户输入操作,确定对组件操作的指令内容;
组件数据文件获取模块,用于根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
页面确定模块,用于对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
第三方面,本申请实施例提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现如本申请实施例所述的前端页面设计方法。
第四方面,本申请实施例提供了一种设备,包括存储器,处理器及存储在存储器上并可在处理器运行的计算机程序,所述处理器执行所述计算机程序时实现如本申请实施例所述的前端页面设计方法。
本申请实施例所提供的技术方案,首先展示待编辑的可视化前端页面,并采集用户输入操作,根据用户输入操作,确定对组件操作的指令内容,根据指令内容,确定对组件的位置布局,以及组件的目标位置,并确定组件的属性,获得组件数据文件,对组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。通过执行本技术方案,可以使用组件化、可视化方法对前端页面进行设计、在线编辑等操作,提升了前端页面开发效率。
附图说明
图1是本申请实施例一提供的前端页面设计方法的流程图;
图2是本申请实施例一提供的待编辑可视化前端页面示意图;
图3是本申请实施例二提供的前端页面设计装置的结构示意图;
图4是本申请实施例四提供的一种设备的结构示意图。
具体实施方式
下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本申请,而非对本申请的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本申请相关的部分而非全部结构。
在更加详细地讨论示例性实施例之前应当提到的是,一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理,但是其中的许多步骤可以被并行地、并发地或者同时实施。此外,各步骤的顺序可以被重新安排。当其操作完成时所述处理可以被终止,但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
实施例一
图1是本申请实施例一提供的前端页面设计方法的流程图,本实施例可适用于前端页面设计的情况,该方法可以由本申请实施例所提供的前端页面设计装置执行,该装置可以由软件和/或硬件的方式来实现,并可集成于用于页面设计的智能终端等设备中。
如图1所示,所述前端页面设计方法包括:
S110、展示待编辑的可视化前端页面,采集用户输入操作。
在本实施例中,待编辑的可视化前端页面,可以是基于React和React-DND开发出来的待编辑的可视化前端页面。其中,React主要是用于构建页面,可以与已知的库和框架很好的配合。React-DND是一组React高阶组件,使用的时候只需要使用对应的API(Application Programming Interface,应用程序接口)将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。
其中,用户输入操作可以是在待编辑的可视化前端页面进行点选操作,也可以是在待编辑的可视化前端页面进行拖拽操作。
在本实施例中,展示待编辑的可视化前端页面,用户可以根据需求对可视化前端页面进行编辑。
如图2所示,用户可以根据需求对待编辑的可视化前端页面进行操作。其中,待编辑的可视化前端页面中Components:components文件下主要放的是表单组件以及封装的一些其他的可复用的组件。Components-Form:components下的form主要放的是设计器中用到的表单组件。Constants:constants文件下主要放的是一些静态资源文件和封装的一些公共的方法。Components-ColConfigComponent:components下的colConfigComponent主要是列配置的属性的组件。例如:显示表格、编辑表格、查找带回等组件中的列配置。Components-designComponets:component下的designComponents主要放的是用来渲染出设计器左边页面的组件。例如:分区、组、行、列、组件等。以及设计器右边的页面组件。例如:添加组件、元数据设置、编辑组件等。Components-FormComponent:Components下的FormComponent主要放的是在设计器中需要复用的自定义的一些表单组件。Components-styledComponents:Components下的styledComponents主要放的是一些样式组件。Container-App:container下的App文件是项目的入口文件。Container-HomePage:Container下的HomePage文件是项目的首页。Container-PageContainer:Container下的PageContainer文件是我们设计器的主题内容。Feather:feather文件下是我们请求后端的接口配置。Schema:schema文件中放的是我们转换数据的文件。从接口拿到数据之后把数据结构打平,当保存时把打平的数据结构还原。其中,各文件的命名用户可以根据需求进行自定义。
S120、根据所述用户输入操作,确定对组件操作的指令内容。
其中,指令内容可以是对组件进行移动,也可以是对组件进行编辑。
在本实施例中,组件可以是对某事件以及事件属性进行封装形成的。例如,按钮控件,按钮控件的事件是点击,属性是是否可用、是否显示、按钮类型以及尺寸大小。通过对事件以及事件属性进行封装就可以形成按钮控件。
在本技术方案中,可选的,所述组件包括:按钮控件、表格控件、导出按钮控件、自动填充文本框控件、选择框控件、日期选择框控件、查找带回文本框控件、数字文本框控件、单选按钮控件、下拉选择框控件、树控件、文本区域控件、文本输入框、树选择控件、上传控件以及可编辑表格控件中的至少一个。
通过对不同的组件进行选择,属性更改,可以对可视化前端页面进行设计,并形成新的页面,提升了前端页面开发效率。
S130、根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件。
其中,位置布局可以是组件在前端页面上的区域。例如,可以将组件放置在前端页面的左上角区域,也可以将组件放置在前端页面的右上角区域。
其中,目标位置可以是组件具体在前端页面上的具体位置。例如,可以将组件放置在左上角区域的中心位置,也可以将组件放置在左上角区域的右上角位置。
其中,属性可以是组件的性质,与组件本身有关。例如,按钮控件的属性是是否可用、是否显示、按钮类型以及尺寸大小。自动完成控件的属性是自动完成控件的数据源、自动完成的主键、是否显示、是否可用、控件尺寸大小。
其中,组件数据文件可以是组件配置生成的元数据文件。
在本技术方案中,可选的,确定所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件,包括:
根据第一指令,确定所述组件的位置布局;
根据所述组件的位置布局和第二指令,确定所述组件的目标位置;
根据第三指令,确定所述组件的属性,获得组件数据文件。
在本实施例中,首先根据第一指令确定组件的位置布局,然后根据组件的位置布局和第二指令确定组件的目标位置,确定组件的目标位置后,可以根据需求对组件的属性进行更改,并获得组件数据文件。
通过不同的指令确定组件的位置布局、目标位置以及对组件属性进行更改,可以对前端页面进行设计、在线编辑等操作,提升了前端页面开发效率。
在本技术方案中,可选的,所述第一指令包括:组件位置布局指令;所述第二指令包括:位置移动指令;所述第三指令包括:属性键入指令。
在本实施例中,组件位置布局指令可以对组件位置进行布局,确定组件所在的区域。
在本实施例中,位置移动指令可以是拖、拉或拽操作,通过这些操作可以对组件的位置进行移动,将组件移动至目标位置。
在本实施例中,属性键入指令可以是组件属性进行更改的指令。例如,按钮控件的属性是是否可用、是否显示、按钮类型以及尺寸大小。可以通过属性键入指令可以对是否可用属性进行操作,将是否可用点选为可用。
通过具体的指令对组件进行操作,可以对前端页面进行设计,针对性强,且可以提高前端页面开发效率。
S140、对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
在本实施例中,获得组件数据文件后,对组件数据文件进行解析,获得解析内容,根据解析内容渲染出相应的页面,可以完成可视化前端页面的设计。
在本技术方案中,可选的,对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计,包括:
对所述组件数据文件进行解析,并根据解析内容确定新的页面;
响应于页面预览请求,在页面预览区域中展示所述新的页面。
根据组件数据文件的解析内容,可以确定新的页面,通过预览操作,可以在预览区域中展示新的页面,方便用户查看新的页面。
本申请实施例所提供的技术方案,首先展示待编辑的可视化前端页面,并采集用户输入操作,根据用户输入操作,确定对组件操作的指令内容,根据指令内容,确定对组件的位置布局,以及组件的目标位置,并确定组件的属性,获得组件数据文件,对组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。通过执行本技术方案,可以使用组件化、可视化方法对前端页面进行设计、在线编辑等操作,提升了前端页面开发效率。
在上述技术方案的基础上,可选的,在获得组件数据文件之后,所述方法还包括:
采用事件订阅机制,构建组件和事件之间的映射关系。
其中,事件可以是对组件进行的操作。例如,根据指令对按钮控件进行移动,将按钮控件放置在目标位置上,则按钮控件移动就是事件。
在本实施例中,通过搜集每个组件的事件,建立组件和事件之间的映射关系,当选择了元数据id(Identity document)之后,会根据选的元数据id查出当前元数据页面的所有组件,当选择组件之后会根据组件的映射关系,显示出当前组件所具有的事件。然后可以通过配置事件来发布、订阅组件的相应的行为。
通过事件订阅机制,可以构建组件和事件之间的映射关系,然后可以通过配置事件来发布、订阅组件的相应的行为。进而完成对可视化前端页面进行设计,提升了前端页面开发效率。
实施例二
图3是是本申请实施例二提供的前端页面设计装置的结构示意图,如图3所示,所述装置包括:
用户输入操作采集模块310,用户展示待编辑的可视化前端页面,采集用户输入操作;
指令内容确定模块320,用于根据所述用户输入操作,确定对组件操作的指令内容;
组件数据文件获取模块330,用于根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
页面确定模块340,用于对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
在本技术方案中,可选的,组件数据文件获取模块330,包括:
位置布局确定单元,用于根据第一指令,确定所述组件的位置布局;
目标位置确定单元,用于根据所述组件的位置布局和第二指令,确定所述组件的目标位置;
组件数据文件获取单元,用于根据第三指令,确定所述组件的属性,获得组件数据文件。
在本技术方案中,可选的,所述第一指令包括:组件位置布局指令;所述第二指令包括:位置移动指令;所述第三指令包括:属性键入指令。
在本技术方案中,可选的,页面确定模块340,包括:
新的页面确定单元,用于对所述组件数据文件进行解析,并根据解析内容确定新的页面;
页面预览单元,用于响应于页面预览请求,在页面预览区域中展示所述新的页面。
在本技术方案中,可选的,所述装置还包括:
映射关系构建单元,用于采用事件订阅机制,构建组件和事件之间的映射关系。
在本技术方案中,可选的,所述组件包括:按钮控件、表格控件、导出按钮控件、自动填充文本框控件、选择框控件、日期选择框控件、查找带回文本框控件、数字文本框控件、单选按钮控件、下拉选择框控件、树控件、文本区域控件、文本输入框、树选择控件、上传控件以及可编辑表格控件中的至少一个。
上述产品可执行本申请实施例所提供的方法,具备执行方法相应的功能模块和有益效果。
实施例三
本申请实施例还提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行一种前端页面设计方法,该方法包括:
展示待编辑的可视化前端页面,采集用户输入操作;
根据所述用户输入操作,确定对组件操作的指令内容;
根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
存储介质——任何的各种类型的存储器设备或存储设备。术语“存储介质”旨在包括:安装介质,例如CD-ROM、软盘或磁带装置;计算机系统存储器或随机存取存储器,诸如DRAM、DDR RAM、SRAM、EDO RAM,兰巴斯(Rambus)RAM等;非易失性存储器,诸如闪存、磁介质(例如硬盘或光存储);寄存器或其它相似类型的存储器元件等。存储介质可以还包括其它类型的存储器或其组合。另外,存储介质可以位于程序在其中被执行的计算机系统中,或者可以位于不同的第二计算机系统中,第二计算机系统通过网络(诸如因特网)连接到计算机系统。第二计算机系统可以提供程序指令给计算机用于执行。术语“存储介质”可以包括可以驻留在不同位置中(例如在通过网络连接的不同计算机系统中)的两个或更多存储介质。存储介质可以存储可由一个或多个处理器执行的程序指令(例如具体实现为计算机程序)。
当然,本申请实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上所述的前端页面设计操作,还可以执行本申请任意实施例所提供的前端页面设计方法中的相关操作。
实施例四
本申请实施例提供了一种设备,该设备中可集成本申请实施例提供的前端页面设计装置。图4是本申请实施例四提供的一种设备的结构示意图。如图4所示,本实施例提供了一种设备400,其包括:一个或多个处理器420;存储装置410,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器420执行,使得所述一个或多个处理器420实现本申请实施例所提供的前端页面设计方法,该方法包括:
展示待编辑的可视化前端页面,采集用户输入操作;
根据所述用户输入操作,确定对组件操作的指令内容;
根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
当然,本领域技术人员可以理解,处理器420还实现本申请任意实施例所提供的前端页面设计方法的技术方案。
图4显示的设备400仅仅是一个示例,不应对本申请实施例的功能和使用范围带来任何限制。
如图4所示,该设备400包括处理器420、存储装置410、输入装置430和输出装置440;设备中处理器420的数量可以是一个或多个,图4中以一个处理器420为例;设备中的处理器420、存储装置410、输入装置430和输出装置440可以通过总线或其他方式连接,图4中以通过总线450连接为例。
存储装置410作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块单元,如本申请实施例中的前端页面设计方法对应的程序指令。
存储装置410可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据终端的使用所创建的数据等。此外,存储装置410可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储装置410可进一步包括相对于处理器420远程设置的存储器,这些远程存储器可以通过网络连接。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置430可用于接收输入的数字、字符信息或语音信息,以及产生与设备的用户设置以及功能控制有关的键信号输入。输出装置440可包括显示屏、扬声器等设备。
本申请实施例提供的设备,可以达到提高前端页面设计速度以及处理效果的目的。
上述实施例中提供的前端页面设计装置、存储介质及设备可执行本申请任意实施例所提供的前端页面设计方法,具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节,可参见本申请任意实施例所提供的前端页面设计方法。
注意,上述仅为本申请的较佳实施例及所运用技术原理。本领域技术人员会理解,本申请不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本申请的保护范围。因此,虽然通过以上实施例对本申请进行了较为详细的说明,但是本申请不仅仅限于以上实施例,在不脱离本申请构思的情况下,还可以包括更多其他等效实施例,而本申请的范围由所附的权利要求范围决定。
Claims (10)
1.一种前端页面设计方法,其特征在于,包括:
展示待编辑的可视化前端页面,采集用户输入操作;
根据所述用户输入操作,确定对组件操作的指令内容;
根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
2.根据权利要求1所述的方法,其特征在于,根据所述指令内容,确定所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件,包括:
根据第一指令,确定所述组件的位置布局;
根据所述组件的位置布局和第二指令,确定所述组件的目标位置;
根据第三指令,确定所述组件的属性,获得组件数据文件。
3.根据权利要求2所述的方法,其特征在于,所述第一指令包括:组件位置布局指令;所述第二指令包括:位置移动指令;所述第三指令包括:属性键入指令。
4.根据权利要求1所述的方法,其特征在于,对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计,包括:
对所述组件数据文件进行解析,并根据解析内容确定新的页面;
响应于页面预览请求,在页面预览区域中展示所述新的页面。
5.根据权利要求1所述的方法,其特征在于,在获得组件数据文件之后,所述方法还包括:
采用事件订阅机制,构建组件和事件之间的映射关系。
6.根据权利要求1所述的方法,其特征在于,所述组件包括:按钮控件、表格控件、导出按钮控件、自动填充文本框控件、选择框控件、日期选择框控件、查找带回文本框控件、数字文本框控件、单选按钮控件、下拉选择框控件、树控件、文本区域控件、文本输入框、树选择控件、上传控件以及可编辑表格控件中的至少一个。
7.一种前端页面设计装置,其特征在于,包括:
用户输入操作采集模块,用户展示待编辑的可视化前端页面,采集用户输入操作;
指令内容确定模块,用于根据所述用户输入操作,确定对组件操作的指令内容;
组件数据文件获取模块,用于根据所述指令内容,确定对所述组件的位置布局,确定所述组件的目标位置,并确定所述组件的属性,获得组件数据文件;
页面确定模块,用于对所述组件数据文件进行解析,并根据解析内容确定新的页面,以完成可视化前端页面的设计。
8.根据权利要求7所述的装置,其特征在于,组件数据文件获取模块,包括:
位置布局确定单元,用于根据第一指令,确定所述组件的位置布局;
目标位置确定单元,用于根据所述组件的位置布局和第二指令,确定所述组件的目标位置;
组件数据文件获取单元,用于根据第三指令,确定所述组件的属性,获得组件数据文件。
9.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1-6中任一项所述的前端页面设计方法。
10.一种设备,包括存储器,处理器及存储在存储器上并可在处理器运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1-6中任一项所述的前端页面设计方法。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010904310.1A CN112083920A (zh) | 2020-09-01 | 2020-09-01 | 一种前端页面设计方法、装置、存储介质及设备 |
PCT/CN2021/106202 WO2022048316A1 (zh) | 2020-09-01 | 2021-07-14 | 前端页面设计方法、装置、存储介质及设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010904310.1A CN112083920A (zh) | 2020-09-01 | 2020-09-01 | 一种前端页面设计方法、装置、存储介质及设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112083920A true CN112083920A (zh) | 2020-12-15 |
Family
ID=73731880
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010904310.1A Pending CN112083920A (zh) | 2020-09-01 | 2020-09-01 | 一种前端页面设计方法、装置、存储介质及设备 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN112083920A (zh) |
WO (1) | WO2022048316A1 (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113741877A (zh) * | 2021-08-02 | 2021-12-03 | 紫金诚征信有限公司 | 一种基于web前端的可视化工作流编辑方法及装置 |
CN113778413A (zh) * | 2021-09-14 | 2021-12-10 | 销秘(重庆)云计算科技有限公司 | 页面开发方法、装置及存储介质 |
CN113791783A (zh) * | 2021-09-14 | 2021-12-14 | 科东(广州)软件科技有限公司 | 控件生成方法、装置、设备及存储介质 |
WO2022048316A1 (zh) * | 2020-09-01 | 2022-03-10 | 北京锐安科技有限公司 | 前端页面设计方法、装置、存储介质及设备 |
Families Citing this family (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114446417B (zh) * | 2022-04-06 | 2022-07-29 | 深圳市帝迈生物技术有限公司 | 多模式约束规则的配置方法、装置、设备和存储介质 |
CN115934068B (zh) * | 2022-11-11 | 2024-07-19 | 中电金信软件有限公司 | 数据统计页面的生成方法、显示方法、服务器及移动终端 |
CN116431138B (zh) * | 2022-11-24 | 2024-04-05 | 昆仑数智科技有限责任公司 | 组件模板的建立方法和装置、表单建立方法和装置 |
CN116257719B (zh) * | 2023-05-16 | 2023-07-21 | 建信金融科技有限责任公司 | 页面更新方法、装置、计算机设备和存储介质 |
CN117591117B (zh) * | 2024-01-19 | 2024-04-23 | 中建三局信息科技有限公司 | 页面生成方法、系统、设备及存储介质 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109101304A (zh) * | 2018-07-05 | 2018-12-28 | 北京微播视界科技有限公司 | 界面的自动生成方法、装置、电子设备和计算机可读介质 |
CN109739497A (zh) * | 2018-12-06 | 2019-05-10 | 深圳市中农网有限公司 | 页面开发方法、装置、计算机设备及存储介质 |
CN110058856A (zh) * | 2019-04-28 | 2019-07-26 | 恒生电子股份有限公司 | 页面配置方法及装置 |
CN110083790A (zh) * | 2019-04-30 | 2019-08-02 | 珠海随变科技有限公司 | 页面编辑方法、页面输出方法、装置、计算机设备及介质 |
CN110442336A (zh) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | 一种网页开发方法及装置、存储介质及电子设备 |
Family Cites Families (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP3635538A4 (en) * | 2017-06-05 | 2021-03-10 | Umajin Inc. | PROCEDURES AND SYSTEMS FOR AN APPLICATION SYSTEM |
CN109508191B (zh) * | 2018-11-22 | 2022-03-22 | 北京腾云天下科技有限公司 | 一种代码生成方法及系统 |
CN110597506B (zh) * | 2019-11-14 | 2020-04-21 | 南京百敖软件有限公司 | 一种前端应用可视化开发工具和使用方法 |
CN112083920A (zh) * | 2020-09-01 | 2020-12-15 | 北京锐安科技有限公司 | 一种前端页面设计方法、装置、存储介质及设备 |
-
2020
- 2020-09-01 CN CN202010904310.1A patent/CN112083920A/zh active Pending
-
2021
- 2021-07-14 WO PCT/CN2021/106202 patent/WO2022048316A1/zh active Application Filing
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109101304A (zh) * | 2018-07-05 | 2018-12-28 | 北京微播视界科技有限公司 | 界面的自动生成方法、装置、电子设备和计算机可读介质 |
CN109739497A (zh) * | 2018-12-06 | 2019-05-10 | 深圳市中农网有限公司 | 页面开发方法、装置、计算机设备及存储介质 |
CN110058856A (zh) * | 2019-04-28 | 2019-07-26 | 恒生电子股份有限公司 | 页面配置方法及装置 |
CN110083790A (zh) * | 2019-04-30 | 2019-08-02 | 珠海随变科技有限公司 | 页面编辑方法、页面输出方法、装置、计算机设备及介质 |
CN110442336A (zh) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | 一种网页开发方法及装置、存储介质及电子设备 |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2022048316A1 (zh) * | 2020-09-01 | 2022-03-10 | 北京锐安科技有限公司 | 前端页面设计方法、装置、存储介质及设备 |
CN113741877A (zh) * | 2021-08-02 | 2021-12-03 | 紫金诚征信有限公司 | 一种基于web前端的可视化工作流编辑方法及装置 |
CN113778413A (zh) * | 2021-09-14 | 2021-12-10 | 销秘(重庆)云计算科技有限公司 | 页面开发方法、装置及存储介质 |
CN113791783A (zh) * | 2021-09-14 | 2021-12-14 | 科东(广州)软件科技有限公司 | 控件生成方法、装置、设备及存储介质 |
CN113791783B (zh) * | 2021-09-14 | 2022-11-29 | 科东(广州)软件科技有限公司 | 控件生成方法、装置、设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
WO2022048316A1 (zh) | 2022-03-10 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112083920A (zh) | 一种前端页面设计方法、装置、存储介质及设备 | |
CN110235122B (zh) | 用于将web内容转化为可重复使用的模板和组件的系统和方法 | |
CN110806863A (zh) | 接口文档生成方法及装置、电子设备、存储介质 | |
CN111126019B (zh) | 基于模式定制的报表生成方法、装置和电子设备 | |
CN103729285A (zh) | 一种网页测试方法、设备及系统 | |
CN105068815A (zh) | 页面编辑器交互装置和方法 | |
CN106354483B (zh) | 一种数据处理方法、装置及电子设备 | |
CN111045653B (zh) | 系统生成方法、装置、计算机可读介质及电子设备 | |
CN107832052B (zh) | 展示预览页面的方法、装置和存储介质以及电子设备 | |
US9235384B2 (en) | Language notification generator | |
CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
CN111736740B (zh) | 图片热区生成方法、装置、设备和存储介质 | |
CN113535164A (zh) | 一种前端界面的生成方法、装置、电子设备及存储介质 | |
CN112269576A (zh) | 一种组件展示方法、装置、服务器和存储介质 | |
CN113448552A (zh) | 代码生成方法和装置 | |
CN111914528A (zh) | 内容编辑方法、编辑器的生成方法及其装置、设备和介质 | |
CN118259906A (zh) | 一种基于PaaS框架的多端页面适配方法、设备及介质 | |
CN111061522A (zh) | 基于后端生成前端卡片组件的方法、装置、设备及存储介质 | |
CN113448569A (zh) | 一种站点页面的处理系统、方法、设备和存储介质 | |
CN113419711A (zh) | 页面引导方法、装置、电子设备及存储介质 | |
CN113778405A (zh) | 一种跨平台app构建方法、装置、系统及介质 | |
CN113535175A (zh) | 应用程序前端代码的生成方法、装置、电子设备及介质 | |
CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 | |
CN117762519A (zh) | 组件管理方法、装置、计算机设备和存储介质 | |
US11126410B2 (en) | Method and apparatus for building pages, apparatus and non-volatile computer storage medium |
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 |