CN112068835A - Method and device for generating page on line - Google Patents
Method and device for generating page on line Download PDFInfo
- Publication number
- CN112068835A CN112068835A CN202010922199.9A CN202010922199A CN112068835A CN 112068835 A CN112068835 A CN 112068835A CN 202010922199 A CN202010922199 A CN 202010922199A CN 112068835 A CN112068835 A CN 112068835A
- Authority
- CN
- China
- Prior art keywords
- component
- page
- tree
- rendering
- components
- 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
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000009877 rendering Methods 0.000 claims abstract description 90
- 238000012545 processing Methods 0.000 claims description 24
- 238000004590 computer program Methods 0.000 claims description 16
- 238000004883 computer application Methods 0.000 abstract description 2
- 230000006870 function Effects 0.000 description 22
- 238000010586 diagram Methods 0.000 description 12
- 230000003287 optical effect Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 238000011161 development Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 238000000429 assembly Methods 0.000 description 2
- 238000012790 confirmation Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000003313 weakening effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
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/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
The embodiment of the invention provides a method for generating a page on line, which relates to the technical field of computer application, and comprises the following steps: analyzing a corresponding page ID and a first component tree according to the acquired page; acquiring the added components and the component IDs and configuring the components and the component IDs to the first component tree to obtain a second component tree; performing layered rendering on the second component tree according to a preset rule to obtain a page framework; presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID; and rendering the assembly to obtain a complete page. According to the invention, the interior of the component is separated from the rendering of the component tree, so that the rendering speed is accelerated, and the configuration is more convenient and has pertinence.
Description
Technical Field
The present invention relates to the field of computer application technologies, and in particular, to a method and an apparatus for generating a page online.
Background
Under the trend of industrial internet, the demand of offline scene online is more and more, and a large amount of front-end manpower is needed to develop and realize the demand. Along with the evolution of development iteration, the front-end engineering is more tedious and bloated, the requirement for batch change cannot be met only by the front-end manpower stacking, the project progress is slow, and even the collapse of the project can be caused by batch modification of a plurality of scene common parts.
Although there are engineering, componentized development models that can greatly reduce the repetitive labor, the personalized demand development and layout still occupies a large amount of resources. Meanwhile, for a large number of demands with short life cycles, the responses of quick online and quick offline cannot be made, and time and efficiency are wasted in the process from the demands to the implementation.
Therefore, the development modes in the prior art still have inconvenience and difficulty in responding to the demand in a targeted manner.
Disclosure of Invention
In view of the above problems, embodiments of the present invention are provided to provide a method for generating a page online and a corresponding device for generating a page online, which overcome or at least partially solve the above problems.
In order to solve the above problem, an embodiment of the present invention discloses a method for generating a page online, including:
analyzing a corresponding page ID and a first component tree according to the acquired page;
acquiring the added components and the component IDs and configuring the components and the component IDs to the first component tree to obtain a second component tree;
performing layered rendering on the second component tree according to a preset rule to obtain a page framework;
presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID;
and rendering the assembly to obtain a complete page.
Optionally, the obtaining the added component and the component ID and configuring the added component and the component ID to the first component tree, and obtaining the second component tree includes:
acquiring a new component and/or a copy component, and acquiring a corresponding component ID (identity) at the same time, wherein the new component is a component created by a user online, and the copy component is a pre-stored component;
and configuring the newly-built component and/or the copied component and the component ID to the first component tree to obtain the second component tree.
Optionally, the performing layered rendering on the second component tree according to a preset rule to obtain a page skeleton includes:
lazy loading the components in the second component tree and recursively rendering parent components, wherein a parent component is a component provided with sub-components.
Optionally, the presetting component data including the page ID and the component ID, and configuring the corresponding component data into a component according to the page ID and the component ID includes:
and configuring corresponding component data into the components through the paramsList and/or the component configuration items.
Optionally, the presetting component data including the page ID and the component ID, and configuring the corresponding component data into a component according to the page ID and the component ID further includes:
acquiring module component data, and configuring corresponding module data to the interior of the module.
The embodiment of the invention also discloses a device for generating the page on line, which comprises the following steps:
the acquisition module is used for analyzing the corresponding page ID and the first component tree according to the acquired page;
the generating module is used for acquiring the added components and the component IDs and configuring the added components and the component IDs to the first component tree to obtain a second component tree;
the first rendering module is used for performing layered rendering on the second component tree according to a preset rule to obtain a page framework;
the data configuration module is used for presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page framework according to the page ID and the component ID;
and the second rendering module is used for rendering the assembly to obtain a complete page.
Optionally, the generating module includes:
the device comprises a component acquisition module, a component selection module and a component selection module, wherein the component acquisition module is used for acquiring a newly-built component and/or a copy component and simultaneously acquiring a corresponding component ID, the newly-built component is a component created by a user on line, and the copy component is a pre-stored component;
and the component configuration module is used for configuring the newly-built component and/or the copied component and the component ID to the first component tree to obtain the second component tree.
Optionally, the first rendering module comprises:
and the processing module is used for lazily loading the components in the second component tree and recursively rendering parent components, wherein the parent components are the components provided with the sub-components.
The embodiment of the invention also discloses electronic equipment which is characterized by comprising a processor, a memory and a computer program which is stored on the memory and can run on the processor, wherein the computer program realizes the steps of the method for generating the page on line when being executed by the processor.
The embodiment of the invention also discloses a computer readable storage medium, which is characterized in that a computer program is stored on the computer readable storage medium, and the computer program realizes the steps of the method for generating the page on line when being executed by a processor.
The embodiment of the invention has the following advantages: by carrying out layered processing on the components in the page, the page framework can be quickly rendered, the data volume of each component can be greatly reduced, and the first screen rendering speed is accelerated; the component data is acquired through the paramsList individual configuration and the component individual configuration item, the page can be edited on line and the existing component tree can be directly multiplexed, so that the construction and the rapid multiplexing of the page framework component tree can be realized; the rendering speed is accelerated by separating the interior of the component from the rendering of the component tree, so that the configuration is more convenient and has pertinence.
Drawings
FIG. 1 is a flow chart of the steps of a method of generating pages online in accordance with the present invention;
FIG. 2 is a flowchart of the steps for obtaining a second component tree in a method for generating a page on-line according to the present invention;
FIG. 3 is a flowchart of the steps of rendering a second component tree in a method of generating a page on-line according to the present invention;
FIG. 4 is a flowchart illustrating the steps of rendering a second component tree according to a method of generating a page on-line according to the present invention;
FIG. 5 is a flowchart of the steps of configuring component data for a component in a method of generating a page on-line in accordance with the present invention;
FIG. 6 is a block diagram of an apparatus for online generation of pages according to the present invention;
FIG. 7 is a block diagram of a generating module in an apparatus for generating a page online according to the present invention;
FIG. 8 is a block diagram of a first rendering module in an apparatus for online generation of pages according to the present invention;
FIG. 9 is an electronic device implementing a method of generating pages online in accordance with the present invention.
Detailed Description
In order to make the aforementioned objects, features and advantages of the present invention comprehensible, embodiments accompanied with figures are described in further detail below.
One of the core ideas of the embodiment of the invention is that the page framework can be quickly rendered by layering the components in the page, the data volume of each component can be greatly reduced, and the first-screen rendering speed is accelerated; the component data is acquired through the paramsList individual configuration and the component individual configuration item, the page can be edited on line and the existing component tree can be directly multiplexed, so that the construction and the rapid multiplexing of the page framework component tree can be realized; the rendering speed is accelerated by separating the interior of the component from the rendering of the component tree, so that the configuration is more convenient and has pertinence.
Referring to fig. 1, a flowchart illustrating steps of an embodiment of a method for generating a page online according to the present invention is shown, which may specifically include the following steps:
s100, analyzing a corresponding page ID and a first component tree according to the acquired page;
s200, acquiring the added components and the component IDs, and configuring the components and the component IDs to the first component tree to obtain a second component tree;
s300, performing layered rendering on the second component tree according to preset rules to obtain a page framework;
s400, presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID;
and S500, rendering the assembly to obtain a complete page.
S100, analyzing a corresponding page ID and a first component tree according to the acquired page; the page is an initial page, and when the initial page is generated on line, one page can be manually created in advance or a template page is directly selected for editing; the actual operation of selecting a template page may be to query and acquire an initial page through a unique page ID and a component ID. After the initial page is created, a unique page ID and a first component tree located in the page can be generated, wherein the first component tree is the initial component tree, namely a null component tree.
S200, acquiring the added components and the component IDs, and configuring the components and the component IDs to the first component tree to obtain a second component tree; the added components comprise a new component and a copy component; specifically, for the components added in the first component tree, the component tree can be constructed and quickly multiplexed by adding child nodes, brother nodes and brother nodes to the tree-shaped component, or copying and pasting, or dragging and the like in the tree-shaped component. Generating a component ID corresponding to a component while obtaining the add component in the first component tree.
S300, performing layered rendering on the second component tree according to preset rules to obtain a page framework; during rendering, registering components through lazy loading at an entrance of a page, and then recursively rendering a component tree through a render function; through the recursion function, can accomplish the rendering of page skeleton, carry out the layering to the component tree in some specific subassemblies simultaneously, like the sub-label inside of label subassembly, inquire new component tree once more, render, reduce the data bulk of component tree for the first screen is rendered, carries out lazy loading to the subassembly of other parts.
S400, presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID; the preset component data can be obtained by inquiring stored component data, editing online and uploading template data in batch. Specifically, a small number of configuration items can be configured and transmitted through the paramsList, other configuration items are converted into data parameters, and are transmitted through the independent configuration items of the components, and meanwhile, a template data uploading function is added, and data is imported in batches.
S500, rendering the assembly to obtain a complete page; and after the component is configured with the component data, performing closed-loop processing on the component data in the component, and rendering the inside of the component to obtain a complete page.
Referring to fig. 2, acquiring the added component and the component ID and configuring the component ID to the first component tree, and obtaining a second component tree includes:
s210, acquiring a newly-built component and/or a copy component, and acquiring a corresponding component ID (identity), wherein the newly-built component is a component created by a user on line, and the copy component is a pre-stored component;
s220, configuring the newly-built component and/or the copied component and the component ID to the first component tree to obtain the second component tree. Specifically, for the components added in the first component tree, the component tree can be constructed and quickly multiplexed by adding child nodes, brother nodes and brother nodes to the tree-shaped component, or copying and pasting, or dragging and the like in the tree-shaped component. And generating a component ID corresponding to the component while obtaining the added component in the first component tree, so as to obtain the second component tree.
To achieve a perfect page layout we add a box component for configuring the front-end box model. Meanwhile, a row assembly is added to divide the page into 24 parts, and the page layout is realized by the parameters of different column numbers, different intervals and the like occupied by the sub-assemblies of the row assembly.
And a direct input style inlet is added in each page, and different layouts or related beautification can be realized by directly adding front end styles.
In order to prevent the pressure of page rendering caused by frequent changes, a draft function is added to all the configurations, only the data draft is modified by a user, and only click confirmation is performed, the data draft is really saved to the background and the page is re-rendered.
Referring to fig. 3 and 4, performing layered rendering on the second component tree according to a preset rule to obtain a page skeleton includes:
s310, lazily loading the components in the second component tree and recursively rendering parent components, wherein the parent components are the components provided with sub-components;
s311, acquiring a first parameter object;
s312, if paramslist exists, adding the paramslist to the first parameter object to obtain a second parameter object;
s313, when the second parameter object has sub-components, performing recursive rendering.
During actual rendering, we register components through lazy loading at the entry of the page, and then recursively render the component tree through a render function. Specifically, the recursive rendering process is as follows: firstly, acquiring a parameter object, judging whether paramsList exists or not, adding the paramsList into the parameter object if the paramsList exists, finally judging whether a child node exists or not, performing recursive rendering if the child node exists, referring a mixin inside a special node, calling a recursive rendering function to perform rendering of the child component, and directly rendering a corresponding component if the child node does not exist; the special node is generally a node in which child nodes exist that can be determined directly.
Through the recursion function, can accomplish the rendering of page skeleton, carry out the layering to the component tree in some specific subassemblies simultaneously, like the sub-label inside of label subassembly, inquire new component tree once more, render, reduce the data bulk of component tree for the first screen is rendered, carries out lazy loading to the subassembly of other parts. The lazy loading refers to that when a certain slide is entered, the component tree of the corresponding slide is independently obtained, and then each component calls an interface to obtain data required by the component tree during rendering.
Referring to fig. 5, presetting component data including the page ID and the component ID, and configuring the corresponding component data to the inside of the component of the page skeleton according to the page ID and the component ID includes:
s410, configuring corresponding component data to the interior of the component through the paramsList and/or the component configuration item and/or the template component.
The mode of configuring the component data into the component can be transmitted by configuring a small number of configuration items through the paramsList, other configuration items are converted into data parameters, or the component data is transmitted by a single configuration item of the component, or data is imported in batch by adding a template data uploading function.
The data of the component is directly processed in a closed loop mode in the component, and the closed loop processing means that data is submitted, updated, obtained, processed and rendered in the component. All data is stored and interacted with through json strings. Weakening the dependence of the middle station of the editable page on the background interface personalization, and for the background, the component tree and the component content are only common json character string data without any difference. In the state of submitting data and updating data, the page provides an entry for submitting data or realizes online form editing submission. And under the states of acquiring data and finishing data processing and rendering, hiding a corresponding data change entry by the page, enabling a user to only perform viewing operation, inquiring corresponding data during generation of component content in the life cycle of the user, performing corresponding processing, generating a DOM structure, mounting the DOM structure on the page, and finishing rendering.
The component data is mainly data required by component rendering, for example, after an echarts bar graph component uploads data through excel, secondary processing is carried out at the front end, the data required by the echarts bar graph component is converted into the data required by the bar graph and stored in the background, and corresponding data is obtained through the unique ID for rendering.
It should be noted that, for simplicity of description, the method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present invention is not limited by the illustrated order of acts, as some steps may occur in other orders or concurrently in accordance with the embodiments of the present invention. Further, those skilled in the art will appreciate that the embodiments described in the specification are presently preferred and that no particular act is required to implement the invention.
Referring to fig. 6, a block diagram illustrating a structure of an embodiment of an apparatus for generating a page online according to the present invention is shown, which may specifically include the following modules:
an obtaining module 100, configured to analyze a corresponding page ID and a first component tree according to an obtained page;
a generating module 200, configured to obtain the added component and the component ID and configure the component ID to the first component tree, so as to obtain a second component tree;
the first rendering module 300 is configured to perform layered rendering on the second component tree according to a preset rule to obtain a page skeleton;
a data configuration module 400, configured to preset component data including the page ID and the component ID, and configure the corresponding component data to the inside of the component of the page skeleton according to the page ID and the component ID;
and a second rendering module 500, configured to render the component to obtain a complete page.
The acquiring module 100 is configured to analyze a corresponding page ID and a first component tree according to an acquired page; the page is an initial page, and when the initial page is generated on line, one page can be manually created in advance or a template page is directly selected for editing; the actual operation of selecting a template page may be to query and acquire an initial page through a unique page ID and a component ID. After the initial page is created, a unique page ID and a first component tree located in the page can be generated, wherein the first component tree is the initial component tree, namely a null component tree.
The generating module 200 is configured to obtain the added component and the component ID and configure the component ID to the first component tree to obtain a second component tree; the added components comprise a new component and a copy component; specifically, for the components added in the first component tree, the component tree can be constructed and quickly multiplexed by adding child nodes, brother nodes and brother nodes to the tree-shaped component, or copying and pasting, or dragging and the like in the tree-shaped component. Generating a component ID corresponding to a component while obtaining the add component in the first component tree.
The first rendering module 300 is configured to perform layered rendering on the second component tree according to a preset rule to obtain a page skeleton; during rendering, registering components through lazy loading at an entrance of a page, and then recursively rendering a component tree through a render function; through the recursion function, can accomplish the rendering of page skeleton, carry out the layering to the component tree in some specific subassemblies simultaneously, like the sub-label inside of label subassembly, inquire new component tree once more, render, reduce the data bulk of component tree for the first screen is rendered, carries out lazy loading to the subassembly of other parts.
The data configuration module 400 is configured to preset component data including the page ID and the component ID, and configure the corresponding component data to the inside of the component of the page skeleton according to the page ID and the component ID; the preset component data can be obtained by inquiring stored component data, editing online and uploading template data in batch. Specifically, a small number of configuration items can be configured and transmitted through the paramsList, other configuration items are converted into data parameters, and are transmitted through the independent configuration items of the components, and meanwhile, a template data uploading function is added, and data is imported in batches.
A second rendering module 500, configured to render the component to obtain a complete page; and after the component is configured with the component data, performing closed-loop processing on the component data in the component, and rendering the inside of the component to obtain a complete page.
Referring to fig. 7, the generating module 200 includes:
the component obtaining module 210 is configured to obtain a new component and/or a copy component, and obtain a corresponding component ID at the same time, where the new component is a component created online by a user, and the copy component is a pre-stored component;
the component configuring module 220 is configured to configure the newly created component and/or the copied component and the component ID to the first component tree, so as to obtain the second component tree. Specifically, for the components added in the first component tree, the component tree can be constructed and quickly multiplexed by adding child nodes, brother nodes and brother nodes to the tree-shaped component, or copying and pasting, or dragging and the like in the tree-shaped component. And generating a component ID corresponding to the component while obtaining the added component in the first component tree, so as to obtain the second component tree.
To achieve a perfect page layout we add a box component for configuring the front-end box model. Meanwhile, a row assembly is added to divide the page into 24 parts, and the page layout is realized by the parameters of different column numbers, different intervals and the like occupied by the sub-assemblies of the row assembly.
And a direct input style inlet is added in each page, and different layouts or related beautification can be realized by directly adding front end styles.
In order to prevent the pressure of page rendering caused by frequent changes, a draft function is added to all the configurations, only the data draft is modified by a user, and only click confirmation is performed, the data draft is really saved to the background and the page is re-rendered.
Referring to fig. 8, the first rendering module 300 includes:
and the processing module 310 is used for lazily loading the components in the second component tree and recursively rendering parent components, wherein the parent components are the components provided with the sub-components.
The parameter acquisition module is used for acquiring a first parameter object;
an adding module, configured to add to the first parameter object to obtain a second parameter object if there is paramslist;
and the rendering module is used for performing recursive rendering when the second parameter object has sub-components.
During actual rendering, we register components through lazy loading at the entry of the page, and then recursively render the component tree through a render function. Specifically, the recursive rendering process is as follows: firstly, acquiring a parameter object, judging whether paramsList exists or not, adding the paramsList into the parameter object if the paramsList exists, finally judging whether a child node exists or not, performing recursive rendering if the child node exists, referring a mixin inside a special node, calling a recursive rendering function to perform rendering of the child component, and directly rendering a corresponding component if the child node does not exist; the special node is generally a node in which child nodes exist that can be determined directly.
Through the recursion function, can accomplish the rendering of page skeleton, carry out the layering to the component tree in some specific subassemblies simultaneously, like the sub-label inside of label subassembly, inquire new component tree once more, render, reduce the data bulk of component tree for the first screen is rendered, carries out lazy loading to the subassembly of other parts. The lazy loading refers to that when a certain slide is entered, the component tree of the corresponding slide is independently obtained, and then each component calls an interface to obtain data required by the component tree during rendering.
The data configuration module 400 is further configured to configure corresponding component data to the inside of the component through the paramsList and/or the component configuration item and/or the template component; acquiring module component data, and configuring corresponding module data to the interior of a module; the mode of configuring the component data into the component can be transmitted by configuring a small number of configuration items through the paramsList, other configuration items are converted into data parameters, or the component data is transmitted by a single configuration item of the component, or data is imported in batch by adding a template data uploading function.
The data of the component is directly processed in a closed loop mode in the component, and the closed loop processing means that data is submitted, updated, obtained, processed and rendered in the component. All data is stored and interacted with through json strings. Weakening the dependence of the middle station of the editable page on the background interface personalization, and for the background, the component tree and the component content are only common json character string data without any difference. In the state of submitting data and updating data, the page provides an entry for submitting data or realizes online form editing submission. And under the states of acquiring data and finishing data processing and rendering, hiding a corresponding data change entry by the page, enabling a user to only perform viewing operation, inquiring corresponding data during generation of component content in the life cycle of the user, performing corresponding processing, generating a DOM structure, mounting the DOM structure on the page, and finishing rendering.
The component data is mainly data required by component rendering, for example, after an echarts bar graph component uploads data through excel, secondary processing is carried out at the front end, the data required by the echarts bar graph component is converted into the data required by the bar graph and stored in the background, and corresponding data is obtained through the unique ID for rendering.
Referring to fig. 9, in an embodiment of the present invention, the present invention further provides a computer device, where the computer device 12 is represented in a form of a general-purpose computing device, and components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that couples various system components including the system memory 28 and the processing unit 16.
The system memory 28 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM)31 and/or cache memory 32. Computer device 12 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 34 may be used to read from and write to non-removable, nonvolatile magnetic media (commonly referred to as "hard drives"). Although not shown in FIG. 9, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 by one or more data media interfaces. The memory may include at least one program product having a set (e.g., at least one) of program modules 42, with the program modules 42 configured to carry out the functions of embodiments of the invention.
A program/utility 41 having a set (at least one) of program modules 42 may be stored, for example, in memory, such program modules 42 including, but not limited to, an operating system, one or more application programs, other program modules 42, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 42 generally carry out the functions and/or methodologies of the described embodiments of the invention.
The processing unit 16 executes various functional applications and data processing by executing programs stored in the system memory 28, for example, implementing the method for generating pages online provided by the embodiment of the present invention.
That is, the processing unit 16 implements, when executing the program: analyzing a corresponding page ID and a first component tree according to the acquired page; acquiring the added components and the component IDs and configuring the components and the component IDs to the first component tree to obtain a second component tree; performing layered rendering on the second component tree according to a preset rule to obtain a page framework; presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID; and rendering the assembly to obtain a complete page.
In an embodiment of the present invention, the present invention further provides a computer-readable storage medium, on which a computer program is stored, which when executed by a processor, implements the method for generating a page online as provided in all embodiments of the present application.
That is, the program when executed by the processor implements: analyzing a corresponding page ID and a first component tree according to the acquired page; acquiring the added components and the component IDs and configuring the components and the component IDs to the first component tree to obtain a second component tree; performing layered rendering on the second component tree according to a preset rule to obtain a page framework; presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID; and rendering the assembly to obtain a complete page.
Any combination of one or more computer-readable media may be employed. The computer readable medium may be a computer-readable storage medium or a computer-readable signal medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPOM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, 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.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
The embodiments in the present specification are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, embodiments of the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Embodiments of the present invention are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing terminal to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing terminal to cause a series of operational steps to be performed on the computer or other programmable terminal to produce a computer implemented process such that the instructions which execute on the computer or other programmable terminal provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications of these embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the embodiments of the invention.
Finally, it should also be noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or terminal that comprises the element.
The method for generating a page online and the device for generating a page online provided by the invention are described in detail above, and a specific example is applied in the text to explain the principle and the implementation of the invention, and the description of the above embodiment is only used to help understanding the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.
Claims (10)
1. A method for generating a page online, comprising:
analyzing a corresponding page ID and a first component tree according to the acquired page;
acquiring the added components and the component IDs and configuring the components and the component IDs to the first component tree to obtain a second component tree;
performing layered rendering on the second component tree according to a preset rule to obtain a page framework;
presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page skeleton according to the page ID and the component ID;
and rendering the assembly to obtain a complete page.
2. The method of claim 1, wherein obtaining the populated component and component ID and configuring to the first component tree, resulting in a second component tree comprises:
acquiring a new component and/or a copy component, and acquiring a corresponding component ID (identity) at the same time, wherein the new component is a component created by a user online, and the copy component is a pre-stored component;
and configuring the newly-built component and/or the copied component and the component ID to the first component tree to obtain the second component tree.
3. The method of claim 1, wherein the performing hierarchical rendering on the second component tree according to preset rules to obtain a page skeleton comprises:
lazy loading the components in the second component tree and recursively rendering parent components, wherein a parent component is a component provided with sub-components.
4. The method of claim 3, wherein lazily loading components within the second component tree and recursively rendering parent components, wherein a parent component is a component provided with sub-components comprises:
acquiring a first parameter object;
if paramslist exists, adding the paramslist to the first parameter object to obtain a second parameter object;
and when the second parameter object has a sub-component, performing recursive rendering.
5. The method of claim 1, wherein the presetting component data including the page ID and the component ID, and the configuring the corresponding component data into a component according to the page ID and the component ID comprises:
and configuring corresponding component data into the components through the paramsList and/or the component configuration items and/or the template components.
6. An apparatus for generating a page online, comprising:
the acquisition module is used for analyzing the corresponding page ID and the first component tree according to the acquired page;
the generating module is used for acquiring the added components and the component IDs and configuring the added components and the component IDs to the first component tree to obtain a second component tree;
the first rendering module is used for performing layered rendering on the second component tree according to a preset rule to obtain a page framework;
the data configuration module is used for presetting component data containing the page ID and the component ID, and configuring the corresponding component data to the inside of a component of the page framework according to the page ID and the component ID;
and the second rendering module is used for rendering the assembly to obtain a complete page.
7. The apparatus of claim 6, wherein the generating module comprises:
the device comprises a component acquisition module, a component selection module and a component selection module, wherein the component acquisition module is used for acquiring a newly-built component and/or a copy component and simultaneously acquiring a corresponding component ID, the newly-built component is a component created by a user on line, and the copy component is a pre-stored component;
and the component configuration module is used for configuring the newly-built component and/or the copied component and the component ID to the first component tree to obtain the second component tree.
8. The apparatus of claim 7, wherein the first rendering module comprises:
and the processing module is used for lazily loading the components in the second component tree and recursively rendering parent components, wherein the parent components are the components provided with the sub-components.
9. Electronic device, characterized in that it comprises a processor, a memory and a computer program stored on said memory and capable of running on said processor, said computer program, when executed by said processor, implementing the steps of the method of online generation of pages according to any of claims 1 to 5.
10. Computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method of generating pages online as claimed in any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010922199.9A CN112068835A (en) | 2020-09-04 | 2020-09-04 | Method and device for generating page on line |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010922199.9A CN112068835A (en) | 2020-09-04 | 2020-09-04 | Method and device for generating page on line |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112068835A true CN112068835A (en) | 2020-12-11 |
Family
ID=73665957
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010922199.9A Pending CN112068835A (en) | 2020-09-04 | 2020-09-04 | Method and device for generating page on line |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112068835A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112711418A (en) * | 2021-02-05 | 2021-04-27 | 北京宇信科技集团股份有限公司 | Front-end interface layout method and device for multiple components, electronic equipment and storage medium |
| CN113485703A (en) * | 2021-06-21 | 2021-10-08 | 上海百秋电子商务有限公司 | Online interactive commodity detail page editing method and system |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106991154A (en) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | Webpage rendering intent, device, terminal and server |
| CN107315646A (en) * | 2016-04-27 | 2017-11-03 | 北京京东尚科信息技术有限公司 | Data flow control method and device between page assembly |
| CN107451296A (en) * | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN108491205A (en) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | A kind of front end web development methods and system based on component tree |
| CN109299422A (en) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | Visualize page authoring method, system, equipment and storage medium |
| CN110442824A (en) * | 2019-08-12 | 2019-11-12 | 深圳市去约会信息技术有限公司 | Implementation method, storage medium and the equipment of data management |
| CN110807161A (en) * | 2019-11-08 | 2020-02-18 | 深圳乐信软件技术有限公司 | Page framework rendering method, device, equipment and medium |
| CN110865807A (en) * | 2018-08-27 | 2020-03-06 | 北京京东金融科技控股有限公司 | Active page creation system, method, device and storage medium |
| CN111259284A (en) * | 2018-11-30 | 2020-06-09 | 阿里巴巴集团控股有限公司 | Page lazy loading method and device, storage medium and processor |
-
2020
- 2020-09-04 CN CN202010922199.9A patent/CN112068835A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107315646A (en) * | 2016-04-27 | 2017-11-03 | 北京京东尚科信息技术有限公司 | Data flow control method and device between page assembly |
| CN106991154A (en) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | Webpage rendering intent, device, terminal and server |
| CN107451296A (en) * | 2017-08-21 | 2017-12-08 | 南京焦点领动云计算技术有限公司 | A kind of Website Module rendering intent based on component |
| CN108491205A (en) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | A kind of front end web development methods and system based on component tree |
| CN110865807A (en) * | 2018-08-27 | 2020-03-06 | 北京京东金融科技控股有限公司 | Active page creation system, method, device and storage medium |
| CN109299422A (en) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | Visualize page authoring method, system, equipment and storage medium |
| CN111259284A (en) * | 2018-11-30 | 2020-06-09 | 阿里巴巴集团控股有限公司 | Page lazy loading method and device, storage medium and processor |
| CN110442824A (en) * | 2019-08-12 | 2019-11-12 | 深圳市去约会信息技术有限公司 | Implementation method, storage medium and the equipment of data management |
| CN110807161A (en) * | 2019-11-08 | 2020-02-18 | 深圳乐信软件技术有限公司 | Page framework rendering method, device, equipment and medium |
Non-Patent Citations (2)
| Title |
|---|
| 美团技术团队: "美团外卖前端可视化界面组装平台 —— 乐高", 《HTTPS://CLOUD.TENCENT.COM/DEVELOPER/ARTICLE/1058207》 * |
| 零度源码: "页面可视化搭建工具技术要点", 《HTTPS://BLOG.CSDN.NET/MK0VOUYV4BWGX190FSD/ARTICLE/DETAILS/89507835》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112711418A (en) * | 2021-02-05 | 2021-04-27 | 北京宇信科技集团股份有限公司 | Front-end interface layout method and device for multiple components, electronic equipment and storage medium |
| CN113485703A (en) * | 2021-06-21 | 2021-10-08 | 上海百秋电子商务有限公司 | Online interactive commodity detail page editing method and system |
| CN113485703B (en) * | 2021-06-21 | 2023-05-16 | 上海百秋新网商数字科技有限公司 | On-line interactive commodity detail page editing method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112181416B (en) | Method and device for directly generating UI code from visual manuscript | |
| US20150293764A1 (en) | Method and system to compose and execute business rules | |
| CN110543303B (en) | Visual service platform | |
| CN110851134A (en) | Low-code page design device and page design method | |
| CN115617327A (en) | Low code page building system, method and computer readable storage medium | |
| CN109284103A (en) | A kind of Web application and development and update method based on control development mode | |
| US10970052B2 (en) | System and method for enhancing component based development models with auto-wiring | |
| CN111126019B (en) | Report generation method and device based on mode customization and electronic equipment | |
| KR101275871B1 (en) | System and method for producing homepage in SaaS ENVIRONMENT, A computer-readable storage medium therefor | |
| CN112083920A (en) | Front-end page design method, device, storage medium and equipment | |
| CN111177618A (en) | Website building method, device, equipment and computer readable storage medium | |
| CN112068835A (en) | Method and device for generating page on line | |
| CN112558967A (en) | Page automatic generation method and device, electronic equipment and storage medium | |
| CN112148276A (en) | Visual programming for deep learning | |
| Houde et al. | Opportunities for generative AI in UX modernization | |
| CN113419711A (en) | Page guiding method and device, electronic equipment and storage medium | |
| KR20230003042A (en) | System and method for dynamically defining digital forms | |
| KR20180135654A (en) | Intuitive method of making a program | |
| CN116755669A (en) | Low code development method and tool based on DSL language operation model | |
| US20230004477A1 (en) | Providing a pseudo language for manipulating complex variables of an orchestration flow | |
| CN114281797A (en) | Method for quickly creating basic level data aggregation warehouse based on agile low-code platform | |
| US20170199729A1 (en) | Application developing method and system | |
| CN111027196B (en) | Simulation analysis task processing method and device for power equipment and storage medium | |
| CN113506099A (en) | Configuration system, method, computer device and storage medium for reporting service | |
| Nen et al. | Pigeon-table: A quick prototyping tool using twitter bootstraps and AngularJS for data-driven web application development |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201211 |
|
| RJ01 | Rejection of invention patent application after publication |