CN111124379A - Page generation method and device, electronic equipment and storage medium - Google Patents
Page generation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111124379A CN111124379A CN201911164387.3A CN201911164387A CN111124379A CN 111124379 A CN111124379 A CN 111124379A CN 201911164387 A CN201911164387 A CN 201911164387A CN 111124379 A CN111124379 A CN 111124379A
- Authority
- CN
- China
- Prior art keywords
- page
- node
- data
- page element
- 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.)
- Granted
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/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Computing Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The application discloses a page generation method, a page generation device, electronic equipment and a storage medium, and relates to a network page development technology. The specific scheme comprises the following steps: acquiring a page code of a page to be generated, and converting the page code into an object; for each object, judging whether the type attribute of the object is node configuration; when the type attribute of the object is node configuration, acquiring the object in the action area of the object as a node configuration sub-object; determining an element name, element attribute information and node level information of at least one page element from the node configuration sub-object; for each page element, acquiring a page element template from a preset page element library according to the element name of the page element; and generating a page structure according to the page element template, the element attribute information and the node level information of each page element, and rendering according to the page structure to generate a page to be generated. Repeated work is avoided to this application, has promoted the efficiency of page development greatly.
Description
Technical Field
The present application relates to a web page development technology, and in particular, to a page generation method and apparatus, an electronic device, and a storage medium.
Background
During the development of the web page, the majority of development work is repeated work, for example, operations such as inserting a form, a list or a paging device into the page, and the repeatability of the operations is high, and the universality of page elements such as the form, the list or the paging device is strong.
In the prior art, a JavaScript program language is usually adopted to perform development work of web pages, and independent development is performed for each page. Such a development method needs to write a large amount of JavaScript code, and the development efficiency of the independent development method for each page is low.
Disclosure of Invention
In view of this, the present disclosure is directed to a page generation method, which avoids repetitive work and greatly improves page development efficiency.
In order to achieve the purpose, the technical scheme provided by the application is as follows:
in a first aspect, an embodiment of the present application provides a page generation method, including the following steps:
acquiring a page code of a page to be generated, and converting the page code into an object;
for each object, determining whether the type attribute of the object is configured for the node;
when the type attribute of the object is node configuration, acquiring the object in the action area of the object as a node configuration sub-object;
determining an element name, element attribute information and node hierarchy information of at least one page element from the node configuration sub-object;
for each page element, acquiring a page element template from a preset page element library according to the element name of the page element;
and generating a page structure according to the page element template, the element attribute information and the node level information of each page element, and rendering and generating a page to be generated according to the page structure.
In a possible implementation manner, after the step of obtaining the object in the action region of the object as the node configuration sub-object, and before the step of determining the element name, the element attribute information, and the node hierarchy information of at least one page element from the node configuration sub-object, the method further includes:
aiming at each node configuration sub-object, judging whether the type attribute of the node configuration sub-object is a data request;
when the type attribute of the node configuration sub-object is a data request, acquiring an object in an action area of the node configuration sub-object as a data request sub-object;
determining data parameter information of request data from the data request sub-object, and sending the data parameter information to a remote server;
and acquiring the request data returned by the remote server, and storing the acquired request data in a local database.
In a possible embodiment, the data parameter information includes: the data name, request type, storage address and data identification of the request data;
the step of sending the data parameter information to a remote server includes:
generating a data request instruction according to the request type, and sending the data request instruction to the remote server; the data request instruction carries a storage address and a data identifier of the request data;
the step of storing the acquired request data in a local database includes:
and storing the request data to a local database by taking the data name as an index.
In a possible implementation manner, the step of generating a page structure according to the page element template, the element attribute information, and the node hierarchy information of each page element further includes:
obtaining the request data from the local database;
and generating a page structure according to the request data, the page element template of each page element, the element attribute information and the node hierarchy information.
In a possible implementation manner, after the step of obtaining the object in the action region of the object as the node configuration sub-object, and before the step of determining the element name, the element attribute information, and the node hierarchy information of at least one page element from the node configuration sub-object, the method further includes:
aiming at each node configuration sub-object, judging whether a page code in an action area of the node configuration sub-object contains a preset placeholder;
when the preset placeholder is included, acquiring a character string in an action area of the preset placeholder;
and executing the character string as a JavaScript expression.
In a possible implementation manner, the step of generating a page structure according to the page element template, the element attribute information, and the node hierarchy information of each page element includes:
generating a page element node according to the page element template and the element attribute information of each page element;
and constructing the page structure by utilizing each page element node according to the node level information.
In a possible implementation, the node level information is a sub-level page element node of the page element node;
the step of constructing the page structure using each page element node according to the node hierarchy information includes:
and according to the node hierarchy information, taking a tree structure constructed by each page element node as the page structure.
In a second aspect, an embodiment of the present application further provides a page generating apparatus, including:
the object generation module is used for acquiring a page code of a page to be generated and converting the page code into an object;
the attribute determining module is used for judging whether the type attribute of each object is node configuration or not;
the configuration judging module is used for acquiring the object in the action area of the object as a node configuration sub-object when the type attribute of the object is node configuration;
the code analysis module is used for determining the element name, the element attribute information and the node hierarchy information of at least one page element from the node configuration sub-object;
the template acquisition module is used for acquiring a page element template from a preset page element library according to the element name of each page element;
and the page generation module is used for generating a page structure according to the page element template, the element attribute information and the node hierarchy information of each page element, and generating a page to be generated according to the page structure rendering.
In a possible implementation manner, the page generating apparatus further includes a data requesting module, configured to:
aiming at each node configuration sub-object, judging whether the type attribute of the node configuration sub-object is a data request;
when the type attribute of the node configuration sub-object is a data request, acquiring an object in an action area of the node configuration sub-object as a data request sub-object;
determining data parameter information of request data from the data request sub-object, and sending the data parameter information to a remote server;
and acquiring the request data returned by the remote server, and storing the acquired request data in a local database.
In a possible embodiment, the data parameter information includes: the data name, request type, storage address and data identification of the request data;
the data request module is further configured to:
generating a data request instruction according to the request type, and sending the data request instruction to the remote server; the data request instruction carries a storage address and a data identifier of the request data;
the data request module is further configured to:
and storing the request data to a local database by taking the data name as an index.
In a possible implementation manner, the page generating module is further configured to:
obtaining the request data from the local database;
and generating a page structure according to the request data, the page element template of each page element, the element attribute information and the node hierarchy information.
In a possible implementation manner, the page generating apparatus further includes a JS executing module, configured to:
aiming at each node configuration sub-object, judging whether a page code in an action area of the node configuration sub-object contains a preset placeholder;
when the preset placeholder is included, acquiring a character string in an action area of the preset placeholder;
and executing the character string as a JavaScript expression.
In a possible implementation manner, the page generating module is further configured to:
generating a page element node according to the page element template and the element attribute information of each page element;
and constructing the page structure by utilizing each page element node according to the node level information.
In a possible implementation, the node level information is a sub-level page element node of the page element node;
the page generating module is further configured to:
and according to the node hierarchy information, taking a tree structure constructed by each page element node as the page structure.
In a third aspect, an embodiment of the present application further provides a computer-readable storage medium. The specific scheme is as follows:
a computer readable storage medium storing computer instructions which, when executed by a processor, may implement the steps of any one of the possible embodiments of the first aspect and the first aspect.
In a fourth aspect, an embodiment of the present application further provides an electronic device. The specific scheme is as follows:
an electronic device comprising the computer-readable storage medium described above, further comprising a processor that can execute the computer-readable storage medium.
In summary, the present application provides a page generation method, an apparatus, an electronic device, and a storage medium. According to the page generation method and device, the common page elements are stored as the page element templates, the obtained page codes are converted into the objects, when the type attributes of the objects are node configuration, the element names, the element attribute information and the node level information of the page elements are determined from the node configuration sub-objects, the page element templates are obtained according to the element names, the pages to be generated are generated according to the page element templates, the element attribute information and the node level information, repeated development of the page elements with high repetition rate and high general rate is avoided, and page generation efficiency is greatly improved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive labor.
FIG. 1 is a schematic illustration of a list page;
fig. 2 is a schematic flowchart of a page generation method according to an embodiment of the present application;
fig. 3 is a schematic flowchart of another page generation method provided in the embodiment of the present application
Fig. 4 is a schematic structural diagram of a page generation apparatus according to an embodiment of the present application;
FIG. 5 is a schematic structural diagram of a data request module in the page generation apparatus;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. 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 application.
The terms "first," "second," "third," "fourth," and the like in the description and in the claims of the present application and in the drawings described above, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the application described herein are, for example, capable of operation in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprising" and "having," as well as any variations thereof, are intended to cover non-exclusive inclusions. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements explicitly listed, but may include other steps or elements not explicitly listed or inherent to such process, method, article, or apparatus.
In the field of network page development, a large number of repeated page elements exist, such as the list page shown in fig. 1, most of the list page pages are similar in logic and function, except that specific list items are different, the list page elements include page elements such as batch operation multiple selection frames, paging devices and search forms, the repetition rate and reusability of the page elements such as batch operation multiple selection frames, paging devices and search forms are high, and one development project usually has hundreds of such list page pages. If independent development is carried out on the pages, a developer needs to invest a great deal of time and energy, and the problems of more repeated work and low development efficiency exist.
In view of this, according to the method and the device for generating the page, common page elements are stored as a page element template, the obtained page codes are converted into objects, when the type attribute of the object is node configuration, the element names, the element attribute information and the node hierarchy information of the page elements are determined from node configuration sub-objects, the page element template is obtained according to the element names, and the page to be generated is generated according to the page element template, the element attribute information and the node hierarchy information, so that repeated development of the page elements with high repetition rate and high general rate is avoided, and the page generation efficiency is greatly improved.
In order to make the objects, technical solutions and advantages of the present invention clearer, the technical solutions of the present invention are described in detail below with specific embodiments. Several of the following embodiments may be combined with each other and some details of the same or similar concepts or processes may not be repeated in some embodiments.
Example one
Fig. 2 is a schematic flowchart of a page generation method provided in an embodiment of the present application, and as shown in fig. 2, the embodiment mainly includes:
s201: the method comprises the steps of obtaining a page code of a page to be generated, and converting the page code into an object.
In the embodiment of the application, a JSON program language is used for developing the web page, and the JSON program language is a JS Object Notation (JavaScript Object Notation) language, which is a lightweight data exchange format. Compared with a web page developed by using a JavaScript program language, the JSON program language is used for developing the web page, and the code amount is greatly reduced. And when the JSON programming language is used for developing the network page, rendering according to the page code to generate the network page. At the moment, each sentence of page code for developing the page to be generated is obtained, wherein the page code is a code of JSON program language. According to the method and the device, the JSON programming language is used as the development language of the web page, and compared with the prior art that the JavaScript programming language is used, the required code amount can be greatly reduced, and the page development efficiency is further improved.
Therefore, after the page code of the page to be generated is obtained, the page code is converted into an object, the object obtained through the conversion is a JavaScript object, and the JavaScript object is analyzed. In the embodiment of the application, the objects and the page codes have a one-to-one correspondence relationship, one sentence or one section of page codes are converted into one object according to the syntax of the JSON program language, and the converted object corresponds to the sentence or the section of page codes.
S202: and judging whether the type attribute of the object is configured for the node or not aiming at each object.
The type attribute of the object is used for representing the function to be realized of the page code. The syntax structure of the page code comprises a key (key) and a value (value), and for a JavaScript object, one object consists of two parts, namely an attribute and an assignment. The attribute of the object is a key in the JSON code, the assignment of the object is a value in the JSON code, and the type attribute of the object can be determined according to the key of the page code during specific implementation. The type attribute is used for characterizing functions of the page code, for example, when the type attribute is configured for a node, each sub-object or each sentence of the page code in the object and the object active region is used for clarifying the configuration of each page element of the page to be generated.
S203: and when the type attribute of the object is node configuration, acquiring the object in the action area of the object as a node configuration sub-object.
When the type attribute of the object is node configuration, the key of the page code corresponding to the object is a node configuration field, and the object in the object action region is used for configuring at least one page element in the page to be generated. Here, one page element in the page is a node in the page structure, and the page element is configured, that is, the node in the page structure is configured, so that the object in the action region of the object is used as a node configuration sub-object.
For the JSON program language, the page code is identified by taking the braces as the partition of the active region, the page code from the immediately preceding half brace to the second half brace corresponding to the preceding half brace hierarchy is the active region of the page code, and the page code from the immediately preceding half brace to the second half brace corresponding to the preceding half brace hierarchy is the page code of the active region of the page code. When the page code is converted into the object, the first half bracket immediately adjacent to the page code corresponding to the object to the second half bracket corresponding to the first half bracket level is the active area of the object, the page code between the first half bracket immediately adjacent to the page code corresponding to the object to the second half bracket corresponding to the first half bracket level is the page code in the active area of the object, and the page code obtained by converting the page code between the first half bracket immediately adjacent to the page code corresponding to the object to the second half bracket corresponding to the first half bracket level is the object in the active area of the object. Therefore, when the type attribute is determined to be the node configuration, each object in the object action area is acquired, that is, an object converted from each page code between the immediately preceding half parenthesis of the page code corresponding to the object and the following half parenthesis corresponding to the preceding half parenthesis hierarchy is acquired as a node configuration child object.
S204: determining element names, element attribute information and node hierarchy information of at least one page element from the node configuration sub-objects.
The node configuration sub-object configures each page element in the page, and thus, the element name, the element attribute information, and the node hierarchy information of at least one page element are determined from the node configuration sub-object. Specifically, the element name is the name of the element template employed by the page element, and not the name of the particular page element. The element attribute information is attribute information of a specific page element, and is used for specifically configuring the specific page element, and also takes a paging device as an example, and the element attribute information is attribute information such as specific appearance, position and the like of the paging device. In the embodiment of the present application, the page structure of the page generated by using the JSON programming language is generally a tree structure, and the page structure of the tree structure is composed of at least one level of child node hierarchy, and each level of child node includes at least one child node. Therefore, the node level information is the level information of the page element in the page structure, and the position of the page element in the page structure can be determined according to the node level information.
S205: and aiming at each page element, acquiring a page element template from a preset page element library according to the element name of the page element.
In order to reduce repeated labor and improve the generation efficiency of the page, the page element template is set, and the page element template can be obtained according to the element name. Here, the element templates do not necessarily correspond to the types of the page elements one to one, and for example, when the page element type is a pagator, at least one page element template may be set for the pagator, or no page element template may be set.
S206: and generating a page structure according to the page element template, the element attribute information and the node level information of each page element, and rendering and generating a page to be generated according to the page structure.
Specifically, for each page element, the basic configuration of the page element can be obtained according to the page element template of the page element, the specific configuration of the page element can be obtained according to the element attribute information of the page element, a specific and specific page element design can be determined according to the page element template and the element attribute information of the page element, and then a page structure is generated according to the node level information of the page element. Here, the page structure is a tree structure of the page to be generated, and each child node in the tree structure is a specific page element. And finally, generating a page to be generated according to the page structure rendering.
Example two
Fig. 3 is a schematic flow chart of another page generation method provided in the embodiment of the present application, and as shown in fig. 3, the method specifically includes:
s301: the method comprises the steps of obtaining a page code of a page to be generated, and converting the page code into an object.
In the embodiment of the application, the page code is written by adopting a JSON program language, the page code written by each sentence of the JSON program language of the page to be generated is sequentially obtained, and the page code is converted into a JavaScript object.
S302: and judging whether the type attribute of the object is configured for the node or not aiming at each object.
After the object is obtained through conversion, the type attribute of the object needs to be determined for each object, and the type attribute of the page code is used for representing the function to be realized of the page code. The type attribute of the embodiment of the application comprises: and (5) configuring the nodes.
Before or during node configuration, it may be necessary to access a remote server to obtain remote data support to obtain remote data required for generating a page element, and when the page generation method provided in the embodiment of the present application needs to obtain remote data support, the type attribute of the embodiment of the present application further includes: and (6) requesting data. Generally, a data request is a data type of a node configuration sub-object, and when a page code corresponding to the node configuration sub-object is analyzed, the node configuration sub-object of the data request type may be encountered, and at this time, a remote data support needs to be obtained, so that remote data required for generating a page element is obtained. In specific implementation, the type attribute of the object may be determined according to the key of the page code corresponding to the object.
S303: and when the type attribute of the object is node configuration, acquiring the object in the action area of the object as a node configuration sub-object.
When the type attribute of the object is node configuration, acquiring a page code conversion object between a first half parenthesis immediately adjacent to the object and a second half parenthesis corresponding to the first half parenthesis hierarchy as an object in an active area of the object, and taking the page code in the active area as a node configuration sub-object.
And analyzing the node configuration sub-object, and determining the element name, the element attribute information and the node hierarchy information of at least one page element.
When analyzing the node configuration sub-object, if remote data support is needed in the process of generating the page element, the node configuration sub-object of the data request type is encountered, and at this time, the following steps I to IV may be adopted to obtain the request data:
step I, aiming at each node configuration sub-object, judging whether the type attribute of the node configuration sub-object is a data request.
Similar to the type attribute of the judgment object, the type attribute of the node configuration sub-object can be determined according to the key of the page code corresponding to the node configuration sub-object.
And step II, when the type attribute of the node configuration sub-object is a data request, acquiring an object in an action area of the node configuration sub-object as a data request sub-object.
When the type attribute of the node configuration sub-object is a data request, the analysis and implementation of the node configuration sub-object are required to obtain remote data support. At this time, the page code between the first half bracket immediately adjacent to the node configuration sub-object and the second half bracket corresponding to the first half bracket hierarchy is acquired as the page code in the action area of the node configuration sub-object, and the object obtained by converting the page code in the action area of the node configuration sub-object is determined as the data request sub-object.
And III, determining data parameter information of the requested data from the data request sub-object, and sending the data parameter information to a remote server.
Specifically, the data parameter information may include: the data name, request type, storage address and data identification of the request data. At this time, a data request instruction can be generated according to the request type, and the data request instruction is sent to the remote server; the data request instruction carries a storage address and a data identifier of the requested data. The request type of the requested data is used to characterize the technology employed and the type of interface used to initiate the data request instruction. For example, Asynchronous JavaScript And XML (Asynchronous JavaScript And XML, Ajax) may be used as the request type. And generating a data request instruction according to the request type, for example, when the request type is Ajax, sending the Ajax request instruction to a remote server to obtain the request data. The storage address of the request data is a storage address of the request data at a remote server, and in the field of network development, the storage address of the request data is usually a network address in a Uniform Resource Locator (URL) format. The data identifier of the requested data may be a data identifier or a storage key value when the requested data is stored at the remote server. The data request instruction carries a storage address and a data identifier, and the required request data can be obtained from the remote server.
For example, assume that the page code corresponding to a data request sub-object is as follows:
{
“dependencies”：{
“projectDetail”：{
“type”：“ajax”，
“url”：“/api/xxx/xxx”，
“params”：{
“id”：7
}
}
}
}
according to the key of the page code, that is, "dependences" can judge the type attribute of the page configuration sub-object, and obtain the type attribute as the data request sub-object, so that the action region of "dependences", that is, the page code between the immediately preceding parenthesis to the succeeding parenthesis corresponding to the preceding parenthesis, is obtained, and the object obtained by converting the page code in the action region of "dependences" is used as the data request sub-object. According to the data request sub-object, the name of data is determined to be 'project detail', the request type is 'ajax', the storage address is '/api/xxx/xxx', and the data identifier is 7. Therefore, the data request instruction is generated according to the request type, and the generated data request instruction is an Ajax request because the request type is 'Ajax', and the data request operation can be completed by calling an API (application program interface) of the Ajax type. The data request instruction carries a storage address and a data identifier, and for example, the data request instruction may specifically be/api/xxx/xxx? And id is 7, and the data request instruction carries a storage address "/api/xxx/xxx" and a data identifier "id is 7". After the data request command is sent, the request data returned by the remote server side can be obtained. The requested data is then stored in the local database, indexed by the data name "project detail".
And IV, acquiring the request data returned by the remote server, and storing the acquired request data in a local database.
After the request data is acquired, the acquired request data is stored in a local database, specifically, the request data can be stored in a data center at the front end, and then, the node configuration sub-object can also acquire the request data required by generating the webpage from the data center. The parameter in the local database for storing the request data has the global effect, so that the node configuration sub-object of any hierarchy can conveniently acquire the request data in the local database. The variable scope of the node configuration sub-object is set to be a local database taking a data center at the front end as an example, so that the node configuration sub-object can acquire request data required by generating a webpage from the local database taking the data center at the front end as an example. When storing the request data in the local database, the request data may be specifically stored in the local database with the data name as an index.
Furthermore, since the JSON programming language is adopted to write the page codes, the JSON programming language can only realize simpler static page design, and some pages needing to be dynamically generated or pages with complex implementation logic need to be realized by combining JavaScript syntax. The JSON program language cannot directly realize JavaScript expressions and only can realize simple data formats such as character strings, numbers, Boolean values and the like, the JSON program language cannot directly execute JavaScript grammars such as functions and regular expressions, and a JavaScript engine cannot recognize the JavaScript grammars in JSON codes. Therefore, if a page needs to be dynamically generated, the following steps 1 to 3 can be performed after each post-node configuration sub-object is acquired:
Specifically, a preset placeholder can be used to identify a statement that needs JavaScript syntax parsing, for example, a $ { } is used as the preset placeholder to identify the statement that needs JavaScript syntax parsing. For example, assume that the obtained page code is { "date": "$ { new Date () }", then the node configures the page code corresponding to the child object as the page code containing the preset placeholder.
And 2, when the preset placeholder is included, acquiring the character string in the action area of the preset placeholder.
When the page code contains the preset placeholder, the character string in the action region of the preset placeholder is a statement needing JavaScript syntax analysis, the action region of the preset placeholder is partitioned by a brace of the preset placeholder, and the character string in the brace range of the preset placeholder is the character string in the action region of the preset placeholder. For example, assume that the obtained page code is { "date": "$ { new Date () }", and the character string in the action region of the preset placeholder is new Date ().
And 3, executing the character string as a JavaScript expression.
And after the character string is obtained, executing the obtained character string as a JavaScript expression. Specifically, the method may be written or an Application Programming Interface (API) may be called for implementation. For example, assume that the obtained page code is { "date": "$ { new Date () }", wherein a character string in the action region of the preset placeholder is new Date (), executing the new Date () as a JavaScript expression, returning a time stamp of the current time, and analyzing to obtain { "Date": "2019-09-10T 11:59: 40.330Z" }
S304: determining element names, element attribute information and node hierarchy information of at least one page element from the node configuration sub-objects.
An element name, element attribute information, and node hierarchy information of at least one page element may be determined from the node configuration sub-object. Here, the element name is an element template name, the element attribute information is specific configuration information for a specific page element, and the node hierarchy information is a child node of the page element.
Illustratively, the page code corresponding to a segment of node configuration child object is:
the "elementConfig" is a key of the page code, the type attribute can be determined according to the key to configure the node, the page code in the action region of the object is obtained, that is, the page code between the immediately preceding brace and the subsequent brace corresponding to the preceding brace is obtained, and the object of page code conversion in the action region is used as a node configuration child object. In an example, the node configures the page code corresponding to the child object to be "type": "," tips ": { }, "children": []. The element name, namely the value of key type, can be obtained from the node configuration child object; element attribute information, that is, value of key "prop"; and node level information, i.e., value of key "children".
S305: and aiming at each page element, acquiring a page element template from a preset page element library according to the element name of the page element.
And generating page element templates from the page elements with higher repetition rate, such as search, creation buttons, deletion buttons, modification buttons, lists, forms, charts, paginators, batch operation of multiple selection frames and the like, and storing the page element templates in a page element library.
S306: and generating a page structure according to the page element template, the element attribute information and the node level information of each page element.
Specifically, when a page to be generated is generated, a page element node is generated for each page element according to a page element template and element attribute information of the page element. Here page element nodes are specific page elements generated for a particular configuration. For example, when the page element template is a pagator template, according to the element attribute information, the position where the specific pagator is placed, the specific style of the specific pagator, the number of included pages, and the like can be determined, so as to determine a specific pagator placed in the page to be generated, where the specific pagator is a page element node in the page to be generated.
And after each page element node is generated, constructing the page structure by using each page element node according to the node level information.
In order to make the page structure more concise and easy to use, a tree structure is usually adopted as the page structure. In a specific implementation, the node hierarchy information may be a parent page element node of each page element node, may be a child page element node of each page element node, may be a parent page element node and a child page element node of each page element node, and may also be location information of each page element node in the tree-like page structure. Preferably, in order to facilitate the construction of the page structure, the sub-level page element nodes may be used as the node hierarchy information of the page element nodes. At this time, according to the node hierarchy information, a tree structure constructed by each page element node is used as the page structure. Specifically, when a node configuration sub-object is obtained, a page element template is obtained according to a determined element name, the obtained page element template is configured according to determined element attribute information to obtain a specific page element node, and finally, a hierarchical relation between the configured page element node and a sub-level page element node is established according to node hierarchical information. And traversing each page element to finally obtain the page structure of the tree structure.
When the request data is obtained from the remote server and stored in the local database. When generating a page structure, it is necessary to first obtain request data from a local database, and then generate the page structure according to the request data, and the page element template, the element attribute information, and the node hierarchy information of each page element. In a specific implementation, the request data may be a page element template, and may be a specific page element attribute in the element attribute information. And when the request data is the page element template, generating a page structure by taking the request data as the page element template together with the element attribute information and the node hierarchy information. And when some element attribute information or some element attribute information of the page elements is requested to request data, generating a page structure according to the acquired page element template, all element attribute information including the requested data and the node level information.
In addition, no matter the node configuration sub-object or the data request sub-object, as long as the code contains the preset placeholder, the step of acquiring the character string in the action area of the preset placeholder and executing the character string as the JavaScript expression is required.
S307: and rendering and generating a page to be generated according to the page structure.
After determining the page structure of the tree structure, obtaining a page element node set arranged in the tree structure, wherein each page element node in the page structure can generate a page element node in a ReactNode format by using a React. createElement method according to different generation methods during specific implementation; it is also possible to directly generate a page element node in Document Object Model (DOM) format. When the page element node is a page element node in the ReactNode format, the page element node in the ReactNode format needs to be converted into a page element node in the DOM format, and then a page to be generated is generated according to the page structure rendering of the page element node in the DOM format. When the page element node is the page element node in the DOM format, the page to be generated can be generated directly according to the page structure rendering of the page element node in the DOM format.
Based on the same design concept, the embodiment of the application also provides a page generation device, a storage medium and electronic equipment.
EXAMPLE III
As shown in fig. 4, an embodiment of the present application further provides a page generating apparatus 400, including:
the object generation module 401 is configured to obtain a page code of a page to be generated, and convert the page code into an object;
an attribute determining module 402, configured to determine, for each of the objects, whether a type attribute of the object is configured for a node;
a configuration object determining module 403, configured to, when the type attribute of the object is node configuration, obtain an object in an action area of the object as a node configuration child object;
a code parsing module 404, configured to determine, from the node configuration sub-object, an element name, element attribute information, and node hierarchy information of at least one page element;
a template obtaining module 405, configured to obtain, for each page element, a page element template from a preset page element library according to an element name of the page element;
the page generating module 406 is configured to generate a page structure according to the page element template, the element attribute information, and the node hierarchy information of each page element, and render and generate a page to be generated according to the page structure.
The object generation module 401 is connected to the attribute determination module 402, the attribute determination module 402 is connected to the configuration object determination module 403, the configuration object determination module 403 is connected to the code analysis module 404, the code analysis module 404 is connected to the template acquisition module 405, and the template acquisition module 405 is connected to the page generation module 406.
In a possible implementation manner, the page generating apparatus 400 further includes a data requesting module 407, as shown in fig. 5, the data requesting module 407 includes:
a determining unit 501, configured to determine, for each node configuration sub-object, whether a type attribute of the node configuration sub-object is a data request;
a data object determining unit 502, configured to, when the type attribute of the node configuration sub-object is a data request, obtain an object in an action area of the node configuration sub-object as a data request sub-object;
a parameter information determining unit 503, configured to determine data parameter information of the requested data from the data request sub-object, and send the data parameter information to the remote server;
a data obtaining unit 504, configured to obtain the request data returned by the remote server;
a data storage unit 505, configured to store the acquired request data in a local database.
The data request module 407 is connected to the code parsing module 404, specifically, the determination unit 501 is connected to the code parsing module 404 and the data object determination unit 502, the data object determination unit 502 is connected to the parameter information determination unit 503, the parameter information determination unit 503 is connected to the data acquisition unit 504, and the data acquisition unit 504 is connected to the data storage unit 505.
In a possible embodiment, the data parameter information includes: the data name, request type, storage address and data identification of the request data;
the data request module 407 further includes:
a request instruction unit 506, configured to generate a data request instruction according to the request type, and send the data request instruction to the remote server; the data request instruction carries a storage address and a data identifier of the request data;
a data storage unit 505, further configured to:
and storing the request data to a local database by taking the data name as an index.
Specifically, the request instruction unit 506 is connected to the parameter information determination unit 503.
In a possible implementation manner, the page generating module 406 is further configured to:
obtaining the request data from the local database;
and generating a page structure according to the request data, the page element template of each page element, the element attribute information and the node hierarchy information.
In a possible implementation, the page generating apparatus 400 further includes a JS executing module 408, configured to:
aiming at each node configuration sub-object, judging whether a page code in an action area of the node configuration sub-object contains a preset placeholder;
when the preset placeholder is included, acquiring a character string in an action area of the preset placeholder;
and executing the character string as a JavaScript expression.
Here, JS is an abbreviation of JavaScript.
Specifically, the JS execution module 408 is connected to the code analysis module 404.
In a possible implementation manner, the page generating module 406 is further configured to:
generating a page element node according to the page element template and the element attribute information of each page element;
and constructing the page structure by utilizing each page element node according to the node level information.
In a possible implementation, the node level information is a sub-level page element node of the page element node;
the page generating module 406 is further configured to:
and according to the node hierarchy information, taking a tree structure constructed by each page element node as the page structure.
In a possible implementation manner, the page generating apparatus provided in this embodiment of the present application may further include a central control module and a storage module, each module in the page generating apparatus is connected to the central control module, the storage module is also connected to the central control module, the central control module schedules execution sequences and data interactions between each module, stores each intermediate data in an internal storage or a memory, and reads or writes the intermediate data from or into the internal storage or the memory through the central control module.
The page generation device provided by the embodiment of the application can avoid repeated work, and greatly improves the efficiency of page development.
Example four
A computer readable medium storing instructions that, when executed by a processor, cause the processor to perform the steps of any one of the page generation methods provided by embodiments of the present application. In practical applications, the computer readable medium may be included in the apparatus/device/system described in the above embodiments, or may exist alone without being assembled into the apparatus/device/system. The computer readable storage medium carries one or more programs which, when executed, implement the steps of performing any of the page generation methods provided by the embodiments of the present application according to any of the page generation apparatuses provided by referring to the embodiments of the present application.
According to embodiments disclosed herein, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example and without limitation: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing, without limiting the scope of the present disclosure. In the embodiments disclosed herein, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The method steps described herein may be implemented in hardware, for example, logic gates, switches, Application Specific Integrated Circuits (ASICs), programmable logic controllers, embedded microcontrollers, etc., in addition to data processing programs. Such hardware capable of implementing the methods described herein may also constitute the present application.
EXAMPLE five
The embodiment of the present application further provides an electronic device, which may be a computer or a server, and any one of the page generation apparatuses provided in the embodiments of the present application may be integrated therein. As shown in fig. 6, an electronic device 600 provided by the embodiment of the present application is shown.
The electronic device may include a processor 601 of one or more processing cores, one or more computer-readable storage media 602. The electronic device may further include a power supply 603 and an input-output unit 604. Those skilled in the art will appreciate that fig. 6 does not constitute a limitation of the electronic device and may include more or fewer components than illustrated, or some components may be combined, or a different arrangement of components.
Wherein:
the processor 601 is a control portion of the electronic device, connects the various portions by using various interfaces and lines, and executes the steps of any one of the page generation methods provided by the embodiments of the present application by running or executing a software program stored in the computer-readable storage medium 602.
The computer-readable storage medium 602 may be used to store a software program, i.e., a program involved in any one of the page generation methods provided by the embodiments of the present application.
The processor 601 executes various functional applications and data processing by executing software programs stored in the computer-readable storage medium 602. The computer-readable storage medium 602 may 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 or the like used according to the needs of the electronic device. Further, the computer-readable storage medium 602 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the computer-readable storage medium 602 may also include a memory controller to provide the processor 601 with access to the computer-readable storage medium 602.
The electronic device further comprises a power supply 603 for supplying power to the various components, and preferably, the power supply 603 is logically connected to the processor 601 through a power management system, so that functions of managing charging, discharging, power consumption, and the like are realized through the power management system. The power supply 603 may also include any component of one or more dc or ac power sources, recharging systems, power failure detection circuitry, power converters or inverters, power status indicators, and the like.
The server may also include an input-output unit 604, such as may be used to receive entered numeric or character information, and to generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control; such as various graphical user interfaces that may be used to display information entered by or provided to the user, as well as the server, which may be composed of graphics, text, icons, video, and any combination thereof.
The flowchart and block diagrams in the figures of the present application illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments disclosed herein. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
It will be appreciated by a person skilled in the art that various combinations and/or combinations of features described in the various embodiments and/or claims of the present application are possible, even if such combinations or combinations are not explicitly described in the present application. In particular, the features recited in the various embodiments and/or claims of the present application may be combined and/or coupled in various ways, all of which fall within the scope of the present disclosure, without departing from the spirit and teachings of the present application.
The principle and implementation of the present application are explained by applying specific embodiments in the present application, and the above description of the embodiments is only used to help understanding the method and the core idea of the present application, and is not used to limit the present application. It will be appreciated by those skilled in the art that changes may be made in this embodiment and its broader aspects and without departing from the principles, spirit and scope of the invention, and that all such modifications, equivalents, improvements and equivalents as may be included within the scope of the invention are intended to be protected by the claims.
Claims (10)
1. A page generation method is characterized by comprising the following steps:
acquiring a page code of a page to be generated, and converting the page code into an object;
for each object, judging whether the type attribute of the object is node configuration;
when the type attribute of the object is node configuration, acquiring the object in the action area of the object as a node configuration sub-object;
determining an element name, element attribute information and node hierarchy information of at least one page element from the node configuration sub-object;
for each page element, acquiring a page element template from a preset page element library according to the element name of the page element;
and generating a page structure according to the page element template, the element attribute information and the node level information of each page element, and rendering and generating a page to be generated according to the page structure.
2. The method according to claim 1, wherein after the step of obtaining the object in the active area of the object as the node configuration sub-object and before the step of determining the element name, the element attribute information, and the node hierarchy information of at least one page element from the node configuration sub-object, the method further comprises:
aiming at each node configuration sub-object, judging whether the type attribute of the node configuration sub-object is a data request;
when the type attribute of the node configuration sub-object is a data request, acquiring an object in an action area of the node configuration sub-object as a data request sub-object;
determining data parameter information of request data from the data request sub-object, and sending the data parameter information to a remote server;
and acquiring the request data returned by the remote server, and storing the acquired request data in a local database.
3. The method of claim 2, wherein the data parameter information comprises: the data name, request type, storage address and data identification of the request data;
the step of sending the data parameter information to a remote server includes:
generating a data request instruction according to the request type, and sending the data request instruction to the remote server; the data request instruction carries a storage address and a data identifier of the request data;
the step of storing the acquired request data in a local database includes:
and storing the request data to a local database by taking the data name as an index.
4. The method according to claim 2, wherein the step of generating a page structure according to the page element template, the element attribute information, and the node hierarchy information of each page element further comprises:
obtaining the request data from the local database;
and generating a page structure according to the request data, the page element template of each page element, the element attribute information and the node hierarchy information.
5. The method according to claim 1, wherein after the step of obtaining the object in the active area of the object as the node configuration sub-object and before the step of determining the element name, the element attribute information, and the node hierarchy information of at least one page element from the node configuration sub-object, the method further comprises:
aiming at each node configuration sub-object, judging whether a page code in an action area of the node configuration sub-object contains a preset placeholder;
when the preset placeholder is included, acquiring a character string in an action area of the preset placeholder;
and executing the character string as a JavaScript expression.
6. The method according to claim 1, wherein the step of generating a page structure according to the page element template, the element attribute information, and the node hierarchy information of each page element separately comprises:
generating a page element node according to the page element template and the element attribute information of each page element;
and constructing the page structure by utilizing each page element node according to the node level information.
7. The method of claim 6, wherein the node level information is a sub-level page element node of the page element node;
the step of constructing the page structure using each page element node according to the node hierarchy information includes:
and according to the node hierarchy information, taking a tree structure constructed by each page element node as the page structure.
8. A page generating apparatus, comprising:
the object generation module is used for acquiring a page code of a page to be generated and converting the page code into an object;
the attribute determining module is used for judging whether the type attribute of each object is node configuration or not;
the configuration judging module is used for acquiring the object in the action area of the object as a node configuration sub-object when the type attribute of the object is node configuration;
the code analysis module is used for determining the element name, the element attribute information and the node hierarchy information of at least one page element from the node configuration sub-object;
the template acquisition module is used for acquiring a page element template from a preset page element library according to the element name of each page element;
and the page generation module is used for generating a page structure according to the page element template, the element attribute information and the node hierarchy information of each page element, and generating a page to be generated according to the page structure rendering.
9. A computer readable storage medium storing computer instructions which, when executed by a processor, implement the steps of the method of any one of claims 1 to 7.
10. An electronic device comprising the computer-readable storage medium of claim 9, further comprising a processor that can execute the computer-readable storage medium.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911164387.3A CN111124379B (en) | 2019-11-25 | 2019-11-25 | Page generation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911164387.3A CN111124379B (en) | 2019-11-25 | 2019-11-25 | Page generation method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111124379A true CN111124379A (en) | 2020-05-08 |
| CN111124379B CN111124379B (en) | 2021-07-23 |
Family
ID=70496506
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911164387.3A Active CN111124379B (en) | 2019-11-25 | 2019-11-25 | Page generation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111124379B (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111581577A (en) * | 2020-05-09 | 2020-08-25 | 拉扎斯网络科技（上海）有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN111880840A (en) * | 2020-07-24 | 2020-11-03 | 北京达佳互联信息技术有限公司 | Data acquisition method and device, electronic equipment and storage medium |
| CN112035197A (en) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN112905944A (en) * | 2021-04-06 | 2021-06-04 | 成都新希望金融信息有限公司 | Page online dynamic generation method and device, electronic equipment and readable storage medium |
| CN113051507A (en) * | 2021-03-29 | 2021-06-29 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front end display based on json data |
| CN114064033A (en) * | 2021-11-17 | 2022-02-18 | 招商局金融科技有限公司 | Front-end component development method and device, electronic equipment and readable storage medium |
| CN114064033B (en) * | 2021-11-17 | 2024-10-29 | 招商局金融科技有限公司 | Front-end modular development method and device, electronic equipment and readable storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150268938A1 (en) * | 2014-03-20 | 2015-09-24 | David Wei Ge | Method for creating a computer software compiler for client server computing |
| CN105095067A (en) * | 2014-05-21 | 2015-11-25 | 北京奇虎科技有限公司 | User interface element object identification and automatic test method and apparatus |
| CN108415702A (en) * | 2018-01-22 | 2018-08-17 | 北京奇艺世纪科技有限公司 | A kind of mobile terminal application interface dynamic rendering intent and device |
-
2019
- 2019-11-25 CN CN201911164387.3A patent/CN111124379B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150268938A1 (en) * | 2014-03-20 | 2015-09-24 | David Wei Ge | Method for creating a computer software compiler for client server computing |
| CN105095067A (en) * | 2014-05-21 | 2015-11-25 | 北京奇虎科技有限公司 | User interface element object identification and automatic test method and apparatus |
| CN108415702A (en) * | 2018-01-22 | 2018-08-17 | 北京奇艺世纪科技有限公司 | A kind of mobile terminal application interface dynamic rendering intent and device |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111581577A (en) * | 2020-05-09 | 2020-08-25 | 拉扎斯网络科技（上海）有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN111880840A (en) * | 2020-07-24 | 2020-11-03 | 北京达佳互联信息技术有限公司 | Data acquisition method and device, electronic equipment and storage medium |
| CN112035197A (en) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN112035197B (en) * | 2020-08-11 | 2021-07-13 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN113051507A (en) * | 2021-03-29 | 2021-06-29 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front end display based on json data |
| CN113051507B (en) * | 2021-03-29 | 2023-11-21 | 北京智慧星光信息技术有限公司 | Method and system for constructing bidirectional binding web page front-end display based on json data |
| CN112905944A (en) * | 2021-04-06 | 2021-06-04 | 成都新希望金融信息有限公司 | Page online dynamic generation method and device, electronic equipment and readable storage medium |
| CN114064033A (en) * | 2021-11-17 | 2022-02-18 | 招商局金融科技有限公司 | Front-end component development method and device, electronic equipment and readable storage medium |
| CN114064033B (en) * | 2021-11-17 | 2024-10-29 | 招商局金融科技有限公司 | Front-end modular development method and device, electronic equipment and readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111124379B (en) | 2021-07-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111124379B (en) | Page generation method and device, electronic equipment and storage medium | |
| CN111241454B (en) | Method, system and device for generating webpage codes | |
| US9021440B1 (en) | System and method for automated test script generation | |
| CN103631601A (en) | Code generation method and code generation device | |
| CN111610978A (en) | Applet conversion method, device, equipment and storage medium | |
| CN110955410A (en) | Automatic code generation method, device, equipment and medium | |
| CN113986241B (en) | Configuration method and device of business rules based on knowledge graph | |
| CN109933331A (en) | Data transfer device and associated component between a kind of client-server | |
| CN103116500A (en) | Method and device for structural body definition and structure output | |
| EP3570190A1 (en) | Statement parsing method for database statement | |
| CN104731588A (en) | Page layout file generation method and device | |
| CN113971044A (en) | Component document generation method, device, equipment and readable storage medium | |
| CN110058849A (en) | Generation method, device, computer equipment and the storage medium of flow chart | |
| CN113885844A (en) | Business service arranging method and related device | |
| CN117827218A (en) | Development method, device and electronic equipment for supporting multiple languages by low-code application | |
| CN111045685A (en) | Code conversion method, device, storage medium and electronic equipment | |
| CN117667607A (en) | Visual buried point method, device and storage medium | |
| Takagi et al. | Prototype of a Modeling Tool to Convert between Extended Place/Transition Nets and VDM++ Specifications | |
| CN105094845A (en) | Process modeling device and method | |
| Lu et al. | DATAM: A model‐based tool for dependability analysis | |
| Vogel et al. | Rapid performance modeling by transforming use case maps to palladio component models | |
| KR100319776B1 (en) | Apparatus and method for software process modeling | |
| KR101974804B1 (en) | Flow diagram generation method and apparatus performing the same | |
| US11550579B2 (en) | Systems and methods for configurable ordered transformation of database content | |
| US9274762B2 (en) | System and method for developing an object-oriented system |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20201021 Address after: 100085 Floor 102-1, Building No. 35, West Second Banner Road, Haidian District, Beijing Applicant after: Seashell Housing (Beijing) Technology Co.,Ltd. Address before: 300 280 Tianjin Economic and Technological Development Zone Nangang Industrial Zone Office Building C Block 1, Room 112, Unit 05 Applicant before: BEIKE TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |