CN112988298A - Visual interface configuration method and device, computer equipment and storage medium - Google Patents
Visual interface configuration method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN112988298A CN112988298A CN202110270392.3A CN202110270392A CN112988298A CN 112988298 A CN112988298 A CN 112988298A CN 202110270392 A CN202110270392 A CN 202110270392A CN 112988298 A CN112988298 A CN 112988298A
- Authority
- CN
- China
- Prior art keywords
- target
- template
- component
- parameter
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
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 adopting a target template analyzer to obtain an operation file corresponding to the target component; and executing the running 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
Technical Field
The invention relates to the technical field of computer software, in particular to a visual interface configuration method and device, computer equipment and a storage medium.
Background
With the rapid development of the internet technology, the iteration of software products is rapid, and the number of web pages is required to be large, so that developers are required to continuously research, develop and compile to generate front-end pages. However, the method needs a large number of developers, and the developers need to have higher professional knowledge and higher labor cost; moreover, compiling codes to form pages has large workload, which causes low development efficiency, overlong development time, easy occurrence of errors and difficulty in meeting the product requirements of high-speed iteration.
Disclosure of Invention
The embodiment of the invention provides a visual interface configuration method and device, computer equipment and a storage medium, and aims to solve the problems that in the prior art, in the page development process, the labor cost is high, the workload is high, the development efficiency is low, the development time is too long, and errors are easy to occur.
A 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 adopting a target template analyzer to obtain an operation file corresponding to the target component;
and executing the running 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 a target parameter corresponding to the target component based on the components to be configured;
the running file acquisition module is used for processing the target parameters by adopting a target template analyzer to acquire a running file corresponding to the target component;
and the target page module is used for executing the running 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 above-mentioned visual interface configuration method when executing the computer program.
A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the steps of the above-mentioned visual interface configuration method.
According to the visual interface configuration method, the visual interface configuration device, the computer equipment and the storage medium, the visual interface configuration method is based on the page generation instruction and displays the front-end workbench, the front-end workbench comprises a plurality of developers of components to be configured, the developers of the components to be configured can carry out combined design, modification and the like through the front-end workbench to obtain the target components, the development difficulty can be effectively reduced, the professional performance of the developers 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. Based on a plurality of components to be configured, the process of obtaining 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 misoperation is reduced. Processing the target parameters by adopting a target template analyzer to obtain an operation file corresponding to the target component; and executing the running file, displaying the target page, realizing automatic generation of the running file, reducing the codes of developers, reducing the development difficulty and improving the development efficiency. And then, the developer clicks the operation file to execute the operation file, and a target page is displayed to realize 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 needed to be used in the description of the embodiments of the present invention will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to these drawings without inventive labor.
FIG. 1 is a schematic diagram 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 visualization interface configuration method in one embodiment of the present invention;
FIG. 3 is another flow chart of a visualization interface configuration method in an embodiment of the invention;
FIG. 4 is another flow chart of a visualization interface configuration method in an embodiment of the invention;
FIG. 5 is another flow chart of a method for configuring a visualization interface in accordance with an embodiment of the present invention;
FIG. 6 is another flow chart of a method for configuring a visualization interface in accordance with an embodiment of the present invention;
FIG. 7 is another flow chart of a method for configuring a visualization interface in accordance with an embodiment of the present invention;
FIG. 8 is a schematic block diagram of a visual interface configuration apparatus in accordance with an embodiment of the present invention;
FIG. 9 is a schematic diagram of a computer device according to an embodiment of the invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, not all, embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The visual interface configuration method provided by the embodiment of the invention can be applied to the 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 shown in fig. 1, and the client and the server are communicated through a network and used for quickly and conveniently generating a target page and improving the page development efficiency; and the development difficulty is reduced. The client is also called a user side, and refers to a program corresponding to the server and providing local services for the client. The client may be installed on, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server may be implemented as a stand-alone server or as a server cluster consisting of a plurality of servers.
In an embodiment, as shown in fig. 2, a method for configuring a visual interface is provided, which is described by taking the method as an example of being applied to the client in fig. 1, and includes the following steps:
s201: and acquiring a page generation instruction.
The page generation instruction is an instruction operated by a developer to enable a client to enter a front-end workbench so that the developer can design 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 a specific function and can be reused, and this embodiment refers to the vue example. For example, the components to be configured may be buttons, scores, time selections, cascade selections, and the like.
The front-end workbench is an interface used by developers, and the developers can select the components to be configured on the front-end workbench to perform combined design on the components to be configured, so that technical support is provided for the subsequent formation of personalized target pages. Specifically, a component display area, a modification area and a component configuration area are arranged on the front-end workbench; 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 where a user performs combined design on components to be configured. Wherein, the target page is a page designed and formed by a developer.
In the 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 visually 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 performing combined design on the selected component to be configured on the component configuration area, clicking the component to be configured when the component to be configured needs to be modified, forming a replacement instruction, modifying the component to be configured in the modification area to obtain a target component, and providing technical support for subsequently forming a target page. In the embodiment, developers can perform combined design, modification and the like on components to be configured through the front-end workbench to obtain target components, development difficulty can be effectively reduced, the professional performance of the developers 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: and acquiring a target component and target parameters corresponding to the target component based on the plurality of components to be configured.
Wherein, the target component is a component which is needed by the developer and can generate a target page subsequently. 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 for transferring a function from the parent target component to the child target component. A component path is an address that represents a target component.
Specifically, a developer selects a component to be configured on the front-end workbench, the component to be configured is subjected to combined design to form a target component, a parameter interface corresponding to the target component is called to obtain a target parameter corresponding to the target component, the process is highly automated, the workload of the developer can be reduced, the development efficiency is accelerated, and the misoperation is reduced.
S204: and processing the target parameters by adopting a target template analyzer to obtain an operation file corresponding to the target component.
S205: and executing the running file and displaying the target page.
The target template analyzer is used for analyzing the target assembly to obtain the running file.
A run file refers to a file having an executable program that can run on an operating system.
In the embodiment, the target template analyzer is called to analyze the target component to obtain the code corresponding to the target component, so that the running file can be obtained based on the code corresponding to the target component, the running file can be automatically generated, the codes of developers can be reduced, the development difficulty can be reduced, and the development efficiency can be improved. And then, the developer clicks the operation file to execute the operation file, and a target page is displayed to realize 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, the front-end workbench comprises a plurality of developers of the components to be configured, the developers of the components to be configured can carry out combination design, modification and the like through the front-end workbench to obtain the target components, the development difficulty can be effectively reduced, the professional performance of the developers can be 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 plurality of components to be configured, the process of obtaining the target component and the target parameter corresponding to the target component is highly automated, so that the workload of developers can be reduced, the development efficiency is accelerated, and the misoperation is reduced. Processing the target parameters by adopting a target template analyzer to obtain an operation file corresponding to the target component; the running file is executed, the target page is displayed, the running file is automatically generated, the codes of developers are reduced, the development difficulty is reduced, and the development efficiency is improved. And clicking the operation file by the developer to execute the operation file, displaying the target page and realizing the development and design of the target page.
In an embodiment, as shown in fig. 3, step S203, namely acquiring a target component and a target parameter corresponding to the target component based on a plurality of components to be configured, includes:
s301: and acquiring a target component based on the plurality of components to be configured.
Specifically, a developer checks components to be configured on a front-end workbench, each component to be configured also carries a component characteristic, and a user selects a corresponding component to be configured required for development according to the component characteristic to obtain a target component. The component characteristics are properties such as functions and practical methods for representing the components to be configured, and for example, the component characteristics may be what functions can be realized by the components to be configured 1 and the components to be configured 2; or a page to which the component to be configured can apply.
S302: and calling a parameter interface corresponding to the target component to acquire a target parameter corresponding to the target component.
The parameter interface is used for acquiring parameters. In the embodiment, after the target component is determined, the parameter interface corresponding to the target component is directly called to realize the target parameter of the target component, so that technical support is provided for subsequently forming a target page capable of carrying out user interaction, and the development difficulty of developers is effectively reduced.
According to the visual interface configuration method, the target component is obtained based on the multiple components to be configured, the configuration process is visual and convenient, and the development efficiency is effectively improved. And calling a parameter interface corresponding to the target component to acquire a target parameter corresponding to the target component, so as to provide technical support for subsequently forming a target page capable of carrying out user interaction, and effectively reduce the development difficulty of developers.
In one embodiment, the target parameters further include a js parameter and a template parameter. The target template parser comprises a js template parser and a template parser.
As shown in fig. 4, in step S204, the target parameter is processed by using the target template parser, and the obtaining of the running 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 used for processing the js parameters to obtain executable js codes. In the embodiment, the js parameter is processed by adopting the js template analyzer, so that the code is automatically generated, and the efficiency of page design is improved.
The js code refers to a code corresponding to the js component.
S402: and processing the template parameter by adopting a template analyzer to obtain a template code.
The template parser is a parser for processing the template parameters to obtain executable template codes. In the embodiment, the template parser is adopted to process the template parameters, so that automatic code generation is realized, and the improvement of the page design efficiency is facilitated.
the template code refers to a code corresponding to the target component. In the embodiment, the js parameter and the template parameter are processed separately, which is beneficial to providing the parameter processing efficiency; the data processing is more ordered, and the error reason can be quickly searched and modified when errors occur subsequently.
S403: and splicing the js code and the template code to obtain an operating 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 that the operation file can be quickly and conveniently obtained.
In the visual interface configuration method provided by the embodiment, a js template parser is adopted to process js parameters to obtain js codes; processing the template parameters by adopting a template parser to acquire template codes, and processing the js parameters and the template parameters separately, thereby being beneficial to providing parameter processing efficiency; the data processing is more ordered, and the error reason can be quickly searched and modified when errors occur subsequently. 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 quickly and conveniently obtained.
In an embodiment, step S501, processing the js parameter by using a js template parser, and acquiring a js code, includes:
traversing the js parameter, analyzing the js component and the corresponding js parameter by adopting a compiler, and acquiring a js code corresponding to the js parameter.
The compiler is used for converting the js component and the js parameter into codes which can be identified by the browser, so that the js codes can be automatically generated, and the subsequent target pages can be identified by the browser. In this embodiment, the compiler refers to babel, and the babel is used to convert the js component and the corresponding js parameter into a javascript syntax compatible backwards.
In an embodiment, as shown in fig. 5, in step S402, the processing the template parameter with the template parser to obtain a template code includes:
s501: and traversing the template parameter, and acquiring 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 attributes are attributes corresponding to the target component, such as class attributes and ".", attributes, and the like. The functional method is a function corresponding to the target component.
S502: and acquiring a 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, which is pre-stored in the database, and provide technical support for subsequently obtaining the template code corresponding to the target component.
S503: and performing 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 the embodiment, the source attribute and the function method are associated with the source code corresponding to the target component, so that the template code can be quickly acquired, the steps of compiling the code by a user are reduced, the development difficulty is effectively reduced, and efficient development can be realized.
In the visual interface configuration method provided by this embodiment, a template parameter is traversed, and a component ID, a source attribute, and a function method corresponding to a target component are obtained; and acquiring a source code corresponding to the target component based on the component ID, and providing technical support for subsequently acquiring a template code corresponding to the target component. And performing 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, the js code and the template code are spliced, and an operating file corresponding to the target component is obtained.
S601: and acquiring an original template, wherein the original template comprises a js module and a template module.
S602: and filling the js code into the js module, filling the template code into the template module, and acquiring the running file corresponding to the target component.
The original template refers to a preset template to be filled. The js module is a template for accommodating js code. the template module is a template for accommodating template codes.
In the embodiment, the original template is adopted, so that the development efficiency is effectively improved, the development difficulty is reduced, and developers can not need too high specialty. And respectively filling the js code and the template code into the corresponding modules to form an operation file so as to accelerate the development speed.
According to the visual interface configuration method, the original template is obtained, the original template comprises the js module and the template module, development efficiency is effectively improved, and development difficulty is reduced. And filling the js code into the js module, filling the template code into the template module, and acquiring the running file corresponding to the target component so as to accelerate the development speed.
In an embodiment, as shown in fig. 7, after step S204, that is, after acquiring the running file corresponding to the target component, 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 used for pre-generating target components and target parameters 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 requirements of design and development or not and ensure that the subsequent target page meets the development requirements of developers. The preview page is a pre-generated interface.
In the embodiment, the preview interface is adopted to execute the running file to obtain the preview page, so as to judge whether the preview page meets the requirements of design and development, and if the preview page does not meet the requirements of design and development, the target component and the target parameter can be modified quickly, so that the subsequent target page can meet the development requirements of developers.
S702: based on the preview page, a user instruction is obtained.
S703: and if the user instruction is a confirmation instruction, operating and executing the 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 whether to execute the instruction on the target component and the target parameter. The confirm instruction is an instruction that determines that no modification to the target component and target parameters is required. The replacement instruction is an instruction that requires modification of the target component and target parameters.
Specifically, when the preview page meets the requirements of design and development, the developer determines that the target component and the target parameters do not need to be modified, and clicks a 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 requirements of design and development, developers need to modify the target components and the target parameters, and click a modification key, at this moment, the formed user instruction is a replacement instruction, so that the developers can select other components from the components to be configured as replacement components, and call parameter interfaces corresponding to the replacement components to obtain the replacement parameters, flexible replacement is realized, the developers can directly replace the components on a front-end workbench, the development efficiency is improved, the development time is shortened, and the follow-up target page can meet the development requirements of the developers.
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 follow-up 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, operating and executing the 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 processing the replacement parameters by adopting the target template analyzer to obtain the running file corresponding to the replacement component, so that developers can directly replace the component on the front-end workbench, the development efficiency is improved, the development time is shortened, and the follow-up target page can meet the development requirements of the developers.
It should be understood that, the sequence numbers of the steps in the foregoing embodiments do not imply an execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.
In an embodiment, a visual interface configuration device is provided, and the visual interface configuration device corresponds to the visual interface configuration method in the above embodiments one to one. As shown in fig. 8, the visual interface configuration apparatus includes a page generation instruction obtaining module 801, a display module 802, a component parameter obtaining module 803, an operation file obtaining module 804, and a target page module 805. The functional modules are explained in detail as follows:
a page generation instruction obtaining module 801, configured to obtain a page generation instruction.
The display module 802 is configured to display a front-end workbench based on a page generation instruction, where the front-end workbench includes a plurality of components to be configured.
A component parameter obtaining module 803, configured to obtain a target component and a target parameter corresponding to the target component based on the multiple components to be configured.
And the running file acquisition module 804 is configured to process the target parameter by using the target template parser, and acquire a running file corresponding to the target component.
And a target page module 805 configured to execute the run 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 acquiring unit is used for acquiring the target component based on the plurality of components to be configured.
And the target parameter acquisition unit is used for calling the parameter interface corresponding to the target component and acquiring the target parameter corresponding to the target component.
Preferably, the running file obtaining module 804 includes: a js code acquisition unit, a template code acquisition unit and an operation file acquisition unit.
And the js code acquisition unit is used for processing the js parameters by adopting a js template analyzer to acquire the js codes.
And the template code acquisition unit is used for processing the template parameters by adopting a template analyzer to acquire the template codes.
And the running file acquisition unit is used for splicing the js code and the template code to acquire a running file corresponding to the target component.
Preferably, the js code acquiring unit includes: js traverses the sub-cells.
And the js traversal subunit is used for traversing the js parameters, analyzing the js components and the corresponding js parameters by adopting a compiler and acquiring js codes corresponding to the js parameters.
Preferably, the template code acquiring unit includes: template traversal subunit, source code acquisition subunit and association processing subunit
And the template traversal 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.
And the source code acquiring 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 associating the source attribute and the function method with the source code corresponding to the target component to obtain a template code.
Preferably, the operation file obtaining unit includes: an original template acquisition subunit and a padding subunit.
And 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 acquiring the running file corresponding to the target component.
Preferably, after the file obtaining 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 a preview interface to process the running file, forming a preview page and displaying the preview page.
And the user instruction acquisition module is used for acquiring a user instruction based on the preview page.
And a confirmation instruction module, configured to run the target page module 805 if the user instruction is a confirmation instruction.
And a replacement instruction module, configured to execute the component parameter obtaining module 803 and the running file obtaining module 804 if the user instruction is a replacement instruction.
For specific definition of the visual interface configuration device, reference may be made to the definition of the visual interface configuration method in the foregoing, and details are not described here. The modules in the visual interface configuration device can be wholly or partially implemented by software, hardware and a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a client, and its internal structure diagram 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 comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The database of the computer device is used for storing 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 an embodiment, a computer device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the steps of the method for configuring a visual interface in the foregoing embodiments are implemented, for example, steps S201 to S205 shown in fig. 2 or steps shown in fig. 3 to fig. 7, which are not repeated herein to avoid repetition. Alternatively, when the processor executes the computer program, the functions of each module/unit in the embodiment of the visual interface configuration apparatus are implemented, for example, the functions of the page generation instruction obtaining module 801, the display module 802, the component parameter obtaining module 803, the running file obtaining module 804 and the target page module 805 shown in fig. 8 are not described herein again to avoid repetition.
In an embodiment, a computer-readable storage medium is provided, where a computer program is stored on the computer-readable storage medium, and when executed by a processor, the computer program implements the steps of the method for configuring a visual interface in the foregoing embodiments, for example, steps S201 to S205 shown in fig. 2 or steps shown in fig. 3 to fig. 7, which are not repeated herein for avoiding repetition. Alternatively, when the processor executes the computer program, the functions of each module/unit in the embodiment of the visual interface configuration apparatus are implemented, for example, the functions of the page generation instruction obtaining module 801, the display module 802, the component parameter obtaining module 803, the running file obtaining module 804 and the target page module 805 shown in fig. 8 are not described herein again to avoid repetition.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile 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 DRAM (SLDRAM), Rambus Direct RAM (RDRAM), direct bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-mentioned division of the functional units and modules is illustrated, and in practical applications, the above-mentioned function distribution may be performed by different functional units and modules according to needs, that is, the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-mentioned functions.
The above-mentioned embodiments are only used for illustrating the technical solutions of the present invention, and not for limiting the same; although the present 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 solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; such modifications and substitutions do not substantially depart from the spirit and scope of the embodiments of the present invention, and are intended to be included within the scope of the present invention.
Claims (10)
1. A visual interface configuration method is characterized by comprising 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 adopting a target template analyzer to obtain an operation file corresponding to the target component;
and executing the running file and displaying a target page.
2. The visual interface configuration method of claim 1, wherein the obtaining a target component and a target parameter corresponding to the target component based on the plurality of components to be configured comprises:
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 said target parameters further comprise a js parameter and a template parameter; the target template analyzer comprises a js template analyzer and a template analyzer;
the processing the target parameter by adopting the target template analyzer to obtain the running file corresponding to the target component comprises the following steps:
processing the js parameter by adopting the js template analyzer to obtain a js code;
processing the template parameter by adopting the template analyzer to obtain a template code;
and splicing the js code and the template code to obtain an operation file corresponding to the target component.
4. The visual interface configuration method of claim 3, wherein the processing the js parameter with the js template parser to obtain a js code comprises:
traversing the js parameter, and analyzing the js component and the corresponding js parameter by adopting a compiler to obtain a js code corresponding to the js parameter.
5. The visual interface configuration method of claim 3, wherein said processing the template parameter using the template parser to obtain a template code comprises:
traversing template parameters, and acquiring a component ID, a source attribute and a function method corresponding to the target component;
acquiring a source code corresponding to the target component based on the component ID;
and associating the source attribute and the function method with a source code corresponding to the target component to obtain a template code.
6. The visual interface configuration method of claim 3, wherein the js code and the template code are spliced to obtain an operating file corresponding to the target component;
acquiring an original template, wherein the original template comprises a js module and a template module;
and filling the js code into a js module, filling the template code into the template module, and acquiring the running file corresponding to the target component.
7. The visual interface configuration method of claim 1, wherein after the obtaining of the run 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, operating the execution file and displaying a target page;
if the user instruction is a replacement instruction, executing to obtain a replacement component and a replacement parameter corresponding to the replacement component based on the component to be configured; and processing the replacement parameters by adopting a target template analyzer to obtain an operation file corresponding to the replacement component.
8. 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 a target parameter corresponding to the target component based on the components to be configured;
the running file acquisition module is used for processing the target parameters by adopting a target template analyzer to acquire a running file corresponding to the target component;
and the target page module is used for executing the running file and displaying a target page.
9. 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 7 when executing the computer program.
10. A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the steps of the visualization interface configuration method according to any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110270392.3A CN112988298A (en) | 2021-03-12 | 2021-03-12 | Visual interface configuration method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110270392.3A CN112988298A (en) | 2021-03-12 | 2021-03-12 | Visual interface configuration method and device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112988298A true CN112988298A (en) | 2021-06-18 |
Family
ID=76334638
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110270392.3A Pending CN112988298A (en) | 2021-03-12 | 2021-03-12 | Visual interface configuration method and device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112988298A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115858398A (en) * | 2023-02-07 | 2023-03-28 | 中汽智联技术有限公司 | Method and device for generating automatic driving test scene and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180299863A1 (en) * | 2017-04-13 | 2018-10-18 | Rockwell Automation, Inc. | Combined visualization thin client hmi system and method |
| CN112433799A (en) * | 2020-11-25 | 2021-03-02 | 平安普惠企业管理有限公司 | Page generation method, device, equipment and medium |
-
2021
- 2021-03-12 CN CN202110270392.3A patent/CN112988298A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180299863A1 (en) * | 2017-04-13 | 2018-10-18 | Rockwell Automation, Inc. | Combined visualization thin client hmi system and method |
| CN112433799A (en) * | 2020-11-25 | 2021-03-02 | 平安普惠企业管理有限公司 | Page generation method, device, equipment and medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115858398A (en) * | 2023-02-07 | 2023-03-28 | 中汽智联技术有限公司 | Method and device for generating automatic driving test scene and storage medium |
| CN115858398B (en) * | 2023-02-07 | 2023-05-12 | 中汽智联技术有限公司 | Method, device and storage medium for generating automatic driving test scene |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9152542B2 (en) | Automatic generation of test scripts | |
| CN108388515B (en) | Test data generation method, device, equipment and computer readable storage medium | |
| US11093242B2 (en) | Automatically mapping data while designing process flows | |
| US10649836B2 (en) | Detecting an error message and automatically presenting links to relevant solution pages | |
| US8037450B2 (en) | System and methods for tracing code generation in template engines | |
| CN109871311B (en) | Method and device for recommending test cases | |
| CN112069456A (en) | Model file generation method and device, electronic equipment and storage medium | |
| CN113805882A (en) | Method and device for developing application program, electronic equipment and storage medium | |
| CN110941427A (en) | Code generation method and code generator | |
| CN114138244A (en) | Method and device for automatically generating model files, storage medium and electronic equipment | |
| CN113051514A (en) | Element positioning method and device, electronic equipment and storage medium | |
| CN115686606A (en) | Method, device, system and medium for displaying item dependency tree | |
| KR20220027870A (en) | Visual programming for deep learning | |
| CN112988298A (en) | Visual interface configuration method and device, computer equipment and storage medium | |
| CN109299005B (en) | Test script generation method and device | |
| CN109783134B (en) | Front-end page configuration method and device and electronic equipment | |
| CN111726390B (en) | Interface data interaction method, device, equipment and storage medium based on Teamcenter | |
| CN112799745B (en) | Page display control method and device | |
| CN110515653B (en) | Document generation method and device, electronic equipment and computer readable storage medium | |
| CN117270838B (en) | Method, device, equipment and medium for generating universal formula script | |
| CN109117124A (en) | A kind of function programming method of more return values | |
| JP2015069332A (en) | Object range extractor, static verification system, object range extraction method, and object range extraction program for extracting object range to be subjected to static verification by static verification device | |
| US11960560B1 (en) | Methods for analyzing recurring accessibility issues with dynamic web site behavior and devices thereof | |
| CN116185425B (en) | Event flow arrangement method, device, equipment and medium based on node combination | |
| CN103092575A (en) | Method and system for generating widget applications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |