Element-UI-based paging method, system, device and storage medium
By obtaining the layout and UI display information of the page's subviews, configuring the target business logic, and calling common functions, the flexibility and scalability issues of the element-UI pagination component are resolved, enabling an efficient pagination method in various business scenarios.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- CHINA PING AN PROPERTY INSURANCE CO LTD
- Filing Date
- 2022-10-27
- Publication Date
- 2026-06-16
Smart Images
Figure CN115576556B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of computer technology, and in particular to a pagination method, system, device, and storage medium based on element-UI. Background Technology
[0002] In the backend management systems of payment apps, pagination is a frequently used business requirement. Almost all data involving tables and all payment schemes require pagination during frontend implementation to prevent page crashes caused by loading too much data at once and to ensure smooth page performance. In systems developed using the Vue framework, Element-UI is generally chosen as its UI component library, and Element-UI provides the pagination component to implement pagination effects. It offers pagination-related properties and event handlers. When implementing business pagination requirements, corresponding event callback functions need to be written to change the values of pagination properties and then re-fetch data to update the page content.
[0003] Typically, component encapsulation is used to achieve logic reuse. However, this approach has a problem: it leads to a loss of flexibility and scalability in the components. If only a few commonly used attribute APIs are exposed, the components will not be universal enough and will not always be able to support changes in business requirements. Developers will still need to write their own pagination solutions. If you want to ensure that the components can support all business scenarios, then you need to include all APIs and event handling functions, which makes this encapsulation redundant and not very meaningful.
[0004] Therefore, a method is needed that can support various business scenarios while ensuring the flexibility and scalability of the pagination component to achieve fast pagination. Summary of the Invention
[0005] This invention provides a pagination method, system, device, and storage medium based on element-UI. Its main purpose is to provide a pagination method that can support various business scenarios while ensuring the flexibility of the pagination component, effectively improving the robustness of the pagination method and making it applicable to a wide variety of business scenarios.
[0006] In a first aspect, embodiments of the present invention provide a pagination method based on element-UI, comprising:
[0007] Based on the page layout information of the target page, obtain the page subviews contained in the target page, wherein the page subviews include abstract components in the target page;
[0008] Based on the UI display information corresponding to the page subview, obtain the business logic associated with the UI display information, and configure the target business logic for each page subview.
[0009] Based on the target business logic corresponding to the page subview, obtain the logical input parameters and target pagination attributes corresponding to the page subview;
[0010] Based on the logical input parameters corresponding to the page subview, the logical implementation function in the public folder is called to obtain the target event handling function. The logical implementation function calls the target event handling function according to the logical input parameters to implement the target business logic. The target event handling function includes the target pagination attribute.
[0011] Assign the target pagination attribute and target event handler function to the abstract component in the page subview to implement pagination of the target page.
[0012] Preferably, the step of calling the logic implementation function in the public folder based on the logical input parameters corresponding to the page subview to obtain the target event handling function includes:
[0013] The logical input parameters corresponding to the page subviews are parsed to obtain the business sub-logic;
[0014] Based on the aforementioned business sub-logic, obtain the candidate event handling functions and logic numbers;
[0015] The target pagination attribute is associated with the candidate event handling function, and the calling relationship of the candidate event handling function is set according to the logical number to finally obtain the target event handling function.
[0016] Preferably, the step of setting the call relationship of the candidate event handling functions according to the logical numbering to finally obtain the target event handling function includes:
[0017] Based on the logical number, obtain the position corresponding to each candidate event handling function and the correspondence between each candidate event handling function and the target pagination attribute;
[0018] Based on the correspondence between each candidate event handling function and the target pagination attribute, obtain each candidate event handling function associated with the target pagination attribute;
[0019] Set each alternative event handler function associated with the target pagination attribute to its corresponding position, and obtain the target event handler function.
[0020] Preferably, configuring target business logic for each of the page subviews includes:
[0021] The target business logic corresponding to the page subview is obtained through the data processing layer, which is created based on the page subview and is used to complete the data request and logic processing of the page subview.
[0022] Preferably, there are multiple page subviews, and the step of assigning the target pagination attribute and the target event handling function to the abstract component in the page subview further includes:
[0023] Configure the lifecycle of each page subview so that each page subview has an independent lifecycle.
[0024] Preferably, setting the lifecycle of each page subview includes:
[0025] By inheriting the lifecycle interface of the page base class, the page subviews can obtain an independent lifecycle. The lifecycle interface includes lifecycle callback functions for the interface in multiple states in the operating system.
[0026] The lifecycle of the page subview is bound to the lifecycle of the target page, so that the operating system can invoke the lifecycle of the page subview through the target interface.
[0027] Preferably, the step of assigning the target pagination attribute and the target event handling function to the abstract component in the page subview further includes:
[0028] Render the UI interface corresponding to the page subview based on the UI display information corresponding to the page subview.
[0029] Secondly, embodiments of the present invention provide a pagination system based on element-UI, comprising:
[0030] The view module is used to obtain the page subviews contained in the target page based on the page layout information of the target page, wherein the page subviews include abstract components in the target page;
[0031] The logic module is used to obtain the business logic associated with the UI display information corresponding to the page subview, and configure the target business logic for each page subview.
[0032] The attribute module is used to obtain the logical input parameters and target pagination attributes corresponding to the page subview based on the target business logic corresponding to the page subview;
[0033] The calling module is used to call the logic implementation function in the public folder according to the logical input parameters corresponding to the page subview to obtain the target event handling function. The logic implementation function calls the relevant event handling function according to the logical input parameters to implement the target business logic. The event handling function includes the target pagination attribute.
[0034] The pagination module is used to assign target pagination attributes and target event handling functions to abstract components in the page subviews to implement pagination of the target page.
[0035] Thirdly, embodiments of the present invention provide a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described pagination method based on element-UI.
[0036] Fourthly, embodiments of the present invention provide a computer storage medium storing a computer program, which, when executed by a processor, implements the steps of the above-described pagination method based on element-UI.
[0037] This invention proposes a pagination method, system, device, and storage medium based on element-UI. First, based on the page layout information of the target page, page subviews are obtained. Then, based on the UI display information corresponding to the page subviews, the target business logic corresponding to the page subviews is obtained. Next, based on the event handling function information contained in the logic input function, the event handling functions to be called are obtained. The corresponding event handling functions are called through the logic implementation function in a common folder, thereby realizing the target business logic corresponding to the page subviews. This invention, by generalizing the event call logic, is not limited by business scenarios. It can be used almost immediately when implementing business functions, greatly saving pagination processing time. Furthermore, compared to secondary encapsulation of components, it does not lose the flexibility and scalability of the original UI components, and its practicality is higher. It effectively improves the robustness of the pagination method and can be applied to various business scenarios. Attached Figure Description
[0038] Figure 1 This is a schematic diagram illustrating an application scenario of a pagination method based on element-UI provided in an embodiment of the present invention.
[0039] Figure 2 A flowchart illustrating a pagination method based on element-UI provided in an embodiment of the present invention;
[0040] Figure 3 This is a flowchart illustrating how the target event handling function is obtained in an embodiment of the present invention;
[0041] Figure 4 This is a flowchart illustrating how the target event handling function is obtained by setting up the call relationship of alternative event handling functions according to logical numbers in an embodiment of the present invention.
[0042] Figure 5 This is a schematic diagram of the structure of a pagination system based on element-UI provided in an embodiment of the present invention;
[0043] Figure 6 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention.
[0044] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation
[0045] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application. It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit this application.
[0046] Figure 1 This is a schematic diagram illustrating an application scenario of a pagination method based on element-UI provided in an embodiment of the present invention, such as... Figure 1 As shown, the user enters the page layout information of the target page on the page provided by the client. After receiving the page layout information, the client sends the page layout information to the server. After receiving the page layout information, the server executes the pagination method based on element-UI to realize the pagination of the target page.
[0047] It should be noted that the server can be implemented using a standalone server or a server cluster consisting of multiple servers. The client can be a smartphone, tablet, laptop, desktop computer, etc., but is not limited to these. The client and server can connect via Bluetooth, USB (Universal Serial Bus), or other communication connection methods, which are not limited in this embodiment of the invention.
[0048] Current technologies encapsulate the logic and UI of a component into a single file, exposing only a few common properties and event handling methods. However, because the UI is also encapsulated internally, the encapsulated component lacks exposed properties and methods, preventing users from manipulating the original UI and rendering it unusable. Therefore, existing solutions for fast pagination either sacrifice flexibility and scalability or are essentially useless, lacking significant purpose. A more general solution is needed to simultaneously meet the requirements of flexibility, scalability, and adaptability to various business scenarios.
[0049] To make the solution more general, instead of encapsulating UI components, this invention provides a pagination method based on element-UI, which only generalizes the logic. Figure 2 A flowchart of a pagination method based on element-UI provided in an embodiment of the present invention is shown below. Figure 2 As shown, the method includes:
[0050] S210, based on the page layout information of the target page, obtain the page subviews contained in the target page, wherein the page subviews include abstract components in the target page;
[0051] First, based on the page layout information of the target page, we obtain the page subviews contained within the target page. The target page is the page that needs pagination. The interface elements in the target page can be abstracted into page subviews. The page layout information includes the interface elements and their layout. Page subviews can be coarse-grained abstract components within the target page. These reusable components significantly reduce the amount of code written and stored for identical page subviews, saving development costs. The page layout information includes the functional module information of the target page and all components included in each functional module. The functional module information includes which functional modules the target page includes. For example, if the target page is for purchasing car insurance, it can be divided into a search module, a login module, and a car insurance purchase module. Similarly, if the target page is for managing an online wallet and making online payments, it can be divided into a login module, a payment module, and a wealth management module, etc. The specific details can be determined based on the company's actual requirements. Therefore, the page layout diagram represents the functional modules within the target page. In this embodiment of the invention, the page subview includes all abstract components of the target page. Specifically, the page subview includes all abstract components of the corresponding functional module. If the target page is a webpage for purchasing car insurance, the page subview corresponding to the search module includes all abstract components corresponding to the search module, such as the search box component and the search button component; the page subview corresponding to the login module includes all abstract components corresponding to the login module, such as the login button, account / password text box, gender selection button, birthday selection dropdown, etc.; the car insurance purchase module includes a car insurance introduction button, a car insurance information display box, etc.
[0052] The smallest interface element in an operating system can be abstracted into a single page subview. For example, in the Android operating system, UI elements can be abstracted into a page subview. Each UI element can be treated as a coarse-grained abstract component, and each element can be used to construct a page subview. The constructed page subview has the functionality of the corresponding element, which can include logic processing and page display.
[0053] S220, based on the UI display information corresponding to the page subview, obtain the business logic associated with the UI display information, and configure the target business logic for each page subview;
[0054] Next, based on the UI display information corresponding to the page subview, the business logic associated with that UI display information is obtained, resulting in the target business logic for each page subview. In this embodiment, the UI display information refers to the content displayed on the target page that the user sees. Different types of target webpages can determine the specific UI display information based on actual needs. For example, taking a target webpage for purchasing car insurance as an example, the target webpage first includes a search module with a search box at the top for searching content related to the entered keywords. The target webpage also includes a login module with user login information in the upper right corner; after successful login, the user's avatar is displayed. The target webpage also includes a car insurance purchase module, and the homepage section introduces different types of car insurance, recommending currently popular car insurance in the middle. Each module on the target webpage can be considered a page subview, and the user behavior logic in the page indicator diagram is the target business logic corresponding to each page subview. For the login module, the target business logic corresponding to this page subview is: the user clicks the login component, then the login page is displayed, and the user's entered account and password are verified. If verification is successful, login is successful; otherwise, login fails. For the search module, the target business logic for this subview is: search based on input keywords and display insurance policies that meet the requirements. For the car insurance purchase module, the target business logic for its subview is: if a user clicks on a car insurance component, display all car insurance information for that category. The UI display information for the target pages will be determined based on the design requirements of the target pages. During the development process of the target pages, the developers will design the UI display information based on the functions of the target pages. For example, if the target page is the car insurance purchase webpage mentioned above, it can be designed to include three parts: a search module, a login module, and a car insurance purchase module, and the corresponding target business logic will be configured for each subview according to the above description.
[0055] S230, based on the target business logic corresponding to the page subview, obtain the logical input parameters and target pagination attributes corresponding to the page subview;
[0056] Then, based on the target business logic corresponding to the page subview, the logical input parameters and target pagination attributes corresponding to the page subview are obtained. In this embodiment of the invention, the logical input parameters are used to select the corresponding event handling function from all page event handling functions, so as to realize the corresponding module function.
[0057] In the specific implementation process, the logical input parameters in this embodiment of the invention may include a preset number corresponding to the event handling function. Based on this preset number, the corresponding event handling function can be retrieved from the element-UI library, allowing for appropriate combination of the retrieved event handling functions to finally obtain the target business logic that implements the corresponding module's function. Specifically, each event handling function in the element-UI library is numbered beforehand. Then, the preset number information in the logical input parameters is extracted, and the extracted number is compared in the element-UI library to extract the corresponding event handling function. This method finds the corresponding event handling function through the event number, requiring only one intermediate step, which simplifies the structure of the logical input parameters without reducing the amount of information contained. In the specific implementation process, the logical input parameters in this embodiment of the invention can also directly include the function ID directly corresponding to the event handling function. This way, when retrieving the corresponding event handling function, no intermediate step is needed; the corresponding event handling function can be found directly based on the function ID. Although this method directly includes the function ID in the logical input parameters, making the structure of the logical input parameters more complex, it allows for direct searching based on the function ID when looking up event handling functions, resulting in higher search efficiency.
[0058] It's important to note that event handlers are functions called in response to a specific event. They are primarily used to handle changes in the pagination attributes of the target page, re-fetching data and updating the page. Common event handlers include `handleCurrentPageChange` (handling changes to the current page) and `handlePageSizeChange` (handling changes to the number of items displayed per page). Target pagination attributes refer to the pagination properties of the target page. Common pagination attributes include `currentPage` (current page), `pageSize` (number of items displayed per page), and `total` (total number of items).
[0059] S240, according to the logical input parameters corresponding to the page subview, the logical implementation function in the public folder is called to obtain the target event handling function, wherein the logical implementation function calls the target event handling function according to the logical input parameters to implement the target business logic, and the target event handling function includes the target pagination attribute;
[0060] In this embodiment of the invention, a public folder is created, containing a logic implementation function. The input to this logic implementation function is the logic input parameter. Based on the information contained in the logic input parameter, the logic implementation function locates the corresponding event handling function, which is the target event handling function. This target event handling function is executed inside the logic implementation function to implement the target business logic corresponding to the relevant functional module. The target event handling function includes a target pagination attribute, used to call the corresponding function when the target pagination attribute changes.
[0061] S250, assign the target pagination attribute and target event handling function to the abstract component in the page subview to implement pagination of the target page.
[0062] Then, the target pagination attribute and target event handler function are assigned to the abstract component in the page's subview. This endows the component with the corresponding event handling capabilities. For example, clicking the search button will trigger the search event function and ultimately display the search results; clicking the login button will trigger the login event function, which will retrieve the user's entered username and password, and verify them. If correct, login is successful; otherwise, login fails. Through this assignment and association, the component can implement the corresponding module functionality when implementing the corresponding events in reality.
[0063] This invention provides a pagination method based on element-UI. First, based on the page layout information of the target page, subviews are obtained. Then, based on the UI display information corresponding to the subviews, the target business logic corresponding to the subviews is obtained. Next, based on the event handling function information contained in the logic input function, the event handling functions to be called are obtained. The corresponding event handling functions are called through the logic implementation function in the common folder, thereby realizing the target business logic corresponding to the subviews. This invention, by generalizing the event call logic, is not limited by business scenarios. It can be used almost immediately when implementing business functions, greatly saving pagination processing time. Furthermore, compared to secondary encapsulation of components, it does not lose the flexibility and scalability of the original UI components, and its practicality is higher. It effectively improves the robustness of the pagination method and can be applied to various business scenarios.
[0064] Based on the above embodiments, preferably, Figure 3 This is a flowchart illustrating how the target event handling function is obtained in an embodiment of the present invention, as shown below. Figure 3 As shown, the step of calling the logic implementation function in the public folder based on the logical input parameters corresponding to the page subview to obtain the target event handling function includes:
[0065] S310, parse the logical input parameters corresponding to the page sub-view to obtain the business sub-logic;
[0066] First, the logical input parameters corresponding to the page subviews are parsed to obtain the business sub-logic. This business sub-logic is the first step to set which pagination attribute, the second step to set, and the event handling function associated with each pagination attribute. This business sub-logic is the code execution logic.
[0067] S320, Based on the business sub-logic, obtain the alternative event handling function and logic number;
[0068] Then, based on the business sub-logic, candidate event handling functions and logic numbers are obtained. After obtaining the execution logic, all relevant event handling functions on that logic line can be selected. It's easy to understand that while the element-UI library contains many event handling functions, implementing the functionality of a specific logic module doesn't require all of them. Only the necessary event handling functions need to be selected; these selected functions are the candidate event handling functions. The relevant event handling functions on a logic line are the candidate event handling functions. By combining these candidate event handling functions in a certain order and according to logic, the target business logic can be achieved.
[0069] In this embodiment of the invention, each event handling function in element-UI is numbered in advance. Then, when designing the target page, the number corresponding to the required alternative event handling function is included in the logical input parameters. In this way, by parsing the logical input parameters, the number corresponding to the alternative event handling function can be obtained. In the public folder, the corresponding alternative event handling function can be found by searching in the element-UI library using the number corresponding to the alternative event handling function.
[0070] S330, associate the target pagination attribute with the candidate event handling function, and set the calling relationship of the candidate event handling function according to the logical number to finally obtain the target event handling function.
[0071] Associating a target pagination attribute with a candidate event handler function. For example, if the target pagination attribute is the current page, and one of the candidate event handler functions is a current page change handling function, then the target pagination attribute is associated with the input parameter of the candidate event handler function, thus obtaining the target event handler function. In this way, when the current page of the target page changes, the target event handler function can be used to adjust and adapt accordingly through the candidate event handler function.
[0072] Based on the above embodiments, preferably, Figure 4This is a flowchart illustrating how the target event handling function is obtained by setting up the call relationship of candidate event handling functions according to logical numbers in an embodiment of the present invention, such as... Figure 4 As shown, the step of setting the call relationship of the candidate event handling functions according to the logical numbering to finally obtain the target event handling function includes:
[0073] S410, based on the logical number, obtain the position corresponding to each candidate event handling function and the correspondence between each candidate event handling function and the target pagination attribute;
[0074] First, based on the logical number, we obtain each candidate event handler function, its position, and the correspondence between each candidate event handler function and the target pagination attribute. The position of each candidate event handler function can fully represent the execution order of the candidate event handler functions. It is easy to understand that, generally speaking, candidate event handler functions that are earlier in the order of execution are also earlier in the order of execution, and candidate event handler functions that are later in the order of execution are also later in the order of execution. Then, based on the correspondence between each candidate event handler function and the target pagination attribute, we can find the operation relationship between each target pagination attribute in the target page. Based on the operation relationship, we can extract the calling relationship between each candidate event handler function and the connection between them.
[0075] S420, based on the correspondence between each candidate event handling function and the target pagination attribute, obtain each candidate event handling function associated with the target pagination attribute;
[0076] Then, based on the correspondence between each candidate event handler function and the target pagination attribute, each target pagination attribute is associated with each candidate event handler function. For example, for the target pagination attribute of the current page, the target pagination attribute is associated with the current page change event handler function, and finally, each candidate event handler function associated with the target pagination attribute is obtained.
[0077] S430, set each alternative event handling function associated with the target pagination attribute to the corresponding position, and obtain the target event handling function.
[0078] Next, each alternative event handler associated with the target pagination property is set to its corresponding position to obtain the target event handler.
[0079] Based on the above embodiments, preferably, configuring the target business logic for each of the page subviews includes:
[0080] The target business logic corresponding to the page subview is obtained through the data processing layer, which is created based on the page subview and is used to complete the data request and logic processing of the page subview.
[0081] In practice, a data processing layer is first created, with one data processing layer corresponding to each page subview. This layer handles data requests and logic processing. A data processing layer is created simultaneously with the initialization of the page subview's UI. Within this layer, the page subview can process data requests from the network and retrieve network data. It can also execute the business logic corresponding to the page subview's functions, thus implementing the page subview's functionality.
[0082] Based on the above embodiments, preferably, the page subviews are multiple, and the step of assigning the target pagination attribute and the target event handling function to the abstract component in the page subview further includes:
[0083] Configure the lifecycle of each page subview so that each page subview has an independent lifecycle.
[0084] Specifically, the lifecycle of a page subview includes a series of state events from the start to the end of the page, as well as the invocation of corresponding lifecycle callback functions in different state events. For example, whenever a new page is entered or switched to, a lifecycle function is called to register the page, accepting an object type parameter to specify initial data, lifecycle callbacks, and event handling functions, etc. Similar to pages with lifecycles, page subviews with lifecycles can also have a series of state events from start to end, similar to the page's lifecycle, and the invocation of corresponding lifecycle callback functions in different state events. A page subview is independent in both logic and UI, possesses a lifecycle, and has complete page capabilities. A page subview can run within any page that needs it.
[0085] Based on the above embodiments, preferably, setting the lifecycle of each page subview includes:
[0086] By inheriting the lifecycle interface of the page base class, the page subviews can obtain an independent lifecycle. The lifecycle interface includes lifecycle callback functions for the interface in multiple states in the operating system.
[0087] The lifecycle of the page subview is bound to the lifecycle of the target page, so that the operating system can invoke the lifecycle of the page subview through the target interface.
[0088] Page subviews can inherit the lifecycle interface of the page base class, thus enabling them to have lifecycle callback functionality. The lifecycle interface includes lifecycle callback functions for various states of the interface in the operating system. For example, in Android, page lifecycle callback functions can be invoked when the page is created, launched, restarted, displayed, paused, stopped, destroyed, reused, or when the page gains or loses focus, etc.
[0089] By binding the lifecycle of a page's subview to the lifecycle of the target page, the operating system can call the lifecycle callback function of the view module to activate the lifecycle of the page's subview.
[0090] Based on the above embodiments, preferably, the step of assigning the target pagination attribute and the target event handling function to the abstract component in the page subview further includes:
[0091] Render the UI interface corresponding to the page subview based on the UI display information corresponding to the page subview.
[0092] Specifically, by using the UI display information corresponding to the subview of the page, the UI interface corresponding to the subview of the page is rendered. By rendering the view of the UI interface of the subview of the page arranged on the target page, the construction of the target page in terms of logic and UI interface is completed, and the target page is generated.
[0093] Figure 5 This is a schematic diagram of the structure of a pagination system based on element-UI provided in an embodiment of the present invention, as shown below. Figure 5 As shown, the system includes a view module 510, a logic module 520, an attribute module 530, a call module 540, and a pagination module 550, wherein:
[0094] The view module 510 is used to obtain the page subviews contained in the target page according to the page layout information of the target page, wherein the page subviews include abstract components in the target page;
[0095] The logic module 520 is used to obtain the business logic associated with the UI display information corresponding to the page subview, and configure the target business logic for each page subview respectively.
[0096] The attribute module 530 is used to obtain the logical input parameters and target pagination attributes corresponding to the page subview based on the target business logic corresponding to the page subview;
[0097] The calling module 540 is used to call the logic implementation function in the public folder according to the logical input parameters corresponding to the page subview to obtain the target event handling function. The logic implementation function calls the relevant event handling function according to the logical input parameters to implement the target business logic. The event handling function includes the target pagination attribute.
[0098] The pagination module 550 is used to assign the target pagination attributes and target event handling functions to the abstract components in the page subviews to implement pagination of the target page.
[0099] This embodiment is a system embodiment corresponding to the above method. Its specific implementation process is the same as that of the above method embodiment. For details, please refer to the above method embodiment. This system embodiment will not be described again here.
[0100] Based on the above embodiments, preferably, the calling module includes a parsing unit, a candidate unit, and an implementation unit, wherein:
[0101] The parsing unit is used to parse the logical input parameters corresponding to the page sub-views to obtain business sub-logic;
[0102] The alternative unit is used to obtain alternative event handling functions and logic numbers based on the business sub-logic;
[0103] The implementation unit is used to associate the target pagination attribute with the candidate event handling function, and set the calling relationship of the candidate event handling function according to the logical number, so as to finally obtain the target event handling function.
[0104] Based on the above embodiments, preferably, the implementation unit includes a corresponding subunit, an associated subunit, and a position subunit, wherein:
[0105] The corresponding sub-unit is used to obtain the position corresponding to each candidate event handling function and the correspondence between each candidate event handling function and the target pagination attribute according to the logical number.
[0106] The associated subunit is used to obtain each candidate event handling function associated with the target pagination attribute according to the correspondence between each candidate event handling function and the target pagination attribute;
[0107] The position subunit is used to set each candidate event handling function associated with the target pagination attribute to the corresponding position and obtain the target event handling function.
[0108] Based on the above embodiments, preferably, the logic module includes a data processing layer unit, wherein:
[0109] The data processing layer unit is used to obtain the target business logic corresponding to the page subview through the data processing layer. The data processing layer is created based on the page subview and is used to complete the data request and logic processing of the page subview.
[0110] Based on the above embodiments, preferably, the page subviews are multiple, and the pagination system further includes a lifecycle unit, wherein:
[0111] The lifecycle unit is used to set the lifecycle of each page subview so that each page subview has an independent lifecycle.
[0112] Based on the above embodiments, preferably, the lifecycle unit includes an inheritance subunit and a binding subunit, wherein:
[0113] The inherited sub-unit is used to inherit the lifecycle interface of the page base class through the page sub-view, so that the page sub-view obtains an independent lifecycle. The lifecycle interface includes lifecycle callback functions of the interface in multiple states in the operating system.
[0114] The binding subunit is used to bind the lifecycle of the page subview to the lifecycle of the target page, so that the operating system can call the lifecycle of the page subview through the target interface.
[0115] Based on the above embodiments, preferably, the pagination system further includes a display module, wherein:
[0116] The display module is used to render the UI interface corresponding to the page subview based on the UI display information corresponding to the page subview.
[0117] The modules in the element-UI-based paging system described above can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the computer device's memory as software, so that the processor can invoke and execute the corresponding operations of each module.
[0118] Figure 6 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. The computer device may be a server, and its internal structure diagram may be as follows: Figure 6As shown, the computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes a computer storage medium and internal memory. The computer storage medium stores the operating system, computer programs, and the database. The internal memory provides the environment for the operation of the operating system and computer programs in the computer storage medium. The database stores data generated or acquired during the execution of an element-UI-based paging method, such as page layout information and page subviews. The network interface is used to communicate with external terminals via a network connection. The computer program is executed by the processor to implement an element-UI-based paging method.
[0119] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps of a paging method based on element-UI as described in the above embodiment. Alternatively, when the processor executes the computer program, it implements the functions of each module / unit in this embodiment of a paging system based on element-UI.
[0120] In one embodiment, a computer storage medium is provided, on which a computer program is stored. When executed by a processor, the computer program implements the steps of a paging method based on element-UI as described in the above embodiment. Alternatively, when executed by a processor, the computer program implements the functions of each module / unit in this embodiment of a paging system based on element-UI.
[0121] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.
[0122] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.
[0123] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.
Claims
1. A pagination method based on element-UI, characterized in that, include: Based on the page layout information of the target page, obtain the page subviews contained in the target page, wherein the page subviews include abstract components in the target page; Based on the UI display information corresponding to the page subview, obtain the business logic associated with the UI display information, and configure the target business logic for each page subview. Based on the target business logic corresponding to the page subview, obtain the logical input parameters and target pagination attributes corresponding to the page subview; Based on the logical input parameters corresponding to the page subview, the logical implementation function in the public folder is called to obtain the target event handling function, including: The logical input parameters corresponding to the page subviews are parsed to obtain the business sub-logic; Based on the aforementioned business sub-logic, obtain the candidate event handling functions and logic numbers; The target pagination attribute is associated with the candidate event handling function, and the calling relationship of the candidate event handling function is set according to the logical number to finally obtain the target event handling function; The logic implementation function calls the target event handling function according to the logic input parameters to implement the target business logic, and the target event handling function includes the target pagination attribute; Assign the target pagination attribute and target event handler function to the abstract component in the page subview to implement pagination of the target page.
2. The pagination method based on element-UI according to claim 1, characterized in that, The step of setting the call relationship of the candidate event handling functions according to the logical numbering to finally obtain the target event handling function includes: Based on the logical number, obtain the position corresponding to each candidate event handling function and the correspondence between each candidate event handling function and the target pagination attribute; Based on the correspondence between each candidate event handling function and the target pagination attribute, obtain each candidate event handling function associated with the target pagination attribute; Set each alternative event handler function associated with the target pagination attribute to its corresponding position, and obtain the target event handler function.
3. The pagination method based on element-UI according to claim 1, characterized in that, The step of configuring target business logic for each of the page subviews includes: The target business logic corresponding to the page subview is obtained through the data processing layer, which is created based on the page subview and is used to complete the data request and logic processing of the page subview.
4. The pagination method based on element-UI according to claim 1, characterized in that, The page subviews are multiple, and the step of assigning the target pagination attribute and the target event handling function to the abstract component in the page subviews further includes: Configure the lifecycle of each page subview so that each page subview has an independent lifecycle.
5. The pagination method based on element-UI according to claim 4, characterized in that, The process of setting the lifecycle of each page subview includes: By inheriting the lifecycle interface of the page base class, the page subviews can obtain an independent lifecycle. The lifecycle interface includes lifecycle callback functions for the interface in multiple states in the operating system. The lifecycle of the page subview is bound to the lifecycle of the target page, so that the operating system can invoke the lifecycle of the page subview through the target page.
6. The pagination method based on element-UI according to any one of claims 1 to 5, characterized in that, The step of assigning the target pagination attribute and the target event handling function to the abstract component in the page subview further includes: Render the UI interface corresponding to the page subview based on the UI display information corresponding to the page subview.
7. A pagination system based on element-UI, implementing the pagination method based on element-UI as described in any one of claims 1 to 6, characterized in that, include: The view module is used to obtain the page subviews contained in the target page based on the page layout information of the target page, wherein the page subviews include abstract components in the target page; The logic module is used to obtain the business logic associated with the UI display information corresponding to the page subview, and configure the target business logic for each page subview. The attribute module is used to obtain the logical input parameters and target pagination attributes corresponding to the page subview based on the target business logic corresponding to the page subview; The calling module is used to call the logic implementation function in the public folder according to the logical input parameters corresponding to the page subview to obtain the target event handling function. The logic implementation function calls the relevant event handling function according to the logical input parameters to implement the target business logic. The event handling function includes the target pagination attribute. The pagination module is used to assign target pagination attributes and target event handling functions to abstract components in the page subviews to implement pagination of the target page.
8. A 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 computer program, it implements the steps of the element-UI-based pagination method as described in any one of claims 1 to 6.
9. A computer storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the element-UI-based pagination method as described in any one of claims 1 to 6.