CN112988298B - Visual interface configuration method, visual interface configuration device, computer equipment and storage medium - Google Patents

Visual interface configuration method, visual interface configuration device, computer equipment and storage medium

Info

Publication number
CN112988298B
CN112988298B CN202110270392.3A CN202110270392A CN112988298B CN 112988298 B CN112988298 B CN 112988298B CN 202110270392 A CN202110270392 A CN 202110270392A CN 112988298 B CN112988298 B CN 112988298B
Authority
CN
China
Prior art keywords
target
template
component
parameters
code
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.)
Active
Application number
CN202110270392.3A
Other languages
Chinese (zh)
Other versions
CN112988298A (en
Inventor
王国彬
姚望
闵佩
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tubatu Group Co Ltd
Original Assignee
Tubatu Group Co Ltd
Filing date
Publication date
Application filed by Tubatu Group Co Ltd filed Critical Tubatu Group Co Ltd
Priority to CN202110270392.3A priority Critical patent/CN112988298B/en
Publication of CN112988298A publication Critical patent/CN112988298A/en
Application granted granted Critical
Publication of CN112988298B publication Critical patent/CN112988298B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Abstract

The invention discloses a visual interface configuration method, a visual interface configuration device, computer equipment and a storage medium, wherein the visual interface configuration method comprises the following steps: acquiring a page generation instruction; displaying a front-end workbench based on the page generation instruction, wherein the front-end workbench comprises a plurality of components to be configured; acquiring a target component and a target parameter corresponding to the target component based on a plurality of components to be configured; processing the target parameters by using a target template analyzer to obtain an operation file corresponding to the target component; and executing the operation file and displaying a target page. The visual interface configuration method provided by the invention realizes automatic generation of the operation file, reduces the codes of developers, reduces the development difficulty and improves the development efficiency.

Description

Visual interface configuration method, visual interface configuration device, computer equipment and storage medium
Technical Field
The present invention relates to the field of computer software technologies, and in particular, to a method and apparatus for configuring a visual interface, a computer device, and a storage medium.
Background
With the rapid development of internet technology, software products iterate rapidly, and the number of web pages is more required, so that developers are required to develop and compile continuously to generate front-end pages. However, the method requires a large number of developers, and the developers have higher expertise, so that the labor cost is higher; moreover, the codes are compiled to form pages, the workload is large, the development efficiency is low, the development time is too long, errors are easy to occur, and the product requirement of high-speed iteration is difficult to meet.
Disclosure of Invention
The embodiment of the invention provides a visual interface configuration method, a visual interface configuration device, computer equipment and a storage medium, which solve the problems of low development efficiency, overlong development time and easy error caused by higher labor cost and higher workload in the page development process in the prior art.
A visual interface configuration method, comprising:
acquiring a page generation instruction;
displaying a front-end workbench based on the page generation instruction, wherein the front-end workbench comprises a plurality of components to be configured;
Acquiring a target component and a target parameter corresponding to the target component based on a plurality of components to be configured;
Processing the target parameters by using a target template analyzer to obtain an operation file corresponding to the target component;
And executing the operation file and displaying a target page.
A visual interface configuration apparatus, comprising:
The page generation instruction acquisition module is used for acquiring a page generation instruction;
The display module is used for displaying a front-end workbench based on the page generation instruction, and the front-end workbench comprises a plurality of components to be configured;
The component parameter acquisition module is used for acquiring a target component and target parameters corresponding to the target component based on a plurality of components to be configured;
the operation file acquisition module is used for processing the target parameters by adopting a target template analyzer to acquire an operation file corresponding to the target component;
And the target page module is used for executing the operation file and displaying a target page.
A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the visual interface configuration method described above when the computer program is executed by the processor.
A computer readable storage medium storing a computer program which, when executed by a processor, implements the steps of the visual interface configuration method described above.
According to the visual interface configuration method, the visual interface configuration device, the computer equipment and the storage medium, the front-end workbench is displayed based on the page generation instruction, the front-end workbench comprises a plurality of components to be configured, and developers can perform combination design, modification and the like on the components to be configured through the front-end workbench to obtain target components, so that development difficulty can be effectively reduced, the professionals of the developers are reduced, and the application range is wide; the development time is shortened, the design requirement of quick change is met, and the page design efficiency is improved. Based on the components to be configured, the process of acquiring the target components and the target parameters corresponding to the target components is highly automated, so that the workload of developers can be reduced, the development efficiency is accelerated, and the error operation is reduced. Processing the target parameters by using a target template analyzer to obtain an operation file corresponding to the target component; executing the operation file, displaying the target page, realizing automatic generation of the operation file, reducing the coding of developers, reducing the development difficulty and improving the development efficiency. Then, the developer clicks the operation file to execute the operation file, and displays the target page, thereby realizing the development and design of the target page.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings that are needed in the description of the embodiments of the present invention will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present invention, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic view of an application environment of a visual interface configuration method according to an embodiment of the present invention;
FIG. 2 is a flow chart of a visual interface configuration method according to an embodiment of the invention;
FIG. 3 is another flow chart of a visual interface configuration method according to an embodiment of the present invention;
FIG. 4 is another flow chart of a visual interface configuration method according to an embodiment of the present invention;
FIG. 5 is another flow chart of a visual interface configuration method according to an embodiment of the present invention;
FIG. 6 is another flow chart of a visual interface configuration method in accordance with an embodiment of the present invention;
FIG. 7 is another flow chart of a visual interface configuration method in accordance with an embodiment of the present invention;
FIG. 8 is a schematic block diagram of a visual interface configuration apparatus according to an embodiment of the present invention;
FIG. 9 is a schematic diagram of a computer device in accordance with an embodiment of the invention.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are some, but not all embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
The visual interface configuration method provided by the embodiment of the invention can be applied to an application environment shown in fig. 1. Specifically, the visual interface configuration method is applied to a visual interface configuration system, the visual interface configuration system comprises a client and a server as shown in fig. 1, and the client and the server communicate through a network, so that a target page can be generated quickly and conveniently, and page development efficiency is improved; the development difficulty is reduced. The client is also called a client, and refers to a program corresponding to the server for providing local service for the client. The client may be installed on, but is not limited to, various personal computers, notebook computers, smartphones, tablet computers, and portable wearable devices. The server may be implemented as a stand-alone server or as a server cluster composed of a plurality of servers.
In one embodiment, as shown in fig. 2, a visual interface configuration method is provided, and the method is applied to the client in fig. 1 for illustration, and includes the following steps:
S201: and acquiring a page generation instruction.
The page generation instruction is an instruction which is operated by a developer to enable the client to enter the front-end workbench so that the developer designs a target page.
S202: and displaying a front-end workbench based on the page generation instruction, wherein the front-end workbench comprises a plurality of components to be configured.
The component to be configured refers to a component which has specific functions and can be reused, and the embodiment refers to vue examples. For example, the components to be configured may be buttons, scores, time selections, and cascade selections.
The front-end workbench is an interface for a developer to use, and the developer can select components to be configured on the front-end workbench so as to carry out combined design on each component to be configured, thereby providing technical support for forming personalized target pages later. Specifically, the front end workbench is provided with a component display area, a modification area and a component configuration area; the component display area is an area for displaying components to be configured. The modification area is an area for modifying the component to be configured. The component configuration area is an area in which a user performs a combination design on components to be configured. The target page is a page formed by self design of a developer.
In this embodiment, a developer clicks a page generation key on a client to form a page generation instruction, and the client displays a front-end workbench based on the page generation instruction; a developer intuitively checks a plurality of components to be configured on a component display area, and selects the components to be configured according to design requirements; and carrying out combined design on the selected components to be configured in the component configuration area, clicking the components to be configured to form a replacement instruction when the components to be configured need to be modified, and modifying the components to be configured in the modification area to obtain target components, thereby providing technical support for the subsequent formation of target pages. In the embodiment, a developer can perform combination design, modification and the like on the component to be configured through the front-end workbench to obtain the target component, so that development difficulty can be effectively reduced, the specificity of the developer is reduced, and the application range is wide; the development time is shortened, the design requirement of quick change is met, and the page design efficiency is improved.
S203: based on the plurality of components to be configured, a target component and a target parameter corresponding to the target component are obtained.
The target component is a component needed by a developer and capable of generating a target page later. The target parameter refers to a variable corresponding to the target component, for example, the target parameter may be a transfer parameter, a component name, a component path, and the like, and the transfer parameter is a parameter of a parent target component transfer function to a child target component. The component path is an address representing the target component.
Specifically, a developer selects a component to be configured on a front-end workbench, performs combined design on the component to be configured to form a target component, invokes a parameter interface corresponding to the target component to obtain a target parameter corresponding to the target component, and has high automation process, so that the workload of the developer can be reduced, the development efficiency is accelerated, and the error operation is reduced.
S204: and processing the target parameters by using a target template analyzer to obtain an operation file corresponding to the target component.
S205: executing the running file and displaying the target page.
The target template analyzer is used for analyzing the target component to obtain the operation file.
A run file refers to a file having an executable program that can run on an operating system.
In this embodiment, the target template analyzer is called to analyze the target component to obtain the code corresponding to the target component, so as to obtain the running file based on the code corresponding to the target component, realize automatic generation of the running file, reduce the coding of the developer, reduce the development difficulty, and improve the development efficiency. Then, the developer clicks the operation file to execute the operation file, and displays the target page, thereby realizing the development and design of the target page.
According to the visual interface configuration method provided by the embodiment, the front-end workbench is displayed based on the page generation instruction, and comprises a plurality of components to be configured, and developers can perform combination design, modification and the like on the components to be configured through the front-end workbench so as to obtain target components, so that development difficulty can be effectively reduced, the professionals of the developers are reduced, and the application range is wide; the development time is shortened, the design requirement of quick change is met, and the page design efficiency is improved. Based on the components to be configured, the process of acquiring the target components and the target parameters corresponding to the target components is highly automated, so that the workload of developers can be reduced, the development efficiency is accelerated, and the error operation is reduced. Processing the target parameters by using a target template analyzer to obtain an operation file corresponding to the target component; executing the operation file, displaying the target page, realizing automatic generation of the operation file, reducing the codes of developers, reducing the development difficulty and improving the development efficiency. The developer clicks the operation file to execute the operation file, display the target page, and realize the development and design of the target page.
In one embodiment, as shown in fig. 3, step S203, that is, based on the plurality of components to be configured, obtains a target component and a target parameter corresponding to the target component, including:
S301: based on the plurality of components to be configured, a target component is acquired.
Specifically, a developer checks components to be configured on a front-end workbench, each component to be configured also carries component characteristics, and a user selects the corresponding components to be configured required by development according to the component characteristics so as to obtain a target component. The component characteristics are properties such as functions and practical methods for representing the components to be configured, for example, the component characteristics may be what functions the components to be configured 1 and 2 can implement; or pages to which the component to be configured can be applied.
S302: and calling a parameter interface corresponding to the target component to acquire a target parameter corresponding to the target component.
Wherein the parameter interface is an interface for acquiring parameters. In this embodiment, after determining the target component, the parameter interface corresponding to the target component is directly called to implement the target parameter of the target component, so as to provide technical support for forming a target page capable of performing user interaction subsequently, and effectively reduce development difficulty of a developer.
The visual interface configuration method provided by the embodiment is based on the plurality of components to be configured to acquire the target component, and the configuration process is visual, convenient and fast, and the development efficiency is effectively improved. And calling a parameter interface corresponding to the target component to acquire target parameters corresponding to the target component, providing technical support for the subsequent formation of a target page capable of carrying out user interaction, and effectively reducing the development difficulty of developers.
In one embodiment, the target parameters include js parameters and template parameters. The target template resolvers include js template resolvers and template resolvers.
As shown in fig. 4, step S204, that is, processing the target parameters by using the target template parser, obtains an operation file corresponding to the target component, includes:
s401: and processing the js parameters by adopting a js template analyzer to obtain js codes.
The js template parser is a parser for processing js parameters to obtain an executable js code. In the embodiment, the js parameter is processed by adopting the js template analyzer, so that automatic code generation is realized, and the page design efficiency is improved.
Js code refers to the code corresponding to the js component.
S402: and processing the template parameters by adopting a template analyzer to obtain a template code.
The template parser is a parser for processing the template parameters to obtain an executable template code. In the embodiment, the template parameter is processed by adopting the template analyzer, so that automatic code generation is realized, and the page design efficiency is improved.
The template code refers to the code corresponding to the target component. In this embodiment, js parameters and template parameters are separately processed, which is beneficial to providing parameter processing efficiency; the data processing is more orderly, and the error cause and the error modification can be quickly searched when the subsequent error occurs.
S403: and performing splicing processing on the js code and the template code to obtain an operation file corresponding to the target component.
In this embodiment, the js code and the template code are spliced together to form an operation file corresponding to the target component, so as to achieve fast and convenient obtaining of the operation file.
According to the visual interface configuration method provided by the embodiment, js parameters are processed by adopting a js template analyzer, and js codes are obtained; a template analyzer is adopted to process the template parameters, a template code is obtained, js parameters and the template parameters are processed separately, and the parameter processing efficiency is improved; the data processing is more orderly, and the error cause and the error modification can be quickly searched when the subsequent error occurs. And splicing the js code and the template code to obtain an operation file corresponding to the target component, so that the operation file can be obtained quickly and conveniently.
In one embodiment, step S501, that is, processing js parameters with a js template parser to obtain js codes, includes:
Traversing js parameters, and analyzing the js components and the corresponding js parameters by adopting a compiler to obtain js codes corresponding to the js parameters.
The compiler is used for converting js components and js parameters into codes which can be identified by the browser, and automatically generates js codes so as to ensure that subsequent target pages can be identified by the browser. In this embodiment, the compiler means babel and babel is configured to convert js components and corresponding js parameters into a javascript grammar that is backward compatible, and in this embodiment, the js parameters and js components are compiled and converted into js codes identified by a browser through babel, so as to automatically generate the js codes, reduce development difficulty, and accelerate development efficiency.
In one embodiment, as shown in fig. 5, step S402, that is, processing the template parameters by using a template parser, obtains a template code, includes:
S501: traversing the template parameter, and obtaining the component ID, the source attribute and the function method corresponding to the target component.
In this embodiment, the component ID is an ID for uniquely identifying the target component, and in this embodiment, the component ID is used for uniquely identifying the target component. The source properties are properties corresponding to the target component, such as class properties and "," properties, and the like. The function method is the function corresponding to the target component.
S502: and acquiring the source code corresponding to the target component based on the component ID.
In this embodiment, the database is queried based on the component ID to obtain the source code corresponding to the component ID stored in the database in advance, and technical support is provided for obtaining the template code corresponding to the target component subsequently.
S503: and carrying out association processing on the source attribute and the function method and the source code corresponding to the target component to obtain a template code.
In this embodiment, the source attribute and function method are associated with the source code corresponding to the target component, so as to obtain the template code quickly, reduce the steps of compiling the code by the user, effectively reduce the development difficulty, and realize efficient development.
Traversing the template parameter to obtain the component ID, the source attribute and the function method corresponding to the target component by the visual interface configuration method provided by the embodiment; based on the component ID, the source code corresponding to the target component is acquired, and technical support is provided for the subsequent acquisition of the template code corresponding to the target component. And (3) carrying out association processing on the source attribute and the function method and the source code corresponding to the target component to obtain a template code, reducing the steps of compiling the code by a user, effectively reducing the development difficulty and realizing efficient development.
In an embodiment, as shown in fig. 6, in step S403, a splicing process is performed on the js code and the template code, so as to obtain an operation file corresponding to the target component.
S601: and obtaining an original template, wherein the original template comprises a js module and a template module.
S602: filling js codes into js modules, filling template codes into the template modules, and obtaining operation files corresponding to target components.
The original template is a preset template to be filled. The js module is a template for accommodating js code. the template module is a template for accommodating the template code.
In this embodiment, the original template is adopted, so that development efficiency is effectively improved, development difficulty is reduced, and a developer does not need to have high professional. And filling js codes and template codes into corresponding modules respectively to form an operation file so as to accelerate development speed.
According to the visual interface configuration method provided by the embodiment, the original template is obtained, and the original template comprises the js module and the template module, so that development efficiency is effectively improved, and development difficulty is reduced. Filling js codes into js modules, filling template codes into the template modules, and acquiring operation files corresponding to target components so as to accelerate development speed.
In one embodiment, as shown in fig. 7, after step S204, that is, after the operation file corresponding to the target component is acquired, the method further includes:
s701: and calling a preview interface to process the running file to form a preview page, and displaying the preview page.
The preview interface is arranged in the front-end workbench and is used for carrying out pre-generation processing on the target component and the target parameter to obtain a preview page, so as to check the page layout and design of the preview page, judge whether the preview page meets the requirement of design development, and ensure that the subsequent target page meets the development requirement of developers. The preview page is a pre-generated interface.
In this embodiment, the preview interface is used to execute the running file to obtain the preview page, so as to determine whether the preview page meets the requirements of design development, and if the preview page does not meet the requirements of design development, the target component and the target parameter can be quickly modified, so that the subsequent target page meets the development requirements of the developer.
S702: based on the preview page, a user instruction is obtained.
S703: and if the user instruction is a confirmation instruction, running the execution running file and displaying the target page.
S704: if the user instruction is a replacement instruction, executing the component to be configured, and acquiring a replacement component and a replacement parameter corresponding to the replacement component; and processing the replacement parameters by adopting a target template analyzer to obtain an operation file corresponding to the replacement component.
Wherein the user instruction refers to an instruction whether to perform on the target component and the target parameter. The validation instruction is an instruction that determines that no modification of the target component and target parameters is required. The replacement instruction is an instruction that requires modification of the target component and the target parameter.
Specifically, when the preview page meets the requirements of design development, the developer determines that the target component and the target parameter do not need to be modified, and clicks the confirmation key, and at this time, the formed user instruction is a confirmation instruction so as to execute steps S203 and S204; when the preview page does not meet the design development requirement, a developer needs to modify the target component and the target parameter, and clicks the modification key, at this time, the formed user instruction is a replacement instruction, so that the developer can select other components from the components to be configured, use the selected components as replacement components, call parameter interfaces corresponding to the replacement components to obtain replacement parameters, realize flexible replacement, enable the developer to directly replace the components on the front-end workbench, improve development efficiency, shorten development time, and ensure that the subsequent target page meets the development requirement of the developer.
According to the visual interface configuration method provided by the embodiment, the preview interface is called to process the target parameters to form the preview page, the preview page is displayed, and the subsequent target page is ensured to meet the development requirements of developers. Acquiring a user instruction based on the preview page; and if the user instruction is a confirmation instruction, running the execution running file and displaying the target page. If the user instruction is a replacement instruction, acquiring a replacement component and a replacement parameter corresponding to the replacement component based on the component to be configured; and a target template analyzer is adopted to process the replacement parameters, so that an operation file corresponding to the replacement component is obtained, a developer can directly replace the component on the front-end workbench, the development efficiency is improved, the development time is shortened, and the development requirement of the developer is met by a subsequent target page.
It should be understood that the sequence number of each step in the foregoing embodiment does not mean that the execution sequence of each process should be determined by the function and the internal logic, and should not limit the implementation process of the embodiment of the present invention.
In an embodiment, a visual interface configuration device is provided, where the visual interface configuration device corresponds to the visual interface configuration method in the foregoing embodiment one by one. As shown in fig. 8, the visual interface configuration apparatus includes a page generation instruction acquisition module 801, a display module 802, a component parameter acquisition module 803, a running file acquisition module 804, and a target page module 805. The functional modules are described in detail as follows:
The page generation instruction acquisition module 801 is configured to acquire a page generation instruction.
The display module 802 is configured to display a front-end workbench based on the page generation instruction, where the front-end workbench includes a plurality of components to be configured.
The component parameter obtaining module 803 is configured to obtain a target component and a target parameter corresponding to the target component based on the plurality of components to be configured.
The operation file obtaining module 804 is configured to process the target parameter by using the target template parser, and obtain an operation file corresponding to the target component.
And the target page module 805 is configured to execute the running file and display a target page.
Preferably, the component parameter obtaining module 803 includes: a target component acquisition unit and a target parameter acquisition unit.
And the target component acquisition unit is used for acquiring the target component based on the plurality of components to be configured.
The target parameter acquisition unit is used for calling a parameter interface corresponding to the target component to acquire the target parameter corresponding to the target component.
Preferably, the running file obtaining module 804 includes: js code acquisition unit, template code acquisition unit and running file acquisition unit.
And the js code acquisition unit is used for processing the js parameters by adopting a js template analyzer to acquire js codes.
The template code acquisition unit is used for processing the template parameters by adopting a template analyzer to acquire the template code.
And the operation file acquisition unit is used for performing splicing processing on the js code and the template code to acquire an operation file corresponding to the target component.
Preferably, the js code acquisition unit includes: js traverses the subunits.
And the js traversing subunit is used for traversing js parameters, analyzing the js components and the corresponding js parameters by adopting a compiler, and obtaining js codes corresponding to the js parameters.
Preferably, the template code acquisition unit includes: template traversal subunit, source code acquisition subunit and association processing subunit
And the template traversing subunit is used for traversing the template parameters and acquiring the component ID, the source attribute and the function method corresponding to the target component.
The source code acquisition subunit is used for acquiring the source code corresponding to the target component based on the component ID.
And the association processing subunit is used for carrying out association processing on the source attribute and the function method and the source code corresponding to the target component to obtain a template code.
Preferably, the operation file acquisition unit includes: an original template acquisition subunit and a filler subunit.
The original template acquisition subunit is used for acquiring an original template, and the original template comprises a js module and a template module.
And the filling subunit is used for filling the js code into the js module, filling the template code into the template module and obtaining the operation file corresponding to the target component.
Preferably, after the file acquisition module 804 is executed, the apparatus further includes: the system comprises a preview page module, a user instruction acquisition module, a confirmation instruction module and a replacement instruction module.
And the preview page module is used for calling the preview interface to process the running file to form a preview page and displaying the preview page.
And the user instruction acquisition module is used for acquiring the user instruction based on the preview page.
And the confirmation instruction module is configured to run the target page module 805 if the user instruction is a confirmation instruction.
And the replacement instruction module is used for executing the component parameter acquisition module 803 and the operation file acquisition module 804 if the user instruction is a replacement instruction.
For specific limitations of the visual interface configuration device, reference may be made to the above limitations of the visual interface configuration method, and no further description is given here. The various modules in the visual interface configuration apparatus described above may be implemented in whole or in part by software, hardware, or a combination thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.
In one embodiment, a computer device is provided, which may be a client, the internal structure of which may be as shown in fig. 9. The computer device includes a processor, a memory, a network interface, and a database connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The database of the computer device is used to store the components to be configured. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a visual interface configuration method.
In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and capable of running on the processor, where the processor executes the computer program to implement steps of the visual interface configuration method in the foregoing embodiment, such as steps S201 to S205 shown in fig. 2, or steps shown in fig. 3 to 7, which are not repeated herein. Or the processor executes the computer program to implement the functions of the modules/units in this embodiment of the visual interface configuration apparatus, for example, the functions of the page generation instruction acquisition module 801, the display module 802, the component parameter acquisition module 803, the running file acquisition module 804, and the target page module 805 shown in fig. 8, which are not repeated herein.
In an embodiment, a computer readable storage medium is provided, and a computer program is stored on the computer readable storage medium, where the computer program when executed by a processor implements the steps of the visual interface configuration method in the above embodiment, for example, steps S201 to S205 shown in fig. 2, or steps shown in fig. 3 to 7, which are not repeated herein. Or the processor executes the computer program to implement the functions of the modules/units in this embodiment of the visual interface configuration apparatus, for example, the functions of the page generation instruction acquisition module 801, the display module 802, the component parameter acquisition module 803, the running file acquisition module 804, and the target page module 805 shown in fig. 8, which are not repeated herein.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in embodiments provided herein may include non-volatile and/or volatile memory. The nonvolatile memory can include Read Only Memory (ROM), programmable ROM (PROM), electrically Programmable ROM (EPROM), electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (SYNCHLINK) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), among others.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional units and modules is illustrated, and in practical application, the above-described functional distribution may be performed by different functional units and modules according to needs, i.e. the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-described functions.
The above embodiments are only for illustrating the technical solution of the present invention, and not for limiting the same; although the invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit and scope of the technical solutions of the embodiments of the present invention, and are intended to be included in the scope of the present invention.

Claims (9)

1. A visual interface configuration method, comprising:
acquiring a page generation instruction;
displaying a front-end workbench based on the page generation instruction, wherein the front-end workbench comprises a plurality of components to be configured;
acquiring a target component and target parameters corresponding to the target component based on a plurality of components to be configured, wherein the target parameters comprise js parameters and template parameters;
processing the target parameters by adopting a target template analyzer to obtain an operation file corresponding to the target component, wherein the target template analyzer comprises a js template analyzer and a template analyzer;
the processing the target parameters by using a target template analyzer to obtain an operation file corresponding to the target component includes:
Processing the js parameters by adopting the js template analyzer to obtain js codes, wherein the js codes refer to codes corresponding to js components;
Processing the template parameters by adopting the template analyzer to obtain template codes, wherein the template codes refer to codes corresponding to target components, and the target components refer to components capable of generating target pages;
performing splicing processing on the js code and the template code to obtain an operation file corresponding to the target component;
And executing the operation file and displaying a target page.
2. The visual interface configuration method according to claim 1, wherein the obtaining, based on the plurality of components to be configured, a target component and a target parameter corresponding to the target component includes:
Acquiring a target component based on a plurality of components to be configured;
and calling a parameter interface corresponding to the target component to acquire a target parameter corresponding to the target component.
3. The visual interface configuration method of claim 1, wherein the processing the js parameters with the js template parser to obtain js codes comprises:
traversing js parameters, and analyzing the js components and the corresponding js parameters by adopting a compiler to obtain js codes corresponding to the js parameters.
4. The visual interface configuration method of claim 1, wherein the processing the template parameters with the template parser to obtain a template code comprises:
traversing the template parameter to obtain a component ID, a source attribute and a function method corresponding to the target component;
acquiring source codes corresponding to the target components based on the component IDs;
And carrying out association processing on the source attribute and the function method and the source code corresponding to the target component to obtain a template code.
5. The visual interface configuration method according to claim 1, wherein the js code and the template code are spliced to obtain an operation file corresponding to the target component;
Acquiring an original template, wherein the original template comprises a js module and a template module;
Filling the js code into a js module, filling the template code into the template module, and obtaining the operation file corresponding to the target component.
6. The visual interface configuration method of claim 1, wherein after the obtaining the running file corresponding to the target component, the method further comprises:
calling a preview interface to process the running file to form a preview page, and displaying the preview page;
acquiring a user instruction based on the preview page;
if the user instruction is a confirmation instruction, the operation file is operated and the target page is displayed;
If the user instruction is a replacement instruction, executing the component to be configured based on the user instruction, and acquiring a replacement component and a replacement parameter corresponding to the replacement component; and processing the replacement parameters by adopting a target template analyzer to obtain an operation file corresponding to the replacement component.
7. A visual interface configuration apparatus, comprising:
The page generation instruction acquisition module is used for acquiring a page generation instruction;
The display module is used for displaying a front-end workbench based on the page generation instruction, and the front-end workbench comprises a plurality of components to be configured;
The component parameter acquisition module is used for acquiring a target component and target parameters corresponding to the target component based on a plurality of components to be configured, wherein the target parameters comprise js parameters and template parameters;
The operation file acquisition module is used for processing the target parameters by adopting a target template analyzer to acquire an operation file corresponding to the target component, wherein the target template analyzer comprises a js template analyzer and a template analyzer;
The operation file acquisition module comprises: js code acquisition unit, template code acquisition unit and operation file acquisition unit;
the js code acquisition unit is used for processing the js parameters by adopting a js template analyzer to acquire js codes, wherein the js codes refer to codes corresponding to js components;
the system comprises a template code acquisition unit, a template analyzer and a template processing unit, wherein the template code acquisition unit is used for processing a template parameter to acquire a template code, the template code refers to a code corresponding to a target component, and the target component refers to a component capable of generating a target page;
the operation file acquisition unit is used for performing splicing processing on the js code and the template code to acquire an operation file corresponding to the target component;
And the target page module is used for executing the operation file and displaying a target page.
8. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that the processor implements the steps of the visual interface configuration method according to any one of claims 1 to 6 when the computer program is executed.
9. A computer readable storage medium storing a computer program, characterized in that the computer program when executed by a processor implements the steps of the visual interface configuration method according to any one of claims 1 to 6.
CN202110270392.3A 2021-03-12 Visual interface configuration method, visual interface configuration device, computer equipment and storage medium Active CN112988298B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110270392.3A CN112988298B (en) 2021-03-12 Visual interface configuration method, visual interface configuration device, computer equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110270392.3A CN112988298B (en) 2021-03-12 Visual interface configuration method, visual interface configuration device, computer equipment and storage medium

Publications (2)

Publication Number Publication Date
CN112988298A CN112988298A (en) 2021-06-18
CN112988298B true CN112988298B (en) 2024-07-02

Family

ID=

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112433799A (en) * 2020-11-25 2021-03-02 平安普惠企业管理有限公司 Page generation method, device, equipment and medium

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112433799A (en) * 2020-11-25 2021-03-02 平安普惠企业管理有限公司 Page generation method, device, equipment and medium

Similar Documents

Publication Publication Date Title
CN109901834B (en) Document page generation method, device, computer equipment and storage medium
CN111241454B (en) Method, system and device for generating webpage codes
US9448770B2 (en) Source code editor
US10649836B2 (en) Detecting an error message and automatically presenting links to relevant solution pages
US8239823B2 (en) Generating libraries for reflection without project compilation
CN108388515B (en) Test data generation method, device, equipment and computer readable storage medium
US8434062B2 (en) Enhancing source code debugging and readability using visual symbols
US8037450B2 (en) System and methods for tracing code generation in template engines
US9141344B2 (en) Hover help support for application source code
CN111026439B (en) Application program compatibility method, device, equipment and computer storage medium
US8930923B2 (en) Generating debugging extension source code utilizing debugging information
CN113805882A (en) Method and device for developing application program, electronic equipment and storage medium
US11366704B2 (en) Configurable analytics for microservices performance analysis
CN113051514A (en) Element positioning method and device, electronic equipment and storage medium
CN112069456A (en) Model file generation method and device, electronic equipment and storage medium
CN115599386A (en) Code generation method, device, equipment and storage medium
CN114579452A (en) Interface influence detection method and related equipment
CN115599359A (en) Code generation method, device, equipment and medium
CN112685311A (en) Test script automatic generation method and device, computer equipment and storage medium
CN112988298B (en) Visual interface configuration method, visual interface configuration device, computer equipment and storage medium
CN111290996A (en) Document format conversion method, device, equipment and readable storage medium
CN110515653B (en) Document generation method and device, electronic equipment and computer readable storage medium
CN115640279A (en) Method and device for constructing data blood relationship
CN109783134B (en) Front-end page configuration method and device and electronic equipment
Rivero et al. Improving legacy applications with client-side augmentations

Legal Events

Date Code Title Description
PB01 Publication
SE01 Entry into force of request for substantive examination
GR01 Patent grant