Page generation method, apparatus, device, medium, and product

Abstract

The application discloses a page generation method, device, equipment, medium and product. The page generation method comprises the following steps: acquiring and displaying a candidate component list, wherein the candidate component list comprises a plurality of encapsulated components; receiving a first input of a user for a first component in the candidate component list, wherein the first input is an input of dragging the first component to a target page; and generating the target page containing the first component in response to the first input. According to the embodiment of the application, the workload of the front-end developer can be reduced, the development efficiency is improved, and the reusability and maintainability of the components in the page are improved.

Description

Technical Field

[0001] This application pertains to computer technology, and particularly relates to a method, apparatus, device, medium, and product for generating pages. Background Technology

[0002] Currently, front-end developers typically need to manually write page code to implement the functionality of various components on the page when developing front-end pages.

[0003] However, in the same scenario, the code of various components in the front-end page is highly repetitive. It is very tedious for developers to manually write the page code, and the code they write is repetitive, which leads to a large workload for front-end developers, reduces development efficiency, and makes the reusability of the components in the page low and difficult to maintain. Summary of the Invention

[0004] This application provides a page generation method, apparatus, device, medium, and product, which can reduce the workload of front-end developers, improve development efficiency, and enhance the reusability and maintainability of components in the page.

[0005] In a first aspect, embodiments of this application provide a page generation method, the method comprising:

[0006] Obtain and display a list of candidate components, wherein the list of candidate components includes multiple encapsulated components;

[0007] Receive a first input from a user for a first component in the list of candidate components, wherein the first input is an input to drag and drop the first component to the target page;

[0008] In response to the first input, a target page containing the first component is generated.

[0009] Secondly, embodiments of this application provide a page generation apparatus, the apparatus comprising:

[0010] The list retrieval module is used to retrieve and display a list of candidate components, wherein the list of candidate components includes multiple encapsulated components;

[0011] The first receiving module is configured to receive a first input from a user for a first component in the list of candidate components, wherein the first input is an input to drag and drop the first component to the target page;

[0012] A page generation module is used to generate a target page containing the first component in response to the first input.

[0013] Thirdly, embodiments of this application provide an electronic device, which includes: a processor and a memory storing computer program instructions;

[0014] When the processor executes the computer program instructions, it implements the steps of the page generation method as described in any embodiment of the first aspect.

[0015] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer program instructions, which, when executed by a processor, implement the steps of the page generation method as described in any embodiment of the first aspect.

[0016] Fifthly, embodiments of this application provide a computer program product in which instructions, when executed by a processor of an electronic device, cause the electronic device to perform the steps of the page generation method as described in any embodiment of the first aspect.

[0017] The page generation method, apparatus, device, medium, and product in this application embodiment obtain and display a list of candidate components containing multiple encapsulated components, and receive a first input from a user to drag and drop a first component from the candidate component list to a target page. In response to the first input, a target page containing the first component is generated. In this way, by designing multiple encapsulated components, developers can drag and drop components to the page to quickly generate the page required by the front end. Compared with manually writing page code, this can reduce the workload of front-end developers and improve development efficiency. In addition, the encapsulated components can be reused indefinitely and are easy to maintain, thus improving the reusability and maintainability of components in the page. Attached Figure Description

[0018] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is a schematic flowchart of a page generation method provided in one embodiment of this application;

[0020] Figure 2 This is a schematic diagram of the structure of a page generation apparatus provided in one embodiment of this application;

[0021] Figure 3 This is a schematic diagram of the structure of an electronic device provided in one embodiment of this application. Detailed Implementation

[0022] The features and exemplary embodiments of various aspects of this application will be described in detail below. To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain this application and not to limit it. For those skilled in the art, this application can be implemented without some of these specific details. The following description of the embodiments is merely to provide a better understanding of this application by illustrating examples.

[0023] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising..." does not exclude the presence of additional identical elements in the process, method, article, or apparatus that includes said element.

[0024] The acquisition, storage, use, and processing of data in this application all comply with the relevant provisions of national laws and regulations.

[0025] Currently, front-end developers primarily build front-end pages by manually writing code. However, within the same project, components are often reused frequently. For example, in a backend management system project, where data management is the main focus, most pages involve CRUD operations. This leads to developers repeatedly writing the same code, increasing workload, reducing development efficiency, and resulting in low reusability and maintenance of page components.

[0026] To address the problems of existing technologies, embodiments of this application provide a page generation method, apparatus, device, medium, and product. This page generation method can be applied to front-end page development scenarios. The page generation method provided in this application embodiment is described below.

[0027] Figure 1 This is a flowchart illustrating a page generation method provided in one embodiment of this application. Figure 1 As shown, the page generation method may specifically include the following steps:

[0028] S110. Obtain and display a list of candidate components, wherein the list of candidate components includes multiple encapsulated components;

[0029] S120. Receive the user's first input for the first component in the list of candidate components, wherein the first input is the input to drag and drop the first component to the target page;

[0030] S130. In response to the first input, generate a target page containing the first component.

[0031] Therefore, by acquiring and displaying a list of candidate components containing multiple encapsulated components, and receiving the user's first input of dragging and dropping the first component from the candidate component list onto the target page, the system generates a target page containing the first component in response to the first input. In this way, by designing multiple encapsulated components, developers can drag and drop components onto the page to quickly generate the page required by the front end. Compared with manually writing page code, this can reduce the workload of front-end developers and improve development efficiency. In addition, the encapsulated components can be reused indefinitely and are easy to maintain, thus improving the reusability and maintainability of components on the page.

[0032] The specific implementation methods for each of the above steps are described below.

[0033] In some implementations, during S110, the embodiments of this application can pre-set multiple encapsulated components for various page development scenarios, for use by front-end developers during page development. For example, for a data management page development scenario, the pre-set multiple encapsulated components may specifically include commonly used form components such as input, select, date, checkbox, and button, and may also include re-encapsulated business components such as search and table. Additionally, a single file can be used to summarize the attributes of these multiple encapsulated components.

[0034] For example, when a front-end developer (i.e., a user) is developing a front-end page, they can call up multiple pre-set encapsulated components and display them in a list of alternative components. This list of alternative components can be displayed simultaneously with the target page, making it convenient for users to drag and drop components from the list of alternative components to the target page.

[0035] In some implementations, in S120, the first component can be any component displayed in the list of alternative components.

[0036] For example, a user can select the desired component, i.e. the first component, from the list of alternative components, and drag and drop the first component from the list of alternative components to the target page that is displayed at the same time, so as to quickly generate the target page containing the target component required by the front end.

[0037] In some implementations, during S130, the generated target page may include a first component that the user dragged from the list of candidate components to the target page. For example, if the first component is a button component corresponding to a data query button, a target page containing the data query button can be quickly generated after the user drags the first component to the target page.

[0038] Based on this, in some implementations, the above-mentioned S130 may specifically include:

[0039] Retrieve the first code data corresponding to the first component;

[0040] The first code data is assembled into the code data corresponding to the target page to obtain the target code data;

[0041] The page is rendered based on the target code data to obtain the target page containing the first component.

[0042] Here, the first code data can be the code data of the first component used to implement the corresponding general component function. For example, when the first component is the button component corresponding to the data query button, the first code data can be the code data used to implement the data query function.

[0043] In some examples, drag-and-drop functionality for components can be directly implemented using HTML5's `draggable` property. Each component in the candidate component list is draggable. When the user drags the first component to the corresponding display area on the target page, the code data corresponding to the first component (i.e., the first code data) can be assembled into the code data of the target page by retrieving the target element's release event (i.e., the `drop` event). After the data assembly is complete, the first component can be displayed on the target page through a re-rendering process. The target element can be the target page itself or a component within the target page; this is not limited to any particular element.

[0044] Furthermore, in this embodiment, components already present on the target page can be dragged and dropped arbitrarily. In some implementations, after S130 above, the page generation method provided in this embodiment may further include:

[0045] Receive a second input from the user for the first component, wherein the second input is an input to drag the first component from a first area to a second area on the target page;

[0046] In response to the second input, determine the parent component of the first component in the first region, and the second component located in the second region;

[0047] Obtain the first code data corresponding to the first component from the code data corresponding to the parent component, and assemble the first code data into the code data corresponding to the second component to obtain the second code data;

[0048] The page is rendered based on the second code data to obtain the updated target page.

[0049] Here, different areas of the target page can correspond to different components, and the components corresponding to these different areas can be components at the same level or components at different levels.

[0050] For example, when a user drags a first component from a first area to a second area of ​​the target page, the parent component corresponding to the first component in the first area and the target component (i.e., the second component in the second area where the first component was released) can be determined. The first code data corresponding to the first component can then be migrated from the parent component before dragging to the second component, and the code data can be reassembled to obtain second code data. After page rendering based on this second code data, the target page with the updated position of the first component can be displayed. This allows for free dragging and dropping of the first component within the target page.

[0051] Based on this, the steps described above for determining the parent component of the first component in the first region and the second component located in the second region may specifically include:

[0052] Obtain the event information of the drag start event and the release event corresponding to the first input;

[0053] Based on the event information of the drag-and-drop start event, determine the parent component corresponding to the first component in the first area;

[0054] Based on the event information of the release event, identify the second component located in the second region.

[0055] Here, for drag-and-drop handling of components within the target page, you can also directly use H5's draggable. The main things to refer to are the event information for two events: the drag start event (dragstart event) and the drop event (drop event).

[0056] In some specific examples, when a user drags the first component from the first area of ​​the target page to the second area, the second component in the second area can be determined by obtaining the event information of the `drop` event, such as the name of the destination component. Similarly, the parent component of the first component in the first area before being dragged can be determined by obtaining the event information of the `dragstart` event, such as the name of the starting component. Then, the code data corresponding to the first component, i.e., the first code data, is migrated from the original parent component to the new second component and assembled into the code data corresponding to the second component, thus obtaining the assembled second code data. After the data assembly is complete, the page can be re-rendered to display the updated first component on the target page.

[0057] In addition, in some embodiments, where the target page also includes at least one component at the same level as the first component and arranged sequentially, the page generation method provided in this application embodiment may further include:

[0058] Receive a third input from the user for the first component, wherein the third input is the input of dragging the first component after the target component, and the target component is any one of at least one components;

[0059] In response to the third input, the arrangement order between the first component and at least one other component is updated so that the first component is displayed after the target component.

[0060] In this embodiment of the application, for the sorting function between sibling components at the same level, the transition-group component provided by the Vue framework can be used directly to adjust the sorting position between sibling components at the same level.

[0061] In some implementations, the transition-group component provided by the Vue framework allows users to drag and drop the first component to the place after or before other components at the same level, thereby adjusting the order of the first component relative to other components at the same level.

[0062] Additionally, due to limitations in certain special scenarios, the search and table components are in fixed positions for the first layer, so they are fixed here. If you want to drag and drop them to position them, you can add a children field to the top layer of the first-level data, and then drag and drop to adjust the sorting position.

[0063] Furthermore, in order to achieve component encapsulation, in some embodiments, prior to S110 above, the page generation method provided in this application may further include:

[0064] Obtain code data corresponding to the functions of multiple different components to obtain multiple code modules;

[0065] Add corresponding attribute information for each of the multiple code modules;

[0066] Each code module and its corresponding attribute information are encapsulated to obtain multiple encapsulated components.

[0067] Here, for frequently used component functions, developers can write a unified set of code data to obtain the code module corresponding to the component function. Then, by adding corresponding attribute information to the code module, the code module and the corresponding attribute information can be encapsulated to obtain the encapsulated component, which can be conveniently used by front-end developers when developing front-end pages.

[0068] For example, before encapsulating components, the data structure of each specific component can be defined, such as the component's name, component properties, and child components under the current component.

[0069] Since each component has unique configuration information, these specific attributes, aside from common information like `prop` and `id`, need to be defined based on the functionality the component needs to implement. These attributes correspond one-to-one with the component's properties. Because each component attribute has different types—some are input fields, some are dropdown menus, and others are switches—a detailed description of each attribute is required.

[0070] After defining the basic information, two special cases need to be handled: one is when a component's property depends on the specific values ​​of other properties, and the other is when a component applies different properties under different parent components. In the first case, a rule array can be set up, with each element storing the dependency rule. When needed, the dependency relationship between property values ​​can be retrieved by querying this rule array. In the second case, a `use` field can be added to describe the properties applied by the component under various parent components.

[0071] Additionally, for some special components, such as those that need to make external requests, most actions within a fully encapsulated page can be configured. Requests are typically triggered by clicking a button or by the component's `change` event, except during initialization. However, internal page requests depend on the project's request encapsulation, so request-related information needs to be added to the internal component's properties, primarily including `url`, `type`, and `params`. When a button is clicked to trigger a request, the request information can be retrieved from the properties. Since the request method depends on the project, this component doesn't encapsulate the request internally; instead, the encapsulated request method is passed in from outside. The component and its internal / external components only agree on specifications. When encountering variables in the request's `url` and `params`, a variable format can be defined, and the variable can be parsed and replaced internally. After parsing the `url` and `params`, `commonRequest` can be used to execute the request, thus completing the basic request processing.

[0072] In addition, the processing of dropdown option data in all components of the front-end page can be roughly divided into two cases: static data and dynamic data. Static data can be configured directly on the front-end, while dynamic data requires the cooperation of the back-end to reserve a fixed data retrieval interface. By calling this data retrieval interface, all the dropdown data required for the entire page can be obtained.

[0073] Furthermore, in the design of the table component in this application embodiment, the buttons above the table are mainly for uploading, adding, batch deleting, and batch editing. The data that these buttons rely on mainly includes the data in the search bar component and the data selected in the table's checkboxes.

[0074] The design of column components can be mainly divided into three types: selection (multi-select column), default, and operate (operable column). Selection can be a multi-select column used as the first column of a table; default can be the default column with no other configuration; and operate can be an operable column, which can contain child components such as buttons and switches. In addition, custom text is designed, which can include state transition text, such as 0 -> on, 1 -> off, and dropdown option values. This requires a specific dropdown data ID, which is the data to be processed above, and then parsed and replaced by a script.

[0075] In addition, within the page, button components (also known as button components) are frequently used components, such as pop-ups, tables, columns, and search. Button components are required in various situations, and their functions vary depending on their location. Based on their functions, button components can be mainly divided into the following categories: confirmation prompts, pop-ups, requests, redirects, downloads, etc.

[0076] Here, apart from pop-ups, all other functions can be accomplished through their own attribute fields. However, pop-ups are a special and very important function. Pop-ups in data management systems are generally used to add, edit, or view data. Therefore, the pop-up component needs to take into account the functions of the form component.

[0077] In addition, because the content of the pop-up is customizable and contains a lot of information, such as a table component inside the pop-up, which may contain buttons that can also open the pop-up, the implementation of this application flattens out the content data of the pop-up. Otherwise, the structure would be too deeply nested, making it difficult to parse.

[0078] To use pop-ups, you can add a dialogId field to the button component, which points to the pop-up data with the id dialogId in the dialogTemplates array.

[0079] It should be noted that since the number of pop-ups on a page cannot be limited, this application embodiment uses a service approach to call the pop-ups.

[0080] Furthermore, regarding data interaction between the pop-up and table components, since most add and edit operations within the pop-up affect the table list data, and inline button pop-ups default to carrying inline data as the initial data within the pop-up form, it's necessary to refresh the table data after the pop-up operation is completed. Therefore, this application's embodiment encapsulates and manages the button functions within the page in a unified manner. Specifically, the method for updating the table can be placed in a callback function. After the pop-up confirms the interface's success, the callback function is executed to refresh the table component. This approach can be used to implement any functionality that depends on the pop-up.

[0081] In addition, for some special form functions that cannot be implemented through configuration, this application provides two slots for manual development by the developer. The first slot is located in the button area above the table component, and the second slot is located in the button area of ​​the column operation column.

[0082] It should be noted that the application scenarios described in the above embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0083] Based on the same inventive concept, this application also provides a page generation apparatus. (Specifically combined with...) Figure 2 Please provide a detailed explanation.

[0084] Figure 2 This is a schematic diagram of the structure of a page generation apparatus provided in one embodiment of this application.

[0085] like Figure 2 As shown, the page generation device 200 may include:

[0086] The list acquisition module 201 is used to acquire and display a list of candidate components, wherein the list of candidate components includes multiple encapsulated components;

[0087] The first receiving module 202 is used to receive a first input from a user for a first component in the list of candidate components, wherein the first input is an input to drag the first component to the target page;

[0088] Page generation module 203 is used to generate a target page containing the first component in response to the first input.

[0089] The page generation device 200 described above will be explained in detail below:

[0090] In some embodiments, the page generation module 203 includes:

[0091] The first acquisition submodule is used to acquire the first code data corresponding to the first component;

[0092] An assembly submodule is used to assemble the first code data into the code data corresponding to the target page to obtain the target code data;

[0093] The rendering submodule is used to perform page rendering processing based on the target code data to obtain a target page containing the first component.

[0094] In some embodiments, the page generation apparatus 200 further includes:

[0095] The second receiving module is configured to receive a second input from the user regarding the first component after generating a target page containing the first component, wherein the second input is an input to drag the first component from a first area to a second area in the target page;

[0096] A component determination module is configured to, in response to the second input, determine the parent component of the first component in the first region, and the second component located in the second region;

[0097] The first assembly module is used to obtain first code data corresponding to the first component from the code data corresponding to the parent component, and assemble the first code data into the code data corresponding to the second component to obtain second code data;

[0098] The page rendering module is used to perform page rendering processing based on the second code data to obtain the updated target page.

[0099] In some embodiments, the component determination module includes:

[0100] The second acquisition submodule is used to acquire the event information of the drag start event and the release event corresponding to the first input;

[0101] The first determining submodule is used to determine the parent component corresponding to the first component in the first area based on the event information of the drag start event;

[0102] The second determining submodule is used to determine the second component located in the second region based on the event information of the release event.

[0103] In some embodiments, the page generation apparatus 200 further includes:

[0104] The third receiving module is configured to receive a third input from the user regarding the first component when the target page also includes at least one component at the same level as the first component and arranged sequentially, wherein the third input is an input to drag the first component after the target component, and the target component is any one of the at least one components;

[0105] A sequence update module is configured to update the arrangement order between the first component and the at least one component in response to the third input, so as to display the first component after the target component.

[0106] In some embodiments, the page generation apparatus 200 further includes:

[0107] The data acquisition module is used to acquire code data corresponding to the functions of multiple different components before acquiring and displaying the list of candidate components, thus obtaining multiple code modules.

[0108] The attribute adding module is used to add corresponding attribute information for each of the multiple code modules;

[0109] The component encapsulation module is used to encapsulate each code module and its corresponding attribute information to obtain multiple encapsulated components.

[0110] Therefore, by acquiring and displaying a list of candidate components containing multiple encapsulated components, and receiving the user's first input of dragging and dropping the first component from the candidate component list onto the target page, the system generates a target page containing the first component in response to the first input. In this way, by designing multiple encapsulated components, developers can drag and drop components onto the page to quickly generate the page required by the front end. Compared with manually writing page code, this can reduce the workload of front-end developers and improve development efficiency. In addition, the encapsulated components can be reused indefinitely and are easy to maintain, thus improving the reusability and maintainability of components on the page.

[0111] Figure 3 This is a schematic diagram of the structure of an electronic device provided in one embodiment of this application.

[0112] The electronic device 300 may include a processor 301 and a memory 302 storing computer program instructions.

[0113] Specifically, the processor 301 may include a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits that can be configured to implement the embodiments of this application.

[0114] Memory 302 may include mass storage for data or instructions. For example, and not limitingly, memory 302 may include a hard disk drive (HDD), floppy disk drive, flash memory, optical disk, magneto-optical disk, magnetic tape, or Universal Serial Bus (USB) drive, or a combination of two or more of these. Where appropriate, memory 302 may include removable or non-removable (or fixed) media. Where appropriate, memory 302 may be internal or external to the integrated gateway disaster recovery device. In a particular embodiment, memory 302 is non-volatile solid-state memory.

[0115] In certain embodiments, the memory may include read-only memory (ROM), random access memory (RAM), disk storage media devices, optical storage media devices, flash memory devices, and electrical, optical, or other physical / tangible memory storage devices. Thus, typically, memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., memory devices) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the method according to one aspect of this application.

[0116] The processor 301 implements any of the page generation methods described in the above embodiments by reading and executing computer program instructions stored in the memory 302.

[0117] In some examples, the electronic device 300 may also include a communication interface 303 and a bus 310. For example, Figure 3 As shown, the processor 301, memory 302, and communication interface 303 are connected through bus 310 and complete communication with each other.

[0118] The communication interface 303 is mainly used to realize communication between various modules, devices, units and / or equipment in the embodiments of this application.

[0119] Bus 310 includes hardware, software, or both, that couples components of an online data traffic metering device together. For example, and not as a limitation, bus 310 may include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), HyperTransport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an Infinite Bandwidth Interconnect, a Low Pin Count (LPC) bus, a memory bus, a Microchannel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or other suitable buses, or combinations of two or more of these. Where appropriate, bus 310 may include one or more buses. Although specific buses are described and illustrated in embodiments of this application, this application contemplates any suitable bus or interconnect.

[0120] For example, the electronic device 300 can be a mobile phone, tablet computer, laptop computer, handheld computer, in-vehicle electronic device, ultra-mobile personal computer (UMPC), netbook, or personal digital assistant (PDA), etc.

[0121] The electronic device 300 can execute the page generation method in the embodiments of this application, thereby achieving the combination Figure 1 and Figure 2 The described page generation method and apparatus.

[0122] Furthermore, in conjunction with the page generation methods in the above embodiments, this application embodiment can provide a computer-readable storage medium for implementation. This computer-readable storage medium stores computer program instructions; when these computer program instructions are executed by a processor, they implement any of the page generation methods in the above embodiments. Examples of computer-readable storage media include non-transitory computer-readable storage media, such as portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, etc.

[0123] It should be clarified that this application is not limited to the specific configurations and processes described above and shown in the figures. For the sake of brevity, detailed descriptions of known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of this application is not limited to the specific steps described and shown. Those skilled in the art can make various changes, modifications, and additions, or change the order of steps, after understanding the spirit of this application.

[0124] The functional blocks shown in the above-described structural diagram can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application-specific integrated circuits (ASICs), appropriate firmware, plug-ins, function cards, etc. When implemented in software, the elements of this application are programs or code segments used to perform the required tasks. Programs or code segments can be stored on a machine-readable medium or transmitted over a transmission medium or communication link via data signals carried on a carrier wave. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, radio frequency (RF) links, etc. Code segments can be downloaded via computer networks such as the Internet, intranets, etc.

[0125] It should also be noted that the exemplary embodiments mentioned in this application describe methods or systems based on a series of steps or apparatus. However, this application is not limited to the order of the above steps; that is, the steps can be performed in the order mentioned in the embodiments, or in a different order, or several steps can be performed simultaneously.

[0126] The aspects of this application have been described above with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It should be understood that each block in the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that these instructions, executable via the processor of the computer or other programmable data processing apparatus, enable the implementation of the functions / actions specified in one or more blocks of the flowchart illustrations and / or block diagrams. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor, or a field-programmable logic circuit. It is also understood that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can also be implemented by dedicated hardware performing the specified functions or actions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0127] The above description is merely a specific implementation of this application. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, modules, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. It should be understood that the protection scope of this application is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in this application, and these modifications or substitutions should all be covered within the protection scope of this application.

Claims

1. A page generation method, characterized in that, include: A list of candidate components is retrieved and displayed, wherein the list includes multiple encapsulated components; each encapsulated component includes a code module corresponding to its function and attribute information added to the code module; the attribute information of each encapsulated component contains a rule array and a use field, wherein the rule array stores dependency rules, the dependency rules describe the dependency relationships between attribute values ​​in the component, and the use field describes the attributes applied by the component under different parent components; the attribute information of each encapsulated component also contains request information, including url, type, and params, which is used to retrieve the request information from the attribute information and execute the request when the encapsulated component is triggered; Receive a first input from a user for a first component in the list of candidate components, wherein the first input is an input to drag and drop the first component to the target page; In response to the first input, a target page containing the first component is generated based on the code module of the first component and the attribute information.

2. The method according to claim 1, characterized in that, The generation of the target page containing the first component includes: Obtain the first code data corresponding to the first component; The first code data is assembled into the code data corresponding to the target page to obtain the target code data; Based on the target code data, page rendering processing is performed to obtain a target page containing the first component.

3. The method according to claim 1, characterized in that, After generating the target page containing the first component, the method further includes: Receive a second input from the user regarding the first component, wherein the second input is an input to drag the first component from a first area to a second area in the target page; In response to the second input, determine the parent component of the first component in the first region, and the second component located in the second region; The first code data corresponding to the first component is obtained from the code data corresponding to the parent component, and the first code data is assembled into the code data corresponding to the second component to obtain the second code data; Based on the second code data, page rendering is performed to obtain the updated target page.

4. The method according to claim 3, characterized in that, Determining the parent component corresponding to the first component in the first region, and the second component located in the second region, includes: Obtain the event information of the drag start event and the release event corresponding to the first input; Based on the event information of the drag-and-drop start event, determine the parent component of the first component in the first area; Based on the event information of the release event, the second component located in the second region is determined.

5. The method according to claim 1, characterized in that, If the target page also includes at least one component at the same level as the first component and arranged sequentially, the method further includes: Receive a third input from the user for the first component, wherein the third input is an input that drags the first component after a target component, and the target component is any one of the at least one components; In response to the third input, the arrangement order between the first component and the at least one component is updated so that the first component is displayed after the target component.

6. The method according to claim 1, characterized in that, Before obtaining and displaying the list of alternative components, the method further includes: Obtain code data corresponding to the functions of multiple different components to obtain multiple code modules; Add corresponding attribute information for each of the multiple code modules; Each code module and its corresponding attribute information are encapsulated to obtain multiple encapsulated components.

7. A page generation apparatus, characterized in that, The device includes: A list retrieval module is used to retrieve and display a list of candidate components, wherein the list of candidate components includes multiple encapsulated components; each encapsulated component includes a code module corresponding to its function and attribute information added to the code module; the attribute information of each encapsulated component includes a rule array and a use field, wherein the rule array stores dependency rules, the dependency rules describe the dependency relationships between attribute values ​​in the component, and the use field describes the attributes applied by the component under different parent components; the attribute information of each encapsulated component also includes request information, including url, type, and params, which is used to retrieve the request information from the attribute information and execute the request when the encapsulated component is triggered; The first receiving module is configured to receive a first input from a user for a first component in the list of candidate components, wherein the first input is an input to drag and drop the first component to the target page; A page generation module is used to respond to the first input and generate a target page containing the first component based on the code module of the first component and the attribute information.

8. An electronic device, characterized in that, The device includes: a processor and a memory storing computer program instructions; When the processor executes the computer program instructions, it implements the steps of the page generation method as described in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer program instructions that, when executed by a processor, implement the steps of the page generation method as described in any one of claims 1-6.

10. A computer program product, characterized in that, When the instructions in the computer program product are executed by the processor of the electronic device, the electronic device causes the electronic device to perform the steps of the page generation method as described in any one of claims 1-6.

Images