Dynamic rendering method and system based on vue string template

Abstract

The present application relates to the technical field of web front end, and in particular to a dynamic rendering method and system based on VUE string template, which solves the problems of UI change requiring re-deployment, style conflict, limited component function and security risks in traditional front-end development. The method includes seven core steps of template management, intelligent matching, official SFC analysis, component generation, style isolation, dynamic rendering and life cycle management, and integrates intelligent preloading cache, gray release, incremental update and multi-level security verification mechanism. The system corresponds to the setting of seven function modules and intelligent cache, gray release extension module, which can be widely applied to information portal, enterprise system, e-commerce platform and other scenes, and realizes UI dynamic configuration and real-time rendering.

Description

Technical Field

[0001] This invention relates to the field of web front-end technology, specifically to a dynamic rendering method and system based on Vue string templates. Background Technology

[0002] As web applications become increasingly complex, front-end development frameworks are constantly evolving. Vue.js, as one of the mainstream front-end frameworks, adopts a component-based development model, encapsulating templates, scripts, and styles together through single-file components, providing a good development experience and code organization. In scenarios such as information portals, content management systems, and enterprise applications, it is often necessary to dynamically display different UI effects based on different data types and business scenarios.

[0003] In traditional front-end development, page display logic is typically hard-coded into the front-end code. When adjustments to the UI are needed, the code must be modified, the front-end application rebuilt and redeployed – a time-consuming and costly process. This is especially problematic in scenarios like information portals and content management systems where frequent style adjustments are required. Traditional development models suffer from the following technical issues: Lack of dynamic configuration capabilities: The page UI display logic is fixed in the code, making it impossible to dynamically adjust the page display without redeployment. Every UI change requires front-end developers to modify the code, rebuild, and redeploy, increasing development and maintenance costs.

[0004] Slow response time: UI changes require a complete development, testing, and deployment process, making it difficult to quickly respond to changes in user needs. For business scenarios that require rapid iteration, this delay is unacceptable.

[0005] Style conflict risk: Dynamically rendered content can easily conflict with existing page styles, affecting the overall page display. While CSS modularity or scoped styles can be used, these solutions are more complex to implement in dynamic rendering scenarios.

[0006] Component functionality is limited: Existing dynamic rendering solutions typically only support simple HTML rendering, making it difficult to support complex Vue component interactions. They also cannot utilize advanced features provided by the Vue framework, such as reactive data binding, computed properties, and lifecycle hooks.

[0007] Code execution security issues: Dynamic code execution may introduce security risks such as Cross-Site Scripting (XSS), and there is a lack of effective security control mechanisms. Existing solutions lack effective code verification and security control mechanisms, and cannot ensure the security of dynamic code.

[0008] Currently, the industry has proposed several solutions to the above problems, mainly including: Predefine multiple static components and select one to render based on conditions: This approach requires pre-developing all possible display components, resulting in a large amount of code and difficult maintenance. When adding new display styles, the code still needs to be modified and redeployed.

[0009] Using a template engine for string replacement: This method can only perform simple HTML string replacement and cannot support the full functionality of Vue components, such as reactive data binding and event handling.

[0010] Embedding a separate page using an iframe: This method can achieve style isolation, but it has drawbacks such as complex communication, poor SEO, and slow loading speed. Each time the iframe loads, the entire page resources need to be reloaded, impacting user experience.

[0011] Using a micro-frontend architecture: This approach allows for independent development and deployment of modules, but the architecture is complex, requires additional framework support, has a high learning curve, and is not suitable for simple dynamic display scenarios.

[0012] While existing technologies offer some dynamic rendering solutions, they all have their limitations and cannot simultaneously meet the requirements of dynamic configuration, full Vue component support, style isolation, high performance, and security. Therefore, there is an urgent need for a dynamic rendering method and system based on Vue string templates that can solve these problems. Summary of the Invention

[0013] To address the problems in existing technologies, this invention provides a dynamic rendering method and system based on Vue string templates. This method and system can achieve dynamic configuration and rendering of page UI without redeploying front-end code, while providing complete Vue component capabilities, style isolation, high performance, and security guarantees.

[0014] The technical solution adopted by this invention to solve its technical problem is: a dynamic rendering method based on Vue string templates, comprising the following steps: Step S1: The template management module stores and manages string templates in Vue single-file component format. Each template contains a unique identifier, conditional configuration, effective time range, and access control information. At the same time, it generates and stores a SHA-256 hash value for each template. Step S2: The template matching module receives business data and rendering context from the external system, and intelligently matches the corresponding template from the template list based on data type, model type, advertising identifier and user permission information; Step S3: The template parsing module uses the official Vue SFC compiler to parse the matched string template, extract the template, script, and style parts, and verify the integrity of the template hash value at the same time; Step S4: The component generation module wraps the parsed template content in a root container with a unique viewId, performs string replacement on the script content ("export default → configuration object assignment"), performs syntax validation and execution, and obtains the component configuration object; Step S5: The style isolation module generates a unique viewId for each dynamic component and wraps the style content in a scope with "#{viewId}.result-box" as the root selector, supporting dynamic compilation of SCSS / SASS preprocessors; Step S6: The dynamic rendering module uses Vue's h function to create a component instance, passes business data as props to the component, and injects the processed styles into document.head; Step S7: When a component is destroyed, the component lifecycle management module accurately removes the corresponding style node based on the viewId to avoid style pollution and memory leaks.

[0015] Specifically, the template matching in step S2 includes: when the advertisement attribute of the business data is true, the business data is directly used as the template object; when the business data is an array, the aggregate template is matched according to the templateTypeId of the first data in the array; when the business data is an object, the corresponding template is matched according to the type or modelType attribute of the object.

[0016] Specifically, the template hash integrity verification in step S3 includes: when the front end obtains the template, it also obtains the corresponding hash value, calculates the hash value of the received template string using the same SHA-256 algorithm, and if the two hash values ​​are inconsistent, it is determined that the template has been tampered with, rendering is refused and an error message is returned.

[0017] Specifically, it also includes an intelligent preloading cache step: the system predicts the pages that users may visit and the templates they need to use based on user behavior data and page access frequency, and loads these templates into the front-end cache in advance; the front-end cache adopts an LRU eviction policy, and when the cache capacity reaches the threshold, the least recently used template is automatically removed.

[0018] Specifically, it also includes the template gray-scale release steps: the template management module supports assigning different versions of templates to different user groups, dividing users into different gray-scale groups based on the hash value of the user ID, and each gray-scale group uses a specified version of the template; it also supports quick rollback of template versions, and when a new version of the template has a problem, it can switch back to the previous stable version with one click.

[0019] Specifically, the SCSS / SASS preprocessor processing in step S5 includes: when the style tag declares lang as scss or sass, the style content is first compiled into CSS using the Sass compiler, then wrapped by the root selector, and finally compiled into the final CSS code; if the style contains variables or dynamic binding syntax, an error is thrown and component generation is blocked.

[0020] Specifically, it also includes multi-level security verification steps: during the template storage stage, the template, script, and style parts of the template are subjected to syntax verification and security checks respectively, and dangerous syntax such as v-html, inline events, and javascript: protocol is prohibited; during the rendering stage, the dompurify library is used to perform XSS protection on the template content, and only whitelisted tags and attributes are allowed.

[0021] Specifically, it also includes an incremental template update step: when the template content changes, the backend calculates the differences between the old and new templates and only sends the differences to the frontend; the frontend updates the locally cached template based on the differences, reducing network transmission and loading time.

[0022] A dynamic rendering system based on Vue string templates, including: The template management module is used to store and manage string templates in Vue single-file component format, and provides template CRUD functions, access control, version management and hash verification functions; The template matching module is used to intelligently select the corresponding rendering template based on the business data type, model type, advertising identifier, and user permission information. The template parsing module is used to parse string templates using the official Vue SFC compiler, extract the template, script, and style parts, and verify the integrity of the template; The component generation module is used to dynamically construct Vue component objects based on the parsing results, process script content, and obtain component configurations. The style isolation module is used to generate a unique identifier for each dynamic component, thereby achieving style scope isolation and dynamic injection. The dynamic rendering module is used to create component instances using Vue's rendering functions, pass business data, and render it to the page. The lifecycle management module is used to manage the creation, updating, and destruction of dynamic components, and clean up the corresponding style nodes when a component is destroyed.

[0023] Specifically, it also includes an intelligent caching module for implementing front-end and back-end caching of templates. The front-end cache adopts an LRU eviction policy, and the back-end cache caches template data to Elasticsearch. The cache validity period is configurable. It also includes a canary release module to support canary release and version rollback functions for templates.

[0024] The beneficial effects of this invention are: This invention enables dynamic, deployment-free adjustment of the page UI, significantly improving development and maintenance efficiency and business response speed. Precise style isolation is achieved through unique identifiers, avoiding style pollution and memory leaks. Full Vue component functionality is supported, enhancing system flexibility and scalability. A multi-layered security protection system is built to effectively prevent template tampering and XSS attacks. Intelligent caching and incremental updates optimize system performance, while supporting canary releases and version rollbacks, significantly reducing release risks. Attached Figure Description

[0025] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0026] Figure 1 This is an architecture diagram of the dynamic rendering system based on VUE string templates provided by the present invention; Figure 2 The template parsing and component generation flowchart provided by this invention; Figure 3 A diagram illustrating the style isolation and dynamic injection mechanism provided by this invention; Figure 4 The flowchart of dynamic rendering and data binding provided by this invention; Figure 5 The flowchart for the intelligent template matching provided by this invention. Detailed Implementation

[0027] To make the technical means, creative features, objectives and effects of this invention easier to understand, the invention will be further described below in conjunction with specific embodiments.

[0028] like Figures 1-5 As shown, the dynamic rendering method based on Vue string templates described in this invention includes the following steps: Step S1: Template Management and Hash Verification The template management module uses a PostgreSQL relational database for persistent template data storage. Each template includes fields such as templateTypeId (unique template ID), condition (template business type), createDate (creation time), createUser (creator), showTemplate (template content displayed on PC), mobileShowTemplate (template content rendered on mobile), orgTypeCode (identity and permission code), requiredAuth (whether login is required for visibility), triggerStartTime (effective start time), and triggerEndTime (effective end time). Simultaneously, the system generates a SHA-256 hash value for each template and stores it along with the template content for subsequent integrity verification.

[0029] The template management module also provides access control functionality, enabling fine-grained permission management based on orgTypeCode identity and permission encoding. The system matches and verifies the currently logged-in user's identity code with the orgTypeCode configured in the template, automatically controlling the display and hiding of templates. Furthermore, the template management module supports template version management, recording the modification history of each template and supporting version comparison and rollback operations.

[0030] Step S2: Smart Template Matching The template matching module receives business data (showData) and rendering context from an external system, and intelligently matches the corresponding template according to the following rules: When the advertisement property of showData is true, showData is used directly as the template object, skipping the template list matching process; When showData is an array, use the aggregate template and match the template according to showData[0].templateTypeId; When showData is an object, it is matched against the condition field of the template based on showData.type or showData.modelType; When multiple templates match successfully, the template with the highest priority is selected based on the template priority settings.

[0031] The template matching module also supports controlling the order in which data appears based on the display location. The data display order of the first screen can be configured in advance on the comprehensive search page. After the search is triggered, the system will pull data from the corresponding data category and render it in the preset order.

[0032] Step S3: Template parsing and integrity verification The template parsing module uses the `parse` interface of the official Vue SFC compiler (@vue / compiler-sfc) to parse the matched string template and generate a `descriptor` object. This object contains properties such as `template`, `script`, `styles`, and `errors`. When `errors` is not empty, it is considered that parsing has failed and the error handling process begins.

[0033] Simultaneously, the system performs template hash integrity verification: when the front-end obtains the template, it also obtains the corresponding hash value. The same SHA-256 algorithm is used to calculate the hash value of the received template string. If the two hash values ​​do not match, the template is determined to have been tampered with, rendering is refused, and an error message is returned. This mechanism effectively prevents malicious tampering of the template during transmission, improving system security.

[0034] Step S4: Dynamic generation of components The component generation module dynamically constructs Vue component objects based on the parsing results: Create an empty component object, dynamicComponent; Wrap the parsed template content in a root container with a unique viewId, in the format of...<sectionid="${viewId}"class="result-box"> ${template}; Extract the script content and replace "export default" with the variable assignment form of "componentScript=" using string replacement; Use the browser's native Blob and Worker mechanisms to perform syntax validation on the script, ensuring that the script syntax is correct and does not contain dangerous code; Execute the script code that passes the verification, obtain the component configuration object, and merge the configuration into dynamicComponent.

[0035] Step S5: Style Isolation and Preprocessing The style isolation module generates a unique viewId for each dynamic component, in the format "vcv-{millisecond-level timestamp}-{1~10000 random number}", and uses a Set collection for fallback validation to ensure the uniqueness of the ID.

[0036] Regarding the handling of style content: When the style tag declares lang as scss or sass, the Sass compiler is used to compile the style content into CSS first; Wrap the compiled CSS content in a scope with "#{viewId}.result-box" as the root selector; The wrapped style code is compiled again using the Sass compiler to generate the final CSS; If the style contains variables (such as SCSS variable $xxx or CSS custom property var(--xxx)) or dynamic binding syntax, an error is thrown and component generation is blocked.

[0037] Step S6: Dynamic Rendering and Data Binding The dynamic rendering module uses Vue's `h` function to create component instances: First, check for errors during the component generation process; if errors are found, display a user-friendly error message. Otherwise, use the h function to create a component instance and pass properties such as showData, envType, and show as props to the component; The processed styles are injected into document.head by dynamically creating style tags. Each style tag is marked with a unique data-vcv-id attribute, which facilitates subsequent management and cleanup.

[0038] Step S7: Lifecycle Management and Resource Cleanup The lifecycle management module listens for lifecycle events of dynamic components: When a component is created, the style injection handler is initialized. When a component is updated, the corresponding style node content is updated; When a component is destroyed, the corresponding style node is precisely matched and removed using the data-vcv-id attribute to avoid style pollution and memory leaks.

[0039] In addition, the present invention also includes: Intelligent preloading caching strategy: The system collects user behavior data and page access frequency, uses machine learning algorithms to predict the pages users might visit and the templates they might need, and preloads these templates into the front-end cache. The front-end cache uses an LRU (Least Recently Used) eviction policy; when the cache capacity reaches a threshold, the least recently used template is automatically removed. The back-end caches template data in Elasticsearch, with configurable cache expiration time, effectively reducing database query pressure in high-concurrency scenarios.

[0040] Template canary release mechanism: The template management module supports assigning different versions of templates to different user groups. The system divides users into different canary groups based on the hash value of their user IDs, and each canary group uses a specified version of the template. Administrators can control the proportion of canary groups and the template versions used in the backend, gradually expanding the coverage of new versions. Simultaneously, the system supports quick template version rollback; when a new version of the template encounters problems, users can switch back to the previous stable version with a single click, minimizing the impact on users.

[0041] Incremental template update mechanism: When template content changes, the backend uses a differential algorithm to calculate the differences between the old and new templates, sending only the differences to the frontend. The frontend updates the locally cached template based on these differences, reducing network transmission and loading time. For large templates, incremental updates can significantly improve update speed and reduce bandwidth consumption.

[0042] Multi-layered security verification system: This invention implements two-layer security verification at the storage and rendering stages. Storage phase: Syntax validation and security checks are performed on the template, script, and style sections of the template. The template section prohibits the use of dangerous syntax such as v-html, inline events, and javascript: protocol; the script section uses a worker sandbox for syntax checking and prohibits access to sensitive objects such as document and window; the style section prohibits the use of CSS variables and dynamic binding syntax.

[0043] During the rendering stage: The dompurify library is used to protect the template content from XSS attacks, allowing only whitelisted tags and attributes, effectively preventing XSS attacks.

[0044] Example 1: Dynamic content display of a university information portal system: Implementation environment: Vue 2.7.7 framework, Chrome 147.0.7727.102 browser, 20 test templates, 10 data entries per page.

[0045] Problems with traditional solutions: In a university's information portal system, different UI effects are required to be displayed based on different data types (such as news, notices, policy documents, academic activities, etc.). Traditional solutions require developing separate components for each data type, then packaging and deploying them. Each time the display style needs adjustment, front-end developers must modify the code, rebuild, test, and deploy it to the online environment. The entire process typically takes 1-3 business days, and brief service unavailability issues can occur during deployment, impacting user experience. Especially during special periods such as the start of the school year or university anniversaries, when frequent adjustments to the homepage content are needed, the response speed of traditional solutions cannot meet the demands.

[0046] Implementation of the technical solution of the present invention: After adopting the technical solution of the present invention, the system achieves the following functions: Template Backend Configuration: In the backend management system, administrators can create and edit various types of templates, including news templates, notice templates, policy document templates, academic activity templates, etc. Each template is a complete Vue single-file component, containing template, script, and style parts. For example, the content of the news template is as follows: <template> <h3 class="title"> {{ showData.title}}< / h3> {{ showData.author}} {{ showData.publishDate}} {{ showData.summary}} <a class="read-more" :href="showData.url"> Read the full article < / template> <script>export default {props: ['showData'],methods: {handleClick() {this.$emit('click', this.showData)}}}< / script> <style lang="scss">.news-card {padding: 16px;border: 1px solid #e8e8e8;border-radius: 4px;margin-bottom: 16px;.title {font-size: 18px;color: #333;margin-bottom: 8px;}.meta {font-size: 12px;color: #999;margin-bottom: 12px;.author {margin-right: 16px;}}.summary {font-size: 14px;color: #666;line-height: 1.5;margin-bottom: 12px;}.read-more {font-size: 14px;color: #1890ff;text-decoration: none;}}< / style> Template hash generation and storage: When an administrator saves a template, the system automatically calculates the SHA-256 hash value of the template content and stores it along with the template content in the PostgreSQL database. Simultaneously, the system records the template's version information and modification history.

[0047] Intelligent template matching: When the front-end page loads, it retrieves a list of all available templates from the backend and caches them locally. When data needs to be displayed, the templateView component receives the data and rendering context, and automatically matches the corresponding template based on the data's type attribute. For example, when the data's type is "news", it matches the news template; when the type is "notice", it matches the notification template.

[0048] Template parsing and component generation: The front-end uses `@vue / compiler-sfc` to parse the matched template string, extracting the `template`, `script`, and `style` parts. Simultaneously, it verifies the template's hash value to ensure the template hasn't been tampered with during transmission. Then, it dynamically generates Vue component objects and passes the data as props to the components.

[0049] Style isolation and injection: The system generates a unique viewId for each component instance, wraps the style content in a rule with that viewId as the selector, and then injects it into the document.head. In this way, the styles of each component only apply to itself and will not conflict with the existing styles of the page.

[0050] Dynamic rendering and lifecycle management: Vue's `h` function is used to create component instances and render them to the page. When a component is destroyed, the system automatically removes the corresponding style nodes, avoiding style pollution and memory leaks.

[0051] Actual results comparison:

[0052] Compare with Example 1: Case where hash verification is not used In Comparative Example 1, the system lacks a template hash integrity verification mechanism. When the template is maliciously modified during transmission, and malicious JavaScript code is inserted, the front-end will directly execute the code, leading to an XSS attack. Attackers can steal user cookie information and impersonate users, causing serious security problems. However, in the embodiments of this invention, because a hash verification mechanism is implemented, when the template is modified, the front-end will detect the inconsistent hash value, refuse to render, and return an error message, effectively preventing XSS attacks.

[0053] Compare with Example 2: Case where smart preloading caching is not used. In Comparative Example 2, the system did not implement an intelligent preloading caching strategy. Each time a user accessed a new page, the system needed to request the corresponding template from the backend, resulting in a long page loading time. Especially under poor network conditions, users had to wait a considerable amount of time to see the page content. However, in the embodiments of this invention, the system predicts the pages a user might visit based on user behavior data and preloads the templates into the local cache, reducing page loading time by more than 60% and significantly improving the user experience.

[0054] Example 2: Dynamic Configuration of Ad Slots in Enterprise Information Systems Implementation environment: Vue 2.7.7 framework, Chrome 147.0.7727.102 browser, 20 test templates, 10 data entries per page.

[0055] Problems with traditional solutions: In a certain enterprise information system, different types of advertisements, including banner ads, feed ads, and pop-up ads, need to be displayed in multiple locations such as the homepage and search results page. The style, content, and display time of the ads need to be frequently adjusted to match different marketing campaigns. Traditional solutions require code modification and redeployment, and each ad change requires a development, testing, and deployment process, resulting in slow response times and failing to meet the timeliness requirements of marketing campaigns. Moreover, traditional solutions cannot achieve precise ad targeting, and can only show the same ad content to all users.

[0056] Implementation of the technical solution of the present invention: After adopting the technical solution of the present invention, the system achieves the following functions: Ad Template Configuration: In the backend management system, marketers can create and edit various types of ad templates, including banner ad templates, feed ad templates, and pop-up ad templates. Each template supports full Vue component functionality, enabling complex interactive effects.

[0057] Ad placement rule configuration: Marketers can set detailed placement rules for each ad, including: Time rules: Set the start and end times for the advertisement; the advertisement will only be displayed within the specified time period. Triggering rules: Set the triggering conditions for the advertisement, supporting multiple methods such as keyword triggering, link triggering, and page triggering; User rules: Set the target user group for the advertisement and make precise targeting based on users' age, gender, region, role and other information; Priority rules: Set the display priority of ads. When multiple ads meet the delivery conditions at the same time, the ad with higher priority will be displayed first.

[0058] Canary Release and A / B Testing: The system supports canary release and A / B testing of ad templates. Marketers can divide users into different test groups, with each group using a different version of the ad template. By comparing metrics such as click-through rate and conversion rate of different ad versions, the best-performing ad template can be selected for full release.

[0059] Intelligent template matching: When a user visits a page or performs a search, the system matches ads that meet the delivery criteria from the ad list based on user information, page information, and search keywords. If the `advertisement` attribute is true, the ad data is directly used as the template object for rendering.

[0060] Dynamic rendering and style isolation: The system dynamically parses the ad template, generates Vue components, and renders them to the specified ad slots. A style isolation mechanism ensures that the ad styles do not conflict with existing page styles.

[0061] Actual results comparison:

[0062] Compare with Example 3: Case where the canary release mechanism is not used. In Comparative Example 3, the system did not implement a canary release mechanism. When a bug exists in the new version of the ad template, it will affect all users, causing the ads to fail to display correctly or exhibit style errors. In the embodiments of this invention, the system supports canary releases. The new version of the ad template is first released to a small group of users, and the coverage is gradually expanded after testing and verification. If a problem is found, it can be immediately rolled back to the previous stable version, minimizing the impact on users.

[0063] Compare with Example 4: Situation where targeted advertising was not used In Comparative Example 4, the system failed to achieve precise ad targeting, displaying the same ad content to all users. This mismatch between ad content and user needs resulted in low click-through and conversion rates. However, in the embodiments of this invention, the system can perform precise targeting based on user information such as age, gender, region, and role, displaying suitable ads to the right users and significantly improving ad effectiveness.

[0064] Example 3: Dynamic rendering of product detail pages on e-commerce platforms Implementation environment: Vue 2.7.7 framework, Chrome 147.0.7727.102 browser, 20 test templates, 10 data entries per page.

[0065] Problems with traditional solutions: On a certain e-commerce platform, different product categories require different detailed information. For example, clothing needs to display size charts and material information; electronic products need to display specifications and warranty information; and food products need to display ingredient lists and shelf-life information. Traditional solutions require developing independent detail page components for each product category, resulting in large amounts of code and difficult maintenance. When adding new product categories or adjusting the content displayed on the detail pages, code modification and redeployment are necessary, leading to long development cycles and hindering rapid response to business needs.

[0066] Implementation of the technical solution of the present invention: After adopting the technical solution of the present invention, the system achieves the following functions: Product Template Configuration: In the backend management system, operations staff can create corresponding product detail page templates for different product categories. Each template is a complete Vue single-file component, and the display content and style can be customized according to the characteristics of the product category.

[0067] Incremental template updates: When template content changes, the backend uses a differential algorithm to calculate the differences between the old and new templates, sending only the differences to the frontend. The frontend then updates the locally cached template based on these differences, reducing network traffic and loading time. For large product detail page templates, incremental updates can reduce update time from a few seconds to a few hundred milliseconds.

[0068] Component nesting and reuse: The system supports component nesting and reuse within templates. Operations personnel can encapsulate frequently used display modules (such as product image carousels, price displays, and purchase buttons) into independent sub-templates for reuse across different product detail page templates. This reduces redundant development and improves template development efficiency.

[0069] Data-driven dynamic rendering: The front-end automatically matches the corresponding details page template based on the product's categoryId, and then passes the product data as props to the template component. The template component dynamically renders the page content based on the product data, achieving separation of data and presentation.

[0070] Multi-level security checks: The system performs strict security checks on all templates, prohibiting the use of dangerous syntax and sensitive operations. During the rendering phase, the dompurify library is used to protect template content from XSS attacks, ensuring system security.

[0071] Actual results comparison:

[0072] Compare with Example 5: Case where component nesting and reuse are not used. In Comparative Example 5, the system did not implement the component nesting and reuse functionality of templates. Each product details page template was independently developed, resulting in a large amount of duplicate code. When a common module (such as a purchase button) needed to be modified, all templates containing that module needed to be modified, leading to high maintenance costs and a high risk of omissions. In the embodiments of this invention, however, common modules are encapsulated into independent sub-templates, and modifications made once will take effect in all templates using that module, significantly reducing maintenance costs.

[0073] Compare with Example 6: Case where incremental updates are not used In Comparative Example 6, the system did not implement an incremental template update mechanism. Every time the template content changed, the entire template content needed to be sent to the front end. For large product detail page templates, this resulted in long loading times, especially under poor network conditions. In the embodiments of this invention, however, the system only transmits the differing parts of the template, significantly reducing network transmission volume and improving update speed.

[0074] Beneficial effects of the present invention This invention provides a dynamic rendering method and system based on Vue string templates, which has the following beneficial effects: Improve development and operations efficiency: Through template-based configuration, UI adjustments can be completed through backend configuration without modifying code or redeploying, significantly shortening the deployment cycle of changes. This reduces the frequency of frontend code deployment and lowers operations costs.

[0075] Improved responsiveness: UI changes can take effect in real time without going through a complete development, testing, and deployment process, enabling rapid response to changes in user needs and market conditions.

[0076] Ensuring consistent page display: A style isolation mechanism ensures that dynamically rendered content does not conflict with existing page styles, guaranteeing consistent page presentation. Simultaneously, it avoids the repeated resource loading issues associated with solutions like iframes, improving page loading speed and user experience.

[0077] Enhanced system flexibility and scalability: Supports full Vue component functionality, fully leveraging the features of the Vue framework to implement complex interactive functions. The intelligent template matching mechanism enables the system to automatically select appropriate templates based on different data types and conditions, improving system flexibility and scalability.

[0078] Enhanced system security: Through template hash integrity verification, multi-level security verification, and XSS protection mechanisms, the system effectively prevents template tampering and XSS attacks, thereby improving system security.

[0079] Optimize system performance: Through intelligent preloading caching strategies and incremental template update mechanisms, page load time and network transmission volume are significantly reduced, improving system performance and user experience.

[0080] Supports canary releases and A / B testing: The canary release mechanism allows new template versions to be rolled out gradually, reducing release risks. Simultaneously, it supports A / B testing, enabling comparison of the effects of different template versions to select the optimal solution.

Claims

1. A dynamic rendering method based on Vue string templates, characterized in that, Includes the following steps: Step S1: The template management module stores and manages string templates in Vue single-file component format. Each template contains a unique identifier, conditional configuration, effective time range, and access control information. At the same time, it generates and stores a SHA-256 hash value for each template. Step S2: The template matching module receives business data and rendering context from the external system, and intelligently matches the corresponding template from the template list based on data type, model type, advertising identifier and user permission information; Step S3: The template parsing module uses the official Vue SFC compiler to parse the matched string template, extract the template, script, and style parts, and verify the integrity of the template hash value at the same time; Step S4: The component generation module wraps the parsed template content in a root container with a unique viewId, performs string replacement on the script content with "export default→configuration object assignment", performs syntax validation and execution, and obtains the component configuration object; Step S5: The style isolation module generates a unique viewId for each dynamic component and wraps the style content in a scope with "#{viewId}.result-box" as the root selector, supporting dynamic compilation of SCSS / SASS preprocessors; Step S6: The dynamic rendering module uses Vue's h function to create a component instance, passes business data as props to the component, and injects the processed styles into document.head; Step S7: When a component is destroyed, the component lifecycle management module accurately removes the corresponding style node based on the viewId to avoid style pollution and memory leaks.

2. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: The template matching in step S2 specifically includes: when the advertisement attribute of the business data is true, the business data is directly used as the template object; when the business data is an array, the aggregate template is matched according to the templateTypeId of the first data in the array; when the business data is an object, the corresponding template is matched according to the type or modelType attribute of the object.

3. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: The template hash integrity verification in step S3 specifically includes: when the front end obtains the template, it also obtains the corresponding hash value, calculates the hash value of the received template string using the same SHA-256 algorithm, and if the two hash values ​​are inconsistent, it is determined that the template has been tampered with, rendering is refused and an error message is returned.

4. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: It also includes a smart preloading cache step: the system predicts the pages that users may visit and the templates they need to use based on user behavior data and page access frequency, and loads these templates into the front-end cache in advance; The front-end cache uses an LRU eviction policy, which automatically removes the least recently used template when the cache capacity reaches a threshold.

5. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: It also includes a template gray-scale release step: the template management module supports assigning different versions of templates to different user groups, dividing users into different gray-scale groups based on the hash value of the user ID, and each gray-scale group uses a specified version of the template; it also supports quick rollback of template versions, and when a new version of the template has a problem, it can switch back to the previous stable version with one click.

6. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: The SCSS / SASS preprocessor processing in step S5 specifically includes: when the style tag declares lang as scss or sass, the style content is first compiled into CSS using the Sass compiler, then wrapped by the root selector, and finally compiled into the final CSS code; if the style contains variables or dynamic binding syntax, an error is thrown and component generation is blocked.

7. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: It also includes multi-level security verification steps: during the template storage stage, the template, script, and style parts of the template are subjected to syntax verification and security checks respectively, and dangerous syntax such as v-html, inline events, and javascript: protocol is prohibited; during the rendering stage, the dompurify library is used to protect the template content from XSS, and only whitelisted tags and attributes are allowed.

8. The dynamic rendering method based on Vue string templates according to claim 1, characterized in that: It also includes an incremental template update step: when the template content changes, the backend calculates the differences between the old and new templates and only sends the differences to the frontend; the frontend updates the locally cached template based on the differences, reducing network transmission and loading time.

9. A dynamic rendering system based on Vue string templates, characterized in that, include: The template management module is used to store and manage string templates in Vue single-file component format, and provides template CRUD functions, access control, version management and hash verification functions; The template matching module is used to intelligently select the corresponding rendering template based on the business data type, model type, advertising identifier, and user permission information. The template parsing module is used to parse string templates using the official Vue SFC compiler, extract the template, script, and style parts, and verify the integrity of the template; The component generation module is used to dynamically construct Vue component objects based on the parsing results, process script content, and obtain component configurations. The style isolation module is used to generate a unique identifier for each dynamic component, thereby achieving style scope isolation and dynamic injection. The dynamic rendering module is used to create component instances using Vue's rendering functions, pass business data, and render it to the page. The lifecycle management module is used to manage the creation, updating, and destruction of dynamic components, and clean up the corresponding style nodes when a component is destroyed.

10. The dynamic rendering system based on Vue string templates according to claim 9, characterized in that: It also includes an intelligent caching module for implementing front-end and back-end caching of templates. The front-end cache uses an LRU eviction policy, while the back-end cache caches template data in Elasticsearch. The cache validity period is configurable. It also includes a canary release module to support canary release and version rollback of templates.

Images