CN114416056A - Page generation method, system, computer equipment and readable storage medium - Google Patents
Page generation method, system, computer equipment and readable storage medium Download PDFInfo
- Publication number
- CN114416056A CN114416056A CN202210058198.3A CN202210058198A CN114416056A CN 114416056 A CN114416056 A CN 114416056A CN 202210058198 A CN202210058198 A CN 202210058198A CN 114416056 A CN114416056 A CN 114416056A
- Authority
- CN
- China
- Prior art keywords
- page
- component
- generated
- components
- generating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q30/00—Commerce
- G06Q30/02—Marketing; Price estimation or determination; Fundraising
- G06Q30/0241—Advertisements
- G06Q30/0277—Online advertisement
Abstract
The invention provides a page generation method, which comprises the following steps: determining the demand of a page to be generated according to the page generation request; splitting a page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package; configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component; calling each configured component, rendering and generating a page; the page generation method provided by the embodiment of the invention; the page is divided into the components, and the components are combined to generate the page, so that the page generation efficiency is improved; and part of development codes can be recycled through the vue framework, secondary development is avoided, and development cost is remarkably reduced.
Description
Technical Field
The present invention relates to the field of data processing, and in particular, to a page generation method, system, computer device, and readable storage medium.
Background
With the increasingly complex flow and the increasingly numerous media channels, the multi-channel differentiation display and popularization mode of the advertisements is particularly important, and the visual configuration of the device area page is an active advertisement configuration and channel differentiation platform which is developed according to the contents of device buying and selling, device maintenance, device merchant lodging and the like.
The multi-channel differentiation display mainly pushes the page according to the actual requirements of the user, the requirements of page development are higher and higher due to the diversification of the requirements of the user, in the existing front-end development, the whole development process is usually realized through JavaScript (JS for short) codes, the development process is complex, the development workload is large, and the development cost is higher. The developed service program page is also difficult to store developed page display data, which easily causes a large amount of repeated code writing work and influences the page development efficiency.
Disclosure of Invention
The invention aims to provide a page generation method, a page generation system, computer equipment and a readable storage medium, which are used for solving the following problems: the page development efficiency is low.
One aspect of the embodiments of the present invention provides a page generation method, where the method includes:
determining the demand of a page to be generated according to the page generation request;
splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
and calling each configured component, rendering and generating a page.
Further, the step of splitting the page to be generated into a plurality of components through an vue framework includes: generating a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components; and selecting a plurality of components from a preset component library according to the application relation among the components.
Further, after the step of selecting a plurality of components from the preset component library, the method includes: determining vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
Further, the step of calling each configured component, rendering and generating a page includes: combining and sequencing a plurality of components according to the page requirement to be generated; and according to the sequencing result, customizing a dragging component combination, inserting the dragging component combination into the page, rendering and generating the page.
Further, the step of rendering and generating the page includes: determining the generation position and color of each component according to the page parameter information; and generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components so as to finish page rendering.
Further, the step of configuring field information of the page to be generated in each component according to the service logic encapsulation and the attribute of each component includes: acquiring a plurality of forms in the service logic package; extracting form data in the forms according to the attribute of each component; and configuring the text information displayed in the page according to the form data to generate field information.
Further, after the step of splitting the page to be generated into a plurality of components through the vue framework, the method further includes: creating a json file corresponding to a page to be generated; each node of the json file carries a unique identifier of a corresponding vue framework.
An aspect of the embodiments of the present invention further provides a page generation system, where the page generation system includes:
the request module is used for generating a request according to a page and determining the demand of the page to be generated;
the splitting module is used for splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
the configuration module is used for configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
and the rendering module is used for calling each configured assembly, rendering and generating the page.
An aspect of the embodiments of the present invention further provides a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor, when executing the computer program, implements the steps of the page generation method as described above.
An aspect of the embodiments of the present invention further provides a computer-readable storage medium, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the page generation method as described above when executing the computer program.
The page generation method, the system, the computer equipment and the readable storage medium provided by the embodiment of the invention are provided; the page is divided into the components, and the components are combined to generate the page, so that the page generation efficiency is improved; and part of development codes can be recycled through the vue framework, secondary development is avoided, and development cost is remarkably reduced.
Drawings
Fig. 1 schematically shows a flowchart of a page generation method according to a first embodiment of the present invention;
fig. 2 schematically shows a sub-step diagram of step S101 in fig. 1;
FIG. 3 schematically shows a block diagram of a page generation system according to an embodiment II of the present application; and
fig. 4 schematically shows a hardware architecture diagram of a computer device suitable for implementing the page generation method according to the third embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that the descriptions relating to "first", "second", etc. in the embodiments of the present invention are only for descriptive purposes and are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In addition, technical solutions between various embodiments may be combined with each other, but must be realized by a person skilled in the art, and when the technical solutions are contradictory or cannot be realized, such a combination should not be considered to exist, and is not within the protection scope of the present invention.
In the description of the present invention, it should be understood that the numerical references before the steps do not identify the order of performing the steps, but merely serve to facilitate the description of the present invention and to distinguish each step, and thus should not be construed as limiting the present invention.
The noun explains:
json: (JavaScript Object Notification) is a lightweight data exchange format. Easy to read and write by people. And is easy to be analyzed and generated by a machine. It is based on a subset of JavaScript Programming Language, Standard ECMA-2623 rd Edition-Decumber 1999. JSON takes a text format that is completely language independent, but also uses conventions similar to the C language family (including C, C + +, C #, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data exchange language.
Vue framework: is a set of progressive JavaScript framework for constructing a user interface. Unlike other large frames, the Vue frame is designed to be applied layer by layer from bottom to top. Vue, the core library only focuses on the viewing layer, not only is it easy to get on hand, but also it is easy to integrate with third party libraries or existing projects. On the other hand, Vue is also fully capable of providing drive for complex Single Page Applications (SPAs) when used in conjunction with modern tool chains and various supporting class libraries. Different vue components can expose data content in different formats, implement different functions in a page, and are reusable vue instances.
Example one
Fig. 1 schematically shows a flowchart of a page generation method according to a first embodiment of the present invention.
As shown in fig. 1, the page generating method may include steps S100 to S103, where:
step S100: and determining the page requirement to be generated according to the page generation request.
Specifically, the page to be generated is a final page rendered in this embodiment, and the page to be generated includes contents of characters, pictures, table forms and other multiple format attributes. In practical applications, the page to be generated is, for example, an active page in a service program or a displayed hierarchical page.
The execution main body of the page generation method is a front-end development program of the computer equipment, the front-end development program comprises a page development interface, a design file of a page is imported into the front-end development program, the design file of the page is a page generation request, and the page design file can include but is not limited to a flow chart, a product prototype diagram, a page size design style diagram and the like; the front-end development program analyzes the page design file, so as to determine the information required by the page to be generated (such as the plate, the style, the layout mode and the like included in the page).
Step S101: splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component includes HTML elements, element layouts, styles, and business logic packages.
For example, the page to be generated comprises four modules of a digital factory, a new device, an old device and a device maintenance module, and the four modules can be modularized through an vue framework, wherein each module comprises a complete business logic package, and the page can be generated quickly; the HTML elements include: text areas, list boxes, text entry boxes, password entry boxes, radio entry boxes, check entry boxes, reset buttons, submit buttons, hidden fields, and the like; the element layout modes comprise static layout, streaming layout, self-adaptive layout, elastic layout and response layout; in the embodiment, a self-adaptive layout strategy of a full width and a self-adaptive height is preferably adopted, different styles are set for equipment with different sizes and resolutions, which is equivalent to the creation of a plurality of static layouts, and each static layout corresponds to a screen with a size range; when the size or the resolution of the screen is changed, the page elements are changed; the developer can set the page style through an inline style, a tag selector, a class selector and an id selector.
Specifically, for one page, a component may be a certain part of page editing codes, the part of codes can be repeatedly used in a plurality of page development scenarios, and in order to simplify a page development process, the part of codes can be extracted from the page editing codes through an vue framework, and a corresponding component is constructed, so that difficulty and time of page development are greatly reduced. In order to use a component in the vue framework, the vue framework needs to be registered first, and the registration types comprise global registration and local registration; the global registration is one-time registration and can be used in each component; local registration is that the local registration can only be used on the file when the local registration is performed on the file, and all components are not universal; as shown in fig. 2, the step of splitting the page to be generated into a plurality of components through an vue framework includes:
step S101-1: generating a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components;
step S101-2: and selecting a plurality of components from a preset component library according to the application relation among the components.
Specifically, the page comprises components such as a header, a sidebar and a content area, wherein the header, the sidebar and the content area also comprise components such as navigation links, pictures, characters and forms, and a component relation tree of a nested relation is formed among the components; selecting components from a preset component library according to the nesting relation in the component relation tree, so that the whole framework of the page can be quickly acquired, and the page construction efficiency is improved; the preset component library comprises a development basic component library, a tool component library, a control level service component library and a page level component library; selecting a corresponding component library according to an actual application environment, wherein the preset component library can be managed through NPM or Github; after the step of selecting a plurality of components from the preset component library, the method further comprises the following steps:
s101-3, determining vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
Selecting a corresponding component from a component library and deriving a default service page, and then visually editing the default service page, wherein the default service page needs to configure page parameter information before being generated, and the component name, the data interface of the component and a transmission object can be determined through the page parameter information, so that preparation work is performed before the page is generated; the page adopts a layout strategy of width full and height rolling, the front-end frame assembly is set to be full width, the height is self-adaptive, the assemblies are only required to be sequentially arranged in the vertical direction of the page during page display, nesting is not required during combination, and brother nodes are arranged among the assemblies without hierarchical relationship.
After the step of splitting the page to be generated into a plurality of components through the vue framework, the method further comprises the following steps:
S101-4A, creating a json file corresponding to a page to be generated; each node of the json file carries a unique identifier of a corresponding vue frame;
and determining the unique identifier according to an id field of a Query parameter (namely a parameter carrying mode commonly used in GET request) of the page to be generated. And then, when the page is updated subsequently, the json file corresponding to the page can be quickly determined according to the id field of the page query parameter.
The general page comprises a character display area, a picture display area, a video display area and an audio display area; so that the vue framework includes an image vue component, an audio vue component, a text vue component, and a video vue component. In order to distinguish nodes in the json file to correspond to vue frames, id names a, b, c and d can be given to an image vue component, an audio vue component, a text vue component and a video vue component, the id is used as a unique identifier, and the corresponding component under vue frames can be found through the id.
Step S102: configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
the business logic package comprises a plurality of tables for displaying the literal information of the digital factory, the new purchasing equipment, the old removing equipment and the equipment maintenance component, and the attribute name of each component can be one of the digital factory, the new purchasing equipment, the old removing equipment and the equipment maintenance component; configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component, wherein the step comprises the following steps:
step S102-1: acquiring a plurality of forms in the service logic package;
step S102-2: extracting form data in the forms according to the attribute of each component;
step S102-3: and configuring the text information displayed in the page according to the form data to generate field information.
Specifically, the form name can be matched through the attribute name of the component, for example, a form corresponding to a digital factory is found in the business logic package according to the digital factory; then extracting form data corresponding to the form name, wherein the extraction mode can be a trigger mode, a timestamp mode, a full-table deletion insertion mode, a full-table comparison mode, a log table mode and the like; and after the extracted form data is subjected to data cleaning, generating corresponding field information on a page.
And S103, calling each configured assembly, rendering and generating a page.
In the embodiment, the corresponding page is generated by dragging and combining each component; the specific steps of calling each configured component, rendering and generating the page comprise:
step S103-1: according to the requirements of the page to be generated, a plurality of components are combined and sequenced,
step S103-2: and according to the sequencing result, customizing a dragging component combination, inserting the dragging component combination into the page, rendering and generating the page.
Specifically, operators perform page visualization configuration by clicking, dragging components and the like, and combine the pages into a target service page according to the delivered channels, the number and the sequence of the custom modules and the UI display condition.
The page of the embodiment can also configure the released channel, the channel identifier is formed by combining a channel platform platformSource + a channel source + a channel name, and the key and the channel identifier are spliced at the tail of the theme link to generate the device area theme link with the channel identifier. Each theme can be divided into a plurality of theme links, and the link data is synchronized under a uniform theme, so that a visual report can be generated, and the problem of data statistical analysis of multiple channels is solved; in addition, the generated page can support commonly used peripheral functions such as configuration banner and customer service. After configuration is completed, a user is supported to scan codes in real time to preview the page editing effect, and a background rendering technology is used for rendering quickly in real time, so that the built page can be obtained.
The step of rendering and generating a page includes:
S103-2A, determining the generation position and color of each component according to the page parameter information;
and S103-2B, generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components to finish page rendering.
And the position, size, color and other display style parameters of each display module in the page to be generated can be determined according to the page requirements, and then the page style parameters can be written into a specific node in a corresponding json file, so that the page can be rendered by using an vue frame according to the style parameters. Still in the above example, it is assumed that the page parameter information for determining the "image display area" of the page to be generated according to the page requirement is: "color: black; starting coordinates: (x1, y 1); size: 17 x 18mm ", which can be rendered by the" image vue component "in the vue frame; the page parameter information of the "video display area" is: "color: blue; starting coordinates: (x2, y 2); size: 20 x 20mm ", which can be rendered by the" video vue component "in the vue framework; the page parameter information of the 'text display area' is as follows: "color: gray; starting coordinates: (x3, y 3); size: 30 x 30mm ", which can be rendered by" text vue component "in vue frame; the page parameter information of the "audio display area" is: "color: red; starting coordinates: (x4, y 4); size: 10 x 10mm ", may be rendered by the" audio vue component ". Suppose that four nodes that can be contained in a json file created by a development platform are: a. b, c and d, and the node a comprises page parameter information as follows: "color: black; starting coordinates: (x1, y1) "; the node b comprises page parameter information as follows: "color: blue; starting coordinates: (x2, y 2); size: 20 x 20mm "; the node c comprises page parameter information as follows: "color: gray; starting coordinates: (x3, y 3); size: 30 x 30mm "; the node d comprises page parameter information: "color: red; starting coordinates: (x4, y 4); size: 10 x 10mm ".
The method adopts module componentization and page visualization to realize the improvement of the page generation efficiency; simplifying data flow and style layout by adopting a non-nested component hierarchy; stylized and accurate product pushing of different channels is realized; the vue framework enables part of development codes to be reused, secondary development is avoided, manpower is liberated, and development cost is remarkably reduced.
Example two
FIG. 3 schematically illustrates a block diagram of a page generation system that may be partitioned into program modules, one or more of which are stored in a storage medium and executed by a processor, in accordance with the present invention, to accomplish an embodiment of the present invention. The program modules referred to in the embodiments of the present invention refer to a series of computer program instruction segments that can perform specific functions, and the following description will specifically describe the functions of the program modules in the embodiments.
As shown in fig. 3, the page generation system 130 may include a request module 131, a splitting module 132, a configuration module 133, and a rendering module 134. Wherein:
the request module 131 is configured to determine a page requirement to be generated according to a page generation request;
the splitting module 132 is configured to split the page to be generated into multiple components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
a configuration module 133, configured to configure, according to the service logic package and the attribute of each component, field information of a page to be generated in each component;
and the rendering module 134 is configured to call the configured components, render and generate a page.
The split module 132 is further configured to generate a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components; and selecting a plurality of components from a preset component library according to the application relation among the components.
The splitting module 132 is further configured to determine vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
The rendering module 134 is further configured to combine and sort the multiple components according to the requirements of the page to be generated, custom drag and drop the component combination and insert into the page according to the sorting result, render and generate the page.
The rendering module 134 is further configured to determine a generation position and a color of each component according to the page parameter information; and generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components so as to finish page rendering.
The configuration module 133 is further configured to obtain a plurality of forms in the service logic package; extracting form data in the forms according to the attribute of each component; and configuring the text information displayed in the page according to the form data to generate field information.
The splitting module 132 is further configured to create a json file corresponding to the page to be generated; each node of the json file carries a unique identifier of a corresponding vue framework.
EXAMPLE III
Fig. 4 schematically shows a hardware architecture diagram of a computer device 6 suitable for implementing the page generation method according to the third embodiment of the present invention. In the present embodiment, the computer device 6 is a device capable of automatically performing numerical calculation and/or information processing in accordance with a command set or stored in advance. For example, the server may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a rack server, a blade server, a tower server or a rack server (including an independent server or a server cluster composed of a plurality of servers), a gateway, and the like. As shown in fig. 4, the computer device 6 includes at least, but is not limited to: memory 141, processor 142, and network interface 143 may be communicatively linked to each other by a system bus. Wherein:
the memory 141 includes at least one type of computer-readable storage medium including a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc. In some embodiments, the storage 141 may be an internal storage module of the computer device 6, such as a hard disk or a memory of the computer device 6. In other embodiments, the memory 141 may also be an external storage device of the computer device 6, such as a plug-in hard disk provided on the computer device 6, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like. Of course, memory 141 may also include both internal and external memory modules of computer device 6. In this embodiment, the memory 141 is generally used for storing an operating system installed in the computer device 6 and various types of application software, such as program codes of a page generation method. Further, the memory 141 may also be used to temporarily store various types of data that have been output or are to be output.
Processor 142 may be a Central Processing Unit (CPU), controller, microcontroller, microprocessor, or other data Processing chip in some embodiments. The processor 142 is generally configured to control the overall operation of the computer device 6, such as performing control and processing related to data interaction or communication with the computer device 6. In this embodiment, the processor 142 is used to execute program codes stored in the memory 141 or process data.
It is noted that fig. 4 only shows a computer device with components 141 and 143, but it is understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.
In this embodiment, the page generating method stored in the memory 141 may be further divided into one or more program modules and executed by a processor (in this embodiment, the processor 142) to complete the embodiment of the present invention.
Example four
The present invention also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the page generating method in the embodiments.
In this embodiment, the computer-readable storage medium includes a flash memory, a hard disk, a multimedia card, a card type memory (e.g., SD or DX memory, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAM), a Read Only Memory (ROM), an Electrically Erasable Programmable Read Only Memory (EEPROM), a Programmable Read Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, and the like. In some embodiments, the computer readable storage medium may be an internal storage unit of the computer device, such as a hard disk or a memory of the computer device. In other embodiments, the computer readable storage medium may be an external storage device of the computer device, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like provided on the computer device. Of course, the computer-readable storage medium may also include both internal and external storage devices of the computer device. In this embodiment, the computer-readable storage medium is generally used to store an operating system and various types of application software installed in the computer device, for example, program codes of the identification method for the abnormal account in the embodiment, and the like. Further, the computer-readable storage medium may also be used to temporarily store various types of data that have been output or are to be output.
It will be apparent to those skilled in the art that the modules or steps of the embodiments of the invention described above may be implemented by a general purpose computing device, they may be centralized on a single computing device or distributed across a network of multiple computing devices, and alternatively, they may be implemented by program code executable by a computing device, such that they may be stored in a storage device and executed by a computing device, and in some cases, the steps shown or described may be performed in an order different than that described herein, or they may be separately fabricated into individual integrated circuit modules, or multiple ones of them may be fabricated into a single integrated circuit module. Thus, embodiments of the invention are not limited to any specific combination of hardware and software.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. A page generation method, characterized in that the method comprises:
determining the demand of a page to be generated according to the page generation request;
splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
and calling each configured component, rendering and generating a page.
2. The page generation method according to claim 1, wherein the step of splitting the page to be generated into a plurality of components through an vue framework includes:
generating a component relationship tree through an vue framework; the nodes in the component relation tree correspond to components, and the component relation tree is used for reflecting application relations among the components;
and selecting a plurality of components from a preset component library according to the application relation among the components.
3. The method for generating pages according to claim 2, wherein after the step of selecting a plurality of components from a preset component library, further comprising:
determining vue page parameter information corresponding to the frame according to the page requirement to be generated; the page parameter information includes one or more of a unique identifier in the vue framework, a registered component name, a component registration data function, a data transfer interface, and an event object.
4. The page generating method according to claim 1, wherein the step of calling each configured component, rendering and generating the page includes:
combining and sequencing a plurality of components according to the page requirement to be generated;
and according to the sequencing result, customizing a dragging component combination, inserting the dragging component combination into the page, rendering and generating the page.
5. The page generation method of claim 4, wherein the step of rendering and generating the page comprises:
determining the generation position and color of each component according to the page parameter information;
and generating components with corresponding colors at corresponding positions according to the generation positions and the colors of the components so as to finish page rendering.
6. The method for generating pages according to claim 1, wherein the step of configuring field information of the page to be generated in each component according to the service logic package and the attribute of each component comprises:
acquiring a plurality of forms in the service logic package;
extracting form data in the forms according to the attribute of each component;
and configuring the text information displayed in the page according to the form data to generate field information.
7. The page generating method according to claim 1, wherein after the step of splitting the page to be generated into a plurality of components through an vue framework, the method further comprises:
creating a json file corresponding to a page to be generated; each node of the json file carries a unique identifier of a corresponding vue framework.
8. A page generation system, characterized in that the page generation system comprises:
the request module is used for generating a request according to a page and determining the demand of the page to be generated;
the splitting module is used for splitting the page to be generated into a plurality of components through an vue framework according to the page to be generated requirement; wherein each component is bound to a unique identification in the vue framework; each component comprises HTML elements, element layout, styles and service logic package;
the configuration module is used for configuring field information of a page to be generated in each component according to the service logic encapsulation and the attribute of each component;
and the rendering module is used for calling each configured assembly, rendering and generating the page.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor, when executing the computer program, is adapted to carry out the steps of the page generation method of any of claims 1 to 7.
10. A computer-readable storage medium, having stored therein a computer program executable by at least one processor to cause the at least one processor to perform the steps of the page generation method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210058198.3A CN114416056A (en) | 2022-01-19 | 2022-01-19 | Page generation method, system, computer equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210058198.3A CN114416056A (en) | 2022-01-19 | 2022-01-19 | Page generation method, system, computer equipment and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114416056A true CN114416056A (en) | 2022-04-29 |
Family
ID=81273880
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210058198.3A Pending CN114416056A (en) | 2022-01-19 | 2022-01-19 | Page generation method, system, computer equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114416056A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268884A (en) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Mobile terminal visual page configuration and rendering method based on aPaaS platform |
| CN117112913A (en) * | 2023-10-23 | 2023-11-24 | 腾讯科技（深圳）有限公司 | Data processing method, device, equipment and storage medium |
-
2022
- 2022-01-19 CN CN202210058198.3A patent/CN114416056A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115268884A (en) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Mobile terminal visual page configuration and rendering method based on aPaaS platform |
| CN115268884B (en) * | 2022-06-09 | 2023-06-16 | 知学云(北京)科技股份有限公司 | Mobile terminal visual page configuration and rendering method based on aPaaS platform |
| CN117112913A (en) * | 2023-10-23 | 2023-11-24 | 腾讯科技（深圳）有限公司 | Data processing method, device, equipment and storage medium |
| CN117112913B (en) * | 2023-10-23 | 2024-02-13 | 腾讯科技（深圳）有限公司 | Data processing method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (en) | Method, device, equipment and medium for generating editable image template | |
| WO2020006910A1 (en) | Business componentization development method and apparatus, computer device, and storage medium | |
| CN101414301B (en) | Device and method for processing object in reservoir in content management system | |
| CN114416056A (en) | Page generation method, system, computer equipment and readable storage medium | |
| CN108040278A (en) | Active page processing method, server, system and the storage medium of smart television | |
| CN105354025A (en) | Service model configuration system and method based on mobile application | |
| CN110705237B (en) | Automatic document generation method, data processing device and storage medium | |
| CN111694565A (en) | Data visualization application development method and system | |
| CN112507273A (en) | Webpage generating method and device and electronic equipment | |
| CN114020256A (en) | Front-end page generation method, device and equipment and readable storage medium | |
| CN114816404A (en) | Method and device for dynamically rendering view page, computer equipment and storage medium | |
| CN112925520A (en) | Method and device for building visual page and computer equipment | |
| CN112068911A (en) | Method, device, system, equipment and medium for generating electronic form | |
| CN109740074B (en) | Method, device and equipment for processing parameter configuration information | |
| CN111325012A (en) | word report generation method and system | |
| CN111782740A (en) | Seat data processing method, computing device and storage medium | |
| CN111435300A (en) | Web system development method, device, equipment and storage medium | |
| US11662874B2 (en) | Method and system for transforming wireframes to as-is screens with responsive behaviour | |
| CN115618838A (en) | Report generation method and equipment | |
| CN114398226A (en) | Network asset report generation method and device | |
| CN114443022A (en) | Method for generating page building block and electronic equipment | |
| CN113312104A (en) | Advertisement conversion method and system based on small program | |
| CN112068895A (en) | Code configuration method and device, video playing equipment and storage medium | |
| CN101676905A (en) | Layout for modifying resource contents based on customized rules | |
| JP7334920B1 (en) | Information processing system, information processing method and program |
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 |