WO2022048316A1 - 前端页面设计方法、装置、存储介质及设备 - Google Patents

前端页面设计方法、装置、存储介质及设备 Download PDF

Info

Publication number
WO2022048316A1
WO2022048316A1 PCT/CN2021/106202 CN2021106202W WO2022048316A1 WO 2022048316 A1 WO2022048316 A1 WO 2022048316A1 CN 2021106202 W CN2021106202 W CN 2021106202W WO 2022048316 A1 WO2022048316 A1 WO 2022048316A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
instruction
end page
content
page
Prior art date
Application number
PCT/CN2021/106202
Other languages
English (en)
French (fr)
Inventor
陈源
万月亮
火一莽
Original Assignee
北京锐安科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 北京锐安科技有限公司 filed Critical 北京锐安科技有限公司
Publication of WO2022048316A1 publication Critical patent/WO2022048316A1/zh

Links

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

Definitions

  • the present application relates to the technical field of front-end development, for example, to a front-end page design method, device, storage medium and device.
  • the commonly used front-end development frameworks are the Model-View-Controller (MVC) framework and the Model-View-ViewModel (MVVM) framework. It is difficult to develop front-end page designs using these two frameworks. , the development efficiency is low.
  • MVC Model-View-Controller
  • MVVM Model-View-ViewModel
  • the present application provides a front-end page design method, device, storage medium and device to improve front-end page development efficiency.
  • the present application provides a front-end page design method, which includes:
  • the component data file is parsed, and a new page is determined according to the parsed content, so as to complete the design of the visual front-end page to be edited.
  • the application provides a front-end page design device, the device includes:
  • a user input operation collection module configured to display the visualized front-end page to be edited, and collect user input operations in the visualized front-end page to be edited
  • an instruction content determination module configured to determine the instruction content for operating the component according to the user input operation
  • the component data file acquisition module is configured to determine the position layout of the component, the target position of the component, and the attribute of the component according to the content of the instruction, according to the position layout of the component, the target position of the component, And the attribute of the component obtains the component data file;
  • the page determination module is configured to parse the component data file, and determine a new page according to the parsed content, so as to complete the design of the visualized front-end page to be edited.
  • the present application provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, implements the above-mentioned front-end page design method.
  • the present application provides a device including a memory, a processor, and a computer program stored in the memory and executed by the processor, where the processor implements the above-mentioned front-end page design method when the computer program is executed.
  • FIG. 1 is a flowchart of a front-end page design method provided in Embodiment 1 of the present application;
  • FIG. 2 is a schematic diagram of a visual front-end page to be edited provided by Embodiment 1 of the present application;
  • FIG. 3 is a schematic structural diagram of a front-end page design device provided in Embodiment 2 of the present application.
  • FIG. 4 is a schematic structural diagram of a device provided in Embodiment 4 of the present application.
  • FIG. 1 is a flowchart of a front-end page design method provided in Embodiment 1 of the present application. This embodiment is applicable to the case of front-end page design.
  • the method can be executed by the front-end page design device provided by the embodiment of the present application.
  • the device It can be implemented by means of software and/or hardware, and can be integrated into devices such as smart terminals set as page design.
  • the front-end page design method includes:
  • the visual front-end page to be edited may be a visual front-end page to be edited developed based on React and React-Drag and Drop (React-DND).
  • React is mainly used for building pages and can work well with known libraries and frameworks.
  • React-DND is a set of React high-level components. When using it, you only need to use the corresponding Application Programming Interface (API) to wrap the target component to realize the function of dragging or accepting dragged elements.
  • API Application Programming Interface
  • the user input operation can be a click operation on the visual front-end page to be edited, or a drag-and-drop operation on the visual front-end page to be edited.
  • the visualized front-end page to be edited is displayed, and the user can edit the visualized front-end page as required.
  • the form under components mainly contains the form components used in the designer.
  • the constants file mainly contains some static resource files and some encapsulated public methods.
  • the colConfigComponent under components is mainly a component of the attributes of the column configuration, such as: display the table, edit the table, find and bring back the column configuration in the component.
  • the designComponents under components are mainly used to render the components on the left page of the designer, such as: partitions, groups, rows, columns, components, etc., and the page components on the right side of the designer, such as: adding components, metadata settings, editing components, etc.
  • the FormComponent under components mainly contains some custom form components that need to be reused in the designer.
  • the styledComponents under components mainly put some style components.
  • the application (Application, App) file under containers is the entry file of the project.
  • the HomePage file under containers is the home page of the project.
  • the PageContainer file under containers is the theme content of the designer.
  • Under the feathers file is the interface configuration of the request backend.
  • the schema file contains files for converting data, which is used to flatten the data structure after getting the data from the interface, and restore the flattened data structure when saving. Among them, users can customize the naming of files according to their needs.
  • the content of the instruction can be to move the component or edit the component.
  • the component may be formed by encapsulating an event and an event attribute.
  • an event For example, a button control, the event encapsulated by the button control is click, and the properties are whether it is available, whether it is displayed, button type and size.
  • Button controls can be formed by encapsulating events and event properties.
  • the components include: a button control, a table control, an export button control, an auto-fill text box control, a selection box control, a date selection box control, a search and bring back text box control, and a digital text box At least one of a control, a radio button control, a drop-down selection box control, a tree control, a text area control, a text input box, a tree selection control, an upload control, and an editable table control.
  • S130 Determine the position layout of the component, the target position of the component, and the attribute of the component according to the content of the instruction, according to the position layout of the component, the target position of the component, and the attribute of the component Get the component data file.
  • a positional layout can be an area of a component on a front-end page. For example, you can place components in the upper-left area of the front-end page, or you can place components in the upper-right area of the front-end page.
  • the target position can be the position of the component on the front-end page. For example, you can place the component in the center of the upper-left area, or you can place the component in the upper-right corner of the upper-left area.
  • Properties can be properties of the component, related to the component itself.
  • the properties of a button control include availability, display, button type, and size.
  • the properties of the auto-complete control include the data source of the auto-complete control, the primary key of the auto-complete control, whether it is displayed, whether it is available, and the size of the control.
  • the component data file can be a metadata file generated by the component configuration.
  • the location layout of the component, the target location of the component, and the attribute of the component are determined according to the content of the instruction, including:
  • the location layout of the component is first determined according to the first instruction, and then the target location of the component is determined according to the location layout of the component and the second instruction. After the target location of the component is determined, the properties of the component can be changed as required, and get the component data file.
  • front-end pages can be designed and edited online, which improves the development efficiency of front-end pages.
  • the first instruction includes: a component position layout instruction; the second instruction includes: a position movement instruction; and the third instruction includes: an attribute input instruction.
  • the component position layout instruction may be an instruction for laying out the position of the component, so as to determine the area where the component is located.
  • the position movement instruction may be a drag, pull, or drag operation, and through these operations, the position of the component can be moved to move the component to the target position.
  • the property input instruction may be an instruction for modifying the component property.
  • the properties of the button control are whether it is available, whether it is displayed, the button type and the size.
  • the available properties can be manipulated through the property input command, and the available properties can be selected as available.
  • the front-end page By operating the components through instructions, the front-end page can be designed with strong pertinence, and the development efficiency of the front-end page can be improved.
  • the component data file is parsed to obtain the parsed content, and a corresponding page is rendered according to the parsed content, so that the design of the visual front-end page can be completed.
  • the method further includes:
  • the new page is displayed in the page preview area.
  • a new page can be determined, and through the preview operation, the new page can be displayed in the preview area to facilitate the user to view the new page.
  • the technical solutions provided by the embodiments of the present application firstly display the visualized front-end page to be edited, collect user input operations in the visualized front-end page to be edited, and determine the content of the instruction to operate the component according to the user input operation.
  • the content of the instruction determines the location layout of the component, the target location of the component, and the attribute of the component, obtains the component data file according to the location layout of the component, the target location of the component, and the attribute of the component, and parses the component data file , and determine a new page according to the parsed content, so as to complete the design of the visual front-end page to be edited.
  • the front-end page can be designed and online edited by using componentization and visualization methods, which improves the development efficiency of the front-end page.
  • the method further includes:
  • the event subscription mechanism is used to build the mapping relationship between the components and events.
  • Events can be actions performed on components. For example, the button control is moved according to the instruction, and the button control is placed on the target position, then the button control movement is an event.
  • a mapping relationship between components and events is established by collecting events of each component. After selecting a metadata identity document (Identity Document, ID), the current metadata will be found out according to the selected metadata ID. All components of the data page, when a component is selected, will display the events of the current component according to the mapping relationship of the components. Then you can publish and subscribe to the corresponding behavior of the component by configuring events.
  • ID a metadata identity document
  • mapping relationship between components and events can be constructed, and then the corresponding behaviors of components can be published and subscribed by configuring events, so as to complete the design of the visual front-end page and improve the efficiency of front-end page development.
  • FIG. 3 is a schematic structural diagram of a front-end page design device provided in Embodiment 2 of the present application. As shown in FIG. 3 , the device includes: a user input operation collection module 310 , an instruction content determination module 320 , and a component data file acquisition module 330 and page determination module 340 .
  • the user input operation collection module 310 is configured to display the visualized front-end page to be edited, and collect user input operations in the visualized front-end page to be edited.
  • the instruction content determining module 320 is configured to determine the instruction content for operating the component according to the user input operation.
  • the component data file obtaining module 330 is configured to determine the location layout of the component, the target location of the component, and the attributes of the component according to the content of the instruction, and the target location of the component according to the location layout of the component , and the properties of the component to get the component data file.
  • the page determination module 340 is configured to parse the component data file, and determine a new page according to the parsed content, so as to complete the design of the visual front-end page to be edited.
  • the component data file acquisition module 330 includes: a location layout determination unit, configured to determine the location layout of the component according to the first instruction in the instruction content; a target location determination unit, is set to determine the target position of the component according to the position layout of the component and the second instruction in the content of the instruction; the component data file acquisition unit is set to determine the target position of the component according to the third instruction in the content of the instruction properties of the component.
  • the first instruction includes: a component position layout instruction; the second instruction includes: a position movement instruction; and the third instruction includes: an attribute input instruction.
  • the apparatus further includes: a page preview module, configured to display the new page in the page preview area in response to the page preview request.
  • the device further includes: a mapping relationship building module, configured to use an event subscription mechanism to build a mapping relationship between the components and events.
  • the components include: a button control, a table control, an export button control, an auto-fill text box control, a selection box control, a date selection box control, a search and bring back text box control, and a digital text box At least one of a control, a radio button control, a drop-down selection box control, a tree control, a text area control, a text input box, a tree selection control, an upload control, and an editable table control.
  • the above-mentioned product can execute the front-end page design method provided by the embodiment of the present application, and has corresponding functional modules and effects for executing the method.
  • Embodiments of the present application further provide a storage medium containing computer-executable instructions, where the computer-executable instructions are used to execute a front-end page design method when executed by a computer processor, the method comprising: displaying a visual front-end to be edited page, collect the user input operation in the visual front-end page to be edited; determine the instruction content for operating the component according to the user input operation; determine the location layout of the component according to the instruction content, the component's The target position and the attributes of the components are obtained according to the position layout of the components, the target position of the components, and the attributes of the components to obtain a component data file; the component data files are parsed and determined according to the parsed content A new page to complete the design of the to-be-edited visual front-end page.
  • storage medium any of various types of memory devices or storage devices.
  • the term “storage medium” is intended to include: installation media, such as Compact Disc Read-Only Memory (CD-ROM), floppy disks, or tape devices; computer system memory or random access memory, such as dynamic random access memory (Dynamic Random Access Memory, DRAM), Double Data Rate Random Access Memory (DDR RAM), Static Random Access Memory (Static Random Access Memory, SRAM), Extended Data Output Random Access Memory ( Extended Data Output Random Access Memory, EDO RAM), Rambus Random Access Memory (Rambus RAM), etc.; non-volatile memory, such as flash memory, magnetic media (such as hard disk or optical storage); registers or other similar types of memory elements, etc.
  • the storage medium may also include other types of memory or combinations thereof.
  • the storage medium may be located in the computer system in which the program is executed, or may be located in a different second computer system connected to the computer system through a network such as the Internet.
  • the second computer system may provide program instructions to the computer for execution.
  • the term "storage medium" may include two or more storage media that may reside in different locations (eg, in different computer systems connected by a network).
  • a storage medium may store program instructions (eg, implemented as a computer program) executable by one or more processors.
  • a storage medium containing computer-executable instructions provided by an embodiment of the present application the computer-executable instructions of which are not limited to the front-end page design operations described above, and can also execute any of the front-end page design methods provided by any embodiment of the present application. related operations.
  • FIG. 4 is a schematic structural diagram of a device provided in Embodiment 4 of the present application. As shown in FIG.
  • this embodiment provides a device 400, which includes: one or more processors 420; and a storage device 410, configured to store one or more programs, when the one or more programs are stored
  • the one or more processors 420 execute, so that the one or more processors 420 implement the front-end page design method provided by the embodiment of the present application, the method includes: displaying the visual front-end page to be edited, collecting the to-be-edited front-end page
  • the user input operation in the visual front-end page according to the user input operation, determine the content of the instruction to operate the component; according to the content of the instruction, determine the position layout of the component, the target position of the component, and the component Attribute of the component, obtain the component data file according to the position layout of the component, the target position of the component, and the attribute of the component; parse the component data file, and determine a new page according to the parsed content to complete the The design of the visual front-end page to be edited.
  • the processor 420 also implements the technical solution of the front-end page design method provided by any embodiment of the present application.
  • the device 400 shown in FIG. 4 is only an example, and should not impose any limitations on the functions and scope of use of the embodiments of the present application.
  • the device 400 includes a storage device 410, a processor 420, an input device 430 and an output device 440; the number of processors 420 in the device may be one or more, and one processor 420 is taken as an example in FIG. 4 ;
  • the storage device 410, the processor 420, the input device 430, and the output device 440 in the device may be connected through a bus or in other ways. In FIG. 4, the connection through the bus 450 is taken as an example.
  • the storage device 410 may be configured to store software programs, computer-executable programs, and module units, such as program instructions corresponding to the front-end page design method in the embodiments of the present application.
  • the storage device 410 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function; the storage data area may store data created according to the use of the terminal, and the like. Additionally, storage device 410 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage device. In some examples, storage device 410 may include memory located remotely from processor 420, which may be connected through a network. Examples of such networks include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
  • the input device 430 may be configured to receive input numbers, character information, or voice information, and to generate key signal inputs related to user settings and function control of the device.
  • the output device 440 may include a display screen, a speaker, and the like.
  • the device provided by the embodiment of the present application can achieve the purpose of improving the design speed and processing effect of the front-end page.
  • the front-end page design apparatus, storage medium and device provided in the above embodiments can execute the front-end page design method provided by any embodiment of the present application, and have corresponding functional modules and effects for executing the method.
  • the front-end page design method provided by any embodiment of the present application can execute the front-end page design method provided by any embodiment of the present application, and have corresponding functional modules and effects for executing the method.

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

前端页面设计方法、装置、存储介质及设备
本申请要求在2020年09月01日提交中国专利局、申请号为202010904310.1的中国专利申请的优先权，该申请的全部内容通过引用结合在本申请中。
技术领域
本申请涉及前端开发技术领域，例如涉及一种前端页面设计方法、装置、存储介质及设备。
背景技术
随着互联网时代的到来，多种页面大量涌现，页面前端产生了天翻地覆的变化，多种多媒体元素的使用使得页面的内容更加生动，页面前端技术在应用开发过程中也得到了越来越广泛的使用。
多种应用的普及使得用户对站点的期望越来越高，直接导致网站前端规模不断扩大，越来越多的前端脚本代码增加到应用系统中，前端开发出现了代码规模大，组织维护困难，代码重用性低，扩展性差等问题。建立合理的前端开发架构，并遵循开发标准和规范将越来越重要。
常用的前端开发框架是模型-视图-控制器(Model View Controller，MVC)框架和模型-视图-视图模型(Model-View-ViewModel，MVVM)框架，使用这两种框架开发前端页面设计的难度大，开发效率低。
发明内容
本申请提供一种前端页面设计方法、装置、存储介质及设备，以提升前端页面开发效率。
本申请提供了一种前端页面设计方法，该方法包括：
展示待编辑的可视化前端页面，采集所述待编辑的可视化前端页面中的用户输入操作；
根据所述用户输入操作，确定对组件进行操作的指令内容；
根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件；
对所述组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。
本申请提供了一种前端页面设计装置，该装置包括：
用户输入操作采集模块，设置为展示待编辑的可视化前端页面，采集所述待编辑的可视化前端页面中的用户输入操作；
指令内容确定模块，设置为根据所述用户输入操作，确定对组件进行操作的指令内容；
组件数据文件获取模块，设置为根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件；
页面确定模块，设置为对所述组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。
本申请提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的前端页面设计方法。
本申请提供了一种设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，所述处理器执行所述计算机程序时实现上述的前端页面设计方法。
附图说明
图1是本申请实施例一提供的一种前端页面设计方法的流程图；
图2是本申请实施例一提供的一种待编辑可视化前端页面示意图；
图3是本申请实施例二提供的一种前端页面设计装置的结构示意图；
图4是本申请实施例四提供的一种设备的结构示意图。
具体实施方式
下面结合附图和实施例对本申请进行说明。
在讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将多个步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，多个步骤的顺序可 以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
实施例一
图1是本申请实施例一提供的一种前端页面设计方法的流程图，本实施例可适用于前端页面设计的情况，该方法可以由本申请实施例所提供的前端页面设计装置执行，该装置可以由软件和/或硬件的方式来实现，并可集成于设置为页面设计的智能终端等设备中。
如图1所示，所述前端页面设计方法包括：
S110、展示待编辑的可视化前端页面，采集待编辑的可视化前端页面中的用户输入操作。
在本实施例中，待编辑的可视化前端页面，可以是基于React和React-拖放(React-Drag and Drop，React-DND)开发出来的待编辑的可视化前端页面。其中，React主要是用于构建页面，可以与已知的库和框架很好的配合。React-DND是一组React高阶组件，使用的时候只需要使用对应的应用程序接口(Application Programming Interface，API)将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。
用户输入操作可以是在待编辑的可视化前端页面进行点选操作，也可以是在待编辑的可视化前端页面进行拖拽操作。
在本实施例中，展示待编辑的可视化前端页面，用户可以根据需求对可视化前端页面进行编辑。
如图2所示，用户可以根据需求对待编辑的可视化前端页面进行操作。其中，待编辑的可视化前端页面中components文件下主要放的是表单组件以及一些其他的封装的可复用的组件。components下的Form主要放的是设计器中用到的表单组件。constants文件下主要放的是一些静态资源文件和一些封装的公共的方法。components下的colConfigComponent主要是列配置的属性的组件，例如：显示表格、编辑表格、查找带回等组件中的列配置。components下的designComponents主要放的是用来渲染出设计器左边页面的组件，例如：分区、组、行、列、组件等，以及设计器右边的页面组件，例如：添加组件、元数据设置、编辑组件等。components下的FormComponent主要放的是在设计器中需要复用的一些自定义的表单组件。components下的styledComponents主要放的是一些样式组件。containers下的应用(Application，App)文件是项目的入口文件。containers下的HomePage文件是项目的首页。containers下的PageContainer 文件是设计器的主题内容。feathers文件下是请求后端的接口配置。schema文件中放的是转换数据的文件，用于从接口拿到数据之后把数据结构打平，当保存时把打平的数据结构还原。其中，用户可以根据需求对文件的命名进行自定义。
S120、根据所述用户输入操作，确定对组件进行操作的指令内容。
指令内容可以是对组件进行移动，也可以是对组件进行编辑。
在本实施例中，组件可以是对一事件以及事件属性进行封装形成的。例如，按钮控件，按钮控件封装的事件是点击，属性是是否可用、是否显示、按钮类型以及尺寸大小。通过对事件以及事件属性进行封装就可以形成按钮控件。
在本技术方案中，可选的，所述组件包括：按钮控件、表格控件、导出按钮控件、自动填充文本框控件、选择框控件、日期选择框控件、查找带回文本框控件、数字文本框控件、单选按钮控件、下拉选择框控件、树控件、文本区域控件、文本输入框、树选择控件、上传控件以及可编辑表格控件中的至少一个。
通过对不同的组件进行选择，并进行属性更改，可以对可视化前端页面进行设计，并形成新的页面，提升了前端页面开发效率。
S130、根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件。
位置布局可以是组件在前端页面上的区域。例如，可以将组件放置在前端页面的左上角区域，也可以将组件放置在前端页面的右上角区域。
目标位置可以是组件在前端页面上的位置。例如，可以将组件放置在左上角区域的中心位置，也可以将组件放置在左上角区域的右上角位置。
属性可以是组件的性质，与组件本身有关。例如，按钮控件的属性包括是否可用、是否显示、按钮类型以及尺寸大小。自动完成控件的属性包括自动完成控件的数据源、自动完成的主键、是否显示、是否可用以及控件尺寸大小。
组件数据文件可以是组件配置生成的元数据文件。
在本技术方案中，可选的，根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，包括：
根据所述指令内容中的第一指令，确定所述组件的位置布局；根据所述组件的位置布局和所述指令内容中的第二指令，确定所述组件的目标位置；根据所述指令内容中的第三指令，确定所述组件的属性。
在本实施例中，首先根据第一指令确定组件的位置布局，然后根据组件的 位置布局和第二指令确定组件的目标位置，确定组件的目标位置后，可以根据需求对组件的属性进行更改，并获得组件数据文件。
通过不同的指令确定组件的位置布局、目标位置以及对组件属性进行更改，可以对前端页面进行设计、在线编辑等操作，提升了前端页面的开发效率。
在本技术方案中，可选的，所述第一指令包括：组件位置布局指令；所述第二指令包括：位置移动指令；所述第三指令包括：属性键入指令。
在本实施例中，组件位置布局指令可以是对组件的位置进行布局的指令，用于确定组件所在的区域。
在本实施例中，位置移动指令可以是拖、拉或拽操作，通过这些操作可以对组件的位置进行移动，将组件移动至目标位置。
在本实施例中，属性键入指令可以是对组件属性进行更改的指令。例如，按钮控件的属性是是否可用、是否显示、按钮类型以及尺寸大小，通过属性键入指令可以对是否可用属性进行操作，将是否可用点选为可用。
通过指令对组件进行操作，可以对前端页面进行设计，针对性强，且可以提高前端页面开发效率。
S140、对所述组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。
在本实施例中，获得组件数据文件后，对组件数据文件进行解析，获得解析内容，根据解析内容渲染出相应的页面，可以完成对可视化前端页面的设计。
在本技术方案中，可选的，在对所述组件数据文件进行解析，并根据解析内容确定新的页面之后，还包括：
响应于页面预览请求，在页面预览区域中展示所述新的页面。
根据组件数据文件的解析内容，可以确定新的页面，通过预览操作，可以在预览区域中展示新的页面，方便用户查看新的页面。
本申请实施例所提供的技术方案，首先展示待编辑的可视化前端页面，并采集所述待编辑的可视化前端页面中的用户输入操作，根据用户输入操作，确定对组件进行操作的指令内容，根据指令内容确定组件的位置布局，组件的目标位置，以及组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件，对组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。通过执行本技术方案，可以使用组件化、可视化方法对前端页面进行设计、在线编辑等操作，提升了前端页面的开发效率。
在上述技术方案的基础上，可选的，在获得组件数据文件之后，所述方法还包括：
采用事件订阅机制，构建所述组件和事件之间的映射关系。
事件可以是对组件进行的操作。例如，根据指令对按钮控件进行移动，将按钮控件放置在目标位置上，则按钮控件移动就是事件。
在本实施例中，通过搜集每个组件的事件，建立组件和事件之间的映射关系，当选择了元数据身份文件(Identity Document，ID)之后，会根据选择的元数据ID查出当前元数据页面的所有组件，当选择组件之后会根据组件的映射关系，显示出当前组件所具有的事件。然后可以通过配置事件来发布、订阅组件的相应的行为。
通过事件订阅机制，可以构建组件和事件之间的映射关系，然后可以通过配置事件来发布、订阅组件的相应的行为，完成对可视化前端页面进行设计，提升了前端页面开发效率。
实施例二
图3是本申请实施例二提供的一种前端页面设计装置的结构示意图，如图3所示，所述装置包括：用户输入操作采集模块310、指令内容确定模块320、组件数据文件获取模块330以及页面确定模块340。
用户输入操作采集模块310，设置为展示待编辑的可视化前端页面，采集所述待编辑的可视化前端页面中的用户输入操作。
指令内容确定模块320，设置为根据所述用户输入操作，确定对组件进行操作的指令内容。
组件数据文件获取模块330，设置为根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件。
页面确定模块340，设置为对所述组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。
在本技术方案中，可选的，组件数据文件获取模块330，包括：位置布局确定单元，设置为根据所述指令内容中的第一指令，确定所述组件的位置布局；目标位置确定单元，设置为根据所述组件的位置布局和所述指令内容中的第二指令，确定所述组件的目标位置；组件数据文件获取单元，设置为根据所述指令内容中的第三指令，确定所述组件的属性。
在本技术方案中，可选的，所述第一指令包括：组件位置布局指令；所述 第二指令包括：位置移动指令；所述第三指令包括：属性键入指令。
在本技术方案中，可选的，所述装置，还包括：页面预览模块，设置为响应于页面预览请求，在页面预览区域中展示所述新的页面。
在本技术方案中，可选的，所述装置还包括：映射关系构建模块，设置为采用事件订阅机制，构建所述组件和事件之间的映射关系。
在本技术方案中，可选的，所述组件包括：按钮控件、表格控件、导出按钮控件、自动填充文本框控件、选择框控件、日期选择框控件、查找带回文本框控件、数字文本框控件、单选按钮控件、下拉选择框控件、树控件、文本区域控件、文本输入框、树选择控件、上传控件以及可编辑表格控件中的至少一个。
上述产品可执行本申请实施例所提供的前端页面设计方法，具备执行该方法相应的功能模块和效果。
实施例三
本申请实施例还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种前端页面设计方法，该方法包括：展示待编辑的可视化前端页面，采集所述待编辑的可视化前端页面中的用户输入操作；根据所述用户输入操作，确定对组件进行操作的指令内容；根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件；对所述组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。
存储介质——任何的多种类型的存储器设备或存储设备。术语“存储介质”旨在包括：安装介质，例如光盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、软盘或磁带装置；计算机系统存储器或随机存取存储器，诸如动态随机存取存储器(Dynamic Random Access Memory，DRAM)、双倍速率随机存取存储器(Double Data Rate Random Access Memory，DDR RAM)、静态随机存取存储器(Static Random Access Memory，SRAM)、扩展数据输出随机存取存储器(Extended Data Output Random Access Memory，EDO RAM)，Rambus随机存取存储器(Rambus Random Access Memory，Rambus RAM)等；非易失性存储器，诸如闪存、磁介质(例如硬盘或光存储)；寄存器或其它相似类型的存储器元件等。存储介质可以还包括其它类型的存储器或其组合。另外，存储介质可以位于程序在其中被执行的计算机系统中，或者可以位于不同的第二计算机系统中，第二计算机系统通过网络(诸如因特网)连接到计算机系统。 第二计算机系统可以提供程序指令给计算机用于执行。术语“存储介质”可以包括可以驻留在不同位置中(例如在通过网络连接的不同计算机系统中)的两个或更多存储介质。存储介质可以存储可由一个或多个处理器执行的程序指令(例如实现为计算机程序)。
本申请实施例所提供的一种包含计算机可执行指令的存储介质，其计算机可执行指令不限于如上所述的前端页面设计操作，还可以执行本申请任意实施例所提供的前端页面设计方法中的相关操作。
实施例四
本申请实施例提供了一种设备，该设备中可集成本申请实施例提供的前端页面设计装置。图4是本申请实施例四提供的一种设备的结构示意图。如图4所示，本实施例提供了一种设备400，其包括：一个或多个处理器420；存储装置410，设置为存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器420执行，使得所述一个或多个处理器420实现本申请实施例所提供的前端页面设计方法，该方法包括：展示待编辑的可视化前端页面，采集所述待编辑的可视化前端页面中的用户输入操作；根据所述用户输入操作，确定对组件进行操作的指令内容；根据所述指令内容确定所述组件的位置布局，所述组件的目标位置，以及所述组件的属性，根据所述组件的位置布局，所述组件的目标位置，以及所述组件的属性获得组件数据文件；对所述组件数据文件进行解析，并根据解析内容确定新的页面，以完成对所述待编辑的可视化前端页面的设计。
处理器420还实现本申请任意实施例所提供的前端页面设计方法的技术方案。
图4显示的设备400仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图4所示，该设备400包括存储装置410、处理器420、输入装置430和输出装置440；设备中处理器420的数量可以是一个或多个，图4中以一个处理器420为例；设备中的存储装置410、处理器420、输入装置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中任一项所述的前端页面设计方法。
PCT/CN2021/106202 2020-09-01 2021-07-14 前端页面设计方法、装置、存储介质及设备 WO2022048316A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010904310.1A CN112083920A (zh) 2020-09-01 2020-09-01 一种前端页面设计方法、装置、存储介质及设备
CN202010904310.1 2020-09-01

Publications (1)

Publication Number Publication Date
WO2022048316A1 true WO2022048316A1 (zh) 2022-03-10

Family

ID=73731880

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/106202 WO2022048316A1 (zh) 2020-09-01 2021-07-14 前端页面设计方法、装置、存储介质及设备

Country Status (2)

Country Link
CN (1) CN112083920A (zh)
WO (1) WO2022048316A1 (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114446417A (zh) * 2022-04-06 2022-05-06 深圳市帝迈生物技术有限公司 多模式约束规则的配置方法、装置、设备和存储介质
CN115934068A (zh) * 2022-11-11 2023-04-07 中电金信软件有限公司 数据统计页面的生成方法、显示方法、服务器及移动终端
CN116257719A (zh) * 2023-05-16 2023-06-13 建信金融科技有限责任公司 页面更新方法、装置、计算机设备和存储介质
CN116431138A (zh) * 2022-11-24 2023-07-14 昆仑数智科技有限责任公司 组件模板的建立方法和装置、表单建立方法和装置
CN117591117A (zh) * 2024-01-19 2024-02-23 中建三局信息科技有限公司 页面生成方法、系统、设备及存储介质

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112083920A (zh) * 2020-09-01 2020-12-15 北京锐安科技有限公司 一种前端页面设计方法、装置、存储介质及设备
CN113741877A (zh) * 2021-08-02 2021-12-03 紫金诚征信有限公司 一种基于web前端的可视化工作流编辑方法及装置
CN113778413A (zh) * 2021-09-14 2021-12-10 销秘(重庆)云计算科技有限公司 页面开发方法、装置及存储介质
CN113791783B (zh) * 2021-09-14 2022-11-29 科东(广州)软件科技有限公司 控件生成方法、装置、设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109508191A (zh) * 2018-11-22 2019-03-22 北京腾云天下科技有限公司 一种代码生成方法及系统
CN110597506A (zh) * 2019-11-14 2019-12-20 南京百敖软件有限公司 一种前端应用可视化开发工具和使用方法
US10592238B2 (en) * 2017-06-05 2020-03-17 Umajin Inc. Application system that enables a plurality of runtime versions of an application
CN112083920A (zh) * 2020-09-01 2020-12-15 北京锐安科技有限公司 一种前端页面设计方法、装置、存储介质及设备

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109101304A (zh) * 2018-07-05 2018-12-28 北京微播视界科技有限公司 界面的自动生成方法、装置、电子设备和计算机可读介质
CN109739497A (zh) * 2018-12-06 2019-05-10 深圳市中农网有限公司 页面开发方法、装置、计算机设备及存储介质
CN110058856B (zh) * 2019-04-28 2023-08-01 恒生电子股份有限公司 页面配置方法及装置
CN110083790A (zh) * 2019-04-30 2019-08-02 珠海随变科技有限公司 页面编辑方法、页面输出方法、装置、计算机设备及介质
CN110442336A (zh) * 2019-08-05 2019-11-12 上海钧正网络科技有限公司 一种网页开发方法及装置、存储介质及电子设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10592238B2 (en) * 2017-06-05 2020-03-17 Umajin Inc. Application system that enables a plurality of runtime versions of an application
CN109508191A (zh) * 2018-11-22 2019-03-22 北京腾云天下科技有限公司 一种代码生成方法及系统
CN110597506A (zh) * 2019-11-14 2019-12-20 南京百敖软件有限公司 一种前端应用可视化开发工具和使用方法
CN112083920A (zh) * 2020-09-01 2020-12-15 北京锐安科技有限公司 一种前端页面设计方法、装置、存储介质及设备

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114446417A (zh) * 2022-04-06 2022-05-06 深圳市帝迈生物技术有限公司 多模式约束规则的配置方法、装置、设备和存储介质
CN115934068A (zh) * 2022-11-11 2023-04-07 中电金信软件有限公司 数据统计页面的生成方法、显示方法、服务器及移动终端
CN116431138A (zh) * 2022-11-24 2023-07-14 昆仑数智科技有限责任公司 组件模板的建立方法和装置、表单建立方法和装置
CN116431138B (zh) * 2022-11-24 2024-04-05 昆仑数智科技有限责任公司 组件模板的建立方法和装置、表单建立方法和装置
CN116257719A (zh) * 2023-05-16 2023-06-13 建信金融科技有限责任公司 页面更新方法、装置、计算机设备和存储介质
CN116257719B (zh) * 2023-05-16 2023-07-21 建信金融科技有限责任公司 页面更新方法、装置、计算机设备和存储介质
CN117591117A (zh) * 2024-01-19 2024-02-23 中建三局信息科技有限公司 页面生成方法、系统、设备及存储介质
CN117591117B (zh) * 2024-01-19 2024-04-23 中建三局信息科技有限公司 页面生成方法、系统、设备及存储介质

Also Published As

Publication number Publication date
CN112083920A (zh) 2020-12-15

Similar Documents

Publication Publication Date Title
WO2022048316A1 (zh) 前端页面设计方法、装置、存储介质及设备
CN107844297B (zh) 一种数据可视化实现系统及方法
CA2951145C (en) Page constructor and page constructing method
CN106462555B (zh) 用于web内容生成的方法和系统
US7698628B2 (en) Method and system to persist state
US9244658B2 (en) Multi-step auto-completion model for software development environments
US11600301B2 (en) Method and device of editing a video
US20150039996A1 (en) System and method for dynamically converting webpage, and computer-readable recording medium
US20130031455A1 (en) System for Linking to Documents with Associated Annotations
US11245951B2 (en) Display device and content providing method thereof
CN104090979A (zh) 一种网页编辑方法及装置
CN115617327A (zh) 低代码页面搭建系统、方法及计算机可读存储介质
KR101951719B1 (ko) 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템
KR20180091838A (ko) 페이지 구축 방법, 단말기, 컴퓨터 판독 가능 저장 매체 및 페이지 구축기기
CN110941428B (zh) 一种网站创建方法和装置
CN111078221A (zh) 页面颜色主题的切换方法、装置、存储介质及电子设备
CN111813403A (zh) 大屏数据可视化开发中拖拽组件数据管理的方法和装置
WO2013109858A1 (en) Design canvas
CN113448569A (zh) 一种站点页面的处理系统、方法、设备和存储介质
KR101730070B1 (ko) ＳａａＳ 환경에서의 웹페이지 서비스 방법, 이를 위한 컴퓨터 프로그램, 그 기록매체
KR20120000595A (ko) 멀티플랫폼에서 구동되는 온라인 멀티미디어 콘텐츠 제작툴 제공 방법 및 시스템
US11526578B2 (en) System and method for producing transferable, modular web pages
CN115639998A (zh) 报表管理方法、装置和存储介质及电子装置
CN112596732A (zh) 一种电子教材制作方法及系统
CN113704593B (zh) 一种运营数据处理方法及相关装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21863384

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21863384

Country of ref document: EP

Kind code of ref document: A1

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205 DATED 22/09/2023)