Linkage switching method based on Web end detail list

Abstract

The invention relates to the field of Web end detail lists, and discloses a linkage switching method based on a Web end detail list, which comprises the following steps of: defining a PaginationManager class by using an object-oriented programming mode, and uniformly packaging an index, a page number and switching logic in a constructor function; the method comprises the following steps of: globally registering an instance object of a PaginationManager in a Vue application, and mounting the instance object of the PaginationManager in a Vue. Prototype; in a life cycle hook of the list page, calling a paginationManager method to initialize an index corresponding to the paging information and the current details; when a user clicks a detail button in the list, recording the current page number and index by calling a relevant method of paginationManager, and then skipping to a detail page; in the detail pages, the user clicks the previous page or the next page; in the list page, a paging event from the detail page is listened using a subscription mode. The method has the advantages of being low in code coupling and convenient to reuse.

Description

Technical Field

[0001] The present invention relates to the field of Web terminals, and in particular to a linkage switching method based on a Web terminal detail list. Background Art

[0002] With the development of Web technology, especially the popularity of single-page application frameworks such as Vue and React, developers can manage component states and data flows more efficiently. These frameworks make user interface updates smoother and more efficient through virtual DOM and responsive data binding. At the same time, the component design concept allows developers to split complex applications into independent, reusable modules, thereby improving the maintainability and readability of the code. Combined with modern routing management and state management tools such as VueRouter and Vuex, developers can easily achieve centralized state management and cross-component data sharing, greatly simplifying the application development process and logical architecture. However, when implementing the page turning and case switching functions, the logic code is mixed with the business code, resulting in excessive coupling, and Vuex stores switching-related variables, which makes the project difficult to maintain in the later stage and reduces the convenience of application in other projects. Therefore, it is necessary to design a linkage switching method based on the Web-side detail list with low code coupling and convenient reuse. Summary of the invention

[0003] 1. Technical issues to be resolved

[0004] In view of the deficiencies in the prior art, the present invention provides a linkage switching method based on a Web-side detail list, which has the advantages of low code coupling and convenient reuse, and solves the problems in the above-mentioned background technology.

[0005] (II) Technical solution

[0006] In order to achieve the above-mentioned purpose of low code coupling and convenient reuse, the present invention provides the following technical solution: a linkage switching method based on a Web-side detail list, comprising the following steps:

[0007] S1: Use object-oriented programming mode to define a PaginationManager class, and encapsulate the index, page number, and switching logic in the constructor;

[0008] Preferably, S1 further includes in the constructor of PaginationManager, initializing a state object including currentPage, currentIndex and totalPages attributes, creating an init(totalPages, initialPage, initialIndex) method to set the initial state value, creating a setPage(newPage) method to update the currentPage, and calling trigger('pageChange', {page: newPage}) when the value changes, notifying all related components, creating a setIndex(newIndex) method to update the currentIndex, and calling trigger('indexChange', {index: newIndex}) when the value changes, notifying related components, creating an on(eventName, callback) method to allow developers to register listeners for specific events and store them in an event dictionary, creating a trigger(eventName, data) method to traverse the registered callback functions and execute them, and calling the on method in the required component to register the callback function of the corresponding event.

[0009] S2: Register the instance object of PaginationManager globally in the Vue application and mount it to Vue.prototype;

[0010] Preferably, S2 further includes defining a PaginationManager class, including state management and event mechanism. In main.js, PaginationManager is instantiated, the instance object is mounted on the prototype of Vue through Vue.prototype, the init method is called to set the initial paging state, and the paging management function is accessed through this.$paginationManager in the required component, and the responsive system of Vue is used to realize automatic update of UI.

[0011] S3: In the lifecycle hook of the list page, call the $paginationManager method to initialize the paging information and the index corresponding to the current detail;

[0012] Preferably, the S3 further includes obtaining the total amount of data of the current page through an API call when the component is loaded, calling the fetchData method in the mounted hook to obtain the total amount of data, calling the $paginationManager.init method, using $paginationManager.subscribe to register a callback function, and implementing the data loading or updating logic in the callback function.

[0013] S4: When the user clicks the details button in the list, the current page number and index are recorded by calling the relevant methods of $paginationManager, and then jump to the details page;

[0014] Preferably, S4 further includes calling $paginationManager.setPage and $paginationManager.setIndex methods in the click event processing function, recording the current page number and index, using Vue Router's this.$router.push({name:'DetailPage',params:{id:itemId}}) method to jump to the detail page, passing the relevant detail data to the target page, implementing the corresponding logic in the detail page, and reading and displaying the stored page number and index information.

[0015] S5: On the detail page, the user clicks the previous page or the next page;

[0016] Preferably, S5 further includes calling a method of $paginationManager to determine whether the current item is the first or the last item. If not, the page number and index are updated, and a publishing event is triggered to inform the list page that a page turn has occurred. The getCurrentIndex() method is used to obtain the current index value, and the total number of pages is verified through the getTotalPages() method. If the current index is not within the boundary conditions, that is, it is neither the first nor the last item, the page number and index can be safely updated, and the setPage(newPage) and setIndex(newIndex) methods are called to make corresponding status adjustments, trigger a publishing event, and use trigger('pageChange',{page:newPage,index:newIndex}) to inform the list page that a page turn has occurred.

[0017] S6: In the list page, use the subscription mode to listen to the page publishing events from the detail page.

[0018] Preferably, S6 further includes, in the details page, listening to the click event of the page turning button, calling $paginationManager.next(), judging the current state and updating the number of pages and index, calling trigger('pageChange',{page:newPage,index:newIndex}), informing the list component to update the data, in the list component, by listening to the paging change event, re-acquiring and rendering the data of the current page, when the user returns to the list page, listening to the click event of the details button, calling the $paginationManager.reset() method, restoring the number of pages and index status to the initial value, and triggering the corresponding event.

[0019] (III) Beneficial effects

[0020] Compared with the prior art, the present invention provides a linkage switching method based on a Web-side detail list, which has the following beneficial effects:

[0021] The present invention defines a PaginationManager class by using an object-oriented programming mode, and uniformly encapsulates the index, page number and switching logic in a constructor; globally registers an instance object of PaginationManager in a Vue application, and mounts it in Vue.prototype; in the life cycle hook of the list page, calls the method of $paginationManager to initialize the paging information and the index corresponding to the current details; when a user clicks a detail button in the list, the current page number and index are recorded by calling the relevant method of $paginationManager, and then jumps to the detail page; in the detail page, the user clicks the previous page or the next page; in the list page, a subscription mode is used to monitor the page release event from the detail page, so that the logic code and the business code are mixed when realizing the page turning and case switching functions, resulting in excessive coupling, and the switching-related variables are stored in Vuex, which has the advantages of low code coupling and convenient reuse. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 Schematic diagram of the method of the present invention. DETAILED DESCRIPTION

[0023] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0024] Example 1

[0025] The present invention provides a technical solution: a linkage switching method based on a Web-side detail list, comprising the following steps:

[0026] S1: Use object-oriented programming mode to define a PaginationManager class, and encapsulate the index, page number, and switching logic in the constructor;

[0027] The constructor should initialize a state object, including properties such as the current page number, current index, and total number of pages, in order to manage paging information. It should provide methods such as init for setting the initial state, setPage and setIndex for updating the page number and index, and trigger corresponding events when the state changes to achieve interaction with other components. It should also add event mechanisms, such as the on method for registering event callbacks and the trigger method for triggering events, so that paging operations can be decoupled from other parts of the application. A reset function should be added to quickly restore to the default state when needed. This design can improve the maintainability and reusability of the code and ensure flexible use in different scenarios.

[0028] S2: Register the instance object of PaginationManager globally in the Vue application and mount it to Vue.prototype;

[0029] You need to create an instance of PaginationManager, which is responsible for managing the paging logic and state in the entire application. In this process, the instance is assigned through Vue.prototype to make it a globally accessible object. This design enables all components to call the PaginationManager method uniformly, thereby simplifying data sharing and state management across components. In the component's life cycle hook, such as created or mounted, developers can call the paginationManager.init(totalages, initialPage, initialIndex) method, which not only initializes the paging information, but also sets the current page and index to ensure that the component has the correct state when it is loaded. In order to achieve more flexible state management, developers can also use the paginationManager.subscrie(callback) method in this hook to register a callback function so that the component's view is automatically updated when the paging state changes. This design adopts the observer mode to ensure real-time communication between the list and detail pages, which helps to reduce code coupling and improve the maintainability and scalability of the system. This global management mode enables developers to be more efficient in subsequent functional expansion and improves the consistency and fluency of the user experience.

[0030] S3: In the lifecycle hook of the list page, call the $paginationManager method to initialize the paging information and the index corresponding to the current detail;

[0031] In the create or mounted hook, get the total amount of data on the current page, and set the initial state by calling the $paginationManager.init(totalPages, initialPage, initialIndex) method; register a callback function using $paginationManager.subscribe(callback) to update the component's data and view when the paging state changes; make sure to call the initialization method in time after the data is loaded to ensure that the component correctly displays the index and paging information of the current detail before user interaction. In this way, the list page can flexibly respond to paging changes, ensuring a smooth and consistent user experience.

[0032] S4: When the user clicks the details button in the list, the current page number and index are recorded by calling the relevant methods of $paginationManager, and then jump to the details page;

[0033] In the click event handler, call $paginationManager.setPage(currentPage) and $paginationManager.setIndex(currentIndex) methods to record the current page number and index to ensure that the user's navigation status is saved; use Vue Router's this.$router.push({name:'DetailPage',params:{id:itemId}}) method to jump to the detail page and pass the relevant detail data to the target page; ensure that the corresponding logic is implemented in the detail page to read and display the stored page number and index information so that the user can restore to the previous state when returning to the list page. In this way, the user experience is improved and the navigation process is smoother.

[0034] S5: On the detail page, the user clicks the previous page or the next page;

[0035] Call the $paginationManager method to determine whether the current item is the first or the last. If not, update the page number and index, and trigger a publishing event to inform the list page that a page turn has occurred. Use the getCurrentIndex() method to obtain the current index value, and verify the total number of pages through the getTotalPages() method. If the current index is not within the boundary conditions, that is, it is neither the first nor the last item, you can safely update the page number and index, call the setPage(newPage) and setIndex(newIndex) methods to make corresponding status adjustments, trigger a publishing event, and use trigger('pageChange',{page:newPage,index:newIndex}) to inform the list page that a page turn has occurred.

[0036] S6: In the list page, use the subscription mode to listen to the page publishing events from the detail page.

[0037] In the details page, listen for the click event of the page button, call $paginationManager.next(), determine the current state and update the number of pages and indexes, call trigger('pageChange',{page:newPage,index:newIndex}) to inform the list component to update the data. In the list component, listen for the paging change event to re-acquire and render the data of the current page. When the user returns to the list page, listen for the click event of the details button, call the $paginationManager.reset() method, restore the number of pages and index status to the initial value, and trigger the corresponding event.

[0038] Example 2

[0039] 1. Define the PaginationManager class

[0040] 1. Encapsulation constructor: Define the index, number of pages, and switching logic in the PaginationManager class to ensure that these properties and methods are centrally managed.

[0041] 2. Method design: including methods for initializing paging information, recording the current page and index, and logic for handling page switching.

[0042] 2. Globally register PaginationManager instance

[0043] 1. Create an instance: Create an instance of PaginationManager in the entry file of the Vue application.

[0044] 2. Mount to Vue.prototype: Mount the instance to Vue.prototype to make it available in all components.

[0045] 3. List Page Lifecycle Hook

[0046] 1. Initialize paging information: In the mounted or created lifecycle hook of the list page, call the $paginationManager method to initialize the paging information and the current index.

[0047] 2. Details button logic: Add click event processing for each details button, call the $paginationManager method to record the current page number and index, and jump to the page.

[0048] 4. Navigation of the details page

[0049] 1. Previous and next page buttons: Set the previous and next page buttons in the detail page and call the $paginationManager method to update the current page and index.

[0050] 5. Implementing a subscription model

[0051] 1. Event publishing: When the detail page operation is completed, use the event bus or other publish-subscribe mode mechanism to publish the page event.

[0052] 2. Listen for events: In the list page, use the corresponding mechanism to subscribe to the event and update the display of the list when the event is received.

[0053] 6. Testing and Adjustment

[0054] 1. Test interaction: Test the interaction between the list page and the detail page to ensure that the paging information is correctly transmitted and updated.

[0055] 2. Debugging: Make necessary adjustments based on user feedback and test results to optimize the user experience.

[0056] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0057] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A linkage switching method based on a Web-side detail list, characterized in that: The following steps are involved: S1: Use object-oriented programming mode to define a PaginationManager class, and encapsulate the index, page number, and switching logic in the constructor; S2: Register the instance object of PaginationManager globally in the Vue application and mount it to Vue.prototype; S3: In the lifecycle hook of the list page, call the $paginationManager method to initialize the paging information and the index corresponding to the current detail; S4: When the user clicks the details button in the list, the current page number and index are recorded by calling the relevant methods of $paginationManager, and then jump to the details page; S5: On the detail page, the user clicks the previous page or the next page; S6: In the list page, use the subscription mode to listen to the page publishing events from the detail page.

2. According to claim 1, a method for linkage switching based on a Web-side detail list is characterized in that: The S1 further includes in the constructor of PaginationManager, initializing a state object including currentPage, currentIndex and totalPages attributes, creating an init(totalPages, initialPage, initialIndex) method to set the initial state value, creating a setPage(newPage) method to update the currentPage, and calling trigger('pageChange', {page: newPage}) when the value changes, notifying all related components, creating a setIndex(newIndex) method to update the currentIndex, and calling trigger('indexChange', {index: newIndex}) when the value changes, notifying related components, creating an on(eventName, call back) method to allow developers to register listeners for specific events and store them in an event dictionary, creating a trigger(eventName, data) method to traverse the registered callback functions and execute them, and calling the on method in the required component to register the callback function of the corresponding event.

3. According to claim 1, a method for linkage switching based on a Web-side detail list is characterized in that: The S2 further includes defining a PaginationManager class, including state management and event mechanisms. In main.js, PaginationManager is instantiated, the instance object is mounted on the prototype of Vue through Vue.prototype, the init method is called to set the initial paging state, and the paging management function is accessed through this.$paginationManager in the required components, and the responsive system of Vue is used to realize automatic update of UI.

4. The method for linkage switching based on a Web-side detail list according to claim 1, characterized in that: The S3 further includes obtaining the total amount of data of the current page through an API call when the component is loaded, calling the fetchData method in the mounted hook to obtain the total amount of data, calling the $paginationManager.init method, using $paginationManager.subscribe to register a callback function, and implementing the data loading or updating logic in the callback function.

5. The method for linkage switching based on a Web-side detail list according to claim 1, characterized in that: The S4 further includes calling $paginationManager.setPage and $paginationManager.setIndex methods in the click event processing function, recording the current page number and index, using Vue Router's this.$router.push({name:'DetailPage',params:{id:itemId}}) method to jump to the detail page, passing the relevant detail data to the target page, implementing corresponding logic in the detail page, and reading and displaying the stored page number and index information.

6. A method for linkage switching based on a Web-side detail list according to claim 1, characterized in that: The S5 further includes calling the $paginationManager method to determine whether the current item is the first or the last item. If not, the page number and index are updated, and a publishing event is triggered to inform the list page that a page turn has occurred. The getCurrentIndex() method is used to obtain the current index value, and the total number of pages is verified through the getTotalPages() method. If the current index is not within the boundary conditions, that is, it is neither the first nor the last item, the page number and index can be safely updated, and the setPage(newPage) and setIndex(newIndex) methods are called to make corresponding status adjustments, trigger a publishing event, and use trigger('pageChange',{page:newPage,index:newIndex}) to inform the list page that a page turn has occurred.

7. The method for linkage switching based on a Web-side detail list according to claim 1, characterized in that: The S6 further includes, in the details page, listening to the click event of the page turning button, calling $paginationManager.next(), judging the current state and updating the number of pages and indexes, calling trigger('pageChange',{page:newPage,index:newIndex}), informing the list component to update the data, in the list component, by listening to the paging change event, re-acquiring and rendering the data of the current page, when the user returns to the list page, listening to the click event of the details button, calling the $paginationManager.reset() method, restoring the number of pages and index states to the initial values, and triggering the corresponding event.

Images