Visual interface design method and device, equipment and medium

Abstract

The invention provides a visual interface design method and device, equipment and a medium, and the method comprises the steps: dragging a page element component from a user interface according to a business demand, carrying out model driving to complete interface construction, and generating an interface structure source code; generating standard model information of the interface structure according to the interface structure source code by utilizing an interface source code conversion device; according to the standard model information and the selected front-end framework template, template matching mapping is carried out, and the target function interface source code is generated, data conversion of the standard model information is carried out through the template matching mapping relation between the standard model information and the front-end framework template, the generated target function interface source code is higher in quality, and the user experience is improved. The target function interface is better matched with the technical architecture of the service system, the obtained source code of the target function interface can be edited for the second time, maintenance and repeated utilization are facilitated, the local research and development environment is weakened, and the research and development efficiency of research and development personnel is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of platform research and development, and particularly relates to a method, device, equipment and medium for visual interface design. Background Art

[0002] The technology of visual interface construction is an important part of the software development environment. With the development of cloud computing and mobile applications, the technology of visual interface construction is no longer limited to desktop applications and gradually expands to Web applications and mobile applications. More and more developers begin to use visual interface construction tools, which provide a more user-friendly interface. By dragging and dropping components to build the interface, there is no need to write code manually, reducing the development time. Moreover, the technology of visual interface construction provides an intuitive interface, and non-professional developers can also use the technology of visual interface construction to create the user interface of applications. Some new visual interface construction tools, such as Sketch and Figma, etc., have begun to become popular, and these tools provide a more intuitive design experience and more exquisite UI design.

[0003] However, in the existing visual interface construction and choreography technology, due to the possible differences in the parsing and execution methods of some codes for different platforms and browsers, the components generated by dragging may have compatibility problems, not fully match the technical architecture of the required business system, and the obtained functional interface is not accurate enough, reducing the development quality. Moreover, the source code generated by directly dragging components is difficult to understand and maintain intuitively, reducing the readability and maintainability of the source code of the functional interface. Summary of the Invention

[0004] In order to solve the problem of low development quality caused by the incomplete matching between the components generated by dragging and the technical architecture of the required business system in the prior art, the present invention proposes a method for visual interface design, including:

[0005] Drag page element components from the user interface according to business requirements and complete interface construction through model driving to generate interface structure source code;

[0006] Use the interface source code conversion device to generate standard model information of the interface structure according to the interface structure source code;

[0007] Perform template matching mapping according to the standard model information and the selected front-end framework template to generate target functional interface source code.

[0008] Optionally, the performing template matching mapping according to the standard model information and the selected front-end framework template to generate target functional interface source code includes:

[0009] Read the information of the front - end framework template according to the model object information that needs to be converted into the front - end framework structure in the standard template information of the interface structure;

[0010] Use the template matching mapping relationship between the standard template information and the front - end framework template to perform template matching mapping, complete the data conversion of the standard template information, and generate the source code of the target functional interface.

[0011] Optionally, the selection of the front - end framework template includes: selecting the front - end framework template from the front - end framework template library according to the technical architecture selection requirements of the business system.

[0012] Optionally, the use of the interface source code conversion device to generate the standard model information of the interface structure includes:

[0013] Use the interface source code conversion device to separate the interface elements, operation events, and data access model binding information from the interface structure source code, and generate the standard model information of the interface structure.

[0014] Optionally, the interface structure source code is the interface structure Json source code.

[0015] Optionally, the user interface presents multiple page element components in a graphical way.

[0016] Based on the same inventive concept, the present invention proposes a visual interface design device, including:

[0017] An interface construction module, configured to drag page element components from the user interface according to business requirements and complete interface construction through model - driven, generating the interface structure source code;

[0018] A standard model information generation module, configured to generate the standard model information of the interface structure according to the interface structure source code;

[0019] A source code conversion module, configured to perform template matching mapping according to the standard model information and the selected front - end framework template, and generate the source code of the target functional interface.

[0020] Optionally, the source code conversion module is specifically configured to:

[0021] Read the information of the front - end framework template according to the model object information that needs to be converted into the front - end framework structure in the standard template information of the interface structure;

[0022] Use the template matching mapping relationship between the standard template information and the front - end framework template to perform template matching mapping, complete the data conversion of the standard template information, and generate the source code of the target functional interface.

[0023] Optionally, the selection of the front-end framework template in the source code conversion module includes: selecting a front-end framework template from a front-end framework template library according to the technical architecture selection requirements of the business system.

[0024] Optionally, the standard model information generation module is specifically configured to:

[0025] Use the interface source code conversion device to separate interface elements, operation events, and data access model binding information from the interface structure source code, and generate standard model information for the interface structure.

[0026] Optionally, the interface structure source code in the interface construction module is an interface structure Json source code.

[0027] Optionally, the user interface in the interface construction module presents multiple page element components in a graphical manner.

[0028] On the other hand, the present application also provides a computing device, including: one or more processors;

[0029] The processor is used to execute one or more programs;

[0030] When the one or more programs are executed by the one or more processors, the above-mentioned visual interface design method is implemented.

[0031] On the other hand, the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed, the above-mentioned visual interface design method is implemented.

[0032] Compared with the closest prior art, the beneficial effects of the present invention are as follows:

[0033] A visual interface design method, device, device, and medium provided by the present invention include: dragging page element components from the user interface according to business requirements and completing interface construction through model driving to generate interface structure source code; using the interface source code conversion device to generate standard model information for the interface structure according to the interface structure source code; performing template matching mapping according to the standard model information and the selected front-end framework template to generate target function interface source code. The present application performs data conversion of the standard model information through the template matching mapping relationship between the standard model information and the front-end framework template, and the generated target function interface source code has higher quality, and the target function interface is more compatible with the technical architecture of the business system; and the obtained target function interface source code can be edited secondarily, which is convenient for maintenance and reuse, weakens the local R & D environment, and improves the R & D efficiency of R & D personnel. Description of the Drawings

[0034] Figure 1Flow diagram of a visual interface design method provided by the present invention;

[0035] Figure 2 Specific process block diagram of a visual interface design method;

[0036] Figure 3 Flow diagram of source code conversion;

[0037] Figure 4 Structural diagram of a visual interface design device provided by the present invention. Detailed implementation manners

[0038] The following further elaborates on the detailed implementation manners of the present invention with reference to the accompanying drawings.

[0039] Example 1:

[0040] The present invention proposes a visual interface design method, as Figure 1 shown, including:

[0041] S1. Drag page element components from the user interface according to business requirements and complete interface construction through model-driven to generate interface structure source code;

[0042] S2. Use the interface source code conversion device to generate standard model information of the interface structure according to the interface structure source code;

[0043] S3. Perform template matching mapping according to the standard model information and the selected front-end framework template to generate target functional interface source code.

[0044] Combined with Figure 2 to introduce a visual interface design method in detail.

[0045] In step S1, the user interface presents multiple page element components in a graphical manner.

[0046] According to business requirements, developers drag and perform model-driven operations on the page element components of the user interface through the graphical user interface, complete interface construction in the visual page constructor, construct business application functions, and generate interface structure data (Json format file), that is, interface structure Json source code.

[0047] After the construction of the functional interface is achieved, it is also necessary to use source code conversion based on template engine technology to convert interface metadata to mainstream front-end frameworks (such as Vue, React, etc.) to complete the source code conversion of the functional interface.

[0048] In step S2, the use of the interface source code conversion device to generate standard model information of the interface structure according to the interface structure source code includes:

[0049] Input the JSON source code of the interface structure into the interface source code conversion device (i.e., the interface parser in Figure 2 ), and use the source code conversion device to perform interface parsing on the JSON source code of the interface structure;

[0050] Use the source code conversion device to separate interface elements (such as buttons, lists, text boxes, etc.), operation events (such as query events, save events, delete events, etc.) and data access model binding information from the JSON source code of the interface structure, and generate standard model information of the interface structure (functional interface), that is, the standard model information corresponding to the JSON source code of the interface structure.

[0051] In step S3, as Figure 3 shown, select a front-end framework template from the front-end framework template library according to the business system technical architecture selection requirements of the R & D personnel, and obtain the corresponding framework template information (including MX, MVVM, VUE, React, etc.). Each front-end framework template includes various component information (including file box components, drop-down box components, radio box components, etc.). Establish a corresponding matching mapping relationship between the standard model information corresponding to the JSON source code of the interface structure and the front-end framework template for source code conversion.

[0052] Perform template matching mapping according to the standard model information and the selected front-end framework template to generate the target functional interface source code, including:

[0053] Read the information of the front-end framework template according to the model object information that needs to be converted into the front-end framework structure in the standard template information of the interface structure;

[0054] Use the template matching mapping relationship between the standard template information and the front-end framework template to perform template matching mapping, complete the data conversion of the standard template information, that is, realize the source code conversion process of converting the interface construction source code into the corresponding front-end interface source code according to the business technical architecture requirements, complete the matching of the page element components of the interface structure, generate the target functional interface source code, and the generated target functional interface source code is a complete interface source code that can be directly run by the browser.

[0055] As Figure 2 and Figure 3 shown, preview the generated interface source code, and support previewing the functional interface generated from the interface source code. The interface source code is displayed in HTML language.

[0056] The present invention supports interface preview and the ability to convert the interface construction source code into the corresponding front-end interface source code according to the requirements of the business technology architecture. Through the template matching mapping relationship, data conversion of the standard model information of the interface structure is performed, and the generated target function interface source code has higher quality. The target function interface is more compatible with the business system technology architecture, improving the R & D efficiency, reducing the R & D technical difficulty, and providing R & D personnel with the ability to quickly and agilely build interfaces. Moreover, the target function interface source code obtained through source code conversion supports online secondary editing, facilitating maintenance and reuse, weakening the local R & D environment, and improving the R & D efficiency of R & D personnel.

[0057] Embodiment 2:

[0058] Based on the same inventive concept, the present invention also provides a visual interface design device, as Figure 4 shown, including:

[0059] An interface construction module, configured to drag page element components from the user interface according to business requirements and complete interface construction through model-driven, generating interface structure source code;

[0060] A standard model information generation module, configured to generate standard model information of the interface structure according to the interface structure source code;

[0061] A source code conversion module, configured to perform template matching mapping according to the standard model information and the selected front-end framework template, generating target function interface source code.

[0062] The source code conversion module is specifically configured to:

[0063] Read the information of the front-end framework template according to the model object information that needs to be converted into the front-end framework structure in the standard template information of the interface structure;

[0064] Use the template matching mapping relationship between the standard template information and the front-end framework template to perform template matching mapping, complete the data conversion of the standard template information, and generate target function interface source code.

[0065] The selection of the front-end framework template in the source code conversion module includes: selecting the front-end framework template from the front-end framework template library according to the business system technology architecture selection requirements.

[0066] The standard model information generation module is specifically configured to:

[0067] Use the interface source code conversion device to separate interface elements, operation events, and data access model binding information from the interface structure source code, generating standard model information of the interface structure.

[0068] The interface structure source code in the interface construction module is interface structure Json source code.

[0069] The user interface in the interface construction module presents multiple page element components in a graphical manner.

[0070] Embodiment 3:

[0071] Based on the same inventive concept, the present invention also provides a computer device, which includes a processor and a memory. The memory is used to store a computer program, and the computer program includes program instructions. The processor is used to execute the program instructions stored in the computer storage medium. The processor may be a Central Processing Unit (CPU), or may also be other general-purpose processors, Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field-Programmable Gate Arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. It is the computing core and control core of the terminal, and is suitable for implementing one or more instructions. Specifically, it is suitable for loading and executing one or more instructions in the computer storage medium to implement the corresponding method flow or corresponding function, so as to implement the steps of a visual interface design method in the above embodiments.

[0072] Embodiment 4:

[0073] Based on the same inventive concept, the present invention also provides a storage medium, specifically a computer-readable storage medium (Memory). The computer-readable storage medium is a memory device in a computer device and is used to store programs and data. It can be understood that the computer-readable storage medium here can include both the built-in storage medium in the computer device and, of course, the extended storage medium supported by the computer device. The computer-readable storage medium provides a storage space, and the operating system of the terminal is stored in this storage space. And, one or more instructions suitable for being loaded and executed by the processor are also stored in this storage space. These instructions can be one or more computer programs (including program codes). It should be noted that the computer-readable storage medium here can be a high-speed RAM memory or a non-volatile memory, such as at least one disk memory. One or more instructions stored in the computer-readable storage medium can be loaded and executed by the processor to implement the steps of a visual interface design method in the above embodiments.

[0074] Those skilled in the art should understand that the embodiments of the present invention can be provided as a method, a system, or a computer program product. Therefore, the present invention can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memory, CD-ROM, optical memory, etc.) that contain computer-usable program code.

[0075] The present invention is described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to embodiments of the present invention. It should be understood that each flow and / or block in the flowchart and / or block diagram, as well as the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices generate means for implementing the functions specified in Figure 1 one flow or multiple flows and / or blocks Figure 1 one block or multiple blocks.

[0076] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory generate a manufactured article including instruction means that implement the functions specified in Figure 1 one flow or multiple flows and / or blocks Figure 1 one block or multiple blocks.

[0077] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in Figure 1 one flow or multiple flows and / or blocks Figure 1 one block or multiple blocks.

[0078] The above are only embodiments of the present invention and are not used to limit the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention are included in the scope of the claims of the present invention pending approval.

Claims

1. A method for visual interface design, characterized in that, it includes: Drag page element components from the user interface according to business requirements and complete interface construction through model-driven to generate interface structure source code; Use an interface source code conversion device to generate standard model information of the interface structure according to the interface structure source code; Perform template matching mapping according to the standard model information and the selected front-end framework template to generate target function interface source code.

2. The method for visual interface design according to claim 1, characterized in that, The performing template matching mapping according to the standard model information and the selected front-end framework template to generate target function interface source code includes: Read the information of the front-end framework template according to the model object information that needs to be converted into the front-end framework structure in the standard template information of the interface structure; Use the template matching mapping relationship between the standard template information and the front-end framework template to perform template matching mapping, complete the data conversion of the standard template information, and generate target function interface source code.

3. The method for visual interface design according to claim 2, characterized in that, The selection of the front-end framework template includes: Select the front-end framework template from the front-end framework template library according to the technical architecture selection requirements of the business system.

4. The method for visual interface design according to claim 1, characterized in that, The using an interface source code conversion device to generate standard model information of the interface structure according to the interface structure source code includes: Use the interface source code conversion device to separate interface elements, operation events, and data access model binding information from the interface structure source code to generate standard model information of the interface structure.

5. The method for visual interface design according to claim 1, characterized in that, The interface structure source code is interface structure Json source code.

6. The method for visual interface design according to claim 1, characterized in that, The user interface presents multiple page element components in a graphical manner.

7. A visual interface design device, characterized in that, it includes: An interface construction module for dragging page element components from the user interface according to business requirements and completing interface construction through model-driven to generate interface structure source code; A standard model information generation module for generating standard model information of the interface structure according to the interface structure source code; A source code conversion module for performing template matching mapping according to the standard model information and the selected front-end framework template to generate target function interface source code.

8. The visual interface design device according to claim 7, characterized in that, The source code conversion module is specifically used for: Read the information of the front-end framework template according to the model object information that needs to be converted into the front-end framework structure in the standard template information of the interface structure; Use the template matching mapping relationship between the standard template information and the front-end framework template to perform template matching mapping, complete the data conversion of the standard template information, and generate target function interface source code.

9. A computer device, characterized in that, it includes: One or more processors; The processor is used to store one or more programs; When the one or more programs are executed by the one or more processors, a visual interface design method according to any one of claims 1 to 6 is implemented.

10. A computer-readable storage medium, characterized in that a computer program is stored thereon, and when the computer program is executed, a visual interface design method according to any one of claims 1 to 6 is implemented.

Images