CN114020256A - Front-end page generation method, device and equipment and readable storage medium - Google Patents
Front-end page generation method, device and equipment and readable storage medium Download PDFInfo
- Publication number
- CN114020256A CN114020256A CN202111274194.0A CN202111274194A CN114020256A CN 114020256 A CN114020256 A CN 114020256A CN 202111274194 A CN202111274194 A CN 202111274194A CN 114020256 A CN114020256 A CN 114020256A
- Authority
- CN
- China
- Prior art keywords
- component
- end page
- generated
- generating
- configuration information
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/37—Compiler construction; Parser generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Abstract
The invention relates to data processing, and discloses a front-end page generation method, which comprises the following steps: receiving a request instruction for generating a front-end page, and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction; generating a component tree of a front-end page to be generated according to the component layout mode and the component relation; identifying the editing operation of a user to be generated into a front-end page in a preset page editor, and generating configuration information of the front-end page to be generated according to the editing operation; adding the configuration information into the component tree, analyzing the component tree after the configuration information is added to obtain a component code, and inserting the component code into a preset front-end page template to obtain a front-end page to be generated. The invention also relates to a blockchain technique, and the front page can be stored in a blockchain node. The invention also provides a front-end page generating device, equipment and a medium. The invention can improve the generation efficiency of the front-end page.
Description
Technical Field
The present invention relates to the field of data processing, and in particular, to a front-end page generating method and apparatus, an electronic device, and a readable storage medium.
Background
With the gradual development and maturity of the 5G technology, a large number of application scenes need to be presented in the future, a large number of front-end development requirements are brought in the fields of smart homes, wearable devices and the like, a low-code platform can be constructed by using a visual model and a graphic design technology, the generation of a front-end page is realized, and the development time and the development cost of the low-code platform can be effectively reduced by 70-90%.
At present, a low-code platform mainly extracts a component or a tag of a UI interface by dragging and configuring a front-end component and image recognition, generates JSON of a tree structure according to the attribute of the component or the tag, further generates a front-end source code through JSON data, generates the front-end source code through code compiling, and deploys the front-end source code to achieve the purpose of quickly developing the front-end page.
Disclosure of Invention
The invention provides a front-end page generation method, a front-end page generation device, electronic equipment and a computer medium, and mainly aims to improve the generation efficiency of a front-end page.
In order to achieve the above object, a front-end page generating method provided by the present invention includes:
receiving a request instruction for generating a front-end page, and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction;
generating a component tree of the front-end page to be generated according to the component layout mode and the component relation;
identifying the editing operation of a user on the front-end page to be generated in a preset page editor, and generating the configuration information of the front-end page to be generated according to the editing operation;
adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
Optionally, the obtaining, according to the request instruction, a component layout manner of the front-end page to be generated and a component relationship between multiple components included in the front-end page to be generated includes:
configuring the component alignment attribute of the front-end page to be generated according to the request instruction, and generating a component layout mode of the front-end page to be generated according to the component alignment attribute;
and acquiring the component relation among a plurality of components contained in the front-end page to be generated according to the component layout mode.
Optionally, the generating a component tree of the front-end page to be generated according to the component layout manner and the component relationship includes:
acquiring node relations among a plurality of components contained in the front-end page to be generated according to the component layout mode and the component relations;
and generating the component tree of the front-end page to be generated according to the node relation.
Optionally, the identifying an editing operation of the user on the front-end page to be generated in the preset page editor includes:
monitoring a starting instruction and an ending instruction triggered by a user in a component list or canvas module in the page editor for dragging a plurality of components contained in the front-end page to be generated, and determining the editing operation of the user on the front-end page to be generated according to the starting instruction and the ending instruction.
Optionally, the adding the configuration information to the component tree, and analyzing the component tree to which the configuration information is added to obtain a component code, includes:
adding the configuration information into the component tree, and performing depth traversal on the component tree with the configuration information added to obtain data of a plurality of leaf nodes;
component code is obtained from data of a plurality of the leaf nodes.
Optionally, the inserting the component code into a preset front-end page template to obtain the front-end page to be generated includes:
and rendering the component codes by using a React frame, and splicing the rendered component codes with a preset front-end page template to obtain the front-end page to be generated.
Optionally, the configuration information includes a component attribute parameter and a component type corresponding to the front-end page to be generated.
In order to solve the above problems, the present invention also provides a front end page generating apparatus, comprising:
the device comprises a component acquisition module, a component selection module and a component selection module, wherein the component acquisition module is used for receiving a request instruction for generating a front-end page and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction;
the component tree generating module is used for generating the component tree of the front-end page to be generated according to the component layout mode and the component relation;
the configuration information generation module is used for identifying the editing operation of a user on the front-end page to be generated in a preset page editor and generating the configuration information of the front-end page to be generated according to the editing operation;
and the front-end page generating module is used for adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
In order to solve the above problem, the present invention also provides an electronic device, including:
a memory storing at least one computer program; and
and the processor executes the computer program stored in the memory to realize the front-end page generation method.
In order to solve the above problem, the present invention further provides a computer medium, in which at least one computer program is stored, and the at least one computer program is executed by a processor in an electronic device to implement the front-end page generating method described above.
In the embodiment of the invention, firstly, a component layout mode of a front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated are obtained according to a request instruction for generating the front-end page, and a component tree of the front-end page to be generated is generated to realize the layout of the plurality of components forming the front-end page; secondly, identifying the editing operation of the user on the front-end page to be generated to generate the configuration information of the front-end page to be generated, and quickly obtaining the required configuration information of a plurality of components contained in the front-end page to be generated; and finally, adding the configuration information into the component tree, analyzing the component tree after the configuration information is added to obtain a component code, inserting the component code into a preset front-end page template to obtain the front-end page to be generated, directly obtaining the component code through analyzing the component tree, generating a front-end source code without code compiling, detecting that the corresponding component tree changes when the configuration information of the component changes, and obtaining different front-end pages according to requirements, thereby improving the generation efficiency of the front-end page and solving the problems of redeployment and low version release efficiency of the front-end page after the front-end page is online. Therefore, the front-end page generation method, the front-end page generation device, the electronic equipment and the readable storage medium provided by the embodiment of the invention can improve the generation efficiency of the front-end page.
Drawings
Fig. 1 is a schematic flow chart of a front-end page generation method according to an embodiment of the present invention;
FIG. 2 is a block diagram of a front-end page generating apparatus according to an embodiment of the present invention;
fig. 3 is a schematic internal structural diagram of an electronic device implementing a front-end page generating method according to an embodiment of the present invention;
the implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The embodiment of the invention provides a front-end page generation method. The execution subject of the front-end page generation method includes, but is not limited to, at least one of electronic devices such as a server and a terminal that can be configured to execute the method provided by the embodiment of the present application. In other words, the front-end page generation method may be performed by software or hardware installed in a terminal device or a server device, and the software may be a block chain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, and the like.
Referring to fig. 1, which is a schematic flow diagram of a front-end page generation method according to an embodiment of the present invention, in an embodiment of the present invention, the front-end page generation method includes:
s1, receiving a request instruction for generating a front-end page, and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction.
In the embodiment of the present invention, the generation of the front-end page to be generated is obtained by configuring and laying out components according to a request instruction for generating the front-end page, where specific content of the request instruction for generating the front-end page may be different according to different service scenarios, for example, the request instruction for generating the front-end page is a request instruction for generating the front-end page for a shopping website.
In the embodiment of the present invention, the multiple components included in the front-end page to be generated refer to that one or several code segments completing respective functions are packaged into one or several independent parts and used for generating the front-end page to be generated, where the multiple components may include: the system comprises component codes such as texts, pictures, input boxes, drop-down boxes, button jump links and the like, and a logic component for displaying the implementation component as a front-end page to be generated, wherein the logic component is the component code for describing the composition structure, composition style and implementation function of the front-end page to be generated.
Further, the plurality of components included in the front-end page to be generated may be obtained from a preset component library according to a user requirement included in a request instruction for generating the front-end page.
For example, a user needs to create a shopping website, and may obtain components including functions such as an input box, a drop-down box, a button jump link, and the like from a component library, obtain components including a composition structure, a composition style, and a realization function, obtain text components including keywords of each commodity, and rename the components as required.
In an embodiment of the present invention, the component tree is a component graph with a tree structure, where the component number includes a plurality of leaf nodes, and the leaf nodes include a plurality of child nodes.
In the embodiment of the invention, in the process of generating the front-end page to be generated, the generated front-end page to be generated is determined by the component layout mode and the component relation of the front-end page to be generated.
In detail, the obtaining, according to the request instruction, a component layout manner of a front-end page to be generated and a component relationship among a plurality of components included in the front-end page to be generated includes:
configuring the component alignment attribute of the front-end page to be generated according to the request instruction, and generating a component layout mode of the front-end page to be generated according to the component alignment attribute;
and acquiring the component relation among a plurality of components contained in the front-end page to be generated according to the component layout mode.
In an embodiment of the present invention, the alignment attribute of the component of the front-end page to be generated may be implemented by an elastic layout method, where the alignment attribute includes: the arrangement direction of the components and the corresponding spindle positions when the components are arranged.
In the embodiment of the invention, the component relationship refers to the nesting relationship, the parallel relationship or the relationship between parent components and sub-components of the front-end page to be generated, and whether the nesting relationship or the parallel relationship is included among the components or not can be obtained according to the hierarchical relationship of the components.
For example, there are five components [ a, b, c, d, e ], where a, d, e are all parallel components in the first level, b is a second level component nested by the a components, and c is a third level component nested by the b components.
And S2, generating the component tree of the front-end page to be generated according to the component layout mode and the component relation.
In an embodiment of the present invention, the component tree is a component graph with a tree structure, where the component number includes a plurality of leaf nodes, and the leaf nodes include a plurality of child nodes.
In detail, the generating a component tree of the front-end page to be generated according to the component layout mode and the component relationship includes:
acquiring node relations among a plurality of components contained in the front-end page to be generated according to the component layout mode and the component relations;
and generating the component tree of the front-end page to be generated according to the node relation.
In the embodiment of the invention, the component tree can be generated by utilizing emmet grammar according to the node relation.
And S3, identifying the editing operation of the user on the front-end page to be generated in a preset page editor, and generating the configuration information of the front-end page to be generated according to the editing operation.
In this embodiment of the present invention, the page editor is a tool for generating a front-end page to be generated, where the page editor includes: a component list and canvas module.
In the embodiment of the present invention, the editing operation may be an operation in which a user places a certain component required by a front-end page to be generated in a component list at a corresponding position in a canvas module in a dragging manner, or an operation in which a user drags a certain component in a canvas module to a corresponding position in a dragging manner; the editing operation can also be an operation of modifying a certain component parameter in the canvas module by a user.
In detail, the operation of identifying the user in the preset page editor to edit the front-end page to be generated includes:
monitoring a starting instruction and an ending instruction triggered by a user in a component list or canvas module in the page editor for dragging a plurality of components contained in the front-end page to be generated, and determining the editing operation of the user on the front-end page to be generated according to the starting instruction and the ending instruction.
In an embodiment of the invention, a dragstart instruction and a drop instruction are set in advance for each component contained in a front-end page to be generated, wherein the dragstart instruction is a start instruction triggered when the component contained in the front-end page to be generated is subjected to a dragging operation, and is mainly used for dragging a certain component in a component list or dragging a certain component in a canvas module; the drop instruction is an ending instruction when the components are dragged, and is mainly used for receiving the exact position of each component contained in the front-end page to be generated in the dragging process, wherein the components are placed in the canvas module.
In detail, the generating the configuration information of the front-end page to be generated according to the editing operation includes:
and generating the component attribute parameters and the component types of the front-end page to be generated according to the editing operation, wherein the component attribute parameters and the component types are the configuration information.
In the embodiment of the present invention, the configuration information includes an attribute parameter and a component type of the component, further, the attribute parameter includes position information of the component, font parameter information of the component, color parameter information, size parameter information, an alignment mode parameter, and the like, and a corresponding view effect can be achieved, and a parameter value of each attribute parameter can be a preset default value, and the attribute parameter can be stored in a JSON string format, so as to more clearly and concisely display a data hierarchy.
In addition, in the embodiment of the present invention, the attribute parameters further include some special parameters, for example, for a hyperlink component, address information of component jump and information of whether the component is applied to other windows.
S4, adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
In the embodiment of the present invention, the front-end page to be generated refers to a front-end page that transmits data in a background database to a front end and displays the data to a user through a code, and the front-end page may be a website, where the website may include contents such as text, tables, and pictures.
In the embodiment of the invention, the background database corresponds to the front end and is used for storing data and responding to a front end request and providing corresponding front end data, and the background database comprises preset component codes of various front end pages to be generated and component identification information of the various front end pages to be generated. Wherein the component identification information may be an icon of a component, such as a button, a text box, picture content, table content, text content, and the like.
In the embodiment of the invention, the content in the background server is added into the component tree, the corresponding page content can be carried out according to the user requirement, and the front-end page construction can be directly carried out at the server, so that the links of searching source codes and compiling at the front end are further saved, and the efficiency of the front-end page construction is further improved.
In the embodiment of the present invention, the component tree is composed of a plurality of leaf node components, and the leaf nodes further include a plurality of child nodes, and when configuration information is added to the component tree, the leaf node components to which the configuration information is added may be determined according to component type information included in the configuration information.
For example, if the component type included in the current configuration information is an embedded component, the configuration information is added to a child node of a leaf node corresponding to the embedded component of the embedded component in the component tree, and if the component type included in the current configuration information is a non-embedded component, the configuration information is added to the leaf node in the component tree.
In detail, the adding the configuration information to the component tree and analyzing the component tree to which the configuration information is added to obtain a component code includes:
adding the configuration information into the component tree, and performing depth traversal on the component tree with the configuration information added to obtain data of a plurality of leaf nodes;
component code is obtained from data of a plurality of the leaf nodes.
In an embodiment of the present invention, a Babel (compiler) may be used to perform traversal analysis on the component tree, and a component code corresponding to each leaf node component may be directly obtained without a developer writing a code, so that the development efficiency of a front-end page to be generated may be improved.
In the embodiment of the invention, the component code of each front-end page component is associated with the corresponding component identifier, and the component code of the front-end page to be generated can be acquired through the component identifier.
Further, the inserting the component code into a preset front-end page template to obtain the front-end page to be generated includes:
and rendering the component codes by using a React frame, and splicing the rendered component codes with a preset front-end page template to obtain the front-end page to be generated.
In an optional embodiment of the invention, the fact frame is a JavaScript library used for constructing a front-end page, and the rendered component codes and a preset front-end page template can be spliced by a renderting method in the fact frame, so that the front-end page to be generated is obtained.
Specifically, in the embodiment of the present invention, the rendered component codes may be respectively inserted into the </head > and </body > tags corresponding to the front-end page, so as to obtain the front-end page.
In the embodiment of the present invention, before the front-end page is obtained, the method may further insert the dependent JavaScript library, which is obtained by parsing and represents the code of each component, into the head tag of the front-end page to be generated, and insert the execution logic (such as onClick logic) of the JavaScript library into the body tag of the front-end page to be generated to obtain the front-end page after the tag is generated.
In another embodiment of the present invention, after obtaining the front-end page to be generated, the method further includes:
and responding to a request instruction of the newly added component of the component tree, and updating the front-end page to be generated according to the request instruction.
Preferably, the update of the front-end page to be generated can be realized by a Groovy class.
In the embodiment of the invention, firstly, a component layout mode of a front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated are obtained according to a request instruction for generating the front-end page, and a component tree of the front-end page to be generated is generated to realize the layout of the plurality of components forming the front-end page; secondly, identifying the editing operation of the user on the front-end page to be generated to generate the configuration information of the front-end page to be generated, and quickly obtaining the required configuration information of a plurality of components contained in the front-end page to be generated; and finally, adding the configuration information into the component tree, analyzing the component tree after the configuration information is added to obtain a component code, inserting the component code into a preset front-end page template to obtain the front-end page to be generated, directly obtaining the component code through analyzing the component tree, generating a front-end source code without code compiling, detecting that the corresponding component tree changes when the configuration information of the component changes, and obtaining different front-end pages according to requirements, thereby improving the generation efficiency of the front-end page and solving the problems of redeployment and low version release efficiency of the front-end page after the front-end page is online. Therefore, the front-end page generation method provided by the embodiment of the invention can improve the generation efficiency of the front-end page.
Fig. 2 is a functional block diagram of the front end page generating apparatus according to the present invention.
The front end page generating apparatus 100 of the present invention may be installed in an electronic device. According to the implemented functions, the front-end page generating apparatus may include a component obtaining module 101, a component tree generating module 102, a configuration information generating module 103, and a front-end page generating module 104, which may also be referred to as a unit, and refers to a series of computer program segments that can be executed by a processor of an electronic device and can perform fixed functions, and are stored in a memory of the electronic device.
In the present embodiment, the functions regarding the respective modules/units are as follows:
the component obtaining module 101 is configured to receive a request instruction for generating a front-end page, and obtain a component layout mode of the front-end page to be generated and a component relationship between multiple components included in the front-end page to be generated according to the request instruction.
In the embodiment of the present invention, the generation of the front-end page to be generated is obtained by configuring and laying out components according to a request instruction for generating the front-end page, where specific content of the request instruction for generating the front-end page may be different according to different service scenarios, for example, the request instruction for generating the front-end page is a request instruction for generating the front-end page for a shopping website.
In the embodiment of the present invention, the multiple components included in the front-end page to be generated refer to that one or several code segments completing respective functions are packaged into one or several independent parts and used for generating the front-end page to be generated, where the multiple components may include: the system comprises component codes such as texts, pictures, input boxes, drop-down boxes, button jump links and the like, and a logic component for displaying the implementation component as a front-end page to be generated, wherein the logic component is the component code for describing the composition structure, composition style and implementation function of the front-end page to be generated.
Further, the plurality of components included in the front-end page to be generated may be obtained from a preset component library according to a user requirement included in a request instruction for generating the front-end page.
For example, a user needs to create a shopping website, and may obtain components including functions such as an input box, a drop-down box, a button jump link, and the like from a component library, obtain components including a composition structure, a composition style, and a realization function, obtain text components including keywords of each commodity, and rename the components as required.
In an embodiment of the present invention, the component tree is a component graph with a tree structure, where the component number includes a plurality of leaf nodes, and the leaf nodes include a plurality of child nodes.
In the embodiment of the invention, in the process of generating the front-end page to be generated, the generated front-end page to be generated is determined by the component layout mode and the component relation of the front-end page to be generated.
In detail, the component obtaining module 101 obtains a component layout mode of a front-end page to be generated and a component relationship between a plurality of components included in the front-end page to be generated according to the request instruction by executing the following operations, including:
configuring the component alignment attribute of the front-end page to be generated according to the request instruction, and generating a component layout mode of the front-end page to be generated according to the component alignment attribute;
and acquiring the component relation among a plurality of components contained in the front-end page to be generated according to the component layout mode.
In an embodiment of the present invention, the alignment attribute of the component of the front-end page to be generated may be implemented by an elastic layout method, where the alignment attribute includes: the arrangement direction of the components and the corresponding spindle positions when the components are arranged.
In the embodiment of the invention, the component relationship refers to the nesting relationship, the parallel relationship or the relationship between parent components and sub-components of the front-end page to be generated, and whether the nesting relationship or the parallel relationship is included among the components or not can be obtained according to the hierarchical relationship of the components.
For example, there are five components [ a, b, c, d, e ], where a, d, e are all parallel components in the first level, b is a second level component nested by the a components, and c is a third level component nested by the b components.
The component tree generating module 102 is configured to generate a component tree of the front-end page to be generated according to the component layout manner and the component relationship.
In an embodiment of the present invention, the component tree is a component graph with a tree structure, where the component number includes a plurality of leaf nodes, and the leaf nodes include a plurality of child nodes.
In detail, the component tree generating module 102 generates the component tree of the front-end page to be generated according to the component layout manner and the component relationship by performing the following operations, including:
acquiring node relations among a plurality of components contained in the front-end page to be generated according to the component layout mode and the component relations;
and generating the component tree of the front-end page to be generated according to the node relation.
In the embodiment of the invention, the component tree can be generated by utilizing emmet grammar according to the node relation.
The configuration information generating module 103 is configured to identify an editing operation of a user on the front-end page to be generated in a preset page editor, and generate configuration information of the front-end page to be generated according to the editing operation.
In this embodiment of the present invention, the page editor is a tool for generating a front-end page to be generated, where the page editor includes: a component list and canvas module.
In the embodiment of the present invention, the editing operation may be an operation in which a user places a certain component required by a front-end page to be generated in a component list at a corresponding position in a canvas module in a dragging manner, or an operation in which a user drags a certain component in a canvas module to a corresponding position in a dragging manner; the editing operation can also be an operation of modifying a certain component parameter in the canvas module by a user.
In detail, the configuration information generating module 103 identifies an editing operation of a user on the front-end page to be generated in a preset page editor by executing the following operations, including:
monitoring a starting instruction and an ending instruction triggered by a user in a component list or canvas module in the page editor for dragging a plurality of components contained in the front-end page to be generated, and determining the editing operation of the user on the front-end page to be generated according to the starting instruction and the ending instruction.
In an embodiment of the invention, a dragstart instruction and a drop instruction are set in advance for each component contained in a front-end page to be generated, wherein the dragstart instruction is a start instruction triggered when the component contained in the front-end page to be generated is subjected to a dragging operation, and is mainly used for dragging a certain component in a component list or dragging a certain component in a canvas module; the drop instruction is an ending instruction when the components are dragged, and is mainly used for receiving the exact position of each component contained in the front-end page to be generated in the dragging process, wherein the components are placed in the canvas module.
In detail, the generating the configuration information of the front-end page to be generated according to the editing operation includes:
and generating the component attribute parameters and the component types of the front-end page to be generated according to the editing operation, wherein the component attribute parameters and the component types are the configuration information.
In the embodiment of the present invention, the configuration information includes an attribute parameter and a component type of the component, further, the attribute parameter includes position information of the component, font parameter information of the component, color parameter information, size parameter information, an alignment mode parameter, and the like, and a corresponding view effect can be achieved, and a parameter value of each attribute parameter can be a preset default value, and the attribute parameter can be stored in a JSON string format, so as to more clearly and concisely display a data hierarchy.
In addition, in the embodiment of the present invention, the attribute parameters further include some special parameters, for example, for a hyperlink component, address information of component jump and information of whether the component is applied to other windows.
The front-end page generating module 104 is configured to add the configuration information to the component tree, analyze the component tree to which the configuration information is added to obtain a component code, and insert the component code into a preset front-end page template to obtain the front-end page to be generated.
In the embodiment of the present invention, the front-end page to be generated refers to a front-end page that transmits data in a background database to a front end and displays the data to a user through a code, and the front-end page may be a website, where the website may include contents such as text, tables, and pictures.
In the embodiment of the invention, the background database corresponds to the front end and is used for storing data and responding to a front end request and providing corresponding front end data, and the background database comprises preset component codes of various front end pages to be generated and component identification information of the various front end pages to be generated. Wherein the component identification information may be an icon of a component, such as a button, a text box, picture content, table content, text content, and the like.
In the embodiment of the invention, the content in the background server is added into the component tree, the corresponding page content can be carried out according to the user requirement, and the front-end page construction can be directly carried out at the server, so that the links of searching source codes and compiling at the front end are further saved, and the efficiency of the front-end page construction is further improved.
In the embodiment of the present invention, the component tree is composed of a plurality of leaf node components, and the leaf nodes further include a plurality of child nodes, and when configuration information is added to the component tree, the leaf node components to which the configuration information is added may be determined according to component type information included in the configuration information.
For example, if the component type included in the current configuration information is an embedded component, the configuration information is added to a child node of a leaf node corresponding to the embedded component of the embedded component in the component tree, and if the component type included in the current configuration information is a non-embedded component, the configuration information is added to the leaf node in the component tree.
In detail, the front-end page generating module 104 adds the configuration information to the component tree by performing the following operations, and analyzes the component tree to which the configuration information is added, to obtain a component code, including:
adding the configuration information into the component tree, and performing depth traversal on the component tree with the configuration information added to obtain data of a plurality of leaf nodes;
component code is obtained from data of a plurality of the leaf nodes.
In an embodiment of the present invention, a Babel (compiler) may be used to perform traversal analysis on the component tree, and a component code corresponding to each leaf node component may be directly obtained without a developer writing a code, so that the development efficiency of a front-end page to be generated may be improved.
In the embodiment of the invention, the component code of each front-end page component is associated with the corresponding component identifier, and the component code of the front-end page to be generated can be acquired through the component identifier.
Further, the inserting the component code into a preset front-end page template to obtain the front-end page to be generated includes:
and rendering the component codes by using a React frame, and splicing the rendered component codes with a preset front-end page template to obtain the front-end page to be generated.
In an optional embodiment of the invention, the fact frame is a JavaScript library used for constructing a front-end page, and the rendered component codes and a preset front-end page template can be spliced by a renderting method in the fact frame, so that the front-end page to be generated is obtained.
Specifically, in the embodiment of the present invention, the rendered component codes may be respectively inserted into the </head > and </body > tags corresponding to the front-end page, so as to obtain the front-end page.
In the embodiment of the present invention, before the front-end page is obtained, the method may further insert the dependent JavaScript library, which is obtained by parsing and represents the code of each component, into the head tag of the front-end page to be generated, and insert the execution logic (such as onClick logic) of the JavaScript library into the body tag of the front-end page to be generated to obtain the front-end page after the tag is generated.
In another embodiment of the present invention, after obtaining the front-end page to be generated, the method further includes:
and responding to a request instruction of the newly added component of the component tree, and updating the front-end page to be generated according to the request instruction.
Preferably, the update of the front-end page to be generated can be realized by a Groovy class.
In the embodiment of the invention, firstly, a component layout mode of a front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated are obtained according to a request instruction for generating the front-end page, and a component tree of the front-end page to be generated is generated to realize the layout of the plurality of components forming the front-end page; secondly, identifying the editing operation of the user on the front-end page to be generated to generate the configuration information of the front-end page to be generated, and quickly obtaining the required configuration information of a plurality of components contained in the front-end page to be generated; and finally, adding the configuration information into the component tree, analyzing the component tree after the configuration information is added to obtain a component code, inserting the component code into a preset front-end page template to obtain the front-end page to be generated, directly obtaining the component code through analyzing the component tree, generating a front-end source code without code compiling, detecting that the corresponding component tree changes when the configuration information of the component changes, and obtaining different front-end pages according to requirements, thereby improving the generation efficiency of the front-end page and solving the problems of redeployment and low version release efficiency of the front-end page after the front-end page is online. Therefore, the front-end page generation device provided by the embodiment of the invention can improve the generation efficiency of the front-end page.
Fig. 3 is a schematic structural diagram of an electronic device implementing the front-end page generating method according to the present invention.
The electronic device may comprise a processor 10, a memory 11, a communication bus 12 and a communication interface 13, and may further comprise a computer program, such as a front-end page generation program, stored in the memory 11 and executable on the processor 10.
The memory 11 includes at least one type of media, which includes flash memory, removable hard disk, multimedia card, card type memory (e.g., SD or DX memory, etc.), magnetic memory, local disk, optical disk, etc. The memory 11 may in some embodiments be an internal storage unit of the electronic device, for example a removable hard disk of the electronic device. The memory 11 may also be an external storage device of the electronic device in other embodiments, such as a plug-in mobile hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the electronic device. Further, the memory 11 may also include both an internal storage unit and an external storage device of the electronic device. The memory 11 may be used not only to store application software installed in the electronic device and various types of data, such as codes of a front-end page generation program, but also to temporarily store data that has been output or is to be output.
The processor 10 may be composed of an integrated circuit in some embodiments, for example, a single packaged integrated circuit, or may be composed of a plurality of integrated circuits packaged with the same or different functions, including one or more Central Processing Units (CPUs), microprocessors, digital Processing chips, graphics processors, and combinations of various control chips. The processor 10 is a Control Unit (Control Unit) of the electronic device, connects various components of the electronic device by using various interfaces and lines, and executes various functions and processes data of the electronic device by running or executing programs or modules (e.g., front-end page generation programs, etc.) stored in the memory 11 and calling data stored in the memory 11.
The communication bus 12 may be a PerIPheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. The communication bus 12 is arranged to enable connection communication between the memory 11 and at least one processor 10 or the like. For ease of illustration, only one thick line is shown, but this does not mean that there is only one bus or one type of bus.
Fig. 3 shows only an electronic device having components, and those skilled in the art will appreciate that the structure shown in fig. 3 does not constitute a limitation of the electronic device, and may include fewer or more components than those shown, or some components may be combined, or a different arrangement of components.
For example, although not shown, the electronic device may further include a power supply (such as a battery) for supplying power to each component, and preferably, the power supply may be logically connected to the at least one processor 10 through a power management device, so that functions of charge management, discharge management, power consumption management and the like are realized through the power management device. The power supply may also include any component of one or more dc or ac power sources, recharging devices, power failure detection circuitry, power converters or inverters, power status indicators, and the like. The electronic device may further include various sensors, a bluetooth module, a Wi-Fi module, and the like, which are not described herein again.
Optionally, the communication interface 13 may include a wired interface and/or a wireless interface (e.g., WI-FI interface, bluetooth interface, etc.), which is generally used to establish a communication connection between the electronic device and other electronic devices.
Optionally, the communication interface 13 may further include a user interface, which may be a Display (Display), an input unit (such as a Keyboard (Keyboard)), and optionally, a standard wired interface, or a wireless interface. Alternatively, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, or the like. The display, which may also be referred to as a display screen or display unit, is suitable, among other things, for displaying information processed in the electronic device and for displaying a visualized user interface.
It is to be understood that the described embodiments are for purposes of illustration only and that the scope of the appended claims is not limited to such structures.
The front-end page generation program stored in the memory 11 of the electronic device is a combination of a plurality of computer programs, and when running in the processor 10, can realize:
receiving a request instruction for generating a front-end page, and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction;
generating a component tree of the front-end page to be generated according to the component layout mode and the component relation;
identifying the editing operation of a user on the front-end page to be generated in a preset page editor, and generating the configuration information of the front-end page to be generated according to the editing operation;
adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
Specifically, the processor 10 may refer to the description of the relevant steps in the embodiment corresponding to fig. 1 for a specific implementation method of the computer program, which is not described herein again.
Further, the electronic device integrated module/unit, if implemented in the form of a software functional unit and sold or used as a separate product, may be stored in a computer readable medium. The computer readable medium may be non-volatile or volatile. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, U disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM).
An embodiment of the present invention may further provide a computer medium, where the computer medium stores a computer program, and when the computer program is executed by a processor of an electronic device, the computer program may implement:
receiving a request instruction for generating a front-end page, and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction;
generating a component tree of the front-end page to be generated according to the component layout mode and the component relation;
identifying the editing operation of a user on the front-end page to be generated in a preset page editor, and generating the configuration information of the front-end page to be generated according to the editing operation;
adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
Further, the computer usable medium may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function, and the like; the storage data area may store data created according to the use of the blockchain node, and the like.
In the embodiments provided in the present invention, it should be understood that the disclosed apparatus, device and method can be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules is only one logical functional division, and other divisions may be realized in practice.
The modules described as separate parts may or may not be physically separate, and parts displayed as modules may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.
In addition, functional modules in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional module.
It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential attributes thereof.
The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference signs in the claims shall not be construed as limiting the claim concerned.
The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.
Furthermore, it is obvious that the word "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. A plurality of units or means recited in the system claims may also be implemented by one unit or means in software or hardware. The terms second, etc. are used to denote names, but not any particular order.
Finally, it should be noted that the above embodiments are only for illustrating the technical solutions of the present invention and not for limiting, and although the present invention is described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that modifications or equivalent substitutions may be made on the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention.
Claims (10)
1. A front-end page generation method, the method comprising:
receiving a request instruction for generating a front-end page, and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction;
generating a component tree of the front-end page to be generated according to the component layout mode and the component relation;
identifying the editing operation of a user on the front-end page to be generated in a preset page editor, and generating the configuration information of the front-end page to be generated according to the editing operation;
adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
2. The method for generating a front-end page according to claim 1, wherein the obtaining, according to the request instruction, a component layout manner of a front-end page to be generated and a component relationship between a plurality of components included in the front-end page to be generated includes:
configuring the component alignment attribute of the front-end page to be generated according to the request instruction, and generating a component layout mode of the front-end page to be generated according to the component alignment attribute;
and acquiring the component relation among a plurality of components contained in the front-end page to be generated according to the component layout mode.
3. The front-end page generating method according to claim 1, wherein the generating the component tree of the front-end page to be generated according to the component layout manner and the component relationship comprises:
acquiring node relations among a plurality of components contained in the front-end page to be generated according to the component layout mode and the component relations;
and generating the component tree of the front-end page to be generated according to the node relation.
4. The method for generating a front-end page according to claim 1, wherein the operation of identifying the user in the preset page editor for editing the front-end page to be generated comprises:
monitoring a starting instruction and an ending instruction triggered by a user in a component list or canvas module in the page editor for dragging a plurality of components contained in the front-end page to be generated, and determining the editing operation of the user on the front-end page to be generated according to the starting instruction and the ending instruction.
5. The method for generating a front-end page according to claim 1, wherein the adding the configuration information to the component tree and analyzing the component tree to which the configuration information is added to obtain a component code comprises:
adding the configuration information into the component tree, and performing depth traversal on the component tree with the configuration information added to obtain data of a plurality of leaf nodes;
component code is obtained from data of a plurality of the leaf nodes.
6. The front-end page generation method of claim 1, wherein the inserting the component code into a preset front-end page template to obtain the front-end page to be generated comprises:
and rendering the component codes by using a React frame, and splicing the rendered component codes with a preset front-end page template to obtain the front-end page to be generated.
7. The front-end page generation method of any one of claims 1 to 6, wherein the configuration information includes component attribute parameters and component types corresponding to the front-end page to be generated.
8. A front end page generating apparatus, the apparatus comprising:
the device comprises a component acquisition module, a component selection module and a component selection module, wherein the component acquisition module is used for receiving a request instruction for generating a front-end page and acquiring a component layout mode of the front-end page to be generated and a component relation among a plurality of components contained in the front-end page to be generated according to the request instruction;
the component tree generating module is used for generating the component tree of the front-end page to be generated according to the component layout mode and the component relation;
the configuration information generation module is used for identifying the editing operation of a user on the front-end page to be generated in a preset page editor and generating the configuration information of the front-end page to be generated according to the editing operation;
and the front-end page generating module is used for adding the configuration information into the component tree, analyzing the component tree added with the configuration information to obtain a component code, and inserting the component code into a preset front-end page template to obtain the front-end page to be generated.
9. An electronic device, characterized in that the electronic device comprises:
at least one processor; and the number of the first and second groups,
a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,
the memory stores computer program instructions executable by the at least one processor to enable the at least one processor to perform the front end page generation method of any of claims 1 to 7.
10. A computer medium storing a computer program, wherein the computer program, when executed by a processor, implements the front-end page generation method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111274194.0A CN114020256A (en) | 2021-10-29 | 2021-10-29 | Front-end page generation method, device and equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111274194.0A CN114020256A (en) | 2021-10-29 | 2021-10-29 | Front-end page generation method, device and equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114020256A true CN114020256A (en) | 2022-02-08 |
Family
ID=80059032
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111274194.0A Pending CN114020256A (en) | 2021-10-29 | 2021-10-29 | Front-end page generation method, device and equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114020256A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268884A (en) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Mobile terminal visual page configuration and rendering method based on aPaaS platform |
| CN116302294A (en) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
| CN117435836A (en) * | 2023-10-25 | 2024-01-23 | 上海宽睿信息科技有限责任公司 | Front-end page splicing method and system based on centralized management of database |
-
2021
- 2021-10-29 CN CN202111274194.0A patent/CN114020256A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268884A (en) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Mobile terminal visual page configuration and rendering method based on aPaaS platform |
| CN116302294A (en) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
| CN116302294B (en) * | 2023-05-18 | 2023-09-01 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
| CN117435836A (en) * | 2023-10-25 | 2024-01-23 | 上海宽睿信息科技有限责任公司 | Front-end page splicing method and system based on centralized management of database |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP5911594B2 (en) | Providing translation support for application localization | |
| CN114020256A (en) | Front-end page generation method, device and equipment and readable storage medium | |
| CN111813963B (en) | Knowledge graph construction method and device, electronic equipment and storage medium | |
| CN111428451B (en) | Text online editing method and device, electronic equipment and storage medium | |
| CN111694565A (en) | Data visualization application development method and system | |
| CN113961584A (en) | Method and device for analyzing field blood relationship, electronic equipment and storage medium | |
| CN115202639A (en) | Code generation method, device, equipment and storage medium based on custom module | |
| CN115408399A (en) | Blood relationship analysis method, device, equipment and storage medium based on SQL script | |
| CN114707474A (en) | Report generation method and device, electronic equipment and computer readable storage medium | |
| CN112486490B (en) | Front-end code packaging method and device, electronic equipment and storage medium | |
| CN113360139A (en) | Integration method and device of front-end frame, electronic equipment and storage medium | |
| CN115048111B (en) | Code generation method, device, equipment and medium based on metadata | |
| CN111625236A (en) | Front-end development method and device based on componentization, electronic equipment and storage medium | |
| TWI467481B (en) | Method, system, and computer program product for hierarchical program source management | |
| US20130016921A1 (en) | Method for providing localized images for software products | |
| CN114398282A (en) | Test script generation method, device, equipment and storage medium | |
| CN113687827B (en) | Data list generation method, device and equipment based on widget and storage medium | |
| CN113971044A (en) | Component document generation method, device, equipment and readable storage medium | |
| CN114004591A (en) | Automatic user-defined form auditing method and device, electronic equipment and storage medium | |
| CN111273913B (en) | Method and device for outputting application program interface data represented by specifications | |
| CN112527443A (en) | Prompt box display method and device, electronic equipment and computer readable storage medium | |
| CN113010129A (en) | Virtual studio full-flow multi-terminal blackboard writing extraction method and device | |
| CN111680204A (en) | Data acquisition method, data acquisition device and computer readable storage medium | |
| CN113051171A (en) | Interface test method, device, equipment and storage medium | |
| CN112214981B (en) | Presentation file generation method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |