Front-end data processing method and device, equipment, storage medium and program product

Abstract

The invention provides a front-end data processing method and device, equipment, a storage medium and a program product, and relates to the technical field of computers. The method comprises the following steps: in response to a request for displaying a target interface for a target user accessing a menu system, obtaining a target front-end technology stack type corresponding to the target user; using a target loading module corresponding to the target front-end technology stack type to obtain version information of a menu frame adopted for displaying the target interface for the target user, and using the target loading module to load the menu frame of the corresponding version and the target front-end technology stack type according to the version information to display the target interface for the target user. According to the method, compatibility of menu systems of various versions and various front-end technology stack types is realized.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a front-end data processing method, device, electronic device, computer-readable storage medium, and computer program product. Background Art

[0002] The front-end web pages of application platforms typically interact with users through menu interfaces. For example, the menu system of an e-commerce platform plays a crucial role in the entire website or application, serving as one of the primary entry points for user interaction with the system. E-commerce platform websites require the coexistence of multiple technology stacks and multiple versions of menu systems. Therefore, providing a compatible solution for these multiple technology stacks and multiple versions has become a pressing issue.

[0003] The above information disclosed in this Background section is only for enhancement of understanding of the background of the present disclosure and therefore it may contain information that does not form the prior art that is already known to a person of ordinary skill in the art. Summary of the Invention

[0004] The purpose of the present disclosure is to provide a front-end data processing method, device, electronic device, readable storage medium and program product, which can achieve compatibility of multiple technology stacks and multiple versions of menu systems.

[0005] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by practice of the present disclosure.

[0006] According to one aspect of the present disclosure, a front-end data processing method is provided, comprising: in response to a request to display a target interface for a target user accessing a menu system, obtaining a target front-end technology stack type corresponding to the target user; utilizing a target loading module corresponding to the target front-end technology stack type to obtain version information of a menu framework used to display the target interface for the target user; utilizing the target loading module to load a corresponding version of a menu framework of the target front-end technology stack type according to the version information, so as to display the target interface for the target user.

[0007] According to one embodiment of the present disclosure, the version information includes current version information; a target loading module corresponding to the target front-end technology stack type is used to obtain version information of a menu framework used to display the target interface to the target user, including: using the target loading module to obtain the current version information of the menu framework currently used to display the target interface to the target user through an interface; using the target loading module to load a corresponding version of a menu framework of the target front-end technology stack type according to the version information to display the target interface to the target user, including: using the target loading module to load a corresponding version of a menu framework of the target front-end technology stack type according to the current version information.

[0008] According to one embodiment of the present disclosure, the method also includes: storing the current version information in the target user's access record for the menu system; using a target loading module corresponding to the target front-end technology stack type to obtain the version information of the menu framework used to display the target interface to the target user, and also includes: using the target loading module to obtain the current version information from the target user's access record for the menu system.

[0009] According to one embodiment of the present disclosure, the target loading module is used to load the menu framework of the corresponding version of the target front-end technology stack type according to the version information to display the target interface to the target user, and also includes: obtaining menu configuration information from the back-end server according to the current version information; rendering based on the loaded menu framework according to the menu configuration information, and displaying the rendered target interface to the target user.

[0010] According to one embodiment of the present disclosure, the version information includes historical version information; a target loading module corresponding to the target front-end technology stack type is used to obtain version information of a menu framework used to display the target interface to the target user, including: using the target loading module to obtain the historical version information from the target user's access record to the menu system; using the target loading module to load a corresponding version of a menu framework of the target front-end technology stack type according to the version information to display the target interface to the target user, including: using the target loading module to load a corresponding version of a menu framework of the target front-end technology stack type according to the historical version information.

[0011] According to one embodiment of the present disclosure, the method also includes: determining whether it is possible to obtain the current version information of the menu frame currently used to display the target interface to the target user through the interface; if the current version information cannot be obtained through the interface, obtaining the comprehensive auxiliary navigation menu configuration information in the menu frames of multiple versions of the target interface, and obtaining the business link navigation menu configuration information from the front-end cache corresponding to the target user; rendering based on the loaded menu frame according to the comprehensive auxiliary navigation menu configuration information and the business link navigation menu configuration information, and displaying the rendered target interface to the target user.

[0012] According to one embodiment of the present disclosure, the target loading module is used to load a menu frame of a corresponding version and a type of the target front-end technology stack according to the version information, so as to display the target interface for the target user, including: using the target loading module to load a menu frame of a corresponding version and a type of the target front-end technology stack according to a page link corresponding to the version information; determining whether the page link includes a query parameter indicating the use of a user style; if it is determined that the page link includes a query parameter indicating the use of a user style, then loading a style patch corresponding to the user style on the basis of the loaded menu frame, so as to display the target interface for the target user.

[0013] According to one embodiment of the present disclosure, the target loading module is used to load the corresponding version of the menu framework of the target front-end technology stack type according to the version information, including: using the target loading module to obtain the menu framework file of the target front-end technology stack type corresponding to the version information from the menu framework files of multiple versions and multiple front-end technology stack types according to the file directory; running the menu framework file of the target front-end technology stack type corresponding to the version information to load the corresponding menu framework.

[0014] According to one embodiment of the present disclosure, the method also includes: creating a target component based on a progressive scripting language framework; marking the custom element tag of the network component for the target component; and using a front-end construction tool to package the target component marked with the custom element tag of the network component to obtain the menu framework files of the multiple versions and multiple front-end technology stack types.

[0015] According to another aspect of the present disclosure, a front-end data processing device is provided, including: a first acquisition module, used to obtain a target front-end technology stack type corresponding to a target user who accesses a menu system in response to a request to display a target interface for the target user; a second acquisition module, used to use a target loading module corresponding to the target front-end technology stack type to obtain version information of a menu framework used to display the target interface for the target user; and a loading module, used to use the target loading module to load a corresponding version of the menu framework of the target front-end technology stack type according to the version information, so as to display the target interface for the target user.

[0016] According to another aspect of the present disclosure, an electronic device is provided, comprising: a memory, a processor, and executable instructions stored in the memory and executable in the processor, wherein the processor implements any of the above methods when executing the executable instructions.

[0017] According to another aspect of the present disclosure, a computer-readable storage medium is provided, on which computer-executable instructions are stored. When the executable instructions are executed by a processor, any of the above methods is implemented.

[0018] The present disclosure provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various optional implementations described above.

[0019] The front-end data processing method provided by the embodiments of the present disclosure obtains the target front-end technology stack type corresponding to the target user in response to a request to display the target interface for the target user accessing the menu system, and then uses the target loading module corresponding to the target front-end technology stack type to obtain the version information of the menu framework used to display the target interface for the target user, and then uses the target loading module to load the menu framework of the corresponding version and target front-end technology stack type according to the version information to display the target interface for the target user, thereby achieving compatibility of menu systems with multiple versions and multiple front-end technology stack types.

[0020] It should be understood that the foregoing general description and the following detailed description are exemplary only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] The above and other objects, features and advantages of the present disclosure will become more apparent by describing in detail example embodiments thereof with reference to the attached drawings.

[0022] Figure 1A schematic diagram showing a system structure in an embodiment of the present disclosure.

[0023] Figure 2 The figure is a flowchart showing a component development and packaging method according to an exemplary embodiment.

[0024] Figure 3 is based on Figure 2 A schematic diagram of an exemplary component development and packaging process is shown.

[0025] Figure 4 is based on Figure 2 or Figure 3 A flowchart of a method for loading framework files of different versions is shown.

[0026] Figure 5 A flow chart of a front-end data processing method in an embodiment of the present disclosure is shown.

[0027] Figure 6 Shown Figure 5 FIG. 5 is a schematic diagram of the processing process of step S504 and step S506 in one embodiment.

[0028] Figure 7 Shown Figure 5 FIG. 5 is a schematic diagram of the processing process of step S504 and step S506 in one embodiment.

[0029] Figure 8 Shown Figure 5 FIG. 5 is a schematic diagram of the processing process of step S506 in one embodiment.

[0030] Figure 9 is based on Figures 5 to 8 A schematic diagram of an exemplary process of loading a menu framework is shown.

[0031] Figure 10 Shown Figure 5 FIG. 5 is a schematic diagram of the processing process of step S506 in another embodiment.

[0032] Figure 11 according to Figure 5 A flowchart of a page rendering method is exemplarily shown.

[0033] Figure 12 is based on Figure 5 、 Figure 10 and Figure 11 An exemplary method for displaying menu system pages is shown.

[0034] Figure 13 is based on Figures 2 to 12 A front-end technical architecture diagram of a new version of the menu framework of a menu system is shown.

[0035] Figure 14 is based on Figures 2 to 12 A web technology architecture diagram of a new version of the menu framework of a menu system is shown.

[0036] Figure 15 A block diagram of a front-end data processing device in an embodiment of the present disclosure is shown.

[0037] Figure 16 A block diagram of another front-end data processing device in an embodiment of the present disclosure is shown.

[0038] Figure 17 A schematic structural diagram of an electronic device in an embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0039] Example embodiments will now be described more fully with reference to the accompanying drawings. However, the example embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these examples are provided so that this disclosure will be more comprehensive and complete and will fully convey the concepts of the example embodiments to those skilled in the art. The accompanying drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. Identical reference numerals in the figures indicate identical or similar parts, and thus repeated descriptions thereof will be omitted.

[0040] In addition, the described features, structures or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or other methods, devices, steps, etc. may be adopted. In other cases, well-known structures, methods, devices, implementations or operations are not shown or described in detail to avoid obscuring various aspects of the present disclosure.

[0041] Furthermore, the terms "first," "second," and the like are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of the technical features being referred to. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of such features. In the description of this disclosure, "plurality" means at least two, such as two, three, etc., unless otherwise specifically defined. The symbol " / " generally indicates an "or" relationship between the preceding and following objects.

[0042] In this disclosure, unless otherwise specified or limited, terms such as "connected" should be interpreted broadly. For example, they can mean electrically connected or capable of mutual communication; they can be directly connected or indirectly connected through an intermediary. Those skilled in the art will understand the specific meanings of these terms in this disclosure based on specific circumstances.

[0043] The following explains the terms involved in the embodiments of the present disclosure.

[0044] Front-end framework: A JavaScript framework used to build interactive front-end interfaces. Commonly used frameworks include Vue, React, Vanilla, and other technology stack types. These frameworks use a component-based development approach to build complex applications by combining various components.

[0045] Web components: A component-based approach for creating reusable custom HTML (Hypertext Markup Language) elements, natively supported by browsers. Web components primarily consist of three technologies:

[0046] Custom elements: A set of JavaScript APIs (Application Programming Interfaces) that allow you to define elements and their behavior, and then use them as needed in the user interface. For example, you can use the CustomElementRegistry.define() method to register a new custom element, passing it the name of the element to define, a class that specifies the element's functionality, and optionally, an element to inherit from.

[0047] In the constructor of a custom element, you can specify multiple callback functions that will be called at different stages of the element's lifecycle:

[0048] · connectedCallback: called when the custom element is first inserted into the document DOM;

[0049] · disconnectedCallback: called when the custom element is removed from the document DOM;

[0050] · adoptedCallback: Called when the custom element is moved to a new document;

[0051] · attributeChangedCallback: Called when a custom element adds, deletes, or modifies its own attributes.

[0052] Shadow DOM: A set of JavaScript APIs for attaching encapsulated shadow DOM trees to elements (rendered separately from the main document DOM) and controlling their associated functionality. In this way, the functionality of an element can be kept private so that they can be scripted and styled without worrying about conflicting with other parts of the document. For example, a shadow DOM can be attached to a custom element using the Element.attachShadow() method.

[0053] HTML templates: Utilize <template>(template) and <slot>(Slot) elements can be used to write markup templates that are not displayed in the rendered page. They can then be reused multiple times as the basis for custom element structures.

[0054] As mentioned above, there is a need for multiple technology stacks and multiple versions of menu systems to coexist on the web pages of e-commerce platforms. For example, during the update process of large or super-large projects such as e-commerce management platforms and operation platforms, many related systems will be connected to the old version. However, due to the large number of pages involved, it is impossible to upgrade all pages to the new version. Therefore, a compatibility solution is needed for the old and new versions of the menu framework. For this complex scenario of multi-technology stack compatibility of the menu framework, the following two methods are commonly used to achieve multi-version compatibility:

[0055] 1) Multiple Versions Coexist in the Same File: Loading logic for multiple versions of files is placed in a single file, allowing unified access and on-demand display. This solves the problem of multiple versions needing to coexist, reduces code duplication, and makes maintenance easier. When updating, modifying, or adding new features to a menu, operations can be performed in a single location, avoiding the need to make the same changes in multiple files. This allows for better version control, ensuring that changes across different versions can be tracked and managed.

[0056] 2) Versions are stored in separate files and loaded as needed. Different menu versions are stored in separate files, which allows for clearer and more separated code structure. Each menu version has its own file, making it easier to maintain and manage, and reducing the risk of modifying one version affecting others. The isolation of different files reduces conflicts and unexpected changes. It makes it easier to understand the logic and functionality of each version, improving code readability. This reduces loading time and memory usage at application startup, thereby improving application performance.

[0057] Related technologies Regarding menu system maintenance and use, both methods have their own problems:

[0058] 1) Multiple versions coexist in the same file: When the number of menus with multiple versions gradually increases, the file may become complicated and difficult to read and understand. Especially when there are a lot of differences between menus, it may take more time to locate and process the code of a specific version. If there are large differences between different versions of menus, conflicts are likely to occur. Modifying one version may affect other versions, and careful testing is required to avoid adverse effects. Putting multiple versions of menus in the same file may reduce the readability of the code, making it difficult for developers to understand the logic between different versions. When running files corresponding to different versions, the maintenance problem is solved by loading and introducing them as needed, but it also brings the problem of extended loading time to users. It is necessary to first determine which framework the user belongs to, and then load the file on demand, which will greatly extend the time.

[0059] 2) Versions are stored in separate files and loaded as needed; managing multiple files can be complex. This approach requires ensuring that file naming and paths clearly represent the menu contents of different versions to avoid confusion and errors, and may lead to code duplication. This approach requires careful design and implementation to avoid rewriting similar code. Furthermore, versions stored in separate files may require a more complex version control strategy to ensure that changes to each version are properly managed and recorded.

[0060] Therefore, the present disclosure provides a front-end data processing method, which obtains the target front-end technology stack type corresponding to the target user in response to a request to display the target interface for the target user accessing the menu system, and then uses the target loading module corresponding to the target front-end technology stack type to obtain the version information of the menu framework used to display the target interface for the target user, and then uses the target loading module to load the corresponding version of the menu framework of the target front-end technology stack type according to the version information to display the target interface for the target user, thereby achieving compatibility of menu systems with multiple versions and multiple front-end technology stack types.

[0061] Figure 1 An exemplary system architecture 10 is shown to which the front-end data processing method or front-end data processing device of the present disclosure can be applied.

[0062] like Figure 1 As shown, system architecture 10 may include terminal device 102, network 104, and server 106. Terminal device 102 may be any electronic device with a display screen and support input and output, including but not limited to smartphones, tablet computers, laptop computers, desktop computers, wearable devices, virtual reality devices, smart homes, etc. Network 104 is a medium for providing a communication link between terminal device 102 and server 106. Network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables, etc. Server 106 may be a server or server cluster that provides various services, such as a front-end server, a back-end server, a database server, etc.

[0063] A user can use the terminal device 102 to interact with the server 106 via the network 104 to receive or send data, etc. For example, a user can operate on the terminal device 102 and request access to the menu system. In response to the request, the terminal device 102 prepares to display a target interface for the target user accessing the menu system, obtains the target front-end technology stack type corresponding to the target user, and then uses the target loading module corresponding to the target front-end technology stack type to obtain the version information of the menu framework used to display the target interface for the target user. The target loading module is then used to communicate with the server 106 via the network 104 and load the corresponding version of the menu framework of the target front-end technology stack type based on the framework component library in the server 106 according to the version information. The terminal device 102 can also obtain configuration information from the server 106 via the network 104, render the loaded menu framework, and display the target interface for the target user on the terminal device 102.

[0064] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0065] Figure 2 FIG. 1 is a flow chart showing a component development and packaging method according to an exemplary embodiment. Figure 2 The method shown can be applied to the front-end server in the above-mentioned system architecture 10, for example, and can also be applied to the terminal device in the above-mentioned system architecture 10.

[0066] refer to Figure 2 , the method 20 provided in the embodiment of the present disclosure may include the following steps.

[0067] In step S202 , a target component based on a progressive scripting language framework is created.

[0068] In some embodiments, the progressive scripting language framework can be Vue and / or element-plus, which can realize rapid component development, wherein the Vue3 version of the language framework can be used to develop components. For examples of target components, please refer to Figure 13 and Figure 14 .

[0069] In step S204 , a custom element tag of the network component is marked for the target component.

[0070] In some embodiments, a Vue3 component can be translated into a web component component, for example, by marking the Vue3 component with a custom element tag of a web component through the custom element definition method customElements.define.

[0071] In step S206, the target component marked with the custom element tag of the network component is packaged using a front-end construction tool to obtain menu framework files of multiple versions and multiple front-end technology stack types.

[0072] In some embodiments, the Vite packaging tool can be used to package components marked with the web components tag. Both the component library components and the development components are tagged with the web components tag. The shadowRoot sandbox feature of web components can make the packaged product compatible with technology stack types such as Vue, React, and Vanilla.

[0073] In other embodiments, a webpack packaging tool may be used to package components marked with a web components tag into a micro front-end sub-application page.

[0074] Figure 3 is based on Figure 2 An exemplary component development and packaging process diagram is shown in FIG. Figure 3 As shown, the component development and packaging process may include the following steps S302 to S3064.

[0075] Step S302, development: Vue3 version language framework (abbreviated as Vue3) 3002 and / or element-plus 3004 can be used to quickly develop components.

[0076] Step S304: Mark the component developed by Vue3 with the web components tag using the web components method.

[0077] Step S306: Packaging. Vite 3006 and / or webpack 3008 can be used for packaging.

[0078] In step S3062, Vite 3006 is used to package and compile the components of the component library and the development components into components with the webcomponents tag. The packaged product 3010 is compatible with technology stack types such as Vue, React, and Vanilla.

[0079] Step S3064: Package the content into a micro front-end sub-application page through webpack, and package the content into a micro front-end sub-application 3012.

[0080] According to the method provided in the embodiments of the present disclosure, a menu framework is quickly developed by adopting the Vue3+element-plus development method, and the Vite+web components technical method is used to ultimately package the Vue3 code into a component package marked with a custom tag of webcomponents, thereby reducing code development and maintenance costs while achieving compatibility with multiple front-end technology stacks.

[0081] Figure 4 is based on Figure 2 or Figure 3 A flowchart showing a method for loading different versions of framework files. Figure 4 , the method 40 provided in the embodiment of the present disclosure may include the following steps.

[0082] In step S402, a target loading module is used to obtain a menu framework file of a target front-end technology stack type and a version corresponding to the version information from menu framework files of multiple versions and multiple front-end technology stack types according to a file directory.

[0083] In some embodiments, the Figure 2 or Figure 3 The method shown is developed and packaged into files of multiple technology stack types and multiple versions. After resolving file conflicts, all versions of the menu framework files are placed in the same file directory, and different versions of the files are named and distinguished.

[0084] In step S404, a menu framework file of a target front-end technology stack type and a version corresponding to the version information is run to load a corresponding menu framework.

[0085] According to the method provided by the embodiment of the present disclosure, by placing all versions of menu framework files in a directory file and loading and introducing them as needed, the code structure can be made more clearly separated, easier to maintain and manage, and the risk of affecting other versions due to modification of one version is reduced. It is easier to understand the logic and functions of each version, and compared with saving the same file for different versions, the readability of the code is improved, and the loading time and memory usage when the application is started are reduced, thereby improving the performance of the application.

[0086] Figure 5 FIG. 1 is a flow chart showing a front-end data processing method according to an exemplary embodiment. Figure 5 The method shown can be applied to the front-end server in the above system, or to the terminal device of the above system, by running a loader thereon.

[0087] refer to Figure 5 , the method 50 provided in the embodiment of the present disclosure may include the following steps.

[0088] In step S502, in response to a request to display a target interface for a target user accessing a menu system, a target front-end technology stack type corresponding to the target user is obtained.

[0089] In some embodiments, the menu system can be, for example, a system for interacting with an application platform such as an e-commerce platform through a menu interface. When a user accesses the menu system, he or she can first log in to the account he or she has created. The target user can be a user with an account ID. For an e-commerce platform, the user can be a merchant. The target interface can be a menu navigation interface of an e-commerce application, through which the user can implement various functions of interacting with the system. For an example of a menu navigation interface, see Figure 13 and Figure 14 .

[0090] In some embodiments, the target user may have accessed an old version of the target interface when logging into the menu system before, and users who access different versions of the blacklist and whitelist can be marked. For example, the technology stack type of the currently available version can be determined based on the label marked for the target user.

[0091] In other embodiments, the versions that most users need to display do not need to be labeled, and grayscale logic can be used to determine the versions to be displayed to target users, where the grayscale logic can, for example, display grayscale versions (old versions) and new versions of recommended technology stack types in a certain proportion.

[0092] In step S504, the target loading module corresponding to the target front-end technology stack type is used to obtain version information of the menu framework used to display the target interface for the target user.

[0093] In some embodiments, the current version of the menu framework used to display the target interface for the target user can be obtained through the interface. For specific implementation, please refer to Figure 6 .

[0094] In other embodiments, the current version information can also be stored in the target user's access record (cookie) for the menu system, and the next time the target user accesses the menu system, the version information can be directly obtained from the cookie. Figure 7 .

[0095] In step S506, a target loading module is used to load a menu framework of a corresponding version and a target front-end technology stack type according to the version information to display a target interface for a target user.

[0096] In some embodiments, you can customize the style patches for each version of the menu frame and each front-end technology stack type, and load them after loading the corresponding menu frame. For specific methods, please refer to Figure 8 .

[0097] In some embodiments, the menu framework of the corresponding version and target front-end technology stack type is loaded, and the rendering is performed accordingly according to the version information, and then displayed after rendering. For specific implementation methods, please refer to Figure 11 and Figure 12 .

[0098] According to the front-end data processing method provided by the embodiment of the present disclosure, by responding to the request for displaying the target interface for the target user accessing the menu system, the target front-end technology stack type corresponding to the target user is obtained, and then the target loading module corresponding to the target front-end technology stack type is used to obtain the version information of the menu framework used to display the target interface for the target user. The target loading module is then used to load the menu framework of the corresponding version and the target front-end technology stack type according to the version information to display the target interface for the target user, thereby achieving compatibility of menu systems with multiple versions and multiple front-end technology stack types. Figure 6 Shown Figure 5 Schematic diagram of the processing process of step S504 and step S506 in one embodiment. Figure 6 As shown, in the embodiment of the present disclosure, the above step S504 may further include the following step S602, and step S506 may further include the following step S604.

[0099] Step S602: Utilize the target loading module to obtain, through the interface, the current version information of the menu framework currently used to display the target interface for the target user.

[0100] Step S604: Use the target loading module to load the menu framework of the target front-end technology stack type and the version corresponding to the current version information.

[0101] According to the method provided in the embodiment of the present disclosure, the current version information of the menu frame currently used to display the target interface for the target user is obtained through the interface, so that the current version of the user can be accurately obtained, thereby avoiding the problem of being unable to access normally due to obtaining historical version information from the access record when the user access record is tampered with.

[0102] Figure 7 Shown Figure 5 Schematic diagram of the processing process of step S504 and step S506 in one embodiment. Figure 7 As shown, in the embodiment of the present disclosure, the above step S504 may further include the following step S702, and step S506 may further include the following step S704.

[0103] In step S702, the target loading module is used to obtain historical version information from the target user's access record to the menu system.

[0104] In some embodiments, the historical version information may be information about the current version of the menu framework used when displaying the target interface to the target user the last time the target user accessed the menu system, such as Vue2 version 9.0, React version 9.0, and the like.

[0105] Step S704: Use the target loading module to load the menu framework of the target front-end technology stack type and the version corresponding to the historical version information.

[0106] According to the method provided by the embodiment of the present disclosure, by obtaining historical version information from the target user's access record to the menu system, the number of times the interface is used for processing can be reduced and the processing efficiency can be improved.

[0107] Figure 8 Shown Figure 5 Schematic diagram of the processing process of step S506 in one embodiment. Figure 8 As shown, in the embodiment of the present disclosure, the above step S506 may further include the following steps.

[0108] Step S802 : Using the target loading module, the menu framework of the corresponding version and target front-end technology stack type is loaded according to the page link corresponding to the version information.

[0109] Step S804: determine whether the page link includes a query parameter indicating that the user style is to be adopted.

[0110] In some embodiments, the field following the query ("?") in the link may be a query parameter. For example, a query parameter using a user style may be useCustom***Style, where *** may be an abbreviation of the name related to the e-commerce platform. It may be determined whether the query in the loaded page link has useCustom***Style and is "true". If so, the style patch is loaded based on the current site.

[0111] Step S806: If it is determined that the page link includes a query parameter indicating the use of the user style, a style patch corresponding to the user style is loaded based on the loaded menu frame to display the target interface for the target user.

[0112] Step S808: If it is determined that the page link does not include a query parameter indicating that the user style is to be adopted, the loaded menu frame is rendered and the rendered target interface is displayed.

[0113] According to the method provided by the embodiment of the present disclosure, after loading the corresponding menu frame, by judging whether the page link includes a query parameter indicating the use of the user style, style patches can be optionally added to the menu frames of various versions and front-end technology stack types, so that the menu interface can be conveniently displayed to the user in a more targeted manner, thereby improving the flexibility of system development and enhancing the user experience.

[0114] Figure 9 is based on Figures 5 to 8 FIG. 1 shows an exemplary flow chart of loading a menu framework. Figure 9 The menu frame loading process shown may include the following steps S902 to S904.

[0115] Step S902: Obtain a loader (ie, a target loading module) of a front-end technology stack type corresponding to the user, which may include front-end technology stack types such as Vue, React, and Vanilla.

[0116] Step S904: Determine whether to load the menu frame. In some cases, the menu frame may not be loaded. For example, the determination of whether to load the menu frame can be made by determining whether the Boolean value of _DISABLE_PAGEFRAME_LOADER_ on the window is "true".

[0117] In step S905, if the result of the judgment is negative (for example, "false"), the process is not executed and ends.

[0118] Step S906: Get the current version of the user in the cookie. For example, the current version can be obtained by obtaining the value of the _USE_NEW_PAGEFRAME_VERSION_ field in the cookie.

[0119] Step S908: Determine whether the current version of the user can be loaded by the current loader. For example, if the current loader can load menu frames of versions 9.0, 10.0, and 11.0 (e.g., all technology stack types), determine whether the current version of the user is one of the three versions 9.0, 10.0, and 11.0.

[0120] Step S909: If not, do not proceed further and the process ends.

[0121] Step S910: If yes, the menu resource of the corresponding version of the current technology stack can be written using the current loader.

[0122] In step S9112, it is determined whether the user's current version is obtained through the interface.

[0123] Step S9114: If the user's current version can be obtained through the interface, the current version information is rewritten into the cookie.

[0124] Step S912: determine whether the page link includes a query parameter indicating that the user style is to be adopted.

[0125] Step S913: If the judgment result is no, the style patch is not loaded.

[0126] Step S914: If the result of the judgment is yes, the style patch is loaded based on the current site.

[0127] Figure 10 Shown Figure 5 FIG. 5 is a schematic diagram of the processing process of step S506 in another embodiment. Figure 10 As shown, in the embodiment of the present disclosure, the above step S506 may further include the following steps.

[0128] Step S1002: Obtain menu configuration information from the backend server according to the current version information.

[0129] Step S1004: Rendering is performed based on the loaded menu framework according to the menu configuration information, and the rendered target interface is displayed to the target user.

[0130] Figure 11 according to Figure 5 The following is a flowchart showing a page rendering method. Figure 5 The connection lies in how to select the appropriate component for display when the user's current version cannot be obtained.

[0131] refer to Figure 11 , the method 110 provided in the embodiment of the present disclosure may include the following steps.

[0132] In step S1102, it is determined whether the current version information of the menu framework currently used to display the target interface to the target user can be obtained through the interface.

[0133] In step S11042, if the current version information cannot be obtained through the interface, the comprehensive auxiliary navigation menu configuration information in the menu frame of multiple versions of the target interface is obtained, and the business link navigation menu configuration information is obtained from the front-end cache corresponding to the target user.

[0134] In some embodiments, if the interface request fails, it can be set to display all pluggable components by default for the comprehensive auxiliary navigation menu, for example, it can be a union of components of various versions; for the business link navigation menu, the front end will cache a copy of the classified navigation data locally each time the user logs in to the homepage, and the cached data can be used after the interface request fails. For examples of the components included in the comprehensive auxiliary navigation menu and the business link navigation menu, please refer to Figure 13 and Figure 14 .

[0135] In step S1106, rendering is performed based on the loaded menu framework according to the comprehensive auxiliary navigation menu configuration information and the business link navigation menu configuration information, and the rendered target interface is displayed to the target user.

[0136] In step S11044, if the current version information can be obtained through the interface, the menu configuration information is obtained from the backend server according to the current version information, and the loaded menu framework is rendered according to the menu configuration information, and the rendered target interface is displayed to the target user.

[0137] According to the method provided in the embodiment of the present disclosure, when obtaining version information through an interface, if the interface request fails, a "safety net" solution can be adopted in which a comprehensive auxiliary navigation menu is used to display all pluggable components, and a business link navigation menu is displayed according to cached data, so that the menu components required by the user can be displayed as much as possible, thereby improving the availability of the system and enhancing the user experience.

[0138] Figure 12 is based on Figure 5 、 Figure 10 and Figure 11 An exemplary method of displaying a menu system page is shown. Figure 12 The menu system page display process shown may include steps S1202 to S1216.

[0139] Step S1202: The user logs into the menu system.

[0140] Step S1204: judging whether the logged-in user is a user of the new version of the menu framework according to the user ID.

[0141] Step S1205: If the result of the judgment is no, then load the old version menu frame. For the specific implementation, please refer to Figure 5 and Figure 7 .

[0142] Step S1206: If the judgment result is yes, then enter the process of loading the new version of the menu framework.

[0143] Step S1208 , determining whether the interface is available, that is, determining whether the version information of the menu framework currently accessible to the user is obtained through the interface.

[0144] In step S1210, if the result of the judgment is yes, the configuration corresponding to the version information transmitted by the backend is used to dynamically render the comprehensive auxiliary navigation menu. The comprehensive auxiliary navigation menu may include, for example, Logo 1222, Search 1224, Message 1226, Return to Old Version 1228, Download Client 1230, Help 1232, Feedback 1234, User Information 1236, etc.

[0145] In step S1212, if the result of the judgment is yes, the business link navigation menu is also dynamically rendered using the configuration corresponding to the version information transmitted from the back end. Among them, the business link navigation may include, for example, category navigation 1238, ISV (Independent Software Vendors) plug-in 1240, etc. Category navigation 1238 may support three-level, two-level, or one-level jumps according to the pin latitude, and may also support configuration menu names, links, jump methods, icons, whether to display red dots, etc. The ISV plug-in 1240 may display one, two, three, or four, and may support jumping to the plug-in center, and may be fixed at the bottom of the screen as the screen height changes.

[0146] In step S1214, if the judgment result is no, all pluggable components may be displayed by default for the comprehensive auxiliary navigation menu.

[0147] Step S1216: If the judgment result is no, the business link navigation menu can be loaded according to the data cached in the front end.

[0148] Figure 13 is based on Figures 2 to 12 The front-end technical architecture diagram of a new version of the menu framework of a menu system is shown in FIG. Figure 13 As shown, the front-end technology foundation 1302 of an exemplary e-commerce platform menu system may include Vue 3.X (e.g., Vue 3.0, Vue 3.1, Vue 3.2, etc.), web components, micro-apps (micro-frontends), design (e.g., design technology for application platforms), Vite, webpack, etc. The web components and micro-frontends in the core architecture 1304 have cross-framework capabilities and are compatible with frameworks of technology stack types such as Vue, React, and Vanilla. Communication capabilities can be implemented through SDKs, event buses, and micro-frontend communication. For example, SDKs can interact with clients, event buses can be used for communication between components, and micro-frontend sub-applications can communicate with each other.

[0149] When a merchant client requests access to the menu system, the current merchant menu framework version can be determined through grayscale logic, and the corresponding menu framework resources can be loaded (S13002). Parameters of older versions can be compatible. For example, the recommended new version is the 11.0 Vue3 web components framework resource. This is compatible with the 10.0 Vue3 web components framework resource, the 9.0 Vue2 framework resource, the 9.0 vanilla framework resource, the 9.0 react16 framework resource, and so on.

[0150] After loading the corresponding version of the framework resource HTML element 1306, a menu framework 1308 can be displayed, including messages, search, customer service help, etc. For the PC client (sdkPC) 1309, menus such as checkHome and closeHelp can be displayed. Supported business lines 1310 include menu systems for homepage, products, transactions, marketing, stores, etc.

[0151] Figure 14 is based on Figures 2 to 12 The web technology architecture diagram of a new version of the menu framework of a menu system is shown in FIG. Figure 14 As shown, the project technology stack 1402 supporting the menu framework 1416 of the homepage may include, for example, Vue, webcomponents, micro frontends, scss, vite, webpack, etc. The development specifications 1404 may include coding specifications, design documents, Git workflows, interaction / visual specifications, code layering specifications, Eslint specifications, etc. The dependency support 1406 may include a base, communication, scaffolding, rapid deployment, etc. The business components 1412 of the comprehensive auxiliary navigation 1408 may include help, feedback, messages, etc., and the business components 1412 of the business link navigation 1410 may include category navigation, ISV plug-ins, etc. The business code 1414 may include component extension code, local data management code, general tool function code, general state management code, etc.

[0152] According to the technical architecture provided by the embodiments of the present disclosure, web components technology is used to translate the Vue3 components of the menu system. The shadowRoot sandbox feature of web components is leveraged to achieve compatibility with multiple front-end technology stacks. Multiple versions of the menu framework are loaded using a loader, reducing the system access cost for the access party. The multiple versions of the menu code are isolated and easy to maintain, solving the problems of menu system code development and maintenance costs, high duplication, multi-technology stack compatibility, and multi-version maintenance difficulties.

[0153] Figure 15 FIG. 1 is a block diagram of a front-end data processing device according to an exemplary embodiment. Figure 15 The apparatus shown can be applied to, for example, a front-end server in the above system, and can also be applied to a terminal device in the above system.

[0154] refer to Figure 15 The apparatus 150 provided by the embodiment of the present disclosure may include a first acquisition module 1502 , a second acquisition module 1504 and a loading module 1506 .

[0155] The first acquisition module 1502 may be configured to acquire a target front-end technology stack type corresponding to a target user in response to a request to display a target interface for a target user accessing the menu system.

[0156] The second acquisition module 1504 may be configured to utilize a target loading module corresponding to the target front-end technology stack type to acquire version information of a menu framework used to display a target interface to a target user.

[0157] The loading module 1506 may be configured to utilize the target loading module to load a menu framework of a corresponding version and a target front-end technology stack type according to the version information, so as to display a target interface for a target user.

[0158] Figure 16 FIG. 1 is a block diagram of another front-end data processing device according to an exemplary embodiment. Figure 16 The apparatus shown can be applied to, for example, a front-end server in the above system, and can also be applied to a terminal device in the above system.

[0159] refer to Figure 16 The apparatus 160 provided by the embodiment of the present disclosure may include a network component module 1601 , a first acquisition module 1602 , a second acquisition module 1604 , a loading module 1606 , a saving module 1608 , a style patch module 1610 and a rendering module 1612 .

[0160] The network component module 1601 can be used to create a target component based on a progressive scripting language framework; mark the target component with a custom element tag of the network component; and use the front-end construction tool to package the target component marked with the custom element tag of the network component to obtain menu framework files of multiple versions and multiple front-end technology stack types.

[0161] The first acquisition module 1602 may be configured to acquire a target front-end technology stack type corresponding to a target user in response to a request to display a target interface for a target user accessing the menu system.

[0162] The second acquisition module 1604 may be configured to utilize a target loading module corresponding to the target front-end technology stack type to acquire version information of a menu framework used to display a target interface to a target user.

[0163] The version information may include current version information.

[0164] Version information may also include historical version information.

[0165] The second acquisition module 1604 may also be configured to utilize the target loading module to acquire, through an interface, current version information of the menu framework currently used to display the target interface to the target user.

[0166] The second acquisition module 1604 may also be configured to utilize the target loading module to acquire current version information from the target user's access record to the menu system.

[0167] The second acquisition module 1604 may also be configured to utilize the target loading module to acquire historical version information from the target user's access records to the menu system.

[0168] The loading module 1606 may be configured to utilize the target loading module to load a menu framework of a corresponding version and a target front-end technology stack type according to the version information, so as to display a target interface for a target user.

[0169] The loading module 1606 may also be configured to utilize the target loading module to load a menu framework of a target front-end technology stack type and a version corresponding to the current version information.

[0170] The loading module 1606 may also be configured to utilize the target loading module to load a menu framework of a target front-end technology stack type and a version corresponding to the historical version information.

[0171] The loading module 1606 may also be configured to utilize the target loading module to load a menu framework of a corresponding version and target front-end technology stack type according to a page link corresponding to the version information.

[0172] The loading module 1606 can also be used to utilize the target loading module to obtain the menu framework file of the target front-end technology stack type and the version corresponding to the version information from the menu framework files of multiple versions and multiple front-end technology stack types according to the file directory; and run the menu framework file of the target front-end technology stack type and the version corresponding to the version information to load the corresponding menu framework.

[0173] The saving module 1608 may be configured to store the current version information into the target user's access record for the menu system.

[0174] The style patch module 1610 can be used to determine whether the page link includes a query parameter indicating the use of the user style; if it is determined that the page link includes a query parameter indicating the use of the user style, a style patch corresponding to the user style is loaded based on the loaded menu frame to display the target interface for the target user.

[0175] The rendering module 1612 may be configured to obtain menu configuration information from the backend server according to the current version information; render based on the loaded menu framework according to the menu configuration information, and display the rendered target interface to the target user.

[0176] The rendering module 1612 can also be used to determine whether the current version information of the menu framework currently used to display the target interface for the target user can be obtained through the interface; if the current version information cannot be obtained through the interface, the comprehensive auxiliary navigation menu configuration information in the menu framework of multiple versions of the target interface is obtained, and the business link navigation menu configuration information is obtained from the front-end cache corresponding to the target user; rendering is performed based on the loaded menu framework according to the comprehensive auxiliary navigation menu configuration information and the business link navigation menu configuration information, and the rendered target interface is displayed to the target user.

[0177] The specific implementation of each module in the device provided by the embodiment of the present disclosure can refer to the content of the above method and will not be repeated here.

[0178] Figure 17 FIG. 1 shows a schematic diagram of the structure of an electronic device in an embodiment of the present disclosure. It should be noted that: Figure 17 The device shown is only an example of a computer system and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0179] like Figure 17 As shown, device 1700 includes a central processing unit (CPU) 1701, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1702 or a program loaded from a storage portion 1708 into a random access memory (RAM) 1703. Various programs and data required for the operation of device 1700 are also stored in RAM 1703. CPU 1701, ROM 1702, and RAM 1703 are connected to each other via a bus 1704. An input / output (I / O) interface 1705 is also connected to bus 1704.

[0180] The following components are connected to the I / O interface 1705: an input section 1706 including a keyboard, a mouse, and the like; an output section 1707 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and speakers; a storage section 1708 including a hard disk; and a communication section 1709 including a network interface card such as a LAN card or a modem. The communication section 1709 performs communication processing via a network such as the Internet. A drive 1710 is also connected to the I / O interface 1705 as needed. Removable media 1711, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 1710 as needed, so that computer programs read therefrom can be installed into the storage section 1708 as needed.

[0181] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 1709, and / or installed from a removable medium 1711. When the computer program is executed by the central processing unit (CPU) 1701, the above-mentioned functions defined in the system of the present disclosure are performed.

[0182] It should be noted that the computer-readable medium described in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or component, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device, or component. In the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.

[0183] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0184] The modules described in the embodiments of the present disclosure may be implemented in software or hardware. The modules described may also be provided in a processor. For example, they may be described as follows: a processor including a first data acquisition module, a second data acquisition module, and a loading module. The names of these modules do not, in some cases, constitute limitations on the modules themselves. For example, the first acquisition module may also be described as a "module for acquiring user front-end technology stack types based on grayscale logic."

[0185] As another aspect, the present disclosure further provides a computer-readable medium, which may be included in the device described in the above embodiments; or may exist independently and not be incorporated into the device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by the device, the device includes:

[0186] In response to a request to display a target interface for a target user accessing a menu system, a target front-end technology stack type corresponding to the target user is obtained; a target loading module corresponding to the target front-end technology stack type is used to obtain version information of a menu framework used to display the target interface for the target user; and the target loading module is used to load a menu framework of a corresponding version and a target front-end technology stack type according to the version information to display the target interface for the target user.

[0187] The present disclosure provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in the various optional implementations described above.

[0188] While the exemplary embodiments of the present disclosure have been specifically illustrated and described above, it should be understood that the present disclosure is not limited to the detailed structures, configurations, or implementations described herein; rather, the present disclosure is intended to encompass various modifications and equivalent configurations within the spirit and scope of the appended claims.< / slot> < / template>

Claims

1. A front-end data processing method, characterized in that: include: In response to a request to display a target interface for a target user accessing a menu system, obtaining a target front-end technology stack type corresponding to the target user; Using a target loading module corresponding to the target front-end technology stack type, obtaining version information of a menu framework used to display the target interface for the target user; The target loading module is utilized to load a menu framework of a corresponding version of the target front-end technology stack type according to the version information, so as to display the target interface for the target user.

2. The method according to claim 1, characterized in that The version information includes current version information; Utilizing a target loading module corresponding to the target front-end technology stack type, obtaining version information of a menu framework used to display the target interface for the target user, including: Utilizing the target loading module to obtain, through an interface, the current version information of the menu framework currently used to display the target interface for the target user; Utilizing the target loading module to load a menu framework of a corresponding version of the target front-end technology stack type according to the version information to display the target interface for the target user includes: The target loading module is used to load a menu framework of the target front-end technology stack type and a version corresponding to the current version information.

3. The method according to claim 2, characterized in that Also includes: Storing the current version information in the target user's access record to the menu system; The method further comprises: utilizing a target loading module corresponding to the target front-end technology stack type to obtain version information of a menu framework used to display the target interface for the target user; The target loading module is utilized to obtain the current version information from the target user's access record to the menu system.

4. The method according to claim 2, characterized in that The target loading module is used to load a menu framework of a corresponding version of the target front-end technology stack type according to the version information to display the target interface to the target user, further comprising: Acquire menu configuration information from the backend server according to the current version information; Rendering is performed based on the loaded menu framework according to the menu configuration information, and the rendered target interface is displayed to the target user.

5. The method according to claim 1, wherein The version information includes historical version information; Utilizing a target loading module corresponding to the target front-end technology stack type, obtaining version information of a menu framework used to display the target interface for the target user, including: Obtaining the historical version information from the target user's access record to the menu system using the target loading module; Utilizing the target loading module to load a menu framework of a corresponding version of the target front-end technology stack type according to the version information to display the target interface for the target user includes: The target loading module is used to load the menu framework of the target front-end technology stack type and the version corresponding to the historical version information.

6. The method according to claim 1, wherein Also includes: Determine whether it is possible to obtain current version information of the menu framework currently used to display the target interface for the target user through the interface; If the current version information cannot be obtained through the interface, then the comprehensive auxiliary navigation menu configuration information in the menu frames of multiple versions of the target interface is obtained, and the business link navigation menu configuration information is obtained from the front-end cache corresponding to the target user; Rendering is performed based on the loaded menu framework according to the comprehensive auxiliary navigation menu configuration information and the business link navigation menu configuration information, and the rendered target interface is displayed to the target user.

7. The method according to claim 1, characterized in that Utilizing the target loading module to load a menu framework of a corresponding version of the target front-end technology stack type according to the version information to display the target interface for the target user includes: Using the target loading module to load the menu framework of the corresponding version and the target front-end technology stack type according to the page link corresponding to the version information; Determining whether the page link includes a query parameter indicating that a user style is adopted; If it is determined that the page link includes a query parameter indicating the use of a user style, a style patch corresponding to the user style is loaded based on the loaded menu frame to display the target interface for the target user.

8. The method according to claim 1, characterized in that Using the target loading module to load the corresponding version of the menu framework of the target front-end technology stack type according to the version information includes: Utilizing the target loading module to obtain, from menu framework files of multiple versions and multiple front-end technology stack types according to a file directory, a menu framework file of a version corresponding to the version information and of the target front-end technology stack type; Run the menu framework file of the target front-end technology stack type and the version corresponding to the version information to load the corresponding menu framework.

9. The method according to claim 8, characterized in that Also includes: Create target components based on a progressive scripting language framework; Marking the target component with a custom element tag of a network component; The target component marked with the custom element tag of the network component is packaged using a front-end building tool to obtain menu framework files of the multiple versions and multiple front-end technology stack types.

10. A front-end data processing device, characterized in that: include: A first acquisition module is configured to, in response to a request to display a target interface for a target user accessing the menu system, acquire a target front-end technology stack type corresponding to the target user; A second acquisition module is configured to acquire version information of a menu framework used to display the target interface for the target user by using a target loading module corresponding to the target front-end technology stack type; A loading module is used to use the target loading module to load the corresponding version of the menu framework of the target front-end technology stack type according to the version information, so as to display the target interface for the target user.

11. An electronic device comprising: A memory, a processor, and executable instructions stored in the memory and executable in the processor, wherein the processor implements the method according to any one of claims 1 to 9 when executing the executable instructions.

12. A computer-readable storage medium having computer-executable instructions stored thereon, characterized in that: When the executable instructions are executed by a processor, the method according to any one of claims 1 to 9 is implemented.

13. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the method according to any one of claims 1 to 9 is implemented.

Images