Method for realizing multi-page function based on single-page architecture, computer device and computer readable storage medium

Abstract

The application provides a method for realizing multi-page function based on single-page architecture, which comprises the following steps: displaying a page and displaying a current view on the page; receiving a label selected by a user on the current view, each label being configured with a routing value; obtaining a dom substructure corresponding to the routing value and a dom substructure corresponding to the current view; storing the dom substructure corresponding to the current view in a memory and removing the dom substructure corresponding to the current view from a dom structure corresponding to the page; adding the dom substructure corresponding to the routing value to the dom structure from which the dom substructure corresponding to the current view is removed; and displaying a view corresponding to the dom substructure corresponding to the routing value on the page. The application improves user experience.

Description

Technical Field

[0001] This invention relates to the field of financial technology, and in particular to a method for implementing multi-page functionality based on a single-page architecture, a computer-readable storage medium, and a computer device. Background Technology

[0002] Currently, most H5 front-end projects in the industry adopt a single-page architecture. The characteristics of a single-page architecture are a single entry point for each page, switching components is achieved by changing the hash value of the URL route, without involving page navigation. All visual changes, view creation and destruction, and memory management are completed within the same page. When developing backend management applications, target users and product managers often request the ability to open multiple pages simultaneously for easy switching between different pages. Because browser caching strategies do not isolate memory and scope in a single-page application, this functionality, which works well in traditional multi-page application architectures, becomes a challenge in single-page architectures. Summary of the Invention

[0003] In view of this, it is necessary to provide a method, computer storage medium, and computer device for implementing multi-page functions based on a single-page architecture that can improve user experience.

[0004] Firstly, this application provides a method for implementing multi-page functionality based on a single-page architecture. The method includes: displaying a page and showing a current view on the page; receiving a tag selected by a user on the current view, each tag being configured with a route value; obtaining the DOM substructure corresponding to the route value and the DOM substructure corresponding to the current view; storing the DOM substructure corresponding to the current view in memory and removing the DOM substructure corresponding to the current view from the DOM structure corresponding to the page; adding the DOM substructure corresponding to the route value to the DOM structure corresponding to the page from which the DOM substructure corresponding to the current view has been removed; and displaying the view corresponding to the DOM substructure corresponding to the route value on the page.

[0005] Secondly, this application provides a computer device for implementing multi-page functionality based on a single-page architecture, the computer device including a memory and a processor. The memory stores computer program instructions. The processor executes the computer program instructions to implement the method for implementing multi-page functionality based on a single-page architecture.

[0006] Thirdly, this application provides a computer-readable storage medium for storing program instructions that can be executed by a processor to implement the method for implementing multi-page functionality based on a single-page architecture.

[0007] This application first receives the user-selected tag, retrieves the corresponding DOM substructure based on the route configured for the tag, stores it in memory, then deletes the DOM substructure of the current view from the page's DOM tree structure, and mounts the tag's corresponding substructure into the page's DOM tree after deleting the current view's DOM substructure, thereby switching the view displayed on the current page. This application uses hot reloading during memory runtime, resulting in high speed and a better development experience for developers; route values ​​are stored in a route management center, allowing for custom data; and the saved data from previous pages is not lost when the user switches pages, enabling the use of multiple pages within a single-page architecture, thus improving the user experience. Attached Figure Description

[0008] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the structures shown in these drawings without creative effort.

[0009] Figure 1 This is a schematic diagram of the architecture of a system that implements multi-page functions based on a single-page architecture, as provided in an embodiment of this application.

[0010] Figure 2 This is a flowchart illustrating a method for implementing multi-page functionality based on a single-page architecture, as provided in an embodiment of this application.

[0011] Figure 3 This is another flowchart illustrating a method for implementing multi-page functionality based on a single-page architecture, provided as an embodiment of this application.

[0012] Figure 4 This is a schematic diagram of the internal structure of a server that implements multi-page functionality based on a single-page architecture, as provided in an embodiment of this application. Detailed Implementation

[0013] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.

[0014] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data are interchangeable where appropriate; in other words, the described embodiments are implemented according to an order other than that illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, may also include other content; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0015] It should be noted that the use of terms such as "first" and "second" in this application is for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, features defined with "first" and "second" may explicitly or implicitly include one or more of that feature. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. If the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed in this application.

[0016] This application provides a method for implementing multi-page functionality based on a single-page architecture, the method operating in a... Figure 1 The system shown implements multi-page functionality based on a single-page architecture. The system consists of a client 1 and a server 2. Client 1 displays the page and receives user actions on the page; server 2 receives and processes data sent by client 1; client 1 and server 2 communicate via network 3. The server can be a standalone server or a server cluster consisting of multiple servers.

[0017] Please refer to Figure 2 , Figure 2 This is a flowchart illustrating a method for implementing multi-page functionality based on a single-page architecture, as provided in an embodiment of this application. It includes steps S101-S106.

[0018] Step S101: Display the page and show the current view on the page.

[0019] When a user visits an app, the app displays a page on the client side, along with views for the user to browse. The app uses a single-page architecture, providing a single page. User interaction with the application is achieved by changing the views displayed on that page. For example, if the app is Taobao, the view could be a product introduction page.

[0020] Step S102: Receive the label selected by the user on the current view, each label is configured with a route value.

[0021] Each view displays several tags, such as a link to a piece of clothing or an image of a food item on a product page. Each tag has a corresponding DOM tree structure and is configured with a unique route value. The route value for each tag is stored in the route management center. The DOM tree structure is stored separately as a file on the server, not in the app file, allowing developers to customize the DOM tree data.

[0022] Step S103: Obtain the DOM substructure corresponding to the route value and the DOM substructure corresponding to the current view.

[0023] The routing management center obtains the routing value and retrieves the file corresponding to the tag based on a preset data dictionary. This file contains the DOM substructure corresponding to the tag. The data dictionary stores several routing values, each corresponding to a different DOM file. The routing value corresponding to the view currently displayed on the page is obtained, along with its corresponding DOM substructure. The page provided by the app is a large DOM tree structure, and the DOM substructure corresponding to the displayed view is a branch of this page's DOM tree structure.

[0024] Step S104: Store the DOM substructure corresponding to the current view in memory, and remove the DOM substructure corresponding to the current view from the DOM structure corresponding to the page.

[0025] The DOM substructure and DOM data corresponding to the current view are converted into JSON format. The JSON format data can be regarded as memory nodes and stored in the server's memory. The DOM substructure is then removed from the page DOM tree so that the current view is not displayed on the page. The DOM data includes DOM node attributes, view styles, etc.

[0026] Step S105: Add the DOM substructure corresponding to the route value to the DOM structure corresponding to the page where the DOM substructure corresponding to the current view has been removed.

[0027] The DOM substructure corresponding to the user-selected tag is placed in the page's DOM tree, and the DOM substructure corresponding to the tag is in the same position as the DOM tree corresponding to the view mentioned above.

[0028] Step S106: Display the view corresponding to the DOM substructure corresponding to the route value on the page.

[0029] Because the DOM tree of the page changes, the page view changes, and the new view displayed on the page is the view corresponding to the tag. For example, it would be the product details page for clothing.

[0030] When a user opens multiple views, memory nodes corresponding to those views are stored in memory, potentially leading to memory overflow. Each view displays a close icon, which corresponds one-to-one with a route value. When a user clicks the close icon, the route management center is triggered to delete the route value corresponding to that view and remove the corresponding DOM substructure from memory to remove the view from the page.

[0031] The page also displays simplified icons for several views, each corresponding to a route value. When a user clicks a simplified icon, the corresponding route value is retrieved, the DOM substructure corresponding to the route value is retrieved from memory, the current view is stored in memory, and the DOM substructure corresponding to the icon is mounted in the page DOM tree to display the view corresponding to the selected icon on the page.

[0032] Figure 3 This is another flowchart illustrating a method for implementing multi-page functionality based on a single-page architecture, provided in an embodiment of this application. It includes steps S201-S203.

[0033] Step S201: Listen for view navigation events on the page;

[0034] The jump event can be an automatic view jump when the page is scrolled to the bottom, and the server listens for jump events in the current view.

[0035] Step S202: When the view navigation event of the page occurs, obtain the pre-configured route value of the event;

[0036] When a redirection event is detected, the pre-configured route for the event is obtained, and the corresponding view file is retrieved.

[0037] Step S203: Obtain the DOM substructure corresponding to the route value and the DOM substructure corresponding to the current view;

[0038] The routing management center obtains the routing value and retrieves the file corresponding to the jump event based on a preset data dictionary. This file contains the DOM substructure corresponding to the jump event. The data dictionary stores several routing values, each corresponding to a different DOM file. The routing value corresponding to the view currently displayed on the page is obtained, along with its corresponding DOM substructure. The page provided by the app is a large DOM tree structure, and the DOM substructure corresponding to the displayed view is a branch of this page's DOM tree structure.

[0039] Step S204: Store the DOM substructure corresponding to the current view in memory, and remove the DOM substructure corresponding to the current view from the DOM structure corresponding to the page;

[0040] The DOM substructure and DOM data corresponding to the current view are converted into JSON format. The JSON format data can be regarded as memory nodes and stored in the server's memory. The DOM substructure is then removed from the page DOM tree so that the current view is not displayed on the page. The DOM data includes DOM node attributes, view styles, etc.

[0041] Step S205: Add the DOM substructure corresponding to the route value to the DOM structure corresponding to the page where the DOM substructure corresponding to the current view has been removed;

[0042] Place the DOM substructure corresponding to the jump event in the page DOM tree, and the DOM substructure corresponding to the event is in the same position in the DOM tree as the view mentioned above.

[0043] Step S206: Display the view corresponding to the DOM substructure corresponding to the route value on the page.

[0044] Please check Figure 4 This is a schematic diagram of the internal structure of a server that implements multi-page functionality based on a single-page architecture, as provided in an embodiment of this application. The server 200, which implements multi-page functionality based on a single-page architecture, is used for control. The computer device 200 includes a processor 201 and a memory 202. The processor 201 is used to execute an executable program to implement the method for implementing multi-page functionality based on a single-page architecture as provided in the above embodiment. The memory 202 is used to store the computer executable program and the system for implementing multi-page functionality based on a single-page architecture as provided in the above embodiment.

[0045] In some embodiments, the processor 201 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip, used to run a computer-executable program stored in the memory 202. Specifically, the processor 201 executes the executable program to implement the method for implementing multi-page functionality based on a single-page architecture provided in the above embodiments.

[0046] The memory 202 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 202 can be an internal storage unit of the computer device 200, such as the hard disk of the computer device 200. In other embodiments, the memory 202 can also be an external storage device of the computer device 200, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 200. Furthermore, the memory 202 can include both internal storage units and external storage devices of the computer device 200. The memory 202 can be used not only to store application software and various types of data installed on the computer device 200, such as code implementing a method for achieving multi-page functionality based on a single-page architecture, but also to temporarily store data that has been output or will be output, and modules of a system that implements multi-page functionality based on a single-page architecture.

[0047] Computer device 200 also includes bus 203. Bus 203 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. This bus can be divided into address bus, data bus, control bus, etc. For ease of representation,

[0048] Figure 4 The bus is represented by only one thick line, but this does not indicate that there is only one bus or one type of bus. Furthermore, the computer device 200 may also include a display component 204. The display component 204 may be an LED display, a liquid crystal display, a touch-screen liquid crystal display, or an OLED (Organic Light-Emitting Diode) touchscreen, etc. The display component 204 may also be appropriately referred to as a display device or display unit, used to display information processed in the computer device 200 and to display a visual user interface.

[0049] Furthermore, the computer device 200 may also include a communication component 205. The communication component 205 may optionally include a wired communication component and / or a wireless communication component (such as a Wi-Fi communication component, a Bluetooth communication component, etc.), which is typically used to establish a communication connection between the computer device 200 and other computer devices.

[0050] Figure 4 Only a computer device 200 with some components and a method for implementing multi-page functionality based on a single-page architecture is shown. Those skilled in the art will understand that... Figure 4 The structure shown does not constitute a limitation on the computer device 200, and may include fewer or more components than shown, or combine certain components, or have different component arrangements.

[0051] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product.

[0052] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to embodiments of the present invention is generated. The computer device may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a server or data center that integrates one or more available media. The available medium may be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., a solid-state disk (SSD)).

[0053] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0054] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between devices or units through some interfaces, and may be electrical, mechanical, or other forms.

[0055] The unit described as a separate component may or may not be physically separate. The component shown as a unit may or may not be a physical unit; that is, it may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0056] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0057] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard disks, read-only storage media (ROM), random access storage media (RAM), magnetic disks, or optical disks.

[0058] It should be noted that the sequence numbers of the above embodiments of the present invention are merely for descriptive purposes and do not represent the superiority or inferiority of the embodiments. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, apparatus, article, or method 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, apparatus, article, or method. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, apparatus, article, or method that includes that element.

[0059] The above are merely preferred embodiments of the present invention and do not limit the scope of the patent. Any equivalent structural or procedural transformations made based on the description and drawings of the present invention, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of the present invention.

Claims

1. A method for implementing multi-page functionality based on a single-page architecture, characterized in that, The method includes: Display the page and show the current view on the page; Receive the label selected by the user on the current view, each label is configured with a route value; Obtain the DOM substructure corresponding to the route value and the DOM substructure corresponding to the current view; Store the DOM substructure corresponding to the current view in memory, and remove the DOM substructure corresponding to the current view from the DOM structure corresponding to the page; Add the DOM substructure corresponding to the route value to the DOM structure corresponding to the page where the DOM substructure corresponding to the current view has been removed; The view corresponding to the DOM substructure of the route value is displayed on the page. The page provided by the APP is a large DOM tree structure. The DOM substructure corresponding to the current view is a branch of the page DOM tree structure. The DOM substructure corresponding to the tag selected by the user on the current view is placed in the page DOM tree. When the page DOM tree changes, the page view changes, and the new view displayed on the page is the view corresponding to the tag.

2. The method for implementing multi-page functionality based on a single-page architecture as described in claim 1, characterized in that, The step of obtaining the DOM substructure corresponding to the route value includes: The DOM substructure corresponding to the route value is obtained from a preset data dictionary. The preset data dictionary stores several route values, and each route value corresponds to a different DOM substructure.

3. The method for implementing multi-page functionality based on a single-page architecture as described in claim 2, characterized in that... The DOM substructure is stored separately on the server as a file.

4. The method for implementing multi-page functionality based on a single-page architecture as described in claim 2, characterized in that, The method further includes: The DOM substructure corresponding to the route value and the DOM substructure corresponding to the current view are in the same position in the DOM structure of the page.

5. The method for implementing multi-page functionality based on a single-page architecture as described in claim 2, characterized in that, Storing the DOM substructure corresponding to the current view in memory includes: Convert the DOM substructure corresponding to the current view into JSON format data to obtain several memory nodes; The aforementioned memory nodes are stored in memory.

6. The method for implementing multi-page functionality based on a single-page architecture as described in claim 2, characterized in that... The route values ​​corresponding to each view are stored in the route management center. The method also includes: When a user clicks the close icon on the view, the routing management center is triggered to delete the route value corresponding to the view and delete the DOM substructure corresponding to the route value in memory. Each view displays a close icon.

7. The method for implementing multi-page functionality based on a single-page architecture as described in claim 2, characterized in that, The method further includes: Listen for view navigation events on the page; When a view navigation event occurs on the page, retrieve the pre-configured route value for the event; Obtain the DOM substructure corresponding to the route value and the DOM substructure corresponding to the current view; Store the DOM substructure corresponding to the current view in memory, and remove the DOM substructure corresponding to the current view from the DOM structure corresponding to the page; Add the DOM substructure corresponding to the route value to the DOM structure corresponding to the page where the DOM substructure corresponding to the current view has been removed; The view corresponding to the DOM substructure of the route value is displayed on the page.

8. The method for implementing multi-page functionality based on a single-page architecture as described in claim 2, characterized in that... The method further includes displaying simplified icons for several views on the page: When a user selects a simplified icon on the page, the view corresponding to the simplified icon is displayed on the page.

9. A computer device that implements multi-page functionality based on a single-page architecture, characterized in that, The computer device includes: Memory is used to store computer program instructions; A processor for executing the computer program instructions to implement the method for implementing multi-page functionality based on a single-page architecture as described in any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store program instructions that can be executed by a processor to implement the method for implementing multi-page functionality based on a single-page architecture as described in any one of claims 1 to 8.

Images