Method and system for generating and displaying a general layout of a page based on react

Abstract

This invention provides a method and system for generating and displaying a generic page layout based on React. The method includes: analyzing the page layout and breaking down a complex page into multiple modules; encapsulating each module into a generic component using React componentization; adjusting settings according to the data format passed in by each page module and different pages; triggering a button operation, passing the selected table's data to the button operation; providing details through an external page operation; and directly calling the generic component on the page, passing the entire data according to the data format to the generic component, and combining the entire page to achieve page display. This invention encapsulates pages with similar layouts into generic components, uniformly handling the overall page layout within the generic component. Developing a new page only requires configuring the page's config parameters, and the main page only needs to call this generic component. New pages can be quickly completed with minimal code, improving page development efficiency.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular, to web page development technology applied to the field of computer technology; specifically, it relates to a method and system for generating and displaying a general page layout based on React. Background Technology

[0002] Web development is a type of programming based on web pages or digital media; it is the process of creating interactive web pages and applications.

[0003] Web page development allows websites to act as user interfaces, conveying information to internet users, providing a better visual experience, a more convenient navigation system, and minimizing browser resource consumption. Once development is complete, the webpage can be easily shared with internet users, enabling them to quickly learn about website information and promoting the website's services and products.

[0004] However, in current web page development, pages are basically implemented one page at a time. For pages with similar layouts, a lot of repetitive code needs to be written, resulting in high code complexity and slow development efficiency.

[0005] In actual development, common components such as buttons, forms, and pop-ups are often developed to reduce repetitive work. However, for a large number of pages with the same layout, even if common components are used, the pages will still contain many nested components. Each page has to process the same data logic and pass parameters to each component, which inevitably results in a lot of duplicate code on each page. This kind of page implementation will also make it more complicated to reimplement a page, require more time, and make it inconvenient to maintain the overall code. Summary of the Invention

[0006] Therefore, the purpose of this invention is to provide a method for quickly generating batch pages on the front end. By simply calling a general component based on the page configuration data and writing a small amount of code, a new page can be quickly completed, thereby reducing repetitive code writing and improving development efficiency.

[0007] Currently, the three mainstream frameworks for web front-end development—React.js, Vue.js, and Angular.js—make web page development simpler and faster. React.js, often simply referred to as React, is a JavaScript library for building user interfaces. React recommends thinking about the UI structure in a component-based way, defining each relatively independent module of the UI as a component, and then combining or nesting smaller components to form larger components, ultimately completing the overall UI construction.

[0008] Every React web application is composed of reusable components that form part of the user interface. React's componentization breaks down a complex page into several independent components, each containing its own logic and styles. These independent components are then combined to complete a complex page, thus reducing logical complexity and achieving code reuse.

[0009] A component is an encapsulated UI part with independent functionality. React allows you to break down the UI into independent, reusable code snippets, design each snippet independently, and then insert the component into a webpage just like inserting a regular HTML tag. React makes creating interactive UIs easier, allowing you to design clean views for every state of your application, and efficiently update and render the appropriate components when data changes.

[0010] This invention provides a method for generating and displaying a generic page layout based on React, comprising the following steps:

[0011] S1. Analyze the page layout, break down the complex page into multiple modules, and use React componentization to encapsulate each module of the page into a general component;

[0012] S2. According to the data format of the JavaScript data passed to the page module, adjust the settings according to the different page requirements;

[0013] Each JavaScript object in the JavaScript data contains buttons, search, a table, and details.

[0014] S3. Process JavaScript data, output button actions, pass the selected table data to the button actions; access detail information through an external page.

[0015] The button's operation method needs to be passed out. Different pages have different operations, and the button operates on table data. At the same time, the selected table data needs to be passed to the method.

[0016] The part that requires external page interaction is the details page, which displays different data and reveals the details of the interaction.

[0017] S4. Directly call the general component on the page, pass the entire JavaScript data to the general component according to the data format, combine the general component to form the entire page, and realize the display of the page.

[0018] Each page only needs to have different JavaScript data set to quickly generate a new page.

[0019] Furthermore, the method for splitting a complex page into multiple modules in step S1 includes:

[0020] The page is divided into an operation bar at the top of the page and a table data section located below the operation bar.

[0021] Furthermore, the table data portion includes:

[0022] The left side displays the button operation section (clicking the table data name column), and the right side displays the details page section (displaying the filter function module).

[0023] Furthermore, the method for processing JavaScript data in step S3 includes:

[0024] The data acquisition interface is passed to the general component, which calls the interface to obtain JavaScript-rendered table data. The JavaScript data needed for the operation bar and the details page are then concatenated; as much complex logic as possible is encapsulated.

[0025] Furthermore, the method for passing the entire JavaScript data to the general component according to the data format in step S4 includes:

[0026] Define the config parameter to pass data from the operation bar section and the display details page section.

[0027] This invention also provides a React-based system for generating and displaying a generic page layout, which executes the React-based method for generating and displaying a generic page layout as described above, including:

[0028] Page splitting unit: Used to analyze page layout, break down complex pages into multiple modules, and encapsulate each page module into a generic component using React componentization;

[0029] Data input unit: Used to confirm the data format of the JavaScript data to be input into the page module according to the page module, and to make adjustments and settings according to different page requirements; each JavaScript object in the JavaScript data contains buttons, search, table, and detail;

[0030] Data processing unit: Used to process JavaScript data, output button actions, pass data from the selected table to the button actions; and access detail information via external pages.

[0031] Page Usage Unit: Used to directly call the general component on the page, pass the entire JavaScript data to the general component according to the data format, combine the general component to form the entire page, and realize the page display.

[0032] The present invention also provides a computer-readable storage medium having a computer program stored thereon, wherein when the program is executed by a processor, it implements the steps of the method for generating and displaying a general page layout based on React as described above.

[0033] The present invention also provides a computer device, the computer device including a memory, a processor and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, it implements the steps of the method for generating and displaying a general page layout based on React as described above.

[0034] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0035] This invention is based on componentization. It encapsulates pages with similar but partially different layouts into a general page component. Each page only needs to configure the corresponding data config file, which is then uniformly passed to the general component. The overall layout of the page is uniformly processed within the general component. According to the logic of the corresponding component, a new page can be developed simply by using the page's configuration config file data. The main page only needs to call this general component. A new page can be quickly completed by writing very little code, which greatly improves the efficiency of web page development. Attached Figure Description

[0036] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the invention.

[0037] In the attached diagram:

[0038] Figure 1 This is a flowchart illustrating the method for generating and displaying a generic page layout based on React, as described in this invention.

[0039] Figure 2 , 3 This is a page display diagram of the tabular data section of an embodiment of the present invention;

[0040] Figure 4-7 Screenshot of the code implementation for generating the entire page display from the combined general components of this embodiment of the invention;

[0041] Figure 8 This is a schematic diagram of the configuration of a computer device according to an embodiment of the present invention. Detailed Implementation

[0042] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and products consistent with some aspects of this disclosure as detailed in the appended claims.

[0043] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The singular forms “a,” “the,” and “the” as used in this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

[0044] It should be understood that although the terms first, second, third, etc., may be used in this disclosure to describe various information, such information should not be limited to these terms. These terms are used only to distinguish information of the same type from one another. For example, without departing from the scope of this disclosure, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0045] The embodiments of the present invention will be further described in detail below with reference to the accompanying drawings.

[0046] This invention provides a method for generating and displaying a generic page layout based on React. See [link to relevant documentation]. Figure 1 As shown, it includes the following steps:

[0047] S1. Analyze the page layout, break down the complex page into multiple modules, and use React componentization to encapsulate each module of the page into a general component;

[0048] The method for splitting complex pages into multiple modules includes:

[0049] The page is divided into an operation bar at the top of the page and a table data section located below the operation bar.

[0050] The table data section includes:

[0051] The left side displays the button operation section (clicking the table data name column), and the right side displays the details page section (displaying the filter function module).

[0052] S2. According to the data format of the JavaScript data passed to the page module, adjust the settings according to the different page requirements;

[0053] Each JavaScript object in the JavaScript data contains buttons, a search function, a table, and details; the following is the code for this embodiment:

[0054] {buttons:[],search:[],table:{},detail:{}}

[0055] S3. Process JavaScript data, output button actions, pass the selected table data to the button actions; access detail information through an external page.

[0056] The button's operation method needs to be passed out. Different pages have different operations, and the button operates on table data. At the same time, the selected table data needs to be passed to the method.

[0057] The part that requires external page interaction is the details page, which displays different data and reveals the details of the interaction.

[0058] In this embodiment, the method for processing JavaScript data includes:

[0059] The data acquisition interface is passed to the general component, which calls the interface to obtain JavaScript-rendered table data. The JavaScript data needed for the operation bar and the details page are then concatenated; as much complex logic as possible is encapsulated.

[0060] The following is the pseudocode for the interface that processes the table passed in for configuration in this embodiment:

[0061]

[0062]

[0063] The following is the code for saving the selected table data in this embodiment: const handleTableRowsChange = (selectedRowKeys:Key[]) => {

[0064] setSelectedRowKeys(selectedRowKeys);

[0065] };

[0066] The following is the code for the processing button in this embodiment:

[0067]

[0068] The following is the code for handling changes in detail page rendering in this embodiment:

[0069]

[0070]

[0071] S4. Directly call the general component on the page, pass the entire JavaScript data to the general component according to the data format, combine the general component to complete the page display. See [link to relevant documentation]. Figure 2 , 3 As shown.

[0072] Each page only needs to have different JavaScript data set to quickly generate a new page.

[0073] In this embodiment, the method for passing the entire JavaScript data to the general component according to the data format includes:

[0074] Define the config parameter to pass data from the operation bar section and the display details page section.

[0075] See Figure 4-7 The image shows the code implementation for generating the entire page display using the combined general components in this embodiment.

[0076] This invention also provides a React-based system for generating and displaying a generic page layout, which executes the React-based method for generating and displaying a generic page layout as described above, including:

[0077] Page splitting unit: Used to analyze page layout, break down complex pages into multiple modules, and encapsulate each page module into a generic component using React componentization;

[0078] Data input unit: Used to confirm the data format of the JavaScript data to be input into the page module according to the page module, and to make adjustments and settings according to different page requirements; each JavaScript object in the JavaScript data contains buttons, search, table, and detail;

[0079] Data processing unit: Used to process JavaScript data, output button actions, pass data from the selected table to the button actions; and access detail information via external pages.

[0080] Page Usage Unit: Used to directly call the general component on the page, pass the entire JavaScript data to the general component according to the data format, combine the general component to form the entire page, and realize the page display.

[0081] This invention also provides a computer device. Figure 8 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention; see the accompanying drawings. Figure 8 As shown, the computer device includes: an input device 23, an output device 24, a memory 22, and a processor 21; the memory 22 is used to store one or more programs; when the one or more programs are executed by the one or more processors 21, the one or more processors 21 implement the React-based method for generating and displaying a general page layout as provided in the above embodiment; wherein the input device 23, the output device 24, the memory 22, and the processor 21 can be connected via a bus or other means. Figure 8 Taking the example of a connection between China and Israel via a bus.

[0082] The memory 22, as a read / write storage medium for a computing device, can be used to store software programs and computer-executable programs, such as the program instructions corresponding to the React-based method for generating and displaying a general page layout as described in this embodiment of the invention. The memory 22 may primarily include a program storage area and a data storage area. The program storage area may store the operating system and at least one application program required for a given function. The data storage area may store data created based on the use of the device. Furthermore, the memory 22 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, the memory 22 may further include memory remotely located relative to the processor 21, and these remote memories can be connected to the device via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0083] Input device 23 can be used to receive input digital or character information, and generate key signal inputs related to user settings and function control of the device; output device 24 may include display devices such as a display screen.

[0084] The processor 21 executes various functional applications and data processing of the device by running software programs, instructions and modules stored in the memory 22, thereby realizing the above-mentioned method for generating and displaying a general page layout based on React.

[0085] The computer equipment provided above can be used to execute the method for generating and displaying a general page layout based on React provided in the above embodiments, and has corresponding functions and beneficial effects.

[0086] This invention also provides a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform the OpenStack Ironic-based dynamic power management method provided in the above embodiments. The storage medium can be any type of memory device or storage device, including: mounting media such as CD-ROM, floppy disk, or magnetic tape; computer system memory or random access memory such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory such as flash memory, magnetic media (e.g., hard disk or optical storage); registers or other similar types of memory elements; the storage medium may also include other types of memory or combinations thereof; furthermore, the storage medium may reside in a first computer system in which the program is executed, or it may reside in a different second computer system connected to the first computer system via a network (such as the Internet); the second computer system can provide program instructions to the first computer for execution. The storage medium includes two or more storage media that can reside in different locations (e.g., in different computer systems connected via a network). The storage medium can store program instructions (e.g., specifically implemented as a computer program) executable by one or more processors.

[0087] Of course, the computer-executable instructions provided in the embodiments of the present invention are not limited to the method for generating and displaying a general page layout based on React as described in the above embodiments, but can also execute related operations in the method for generating and displaying a general page layout based on React provided in any embodiment of the present invention.

[0088] The technical solution of the present invention has been described above with reference to the preferred embodiments shown in the accompanying drawings. However, it will be readily understood by those skilled in the art that the scope of protection of the present invention is obviously not limited to these specific embodiments. Without departing from the principles of the present invention, those skilled in the art can make equivalent changes or substitutions to the relevant technical features, and the technical solutions after these changes or substitutions will all fall within the scope of protection of the present invention.

[0089] The above description is merely a preferred embodiment of the present invention and is not intended to limit the invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for generating and displaying a generic page layout based on React, characterized in that, Includes the following steps: S1. Analyze the page layout, break down the complex page into multiple modules, and use React componentization to encapsulate each module of the page into a general component; S2. According to the data format of the JavaScript data passed to the page module, adjust the settings according to the different page requirements; Each JavaScript object in the JavaScript data contains buttons, search, a table, and details. S3. Process JavaScript data, output button actions, pass the selected table data to the button actions; access detail information through an external page. S4. Directly call the general component on the page, pass the entire JavaScript data to the general component according to the data format, combine the general component to form the entire page, and realize the display of the page; The method for splitting a complex page into multiple modules in step S1 includes: The page is divided into an operation bar at the top of the page and a table data section below the operation bar. The table data section includes: The left side displays the button operation section, and the right side displays the details page section; The method for processing JavaScript data in step S3 includes: The data acquisition interface is passed to the general component, which calls the interface to obtain JavaScript-rendered table data and concatenates the JavaScript data needed for the operation bar and the details page. The method for passing the entire JavaScript data to the general component according to the data format in step S4 includes: Define the config parameter to pass data from the operation bar section and the display details page section.

2. A React-based system for generating and displaying generic page layouts, characterized in that: The method for generating and displaying a generic page layout based on React, as described in claim 1, includes: Page splitting unit: Used to analyze page layout, break down complex pages into multiple modules, and encapsulate each page module into a generic component using React componentization; Data input unit: Used to confirm the data format of the JavaScript data to be input into the page module according to the page module, and to make adjustments and settings according to different page requirements; each JavaScript object in the JavaScript data contains buttons, search, table, and detail; Data processing unit: Used to process JavaScript data, output button actions, pass data from the selected table to the button actions; and access detail information via external pages. Page Usage Unit: Used to directly call the general component on the page, pass the entire JavaScript data to the general component according to the data format, combine the general component to form the entire page, and realize the page display.

3. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method for generating and displaying a general page layout based on React as described in claim 1.

4. A computer device, the computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the method for generating and displaying a general page layout based on React as described in claim 1.

Images