Front-end page individuation implementation method and device, equipment and storage medium

Abstract

The invention discloses a front-end page personalization implementation method and device, equipment and a storage medium, and relates to the technical field of page information processing.The method comprises the steps that when a user with a personalization rendering rule accesses a front-end page with a reserved personalization rendering position, personalization content is obtained; managing the information of the personalized content and an effective rule to obtain an effective personalized content rule of the current user; and performing personalized rendering on the front-end page based on the personalized content rule that the current user takes effect to obtain the personalized front-end page. By means of the method and device, the technical problems that in related technologies, template-based personalized customization is limited in flexibility and expandability, and complex and changeable personalized requirements are difficult to meet are solved, and the technical problems that code-based personalized development is high in development cost, long in period, difficult to maintain, high in system complexity and low in response speed are solved.

Description

Technical Field

[0001] This invention relates to the field of page information processing technology, and in particular to a method, apparatus, device, and storage medium for front-end page personalization. Background Technology

[0002] Currently, front-end page personalization has become an important means to improve user experience and meet diverse needs, especially in complex business scenarios such as airline sales, e-commerce, and finance, where personalized customization of front-end pages is indispensable. These industries often need to flexibly and efficiently adjust their front-end pages according to the specific needs of different clients (such as large airlines, agents, and end consumers).

[0003] In existing technologies, there are two main ways to achieve front-end page personalization: one is template-based personalization, which involves predefining a series of templates and allowing users to select and configure elements in the templates according to their needs; the other is code-based personalization, which involves developers writing front-end code based on the user's specific needs to achieve page personalization.

[0004] However, both approaches have significant limitations. Specifically, while template-based personalization is simple and easy to use, templates have limited flexibility and scalability, making it difficult to meet complex and ever-changing personalization needs. On the other hand, while code-based personalization can achieve a high degree of customization, it has high development costs, long development cycles, and is difficult to maintain. In addition, traditional personalization methods often require a lot of configuration and management work on the backend, resulting in high system complexity and slow response speed. Summary of the Invention

[0005] To address the aforementioned technical problems, this invention provides a method, apparatus, device, and storage medium for implementing front-end page personalization.

[0006] To achieve the above objectives, the present invention provides the following technical solution: In a first aspect, embodiments of the present invention provide a method for implementing front-end page personalization, the method comprising: When a user with personalized rendering rules visits a front-end page with a reserved personalized rendering location, personalized content is retrieved. The information and activation rules of the personalized content are managed to obtain the personalized content rules that are currently in effect for the user; The front-end page is rendered in a personalized manner based on the personalized content rules currently in effect for the user, resulting in a personalized front-end page.

[0007] Secondly, embodiments of the present invention provide a front-end page personalization implementation device, the device comprising: The information acquisition module is configured to acquire personalized content when a user with personalized rendering rules visits a front-end page with a reserved personalized rendering location. The personalized rules management module is configured to manage the information and effective rules of the personalized content, and obtain the personalized content rules that are currently in effect for the user. The personalized page rendering module is configured to perform personalized rendering of the front-end page based on the personalized content rules currently in effect for the user, thereby obtaining a personalized front-end page.

[0008] Thirdly, embodiments of the present invention also provide an electronic device, including: a memory and a processor; the processor is configured to read and execute a computer program stored in the memory to implement the steps of the aforementioned method for personalizing a front-end page.

[0009] Fourthly, embodiments of the present invention also provide a computer storage medium storing computer-executable instructions, which, when executed, implement the steps of the aforementioned method for personalizing a front-end page.

[0010] The beneficial effects of the technical solutions provided by the embodiments of the present invention include: When a user with personalized rendering rules accesses a front-end page with a reserved personalized rendering space, personalized content is retrieved. The information and activation rules of this personalized content are managed to obtain the personalized content rules currently in effect for the user. Based on these rules, the front-end page is rendered in a personalized manner to obtain the personalized front-end page. This embodiment significantly reduces the complexity and cost of personalization implementation by focusing only on content differences from the standard version, while maintaining synchronized updates with the standard version. It solves the technical problem in related technologies where template-based personalization has limited flexibility and scalability, making it difficult to meet complex and ever-changing personalization needs. Furthermore, the personalized content is deployed on the user's own server, ensuring that only authorized employees can access it, thereby protecting the company's trade secrets and customer privacy. Users can adjust and expand personalized settings at any time according to their needs, easily adapting to business development and market changes without large-scale modifications or redevelopment. This solves the technical problems of code-based personalized development in related technologies, such as high development costs, long development cycles, difficult maintenance, high system complexity, and slow response speed. Attached Figure Description

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

[0012] Figure 1 This is a flowchart illustrating an embodiment of the front-end page personalization method of the present invention; Figure 2 This is a schematic diagram of the overall architecture of the present invention; Figure 3 This is a schematic diagram of the personalized page of the present invention; Figure 4 This is a schematic diagram illustrating the information input process in the sub-application management module of this invention. Figure 5 A schematic diagram showing the personalized rendering location reserved for the front-end page of this invention; Figure 6 This is a schematic diagram of the personalized management page of the present invention; Figure 7 A diagram illustrating the information to be entered for personalized components; Figure 8 This is a schematic diagram illustrating the logical extension of information input in this invention; Figure 9 This is a schematic diagram illustrating the data subscription and information entry process of this invention. Figure 10 This is a schematic diagram of the logic extension process of the present invention; Figure 11 This is a schematic diagram of the data subscription logic of the present invention; Figure 12 This is a schematic diagram of the functional modules of an embodiment of the front-end page personalization device of the present invention; Figure 13 This is a schematic diagram of the structure of an electronic device according to an embodiment of the present invention. 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. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0014] To make the objectives, technical solutions, and advantages of the present invention clearer, the embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0015] In a first aspect, embodiments of the present invention provide a method for implementing front-end page personalization.

[0016] In one embodiment, reference is made to Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the front-end page personalization method of the present invention. Figure 1 As shown, the methods for implementing front-end page personalization include: Step S10: When a user with personalized rendering rules visits a front-end page with a reserved personalized rendering location, obtain personalized content. In this embodiment, personalized content is a collective term for all personalized sources. (Refer to...) Figure 2 , Figure 2 This is a schematic diagram of the overall architecture of the present invention. Figure 2 As shown, personalized content includes at least one of the following: personalized pages, personalized components, logical extensions, and data subscriptions. Personalized pages exist as sub-applications and are suitable for scenarios where the entire page or most of the page's content differs. Personalized components exist as components and are suitable for scenarios where there are partial differences, including UI and logical extensions. Data subscriptions exist as services and are used in specific scenarios where data synchronization is required.

[0017] Front-end page personalization is a relatively low-cost and highly flexible solution to meet users' personalized needs. The standard version development team only needs to focus on the standard process and reserve space for personalized rendering; personalization is handled by the personalization implementation team, including feature implementation, testing, deployment, and maintenance. The core is to implement personalized content rendering and execution on the page. The core process is as follows: Preliminary steps (prerequisites): The standard version application uses a micro-frontend architecture. It's important to note that micro-frontends are an architecture similar to microservices, applying the microservice concept to the browser side. This transforms a web application from a single monolithic application into an application aggregated from multiple small front-end applications. Each front-end application can run, be developed, and deployed independently. Micro-frontends are not simply front-end frameworks or tools, but an architectural system. The base application of the micro-frontend is the main application, serving as the entry point for the entire application and responsible for the scheduling and rendering of sub-applications and application routing control.

[0018] Reference Figure 3 , Figure 3 This is a schematic diagram of the personalized page of this invention. For example... Figure 3As shown, the standard version team reserved rendering space for areas requiring personalization when implementing the functionality. When a user visits a front-end page with reserved personalized rendering space, the system checks if the user has personalized rendering rules. If so, personalized content is retrieved, and the personalized rules are invoked to perform rendering. Specifically, the page functionality is completed by the standard implementation team. When differences are needed in parts of the page content, personalized components are dynamically loaded and replaced locally to achieve personalized rendering. If the user does not have personalized rendering rules, the standard version content is displayed by default.

[0019] When a user visits a personalized page, it will be rendered according to personalized rules. Personalized content can be categorized into four types: personalized pages, personalized components, logical extensions, and data subscriptions. The personalization implementation team develops the content based on the template provided in the standard version, which serves as a reference for the standard version implementation in the corresponding region. Since the entire personalization process occurs only on the front end, the deployed personalized content needs to support cross-domain requests. Upon login, the standard version will retrieve all personalization rules for the current user.

[0020] Personalized pages are integrated via micro-frontend sub-applications or iframes; this example uses micro-frontends. There are no restrictions on the technology stack for the sub-application (personalized page), only that it meets the Qiankun sub-application integration specifications and exports the bootstrap, mount, and unmount lifecycle hooks in the sub-application's entry JS file. For implementation details, refer to Qiankun's practices. A sub-application can contain multiple pages; typically, all page-level differences for a user are implemented within a single sub-application. Rendering rules are applied to the page URL, which for the user corresponds to a specific menu item. After login, the currently active personalized page rules are retrieved. When the user accesses the corresponding menu item, the corresponding sub-application is loaded, thus achieving page personalization. The output of a personalized page is a complete frontend application (a sub-application within a micro-frontend), containing HTML, JS, CSS, and images. This is achieved by calling the corresponding APIs of the micro-frontend framework for manually loading sub-applications, such as Qiankun's `loadMicroApp`, MicroApp's `renderApp`, and Garfish's `loadApp`. Among them, a sub-application is an executable front-end application, which usually treats the various functional modules in the product as independent application systems; Qiankun is Alibaba's open-source micro-frontend solution, which is currently the most widely used and most complete, and is based on single-spa; MicroApp is JD.com's open-source micro-frontend solution, which draws on the idea of ​​WebComponents and is currently the lowest cost solution for integrating micro-frontends on the market; Garfish is ByteDance's open-source micro-frontend framework, which includes the basic capabilities required to build micro-frontend systems. It can be used by any front-end framework, is easy to integrate, and can easily combine multiple front-end applications into a cohesive single product.

[0021] Personalized components address localized differences on a page, such as adjusting the display of certain content, adding extra content, or other visually distinct elements. After a user logs in, the system retrieves the currently active personalized component rules. When the user visits a pre-reserved personalized section matching the rules, the personalized component is rendered based on the personalized information. Personalized components deliverables are JS and CSS files, loaded via `createElement` or third-party module loaders like SystemJS and runtime-import. The component is then loaded using the framework's asynchronous component API, such as Vue's `defineAsyncComponent` or React's `lazy`. SystemJS is a module loading library that dynamically loads various module formats, allowing for more flexible code modularization. runtime-import is another module loading library that dynamically loads various module formats, further enhancing code modularity.

[0022] The technology stack of personalized components needs to be consistent with that of the standard version (Vue 3). The standard version implementation team will provide the personalized implementation team with template examples of components, which include sample templates of standard version components in the corresponding area (standard version function implementation), component descriptions (context, event callbacks, test cases, etc.), component visual scene examples, and build scripts, etc.

[0023] The development process for personalized components is as follows: The personalized component implementation template is a Vue application built on Vite. It's built in library mode, and the artifacts are Vue components (similar to other UI libraries). Component development is no different from a regular Vue application; the only difference is that personalized components (multiple components can be exported) are exported within the build entry file, and each component provides an `install` property, as shown in the example below: / / index.ts import TestA from '. / components / TestA.vue'; import TestB from '. / components / TestB.vue'; TestA.install = (app: any) =>{ app.component(TestA.name, TestA); }; TestB.install = (app: any) =>{ app.component(TestB.name, TestB); }; export { TestA, TestB}; When building, pay attention to the package name (fileName) and exposed family variable names (name) of the artifacts. It is recommended to add a prefix for your personalized application to ensure uniqueness. The artifact format should ideally support both Elasticsearch (recommended for future versions) and UMD (currently supported). During the build process, it is recommended to externalize or exclude common dependencies such as Vue, Pinia, and Vue-router. For UI component libraries (such as Element-Plus), it is recommended to import them as needed and then package them into the component library to avoid unknown anomalies caused by inconsistencies with the standard version. To ensure maximum browser compatibility, the artifact should support both Elasticsearch and UMD formats, with UMD being the primary format.

[0024] Example as follows: / / vite.config.ts export default defineConfig({ / / ... build: { lib: { formats: ['es', 'umd'], entry: resolve(__dirname, 'src / index.ts'), name: 'TestLib', fileName: 'test-lib' }, rollupOptions: { / / Ensure that dependencies you don't want to include in the library are handled externally. external: ['vue', 'pinia', 'vue-router'], output: { / / Provide a global variable for these externalized dependencies in the UMD build mode globals: { vue: 'Vue', pinia: 'Pinia', 'vue-router': 'VueRouter' } } }} }); The deployment of personalized components is the same as that of regular front-end projects. After deployment, cross-domain support needs to be enabled to ensure that the standard version can be accessed across domains.

[0025] Logical extension: Logical extension refers to custom expansions or adjustments made to existing processes to meet the customized requirements of various users. Examples include changing the data source of a table, executing custom logic when a button is clicked, or performing special processing on page data. The output of a logical extension is a JavaScript file containing one or more functions. It can be loaded and integrated using `createElement`, or through third-party module loaders such as `SystemJS` or `runtime-import`, and then the methods in the JavaScript file are executed at a specified location.

[0026] Specifically, the implementation of logic extensions is almost identical to that of personalized components. Personalized components are Vue components, while logic extensions are JavaScript functions. The standard implementation team will provide the personalized implementation team with a template example of the logic, including function descriptions (context, event callbacks, test cases, etc.), visual scenario examples, and build scripts. An example is shown below: Logical extension file / / src / index.ts /

[0027] Create PNR process extension @param pnr @returns / export const pnrExpansion = (pnr: any) =>{ / / Process PNR content / / 。 。 。 。

[0028] return pnr } Vite build mode adjusted to library mode / / vite.config.ts import { resolve} from 'path' import { defineConfig} from 'vite' export default defineConfig({ build: { lib: { entry: resolve(__dirname, 'src / index.ts'), name: 'MyLib', / / Will add the appropriate file extension suffix fileName: 'my-lib', }, }, }) The deployment method is consistent with that of personalized components, and cross-domain support is also required.

[0029] Data Subscription: Data subscription addresses the need for third-party systems to synchronize data with specific users in specific scenarios. For example, large airlines or travel agencies may have their own order systems and want to synchronize data generated by employees during the ticket sales process, such as when PNRs are generated and tickets are issued. Data subscription requires the subscriber to provide an API interface for receiving data; when a scenario is triggered, the API is called via Fetch. Data subscription has no special development requirements; only a cross-domain API service needs to be provided.

[0030] Step S20: Manage the information and activation rules of the personalized content to obtain the personalized content information currently in effect for the user; In some specific embodiments, step S20 includes: Enter the name, address, matching rules, and version number of the personalized page through the sub-application management module; The personalized management module inputs the package name, component name, and effective personalized component rule information of the personalized component, the package name, method name, and effective logical extension rule information of the logical extension, and the address, location, and effective data subscription rule information of the data subscription.

[0031] In this embodiment, we continue to refer to... Figure 2 Personalized rule management: This is a general term for personalized content and rule management, including sub-application management and personalization management. Sub-application management is responsible for managing the information and effective rules of personalized pages; personalization management is responsible for managing the information and effective rules of personalized components, logical extensions, and data subscriptions, and provides the currently effective personalized information for the execution of personalized rules.

[0032] Specifically, refer to Figure 4 , Figure 4 This is a schematic diagram illustrating the information input process for the sub-application management module of this invention. For example... Figure 4 As shown, the application name, address, matching rules, and other information of the sub-application can be entered through the sub-application management module.

[0033] Since personalized components, logic extensions, and data subscriptions are all triggered in specific locations reserved in the standard version, their management can be merged. At the same time, the target personalized rendering location reserved on the front-end page can be obtained based on the effective personalized component rule information.

[0034] The personalized rendering locations reserved on the front-end page, such as Figure 5 As shown, Figure 5 The field is explained as follows: Encoding: A unique identifier for location, used for location determination when executing personalized rules; Application: Used to indicate which sub-application or module the location belongs to; this is not critical information. Location: A Chinese description of the location information.

[0035] Based on the pre-reserved rendering location of the target personalized content, the type of the target personalized content, and the effective personalized page rule information, personalized content rendering is achieved at the specified location.

[0036] Personalized management page such as Figure 6 As shown, Figure 6 The field is explained as follows: Application: Used to indicate which sub-application or module the personalization applies to; this is not critical information. Location: Used to indicate where the personalized rule is executed; Type: Used to distinguish whether the personalization type is a personalization component, a logical extension, or a data subscription; Address: Used to enter the address for personalized deployment; for data subscription, it is the API address for receiving data. If the type is a personalized component, enter the js address, style file CSS address, package name, and component name of the component, which should conform to the esm and umd module specifications. If the type is a data subscription, enter the service address for receiving the subscribed data. If the type is a logic extension, enter the js address, package name, and method name of the extension, which should conform to the esm and umd module specifications. Component information: Used to display the entered personalized component information and logical extension information; Activation Rules: The current personalized activation rules information supports activation by user name, airline, role, etc.; if the activation rule selects a broader scope such as airline or role, exception information for user name can be entered. Information for entering personalized components, such as Figure 7 As shown, by Figure 7 This reveals the rendering location, component address, package name, component name, and activation rules of the personalized component.

[0037] Logical extension of input information, such as Figure 8 As shown, by Figure 8 We can determine the location, address, package name, method name, and rules for the logical extension.

[0038] Data subscription entry information such as Figure 9 As shown, by Figure 9 The location, service address, and activation rules of the data subscription are known.

[0039] Step S30: Based on the personalized content rules currently in effect for the user, perform personalized rendering on the front-end page to obtain the personalized front-end page.

[0040] In this embodiment, we continue to refer to... Figure 2 After a user successfully logs in, the system retrieves the currently active personalized content rules. When the user triggers the corresponding rendering rule, the system renders the corresponding personalized content. This includes personalized page rendering (i.e., sub-application loading), personalized component rendering, data subscription rendering, and logic extension rendering. Personalized rule execution retrieves the currently active personalized information from the personalized rule management system. However, when the user accesses a location requiring personalization, the personalized rule execution handles the rendering and execution of the personalized content, resulting in a personalized front-end page. If the current user has no personalized rendering rules, the standard version of the front-end page is displayed by default.

[0041] In this embodiment, when a user with personalized rendering rules accesses a front-end page with a reserved personalized rendering space, personalized content is obtained. The information and activation rules of the personalized content are managed to obtain the personalized content rules currently in effect for the user. Based on these rules, the front-end page is rendered in a personalized manner to obtain the personalized front-end page. This embodiment significantly reduces the complexity and cost of personalization implementation by focusing only on the differences from the standard version, while maintaining synchronized updates with the standard version. It solves the technical problem in related technologies where template-based personalization has limited flexibility and scalability, making it difficult to meet complex and ever-changing personalization needs. Furthermore, the personalized content is deployed on the user's own server, ensuring that only authorized employees can access it, thereby protecting the company's trade secrets and customer privacy. Users can adjust and expand personalized settings at any time according to their needs, easily adapting to business development and market changes without large-scale modifications or redevelopment. This solves the technical problems of code-based personalized development in related technologies, such as high development costs, long development cycles, difficult maintenance, high system complexity, and slow response speed.

[0042] Optionally, in one embodiment, the front-end page is rendered with personalized content rules based on the currently active user, including: Create a corresponding empty container element on the mounted container and hide it; Get the path of the current route; Based on the sub-application's name, address, matching rules, and version number, find the sub-application that matches the path of the current route and denote it as the target sub-application; If it is detected that the target sub-application has not been loaded, then the target sub-application is loaded, cached in the empty container element, and then the empty container element is set to be displayed.

[0043] In this embodiment, after a user successfully logs in, the system obtains the current user's sub-application information and calls `loadMicroApp` to load the corresponding personalized page based on the currently accessed URL. The personalized page information is then retrieved and written to the global state, as shown in the example below.

[0044] import { defineStore} from 'pinia'; import getLocalApps from '@ / utils / apps'; import { getUserAppsApi} from '@ / apis / setting / microApplication'; import type { IAppProps, IMicroStore} from '. / types'; /

[0045] Sub-application information / const useMicroStore = defineStore('micro', { state: (): IMicroStore =>({ apps: [ ] }), actions: { async getApps(): Promise<IAppProps[ ]> { / / API retrieval const result = await getUserAppsApi(); this.apps = result.data; return this.apps; } } }); export default useMicroStore; After obtaining the personalized page information, generate the corresponding empty container element on the mounting container and hide it; then listen for route changes and obtain the current route path; based on the sub-application's name, address, matching rules, and version number, find the sub-application that matches the current route path and record it as the target sub-application; if the target sub-application is detected to have not been loaded, load the target sub-application, cache the target sub-application in the empty container element, and then adjust the empty container element that caches the target sub-application to be displayed.

[0046] Specifically, an example is shown below.

[0047] <template> <!--Mount sub - application--> <div v-for="item in apps" :id="`${containerPre}-${item.name}`" :key="item.name" :class="['micro-container', { 'show': showAppName === item.name}]"> < / template> <script setup lang="ts">import { shallowReactive, watch, onMounted, ref, nextTick,shallowRef, onUnmounted} from 'vue';import { useRoute} from 'vue-router';import { loadMicroApp, type MicroApp} from 'qiankun';import { ElLoading} from 'element-plus';import useMicroStore from '@ / store / micro';import type { IAppProps} from '@ / store / micro / types';const microList = shallowReactive<{ [key: string]: MicroApp}>({});const appRoute = useRoute();const microStore = useMicroStore();const apps = shallowRef<IAppProps[ ]>([ ]); / / 当前展示的子应用名称const showAppName = ref<string>(''); / / 挂载容器前缀const containerPre = 'frame'; /

[0048] 监听路由变化，实现子应用的挂载和移除@param path 路由path信息 / const activationHandleChange = async (path: string) =>{ / / 获取规则信息const activeRules: string[ ] = apps.value.map((app) =>app.activeRuleas unknown as string); / / 判断当前地址是否在子应用规则中const isMicro = activeRules.some((rule) =>path.startsWith(rule));if (!isMicro) return; / / 找到与当前地址匹配的子应用const conf = apps.value.find((app) =>path.startsWith(app.activeRule.toString()));if (!conf) return;showAppName.value = conf.name; / / 如果已经加载过一次，则无需再次加载const current = microList[conf.name];if (current) return;await nextTick(); / / 加载过程中添加loadingconst loadingInstance = ElLoading.service({ fullscreen: true}); / / 手动加载子应用const micro = loadMicroApp({ ...conf, container: `#${containerPre}-${conf.name}`}); / / 缓存当前子应用，避免多个地址触发时的重复加载microList[conf.name] = micro;try {await nextTick();await micro.mountPromise;return;} catch (e: any) {console.error(e);} finally {loadingInstance.close();}};watch(() =>appRoute.path, activationHandleChange);onMounted(async () =>{apps.value = await microStore.getApps();await nextTick();if (window.qiankunStarted) return;window.qiankunStarted = true;activationHandleChange(appRoute.path);});onUnmounted(() =>{window.qiankunStarted = false; / / 获取当前缓存中的子应用，并逐个进行卸载Object.keys(microList).forEach((key: string) =>{microList[key].unmount();delete microList[key];});});< / script> <style lang="scss" scoped>.micro-container {display: none;}.show {display: block !important;}< / style> The global state applies to global information across the entire application (including the main application and sub-applications) and can be used for global communication regarding state changes.

[0049] Optionally, in one embodiment, rendering personalized components on the front-end page based on the personalized content rules currently in effect for the user includes: Determine whether there are personalized component rules in the front-end page with reserved personalized rendering positions. If there are, load the personalized component and pass in the personalized component information, which includes the package name and component name of the personalized component, as well as the sub-application, location and address corresponding to the personalized component. During runtime, tags are dynamically created based on the personalized component information; Based on the tag, an asynchronous component is invoked to render personalized components on the front-end page.

[0050] In this embodiment, after a user successfully logs in, the system obtains the user's personalized component information and renders it using Vue's asynchronous component defineAsyncComponent according to the rendering rules.

[0051] Retrieve the personalized components currently in effect for the user and write them to the global state, as shown in the example below.

[0052] import usePersonalizationStore from '@ / store / personalization'; /

[0053] Get the current user's rendering rules / const getUserPersonalizationRule = async () =>{ const personalizationStore = usePersonalizationStore(); const userRules = await getPersonalizationRulesByUserApi(); personalizationStore.setRules(userRules.data || [ ]); }; When a user accesses a personalized section, the system checks if a matching personalized rule exists. If it does, the content is rendered according to the personalized component information; otherwise, the standard default content is displayed. The steps are as follows: Step 1: Determine if there are personalized rules in the front-end page with reserved personalized rendering space. If so, load the personalized component and pass in the personalized information, as shown in the example below.

[0054] <template> I am the standard version <personalization v-else :rule-info="personalizationRules" / > < / template> <script lang="ts" setup>import { Personalization} from '@sgui / base-core';import usePersonalization from '@ / hooks / usePersonalization';import { PERSONALIZATION_CODES} from '@ / utils / config'; / / PERSONALIZATION_CODES.personalCenter为当前的位置编码const { personalizationRules} = usePersonalization(PERSONALIZATION_CODES.personalCenter);< / script> / / @ / hooks / usePersonalization.ts import { shallowRef, onMounted} from 'vue'; import { type IPersonalizationRules} from '@sgui / base-core'; import usePersonalizationStore from '@ / store / personalization'; /

[0055] Personalized hooks @param code corresponds to the position encoding. / const usePersonalization = (code: string) =>{ / / Personalized rules const personalizationRules = shallowRef<IPersonalizationRules | null> (null); const getPersonalizationConfig = (rules: IPersonalizationRules[ ]):IPersonalizationRules | null =>{ if (!code || !(rules || [ ]).length) return null; return rules.find((rule) =>rule.uniqueIndex === code) || null; }; /

[0056] Get personalized rendering rules / const getPersonalizationRules = () =>{ const personalizationStore = usePersonalizationStore(); personalizationRules.value = getPersonalizationConfig(personalizationStore.rules); }; onMounted(() =>{ getPersonalizationRules(); }); return { personalizationRules};}; export default usePersonalization; Step 2: Load JS and CSS using runtime-import based on the personalized component information. The key API is Document.createElement(). Step 3: Call `defineAsyncComponent` to render the customized component. Add transition animations, error messages, and timeout configurations to the `defineAsyncComponent` rendering. An example is shown below.

[0057] / / Personalization.vue in @sgui / base-core <template> <personalizationcomponent / > < / template> <script setup lang="ts">import usePersonalization from '. / usePersonalization';import type { IPersonalizationRules} from '.. / .. / types / personalization';type IProps = { / / 个性化规则ruleInfo: IPersonalizationRules;type?: 'esm' | 'umd';}const props = withDefaults(defineProps<IProps>(), {type: 'umd'});const { personalizationComponent} = usePersonalization(props);< / script> / / usePersonalization.ts import { defineAsyncComponent, markRaw, onErrorCaptured, onMounted,ref} from 'vue'; import { importComponent} from 'runtime-import'; import ErrorComponent from '. / loading / ErrorComponent.vue'; import LoadingComponent from '. / loading / LoadingComponent.vue'; import type { IPersonalizationRules, IPersonalizationProps} from'.. / .. / types / personalization'; const usePersonalization = (props: IPersonalizationProps) =>{ / / Personalized components const personalizationComponent = ref(markRaw(defineAsyncComponent({ / / Default display component loader: () =>import('. / loading / DefaultComponent.vue'), / / Display the delay time before components load, the default is 200ms delay: 200, / / Components displayed after loading failure errorComponent: ErrorComponent, / / If a timeout limit is provided and it times out / / This will also display the error-reporting component configured here. The default value is: Infinity timeout: 5000 }))); /

[0058] Load JS and CSS files @param componentInfo @returns / const getPersonalizationComponent = async (componentInfo:IPersonalizationRules) =>{ const options = { js: [componentInfo.umd || ''], css: componentInfo.css ? [componentInfo.css] : [ ], / / Do not override define umd: false }; if (componentInfo.css) { options.css.push(componentInfo.css); } / / umd import return importComponent(options);}; /

[0059] Remotely retrieve component content and render it. @returns / const renderP = async () =>{ if (!props.ruleInfo) return; / / Returns if umd does not exist. Since the sub-application does not currently support esm, umd is used. if (!props.ruleInfo.umd) return; / / Render personalized components personalizationComponent.value = markRaw(defineAsyncComponent({ loader: async () =>{ await getPersonalizationComponent(props.ruleInfo); return (window as any)[props.ruleInfo.libraryName][props.ruleInfo.componentName]; }, loadingComponent: LoadingComponent, errorComponent: ErrorComponent, timeout: 10000 })); }; onErrorCaptured((callback) =>{ console.log(callback); }); onMounted(async () =>{ await renderP(); }); return { personalizationComponent}; }; export default usePersonalization; SGUI (Airline Selling GUI) is the front-end for airline sales. Based on managed service software in the PSS product sales field, SGUI provides an SAT service interface to integrate workflows for actual business scenarios such as ticket control, sales processing, query statistics, and other aspects of ticketing and related services. It offers a graphical management and operation interface to airline sales personnel and sales managers.

[0060] The standard version is the default version of the software or service, providing a basic and general set of functions to meet common needs. It has undergone extensive testing and optimization. In this embodiment, it refers to the set of functions provided by SGUI.

[0061] Personalization is the customization and optimization of software or services based on user needs and preferences to meet diverse needs and improve user experience. In this embodiment, it refers to the needs proposed by airlines or agents that differ from the standard version and cannot be integrated.

[0062] Optionally, in one embodiment, the front-end page is logically extended and rendered based on the personalized content rules currently in effect for the user, including: Determine whether there are logical extension rules in the front-end page with reserved personalized rendering positions. If there are, obtain the logical extension rule information, wherein the logical extension rule information includes the package name and method name of the logical extension, as well as the sub-application, location and address corresponding to the logical extension. Based on the logical extension rule information, the script language file corresponding to the logical extension is loaded using a preset function; Based on the method name of the logical extension, the corresponding method is called from the script language file to perform logical extension rendering on the front-end page.

[0063] In this embodiment, refer to Figure 10 , Figure 10 This is a schematic diagram of the logic extension process of the present invention. For example... Figure 10 As shown, the implementation of logical extensions is largely the same as that of personalized components. Taking the standard sales process as an example, the process first queries flights, selects flights, and selects fares. When the standard sales process reaches a reserved position, it determines whether a personalized logical extension exists at that position. If it does, the logical extension JavaScript is loaded based on the address obtained from the logical personalization information, and then the personalized logical extension method is executed based on the package name and method name. Obtaining logical extension information is the same as obtaining personalized component information, and will not be repeated here. The implementation steps of logical extensions are as follows: Step 1: Determine if there are any logical extension rules for the user's current personalized reserved location. If so, load the corresponding JS file for the logical extension and obtain the rule information. Step 2: Load the JS file using runtime-import based on the logical expansion rule information; Step 3: Call the method name entered in the personalized rule management to execute the extended logic.

[0064] The implementation is as follows: Use the `usePersonalization.ts` file in the personalization component to obtain the current logical extension rule.

[0065] const { personalizationRules} = usePersonalization(PERSONALIZATION_CODES.createPNR); The loading logic extends the corresponding JS file, and the loading logic is consistent with that in the personalized component. In this embodiment, the default function is the import() function, which calls the importComponent method of runtime-import to load the component.

[0066] import { importComponent} from 'runtime-import'; /

[0067] Load JS and CSS files @param componentInfo @returns / const getPersonalizationComponent = async (componentInfo:IPersonalizationRules) =>{ const options = { js: [componentInfo.umd || ''], / / Do not override define umd: false }; / / umd import return importComponent(options); }; In the reserved space, execute the logic extension method. Note whether the extension method returns a Promise and add corresponding asynchronous execution support.

[0068] const createPNR = () =>{ const pnr = {} / / ... This is the standard version's PNR generation logic if (!!personalizationRules) { / / Call the logic extension method try { return (window as any)[personalizationRules.libraryName][personalizationRules.fun](pnr); } catch { console.error('Failed to execute logic extension method'); } } return pnr; } Optionally, in one embodiment, data subscription rendering of the front-end page is performed based on the personalized content rules currently in effect for the user, including: Determine whether there is a data subscription rule in the front-end page with reserved personalized rendering position. If there is, obtain the data subscription rule information, wherein the data subscription rule information includes the sub-application, location and address corresponding to the data subscription; The data subscription rule information is sent to the front-end page for data subscription rendering via the data subscription API.

[0069] In this embodiment, refer to Figure 11 , Figure 11 This is a schematic diagram of the data subscription logic of the present invention. Figure 11 As shown, the implementation of data subscription is largely the same as that of personalized components. Continuing with the standard sales process as an example, when the standard sales process reaches a reserved location, it checks whether the current user has a data subscription at that location. If so, it calls the corresponding API to send data to the address in the personalized information of the data subscription. For example... Figure 11 The ticketing information is retrieved from the database. Obtaining data subscription information and obtaining personalized component information is the same, and will not be repeated here. The implementation steps for data subscription are as follows: Step 1: Determine if a data subscription rule exists for the user in the current personalized reserved location; if so, retrieve the rule information. Step 2: Call the API for data subscription information to transmit data.

[0070] The implementation is as follows: Extend the usePersonalization.ts file in the personalization component to support common requests via fetch.

[0071] import { shallowRef, onMounted} from 'vue'; import { useMyFetch, type IPersonalizationRules} from '@sgui / base-core'; import type { UseFetchReturn} from '@vueuse / core'; import usePersonalizationStore from '@ / store / personalization'; /

[0072] Personalized hooks @param code Location area code / const usePersonalization = (code: string) =>{ / / Personalized rules const personalizationRules = shallowRef<IPersonalizationRules | null> (null); const getPersonalizationConfig = (rules: IPersonalizationRules[ ]):IPersonalizationRules | null =>{ if (!code || !(rules || [ ]).length) return null; return rules.find((rule) =>rule.uniqueIndex === code) || null; }; /

[0073] Get personalized rendering rules / const getPersonalizationRules = () =>{ const personalizationStore = usePersonalizationStore(); personalizationRules.value = getPersonalizationConfig(personalizationStore.rules); }; /

[0074] POST call @param params Parameter / const postToAIGPersonalization = async (params: any) =>{ if (personalizationRules.value?.url) { await useMyFetch(personalizationRules.value.url, { headers: { 'Cross-Method': 'CORS', 'Content-Type': 'application / json', 'App-Id': 'SGUI'}},<0000�70>{ ignoreError: true}).post(params); } }; / <@

[0075] put call @param params Parameter / const putToAIGPersonalization = async (params: any) =>{ if (personalizationRules.value?.url) { await useMyFetch(personalizationRules.value.url, { headers: { 'Cross-Method': 'CORS', 'Content-Type': 'application / json', 'App-Id': 'SGUI'}}, { ignoreError: true}).put(params); } }; /

[0076] get call @param params Parameter / const getToAIGPersonalization = async (params: any): Promise<UseFetchReturn <any>>=>{ if (personalizationRules.value?.url) { const urlparams = new URLSearchParams(); Object.keys(params).forEach(item =>{ urlparams.append(item, params[item]); }); return useMyFetch(`${personalizationRules.value.url}?${urlparams.toString()}`, { headers: { 'Cross-Method': 'CORS', 'Content-Type': 'application / json', 'App-Id': 'SGUI'}}, { ignoreError: true}).get().json(); } return {} as Promise<UseFetchReturn <any>> }; onMounted(() =>{ getPersonalizationRules(); }); return { personalizationRules, postToAIGPersonalization, putToAIGPersonalization, getToAIGPersonalization}; }; export default usePersonalization; In the corresponding scenario, call the API information entered in the personalization management.

[0077] / / Order inbound data synchronization const { postToAIGPersonalization} = usePersonalization(PERSONALIZATION_CODES.sellAgentCreatePNRSaveOrderToAIG); const createPNR = async () =>{ const pnr = {} / / ... This is the standard version's PNR generation logic if (!!postToAIGPersonalization) { / / Execute data subscription service call await postToAIGPpersonalization(pnr).catch(() => 'Data subscription service call failed'); } return pnr; } Secondly, embodiments of the present invention also provide a front-end page personalization implementation device.

[0078] In one embodiment, reference is made to Figure 12 , Figure 12 This is a schematic diagram of the functional modules of an embodiment of the front-end page personalization device of the present invention. Figure 12 As shown, the front-end page personalization implementation device includes: The information acquisition module 10 is configured to acquire personalized content when a user with personalized rendering rules accesses a front-end page with a reserved personalized rendering location. The personalized rule management module 20 is configured to manage the information and effective rules of the personalized content, and obtain the personalized content rules that are currently in effect for the user. The personalized page rendering module 30 is configured to perform personalized rendering on the front-end page based on the personalized content rules currently in effect for the user, so as to obtain a personalized front-end page.

[0079] Optionally, in one embodiment, the personalized content includes at least one of a personalized page, a personalized component, a logical extension, and a data subscription; The personalized rendering includes at least one of personalized page rendering, personalized component rendering, logical extension rendering, and data subscription rendering.

[0080] Optionally, in one embodiment, the personalized rule management module 20 is configured to: Enter the name, address, matching rules, and version number of the personalized page through the sub-application management module; The personalized management module inputs the package name, component name, and effective personalized component rule information of the personalized component, the package name, method name, and effective logical extension rule information of the logical extension, and the address, location, and effective data subscription rule information of the data subscription.

[0081] Optionally, in one embodiment, the personalized page rendering module 30 is configured to: Create a corresponding empty container element on the mounted container and hide it; Get the path of the current route; Based on the sub-application's name, address, matching rules, and version number, find the sub-application that matches the path of the current route and denote it as the target sub-application; If it is detected that the target sub-application has not been loaded, then the target sub-application is loaded, cached in the empty container element, and then the empty container element is set to be displayed.

[0082] Optionally, in one embodiment, the personalized page rendering module 30 is configured to: Determine whether there are personalized component rules in the front-end page with reserved personalized rendering positions. If there are, load the personalized component and pass in the personalized component information, which includes the package name and component name of the personalized component, as well as the sub-application, location and address corresponding to the personalized component. During runtime, tags are dynamically created based on the personalized component information; Based on the tag, an asynchronous component is invoked to render personalized components on the front-end page.

[0083] Optionally, in one embodiment, the personalized page rendering module 30 is configured to: Determine whether there are logical extension rules in the front-end page with reserved personalized rendering positions. If there are, obtain the logical extension rule information, wherein the logical extension rule information includes the package name and method name of the logical extension, as well as the sub-application, location and address corresponding to the logical extension. Based on the logical extension rule information, the script language file corresponding to the logical extension is loaded using a preset function; Based on the method name of the logical extension, the corresponding method is called from the script language file to perform logical extension rendering on the front-end page.

[0084] Optionally, in one embodiment, the personalized page rendering module 30 is configured to: Determine whether there is a data subscription rule in the front-end page with reserved personalized rendering position. If there is, obtain the data subscription rule information, wherein the data subscription rule information includes the sub-application, location and address corresponding to the data subscription; The data subscription rule information is sent to the front-end page for data subscription rendering via the data subscription API.

[0085] The functions of each module in the aforementioned front-end page personalization implementation device correspond to the steps in the aforementioned front-end page personalization implementation method embodiment, and their functions and implementation processes will not be described in detail here.

[0086] Thirdly, embodiments of the present invention also provide an electronic device, the structure of which is as follows: Figure 13 As shown, it includes: a memory and a processor, wherein the processor is used to read and execute the computer program stored in the memory to implement the aforementioned method for personalizing a front-end page.

[0087] Fourthly, embodiments of the present invention also provide a computer storage medium storing computer-executable instructions, which, when executed, implement the aforementioned method for personalizing a front-end page.

[0088] Finally, it should be noted that while some processes described in the embodiments of the present invention include multiple operations or steps that appear in a specific order, it should be understood that these operations or steps may not be executed in the order they appear in the embodiments of the present invention, or may be executed in parallel. The sequence number of the operation is only used to distinguish different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed sequentially or in parallel, and these operations or steps may be combined.

[0089] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing embodiments or make equivalent substitutions for some of the technical features. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.< / any> < / any>

Claims

1. A method for implementing front-end page personalization, characterized in that, The method includes: When a user with personalized rendering rules visits a front-end page with a reserved personalized rendering location, personalized content is retrieved. The information and activation rules of the personalized content are managed to obtain the personalized content rules that are currently in effect for the user; The front-end page is rendered in a personalized manner based on the personalized content rules currently in effect for the user, resulting in a personalized front-end page.

2. The method for personalizing front-end pages according to claim 1, characterized in that, The personalized content includes at least one of the following: personalized page, personalized component, logical extension, and data subscription; The personalized rendering includes at least one of personalized page rendering, personalized component rendering, logical extension rendering, and data subscription rendering.

3. The method for personalizing front-end pages according to claim 2, characterized in that, The management of the personalized content information and its activation rules to obtain the personalized content rules currently in effect for the user includes: Enter the name, address, matching rules, and version number of the personalized page through the sub-application management module; The personalized management module inputs the package name, component name, and effective personalized component rule information of the personalized component, the package name, method name, and effective logical extension rule information of the logical extension, and the address, location, and effective data subscription rule information of the data subscription.

4. The method for personalizing front-end pages according to claim 3, characterized in that, The front-end page is rendered with personalized content rules based on the current user, including: Create a corresponding empty container element on the mounted container and hide it; Get the path of the current route; Based on the sub-application's name, address, matching rules, and version number, find the sub-application that matches the path of the current route and denote it as the target sub-application; If it is detected that the target sub-application has not been loaded, then the target sub-application is loaded, cached in the empty container element, and then the empty container element is set to be displayed.

5. The method for personalizing front-end pages according to claim 3, characterized in that, The front-end page is rendered with personalized components based on the personalized content rules currently in effect for the user, including: Determine whether there are personalized component rules in the front-end page with reserved personalized rendering positions. If there are, load the personalized component and pass in the personalized component information, which includes the package name and component name of the personalized component, as well as the sub-application, location and address corresponding to the personalized component. During runtime, tags are dynamically created based on the personalized component information; Based on the tag, an asynchronous component is invoked to render personalized components on the front-end page.

6. The method for personalizing front-end pages according to claim 3, characterized in that, The front-end page is logically extended and rendered based on the personalized content rules currently in effect for the user, including: Determine whether there are logical extension rules in the front-end page with reserved personalized rendering positions. If there are, obtain the logical extension rule information, wherein the logical extension rule information includes the package name and method name of the logical extension, as well as the sub-application, location and address corresponding to the logical extension. Based on the logical extension rule information, the script language file corresponding to the logical extension is loaded using a preset function; Based on the method name of the logical extension, the corresponding method is called from the script language file to perform logical extension rendering on the front-end page.

7. The method for personalizing front-end pages according to claim 3, characterized in that, The front-end page is rendered by data subscription based on the personalized content rules currently in effect for the user, including: Determine whether there is a data subscription rule in the front-end page with reserved personalized rendering position. If there is, obtain the data subscription rule information, wherein the data subscription rule information includes the sub-application, location and address corresponding to the data subscription; The data subscription rule information is sent to the front-end page for data subscription rendering via the data subscription API.

8. A device for personalizing front-end pages, characterized in that, The device includes: The information acquisition module is configured to acquire personalized content when a user with personalized rendering rules visits a front-end page with a reserved personalized rendering location. The personalized rules management module is configured to manage the information and effective rules of the personalized content, and obtain the personalized content rules that are currently in effect for the user. The personalized page rendering module is configured to perform personalized rendering of the front-end page based on the personalized content rules currently in effect for the user, thereby obtaining a personalized front-end page.

9. An electronic device, characterized in that, include: Memory and processor; The processor is configured to read and execute the computer program stored in the memory to implement the steps of the front-end page personalization method as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed, implement the steps of the front-end page personalization method as described in any one of claims 1-7.

Images