Dynamic rendering engine-based page configurable generation system and method

Abstract

The invention provides a page configurable generation system and method based on a dynamic rendering engine, and the system comprises a dynamic canvas rendering engine which completes the dynamic rendering of a page based on JSON configuration, and supports the free dragging and position adjustment of a component in a canvas; the financial industry-level component library is used for providing configurable financial business components for the canvas; the permission sandbox module is used for carrying out parameter verification, interface fault isolation and permission control of the movable component on component configuration; and the configuration management system is used for dynamically loading a corresponding attribute configuration panel according to the component selected on the canvas, and supporting real-time preview, configuration synchronization and data persistent storage. Through a multi-level permission verification and data verification mechanism, the compliance and safety of financial marketing activities are ensured, the operation risk and the data leakage risk are effectively prevented, and good safety and reliability are achieved.

Description

Technical Field

[0001] This invention relates to the field of financial technology, specifically to a method and system for generating configurable pages based on a dynamic rendering engine, and more particularly to a low-code configurable method and system for generating financial marketing campaign pages based on a dynamic rendering engine. Background Technology

[0002] The following technical bottlenecks exist in the development of traditional financial marketing campaign pages: Low development efficiency: Each fund marketing page requires repetitive front-end development work. For example, the fund manager recommendation page takes an average of 15 person-days, the roadshow event page takes 12 person-days, and the product promotion page takes 10 person-days. This repetitive development leads to a significant waste of human resources.

[0003] There are gaps in cross-departmental collaboration: the marketing needs of business departments cannot be directly translated into page configurations. They must rely on the technical team to convert the design drafts into code implementation, which results in high communication costs and long response cycles.

[0004] Extremely low component reuse rate: Components unique to the financial industry, such as yield trend charts, net asset value curves, and risk rating displays, lack standardized encapsulation, requiring the redevelopment of similar functions each time.

[0005] Existing low-code platforms are mainly geared towards general scenarios and lack specialized components and data integration capabilities for the financial industry, thus failing to meet the special needs of fund marketing pages for real-time data display, compliance requirements, and multi-terminal adaptation.

[0006] Patent document CN118626724A discloses a business function recommendation processing method and apparatus, but it mainly completes customized recommendations for a specified customer group and more accurately predicts the potential needs of customers, without solving the above-mentioned problems. Summary of the Invention

[0007] In view of the shortcomings of the prior art, the purpose of this invention is to provide a configurable page generation method and system based on a dynamic rendering engine.

[0008] A configurable page generation system based on a dynamic rendering engine, according to the present invention, includes: The dynamic canvas rendering engine uses JSON configuration to dynamically render the page and supports free dragging and repositioning of components on the canvas. A financial industry-grade component library, used to provide configurable financial business components to the canvas; The permission sandbox module is used to perform parameter validation of component configurations, isolate interface faults, and control permissions for active components. The configuration management system dynamically loads the corresponding property configuration panel based on the component selected on the canvas, and supports real-time preview, configuration synchronization, and persistent data storage.

[0009] Preferably, the dynamic canvas rendering engine achieves second-level dynamic rendering of page elements by listening to changes in configuration data; the canvas component adopts Vue.js's reactive data binding mechanism and stores page component configuration information through a canvas component list array.

[0010] Preferably, each component configuration includes a component name, a unique identifier key, attribute configuration, and style configuration; when the configuration changes, Vue's watch function listens for changes in the latest modified configuration in the attribute panel and calls the update function method to synchronously update the component state in the canvas.

[0011] Preferably, the financial industry-level component library includes basic components and business components; The basic components include: This multi-functional text component supports rich text editing and has the ability to dynamically compile CSS properties. Personalized image components support customizable multi-hotspot selection configurations, allowing you to set multiple clickable areas; The business components include a product card component, which has a built-in financial data source docking engine that can acquire real-time financial data.

[0012] Preferably, the product card component includes product cards, roadshow cards, manager cards, research report cards, and manager opinion cards; the product card component has real-time data connection capabilities, enabling fuzzy searches of fund products through the RemoteSearchInput component, and supporting searches by product code or name; the search results are automatically filled with the product's basic information, performance data, and risk indicators.

[0013] Preferably, the permission sandbox module performs parameter validation on component configurations using the cardMustParamsVerify method, implements external interface fault isolation through a try-catch mechanism, and implements permission control for active components through the marketUtils utility class.

[0014] Preferably, the attribute configuration panel adopts a dynamic component rendering method, dynamically loading the corresponding attribute configuration component according to the attrComp attribute of the selected component; the canvas configuration supports dynamic setting of background color and background image, and the style is updated in real time through canvasAttrs computed properties; data persistence is achieved through JSON serialization, and page configuration and component information are uniformly stored in the content field.

[0015] A configurable page generation method based on a dynamic rendering engine, provided by the present invention, includes: Drag and drop component steps: Use the dynamic canvas rendering engine to respond to drag and drop component operations, assign a unique identifier key to the component, and initialize the default configuration parameters; Configuration population steps: The system responds to the configuration operation in the property panel, obtains the corresponding product information, and automatically populates it into the component configuration; Page saving steps: Serialize the current page after configuration into JSON format and store it.

[0016] Preferred options also include: The system allows for personalized configuration steps, including customizing recommendation reasons and card styles; the system provides real-time previews of the configuration effects, and leverages Vue's reactive mechanism to instantly reflect configuration changes.

[0017] Preferably, the searchFund interface is used to perform fuzzy searches for product information and the search results are returned as a matching list.

[0018] Compared with the prior art, the present invention has the following beneficial effects: 1. This invention reduces the development time of fund marketing pages from 15 people / day to 1.5 hours through drag-and-drop component configuration, improving efficiency by about 80 times; business personnel can directly configure the pages without the need for technical personnel to participate in repetitive development work.

[0019] 2. The system of this invention has built-in interfaces to connect with mainstream financial data providers, supporting the real-time acquisition and display of data such as fund net asset value, yield, and risk rating; the data update delay is controlled at the second level, meeting the strict requirements of financial marketing for data timeliness.

[0020] 3. The standardized financial business components in this invention can be reused in different marketing activities, increasing the component reuse rate from less than 10% to over 90%, which is a significant improvement.

[0021] 4. This invention ensures the compliance and security of financial marketing activities through multi-level permission verification and data verification mechanisms, effectively preventing operational risks and data leakage risks, and has good security and reliability. Attached Figure Description

[0022] Other features, objects, and advantages of the present invention will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings: Figure 1 This is a diagram of the overall system architecture of the present invention.

[0023] Figure 2 This is a flowchart of the dynamic canvas rendering engine workflow in this invention.

[0024] Figure 3 This is an organizational structure diagram of the financial industry-level component library in this invention.

[0025] Figure 4 This is a flowchart of the data persistence process in the configuration management system of this invention.

[0026] Figure 5 This is a flowchart of the method of the present invention. Detailed Implementation

[0027] The present invention will now be described in detail with reference to specific embodiments. These embodiments will help those skilled in the art to further understand the present invention, but do not limit the invention in any way. It should be noted that those skilled in the art can make several changes and improvements without departing from the concept of the present invention. These all fall within the scope of protection of the present invention.

[0028] Reference Figure 1 As shown, a configurable page generation system based on a dynamic rendering engine includes: The dynamic canvas rendering engine uses JSON configuration to dynamically render the page and supports free dragging and repositioning of components on the canvas. A financial industry-grade component library, used to provide configurable financial business components to the canvas; The permission sandbox module is used to perform parameter validation of component configurations, isolate interface faults, and control permissions for active components. The configuration management system dynamically loads the corresponding property configuration panel based on the component selected on the canvas, and supports real-time preview, configuration synchronization, and persistent data storage.

[0029] Specifically: 1. Dynamic Canvas Rendering Engine like Figure 2 As shown, this engine employs a real-time page generation mechanism based on JSON configuration. By monitoring changes in configuration data, it achieves dynamic rendering of page elements within seconds. The specific implementation method is as follows: If the canvas component uses Vue.js's reactive data binding mechanism, it stores the page component configuration information through a canvas component list (canvasComList) array. Each component configuration includes a component name (name), a unique identifier key, property configurations (options), and style configurations (cardStyle). When the configuration changes, Vue's watch function listens for changes in the latest modified configuration in the property panel and calls the update function (syncComponentOpts) to synchronously update the component state in the canvas.

[0030] The component coordinate memory feature implements version control by assigning a unique key value to each component. The system automatically records the component's position information and attribute configuration, supporting one-click rollback to historical versions. Drag and drop operations are implemented using the vuedraggable library, supporting free dragging and repositioning of components on the canvas.

[0031] 2. Financial Industry-Level Component Library like Figure 3 As shown, the system provides two types of core components: The basic components include a multi-functional text component (TextComp) and a personalized image component (ImageComp). The text component supports rich text editing, has dynamic CSS property compilation capabilities, and can inject Less variables to achieve dynamic style changes. The image component supports custom multi-hotspot selection configurations, allowing you to set multiple clickable areas, each of which can be configured with independent jump links and parameter collection.

[0032] The business components are designed to meet the specific needs of the financial industry, including FundDetailCard, RoadshowCard, ManagerCard, ResearchReportCard, and ResearchSummaryCard. These components have built-in engines for connecting to financial data sources such as Wind and Juyuan, enabling them to automatically acquire real-time data such as fund net asset value, yield, and risk level.

[0033] The product card component features real-time data integration, enabling fuzzy searches for fund products via the RemoteSearchInput component, supporting queries by product code or name. Search results are automatically populated with basic product information, performance data, and risk indicators. The yield trend chart uses SVG vector graphics rendering, supporting dynamic data updates and interactive operations.

[0034] 3. Permission Sandbox Mechanism The system has constructed a multi-layered security system to ensure data integrity and business compliance throughout the entire process of creating and publishing special pages: Data Integrity Authentication Layer The `cardMustParamsVerify` method is used to verify the integrity of component-level parameters. This mechanism is triggered before the topic page is saved, and a recursive traversal algorithm is used to perform depth detection on all components within the canvas. 1. Traverse the page component tree structure and extract the list of required parameters (mustParams) for each component.

[0035] 2. Implement differentiated validation strategies for different business components (product cards, roadshow cards, fund manager cards, etc.), and perform special handling of multi-level parameters of image hotspots and non-empty judgment of rich text content.

[0036] 3. When a missing parameter is detected, the system automatically locates the abnormal component, triggers the viewport scrolling mechanism to place the problem card in the center of the visible area and highlight it, and simultaneously sends a Toast message to accurately indicate the location of the missing field, blocking the saving process and forcing the user to complete the data.

[0037] External Dependency Tolerance Layer To address scenarios with unstable external data sources, a try-catch exception handling mechanism is implemented. When the queryMarketPageDetail API call fails or times out, the system enters a fallback mode: it reads historical configuration data from the local sessionStorage cache to ensure normal rendering of the editor canvas and prevent data loss due to fluctuations in external services.

[0038] Financial Marketing Campaign Access Control Layer The `marketUtils` utility class implements special permission management for timed lottery activities (`ActivitiesTimeCard`) and task activities (`ActivitiesTaskCard`). Before saving, the `isActivityCard` method scans the component tree to identify whether it contains activity-type components, dynamically enables the enterprise authentication switch, and calls the `getActivityUniqueId` interface to generate a globally unique identifier (activity ID and task ID) for each activity component, ensuring the isolation of activity data. The `saveActivityCard` method is executed to persist the activity configuration (prize information, time rules, task objectives) to the marketing activity management system, realizing two-way association verification between the special page and the activity system. The `createPageAllPath` method generates an activity page link with login status verification. When an unauthorized user triggers the activity, they are automatically redirected to the login page. After successful login, a context jump is carried back to ensure the compliance of the identity of participants in financial marketing activities.

[0039] 4. Configuration-based management system like Figure 4 As shown, the attribute configuration panel uses a dynamic component rendering method, dynamically loading the corresponding attribute configuration component based on the attrComp attribute of the selected component. Each component has an independent attribute configuration interface, supporting real-time preview and configuration synchronization.

[0040] The canvas configuration supports dynamic setting of background color and background image, with real-time style updates achieved through the canvasAttrs computed property. Configuration changes are handled using a debouncing mechanism to avoid frequent re-rendering operations.

[0041] Data persistence is achieved through JSON serialization. Page configuration and component information are uniformly stored in the content field, which includes two parts: pageConfig (canvas configuration) and components (component configuration).

[0042] like Figure 5 As shown, a configurable page generation method based on a dynamic rendering engine includes: Drag and drop component steps: Use the dynamic canvas rendering engine to respond to drag and drop component operations, assign a unique identifier key to the component, and initialize the default configuration parameters; Configuration population steps: The system responds to the configuration operation in the property panel, obtains the corresponding product information, and automatically populates it into the component configuration; The system allows for personalized configuration steps, including customizing recommendation reasons and card styles; the system provides real-time previews of the configuration effects, and leverages Vue's reactive mechanism to instantly reflect configuration changes.

[0043] Page saving steps: Serialize the current page after configuration into JSON format and store it.

[0044] Example 1 Fund product marketing page generation Taking a fund product promotion page as an example, the specific implementation steps are as follows: The first step is for the user to drag and drop a product card component from the component library on the left to the center of the canvas. The system automatically assigns a unique identifier key to the component and initializes the default configuration parameters.

[0045] The second step is to configure product information in the properties panel on the right. Users enter fund codes or names in the recommended product input box, and the system performs a fuzzy search via the searchFund API, returning a list of matching funds for the user to choose from.

[0046] The third step involves selecting the target fund. The system automatically calls the `handleOptionDetail` method to retrieve detailed fund information, including the fund name, fund manager, and performance data, and automatically populates this information into the component configuration. Simultaneously, it generates the required parameter `mustParams` and the data tracking parameter `sensrosObj` for that fund.

[0047] Fourth, users can set personalized configurations such as recommendation reasons and card styles. The system previews the configuration effect in real time, and uses Vue's reactive mechanism to reflect configuration changes instantly.

[0048] Fifth, after configuration, click save. The system will serialize the page configuration into JSON format and store it, and at the same time call the getMarketPageUpdate interface to save it to the server.

[0049] Example 2 Marketing campaign page generation Taking the timed lottery activity page as an example, the specific implementation steps are as follows: The first step is for the user to drag and drop the ActivityTimeCard component, representing a timed lottery activity, onto the canvas. The system then assigns a unique activity ID and task ID to this activity using the getActivityUniqueId interface.

[0050] The second step is to configure the activity parameters in the properties panel, including the activity name, start time, end time, draw time, and prize information. The system will verify the validity of the time logic to ensure that the draw time falls within the activity period.

[0051] The third step is to configure the activity tasks, setting the actions users need to complete and the corresponding page redirect links. The system supports configuring various task types, such as browsing a specified page or completing a questionnaire survey.

[0052] Fourthly, when saving the activity page, the system first calls the `saveActivityCard` method to save the activity information to the activity management system, and then saves the page configuration. This separate storage ensures independent management of activity data and page configuration.

[0053] Through the above implementation methods, the present invention enables the rapid configurable generation of financial marketing pages, significantly improving development efficiency, lowering the technical threshold, and providing strong technical support for the digital marketing of financial institutions.

[0054] Those skilled in the art will understand that, besides implementing the system and its various devices, modules, and units provided by this invention in the form of purely computer-readable program code, the same functions can be achieved entirely through logical programming of the method steps, making the system and its various devices, modules, and units of this invention function in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers. Therefore, the system and its various devices, modules, and units provided by this invention can be considered as a hardware component, and the devices, modules, and units included therein for implementing various functions can also be considered as structures within the hardware component; alternatively, the devices, modules, and units for implementing various functions can be considered as both software modules implementing the method and structures within the hardware component.

[0055] Specific embodiments of the present invention have been described above. It should be understood that the present invention is not limited to the specific embodiments described above, and those skilled in the art can make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. Unless otherwise specified, the embodiments and features described in this application can be arbitrarily combined with each other.

Claims

1. A configurable page generation system based on a dynamic rendering engine, characterized in that, include: The dynamic canvas rendering engine uses JSON configuration to dynamically render the page and supports free dragging and repositioning of components on the canvas. A financial industry-grade component library, used to provide configurable financial business components to the canvas; The permission sandbox module is used to perform parameter validation of component configurations, isolate interface faults, and control permissions for active components. The configuration management system dynamically loads the corresponding property configuration panel based on the component selected on the canvas, and supports real-time preview, configuration synchronization, and persistent data storage.

2. The configurable page generation system based on a dynamic rendering engine according to claim 1, characterized in that, The dynamic canvas rendering engine achieves second-level dynamic rendering of page elements by listening to changes in configuration data; the canvas component adopts Vue.js's reactive data binding mechanism and stores page component configuration information through a canvas component list array.

3. The configurable page generation system based on a dynamic rendering engine according to claim 2, characterized in that, Each component configuration includes a component name, a unique identifier key, property configurations, and style configurations. When the configuration changes, Vue's watch function listens for changes in the latest modified configuration in the property panel and calls the update function method to synchronously update the component state in the canvas.

4. The configurable page generation system based on a dynamic rendering engine according to claim 1, characterized in that, The financial industry-level component library includes basic components and business components; The basic components include: This multi-functional text component supports rich text editing and has the ability to dynamically compile CSS properties. Personalized image components support customizable multi-hotspot selection configurations, allowing you to set multiple clickable areas; The business components include a product card component, which has a built-in financial data source docking engine that can acquire real-time financial data.

5. The configurable page generation system based on a dynamic rendering engine according to claim 4, characterized in that, The product card component includes product cards, roadshow cards, manager cards, research report cards, and manager opinion cards. The product card component has real-time data integration capabilities, enabling fuzzy searches of fund products through the RemoteSearchInput component, and supporting searches by product code or name. The search results are automatically populated with the product's basic information, performance data, and risk indicators.

6. The configurable page generation system based on a dynamic rendering engine according to claim 1, characterized in that, The permission sandbox module uses the cardMustParamsVerify method to validate component configuration parameters, uses a try-catch mechanism to isolate external interface faults, and uses the marketUtils utility class to control access permissions for active components.

7. The configurable page generation system based on a dynamic rendering engine according to claim 1, characterized in that, The attribute configuration panel uses a dynamic component rendering method, dynamically loading the corresponding attribute configuration component based on the attrComp attribute of the selected component; the canvas configuration supports dynamic setting of background color and background image, and the style is updated in real time through canvasAttrs computed properties; data persistence is achieved through JSON serialization, and page configuration and component information are uniformly stored in the content field.

8. A method for configurable page generation based on a dynamic rendering engine, employing the configurable page generation system based on a dynamic rendering engine as described in any one of claims 1-7, characterized in that, include: Drag and drop component steps: Use the dynamic canvas rendering engine to respond to drag and drop component operations, assign a unique identifier key to the component, and initialize the default configuration parameters; Configuration population steps: The system responds to the configuration operation in the property panel, obtains the corresponding product information, and automatically populates it into the component configuration; Page saving steps: Serialize the current page after configuration into JSON format and store it.

9. The configurable page generation method based on a dynamic rendering engine according to claim 8, characterized in that, Also includes: The personalized configuration steps involve customizing the recommendation reasons and card style. The system provides a real-time preview of the configuration, and uses Vue's reactive mechanism to reflect configuration changes instantly.

10. The configurable page generation method based on a dynamic rendering engine according to claim 8, characterized in that, Use the searchFund API to perform a fuzzy search for product information and return a list of matching results.

Images