Front-end UI componentized single-page application system based on metadata
By using a metadata-based front-end UI component-based single-page application system, the system solves the problems of insufficient component reusability, performance bottlenecks, and integration difficulties in the development of management systems using existing frameworks. This enables efficient development and maintenance, and improves development efficiency and system performance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-26
- Publication Date
- 2026-03-10
AI Technical Summary
Existing single-page application frameworks suffer from problems such as insufficient component reusability, performance bottlenecks, high development costs, significant differences in technology stacks, difficulty in long-term maintenance, and difficulty in integration with the backend in the development of management systems, resulting in low development efficiency and maintenance difficulties.
We adopt a metadata-based front-end UI component-based single-page application system, including a parsing module, an object model management module, a binding verification module, a distribution module, a bus module, a control module, a theme skin module, and a resource management module. Through a custom page description language gspx and a runtime framework, we achieve unified encapsulation and efficient development of business interfaces.
It enables efficient development and maintenance of complex business interfaces, improves component reusability, performance and development efficiency, simplifies integration with backend systems, and reduces development costs and learning curve.
Smart Images
Figure CN121636845A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The application relates to the technical field of Web systems, and in particular to a front-end UI componentized single-page application system based on metadata. BACKGROUND
[0002] With the increasing demand of Web applications for interactive experience, engineering and front-end and back-end separation, single-page applications (SPAs) have become a trend. In order to solve the pain points of traditional development in component reuse, performance, collaboration and the like, Angular, React, Vue and other pure front-end SPA frameworks have emerged, which are characterized by full-featured architecture, component flexibility and progressive ease of use, adapt to front-end and back-end separation architecture and meet the development needs of projects of different sizes. The above SPA frameworks are all for software development enterprises and are dedicated to the development of management software. The current management software development has the following pain points in the selection of front-end frameworks:
[0003] (1) Contradiction between management system characteristics and framework adaptation: 1) The management system often involves complex components such as a large number of forms (multiple fields, linkage verification), tables (paging, filtering, sorting, tree structure), data visualization (report, chart) and the like. Some lightweight frameworks (such as Vue 3 native, React basic library) need to rely on third-party component libraries (such as Element Plus, Ant Design), but the functional integrity and customization ability of the component library may not meet the needs, for example, special form verification logic and complex table editing scenarios; 2) The management system needs to handle massive data (such as 100,000 table data), and if the framework itself is not optimized for virtual lists and on-demand rendering (such as the problem of React re-rendering when frequently updated, the performance bottleneck of Vue 2 responsiveness), it may cause page lag and operation delay, and the selection of a heavy framework (such as Angular) may have high development costs;
[0004] (2) Framework technical characteristics and development efficiency conflict: 1) The technical stack of different frameworks is quite different (such as JSX, Hooks of React, template syntax, Composition API of Vue, TypeScript strong binding, dependency injection of Angular), if team members are not familiar with the target framework, the steep learning curve (such as the complex concept of Angular) will lead to a decrease in development efficiency, and even introduce more bugs; and choosing a framework that the team is familiar with but not suitable for may sacrifice long-term maintainability; 2) Framework version updates may bring disruptive changes (such as syntax differences from Vue 2 to Vue 3, concurrent features of React 18), and the management system has a long life cycle and frequent iterations, if you choose a fast-updating framework (such as React), you need to continuously invest in adapting to new versions; if you choose a stable but slow-updating framework (such as Angular), you may miss new features (such as better performance optimization, new APIs), affecting long-term competitiveness;
[0005] (3) Long-term maintenance and extensibility concerns: 1) Management systems are usually developed by multiple teams, and need to support strict code specifications (such as TypeScript integration, component reuse mechanism) of the framework, for example, React has weak type constraints (requires additional configuration of TypeScript), if the team's specifications are insufficient, it is easy to cause code chaos; Vue3's Composition API improves logic reuse, but the flexibility is too high and may cause code organization problems; Angular forces TypeScript and modular design, although the specification is strict, but the development threshold is high; 2) Management systems may need to integrate with backend systems (such as microservices), and the openness of the framework is crucial, for example, Angular's modular design is rigorous, but when integrating with external systems, it may cause conflicts due to its closed nature; React's flexibility makes it easy to integrate, but it needs to handle compatibility issues on its own. SUMMARY
[0006] The purpose of the present application is to overcome the shortcomings of the prior art and provide a front-end UI component-based single-page application system based on metadata.
[0007] The purpose of the present application is achieved by the following technical solution: A front-end UI component-based single-page application system based on metadata, comprising a parsing module, an object model management module, a binding verification module, a distribution module, a bus module, a control module, a theme skin module, a print export module and a resource management module.
[0008] The parsing module is used to load and parse an XML-based page description file gspx;
[0009] The object model management module defines a corresponding page action class for each gspx page, creates a Form object when the page is instantiated, maintains the control set and data state of the current page, and provides a unified access interface.
[0010] The binding verification module is used for binding the values of the page and the control with the data object and the field of the data object respectively, and uniformly managing the validators through the validator namespace.
[0011] The distribution module encapsulates the combination, layout and interaction logic of a plurality of basic controls as a reusable template component, and distributes the content through a named slot inside the template.
[0012] The bus module uses a unified event model to manage control events.
[0013] The control module includes layout controls, list controls, tree controls and workflow controls.
[0014] The theme skin module is used for replacing parameters with actual color values to generate complete style text.
[0015] The print export module is used for outputting a unified print data structure.
[0016] The resource management module is used for carrying high-frequency timing tasks.
[0017] Preferably, the parsing module specifically parses the namespace, title, action class mapping of the root node, and the internal control tag attribute and event definition, and then converts the gspx into an internal page metadata structure for use by the object model management module.
[0018] Preferably, the binding verification module automatically traverses all controls with DataField in the current container when form.saveData() or container.saveData() is called during the interaction stage, and outputs a standard JSON data structure.
[0019] Preferably, the layout controls include FlexBlock, FlexColumn and FlowPanel, and the list controls include grid control Grid and list view control ListView.
[0020] The application has the following advantages: the application adopts a custom page description language gspx in cooperation with a runtime framework, and realizes unified encapsulation of layout description, data binding, verification logic, print export and workflow editing of a business interface through a hierarchical structure of a page action class-form object-control object. BRIEF DESCRIPTION OF DRAWINGS
[0021] Figure 1A schematic diagram of a metadata-based front-end UI componentized single-page application system architecture. DETAILED DESCRIPTION
[0022] For the purpose of making the objectives, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application rather than all the embodiments. The components of the embodiments of the present application described and shown in the drawings herein can be arranged and designed in various different configurations.
[0023] Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the claimed present application, but only represents selected embodiments of the present application. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in the present application without creative efforts fall within the scope of protection of the present application.
[0024] It should be noted that the embodiments in the present application and the features in the embodiments can be combined with each other without conflict.
[0025] It should be noted that: similar reference numerals and letters represent similar items in the following drawings, and therefore, once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings.
[0026] In the description of the present application, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer" and the like indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings, or the orientation or positional relationship commonly understood by those skilled in the art, and are only for the convenience of describing the present application and simplifying the description, and therefore cannot be understood as indicating or implying that the indicated device or element must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as limiting the present application. In addition, the terms "first", "second" and the like are only used to distinguish the description and cannot be understood as indicating or implying relative importance.
[0027] In the description of the present application, it should also be noted that, unless otherwise explicitly specified and limited, the terms "arrangement", "installation", "connection", "connection" should be understood broadly, for example, it can be fixedly connected, or it can be detachably connected, or integrally connected; it can be mechanically connected, or it can be electrically connected; it can be directly connected, or it can be indirectly connected through an intermediate medium, or it can be the communication inside two elements. For those of ordinary skill in the art, the specific meaning of the above terms in the present application can be understood according to the specific circumstances.
[0028] In the embodiment, as shown in Figure 1 A metadata-based front-end UI componentized single-page application system includes a parsing module, an object model management module, a binding verification module, a distribution module, a bus module, a control module, a theme skin module, a print export module, and a resource management module.
[0029] The parsing module is used to load and parse an XML-based page description file gspx; further, the parsing module specifically parses <page>The namespace (xmlns="Craba.UI"), title, action class mapping of the root node, and the internal tag attributes and event definitions of each control are converted into internal page metadata structures for use by the object model management module.
[0030] The object model management module defines a corresponding page action class for each gspx page, creates a Form object when the page is instantiated, maintains the control set and data state of the current page, and provides a uniform access interface; specifically, a corresponding page action class PageAction is defined for each gspx page, which provides lifecycle methods such as context (before rendering), initialize (after rendering), and dispose (when closing). A Form object is created when the page is instantiated, which maintains the control set and data state of the current page and provides uniform access interfaces such as get_controls(), [control ID], saveData(), and dataBind(). According to the control descriptions in the page metadata, a series of Sys.UI.Controls.* control instances (such as Grid, ListView, TreeView, HtmlEditor, Workflow, etc.) are dynamically created and mapped to actual DOM elements, thereby forming a one-to-one correspondence between the logical control tree and the physical DOM structure.
[0031] The binding verification module is used to bind the values of the page and controls to the data object and fields of the data object, respectively, and to uniformly manage the validators through the validator namespace; specifically, at the page level, the <page>The page is associated with a data object by declaring properties such as DataSource='${ds}' on the tag; at the control level, the value of the control is bound to the field of the data object by configuring DataField, Text='${ds.xxx}' and the like, the page action class constructs a JSON data object in the context (cb) and passes it into the callback cb(data), and the data binding module completes the first round of rendering accordingly. In the interaction phase, the control provides methods such as set_value / get_value to the outside; when form.saveData() or container.saveData() is called, the module automatically traverses all controls with DataField in the current container to output a standard JSON data structure.
[0032] The distribution module encapsulates the combination, layout and interaction logic of multiple basic controls as a reusable template component, and the content is distributed through named slots inside the template; specifically, the combination, layout and interaction logic of multiple basic controls are encapsulated as a reusable template component through the CustomControl mechanism, and Prop (configuration attribute) and On (event callback) are exposed to the outside to realize business component-level reuse; the content is distributed through named slots inside the template, and slots are reserved in the template, and the actual child content filled into each slot is determined by the parent page when the component is used; the template has a built-in local event bus for routing events and messages between internal controls and external pages, reducing the dependence of template users on internal implementation details.
[0033] The bus module uses a unified event model to manage control events; specifically, within a page, a unified event model is used to manage control events, such as the grid control's OnChange, OnRowAdd, OnGetDisplayText and other events, each of which corresponds to a specific event parameter type, and the event parameters contain information such as the current row index, old value, new value, row data; between pages or components, a global message mechanism is used to support cross-page, cross-dialog, cross-component message notification and data transfer, which is used to implement scenarios such as menu-driven multi-tab page switching, dialog result feedback to refresh the list and the like.
[0034] The control module includes layout controls, list controls, tree controls and workflow controls; further, the layout controls include FlexBlock, FlexColumn, FlowPanel; the list controls include grid control Grid and list view control ListView. Specifically, the layout controls include FlexBlock, FlexColumn, FlowPanel, etc., support horizontal layout, vertical layout, adaptive width, automatic line break and other layout forms, realize flexible layout, frame layout, adaptive layout and responsive layout; the list controls include grid control Grid and list view control ListView, Grid supports column freezing, multi-level table header, row editing, custom cell editor, paging and filtering; ListView supports card display and dynamic loading; the tree control TreeView provides node creation, deletion, renaming, drag-and-drop sorting and other capabilities, and can mount any business data on the node; the workflow control Workflow provides a drag-and-dropeable process node and connection editing interface, allowing business to modify node text, data and connection style in real time through event parameters.
[0035] The theme skin module is used to replace parameters with actual color values to generate complete style text; specifically, the theme skin module maintains a number of theme parameters, such as primary color, menu background color, hover color, table selected row background color, font color, etc., and combines CSS templates to replace parameters with actual color values to generate complete style text, and realizes theme switching and user-defined theme through runtime injection.
[0036] The print export module is used to output a unified print data structure; specifically, when initiating printing or exporting, all printable controls in the current Form and its subpages, including CustomControl internal controls, are traversed, and table header field sets and their current values are generated according to the metadata of the controls, such as DataField, ReportField, Label; for Grid controls, table body field sets are generated according to column definitions and extended column configurations, and finally a unified print data structure is output for use by backend printing services or frontend export tools.
[0037] The resource management module is used to carry high-frequency timing tasks. Specifically, a WebWorker-based timing task tool is used to carry high-frequency timing tasks, thereby reducing the pressure on the browser main thread and improving the smoothness of interface rendering; in the client-side parsing mode, version control is performed on gspx and related static resources, and when abnormal caching is detected, the version number is updated to forcibly refresh the resources, thereby avoiding the long-term influence of abnormal caching on page parsing. The application adopts a self-defined page description language gspx in cooperation with a runtime framework, and through the hierarchical structure of a page action class-form object-control object, unified encapsulation of layout description, data binding, verification logic, printing export and workflow editing of a business interface is realized. In terms of deployment, the application adopts browser-side parsing: in the browser-side parsing mode, the browser directly obtains the gspx file, converts the gspx into a virtual control tree through a local parsing engine and instantiates the corresponding control, thereby migrating part of the page parsing pressure from the server to the client, while supporting cross-domain and resource caching; through a unified DataField data field identifier, a consistent data access model is established between form controls and list controls, so that the developer can collect, backfill and automatically verify page data in batches through unified interfaces such as saveData / dataBind, thereby significantly improving the development efficiency and maintainability of a complex business interface.
[0038] In the embodiment, the specific steps of page loading and rendering are as follows:
[0039] A1: The browser loads the entry page index.html, and the entry script calls a runtime entry function to specify the first gspx page to be displayed, for example, Main.gspx;
[0040] A2: The parsing module loads Main.gspx, and parses the page metadata object, including the attributes of the root node Page and the types and configurations of the internal controls;
[0041] A3: The object model management module creates the PageAction instance of Main and the corresponding Form instance based on the page metadata, and creates specific control objects in sequence according to the control metadata, and hangs the controls in the DOM to complete rendering;
[0042] A4: In the Main page, the menu item MenuItem of the menu control MenuBar is configured with a target page path, and when the user clicks the menu item, a global API is called to open the corresponding gspx page, and the system uses the steps of A2-A3 to load and render the new page in a multi-tab container or a modal window.
[0043] The specific steps of data initialization, interaction and submission are as follows:
[0044] B1: During the loading process of a certain business page PageA.gspx, the context(cb) method of its corresponding PageAction is called. In this method, data is obtained from the backend or a local data object is constructed, such as data.ds and data.list, and then passed to the framework through the callback cb(data);
[0045] B2: The binding verification module distributes the field values in the data object to the corresponding controls based on the DataSource declared on the Page and the configurations such as DataField and Text='${ds.xxx}' on each control, thus realizing the first round of data rendering;
[0046] B3: When a user enters or modifies data on the page, the control internally maintains the current value and necessary states, such as row data in the grid, editing status, etc.
[0047] B4: When the user clicks the "Submit" button, the button's OnClick event triggers the submit method in PageAction. In this method, the business logic calls this.get_form().saveData() or the saveData() method of the specified container. The system automatically iterates through all controls with DataField in the current scope and assembles and generates JSON format form data.
[0048] B5: During the saveData() process, the binding verification module automatically performs verification based on the verification metadata such as Required on the control, adds error information to the verification result set, and provides a unified prompt and prevents submission if an error exists. If no error exists, the business code calls a general data interaction interface (such as Ajax) to send JSON data to the backend service.
[0049] The specific steps for printing and exporting are as follows:
[0050] C1: The Grid control is configured with a printing action, which triggers the printing logic when the user clicks the "Print" button;
[0051] C2: The print export module iterates through all printable controls and their subpage controls based on the Form and specified Grid of the current page. For each control that meets the conditions, it reads its metadata such as DataField, ReportField, Label, and ReportSection, and constructs a set of header fields by combining the current value of the control.
[0052] C3: For grid controls, the print export module reads column definitions, extended column configurations, etc., generates a set of table body fields, and merges the display content of multiple controls to form a combined field according to the configuration;
[0053] C4: The print export module combines the table header and table body field set into a unified print data structure, and outputs to a backend print service or a frontend export tool, to realize a print or export effect consistent with the interface display logic.
[0054] In summary, the application provides abundant component library and integrated routing capability, and the total size is one third of other SPA frameworks, and in page layout, various modes of layout capability are provided, supporting horizontal and vertical arrangement, block concept and adaptive mode; the application builds front-end development mode with object-oriented thought as core, guarantees clear development structure of developers, and provides XML format configuration interface layout, supports layout configuration, interactive event and data binding, one page corresponds to one action in business interaction, the action contains interactive implementation and form object inside, the control can be directly operated through the form object, and operation on html is shielded; the application is a set of independent front-end framework, and has no module concept, so when integrated with backend service, the characteristics of the backend service do not need to be considered, and good integration capability is obtained.
[0055] Although the application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions recorded in the foregoing embodiments, or make equivalent replacements to some technical features, and any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the application shall be included in the protection scope of the application.< / page> < / page>
Claims
1. A metadata-based front-end UI componentization single-page application system, characterized in that: The system comprises an analysis module, an object model management module, a binding verification module, a distribution module, a bus module, a control module, a theme skin module, a print export module and a resource management module; The analysis module is used for loading and analyzing an XML-based page description file gspx; The object model management module defines a corresponding page action class for each gspx page, creates a Form object when the page is instantiated, maintains a control set and a data state of the current page, and provides a unified access interface; The binding verification module is used for binding the values of the page and the controls with data objects and fields of the data objects respectively, and managing the validators uniformly through a validator namespace; The distribution module encapsulates the combination, layout and interaction logic of a plurality of basic controls into a reusable template component, and distributes contents through a named slot inside the template; The bus module uses a unified event model to manage control events; The control module comprises layout controls, list controls, tree controls and workflow controls; The theme skin module is used for replacing parameters with actual color values to generate complete style text; The print export module is used for outputting a unified print data structure; The resource management module is used for carrying high-frequency timing tasks.
2. The metadata-based front-end UI componentized single-page application system of claim 1, wherein: The analysis module specifically analyzes the namespace, title, action class mapping, and internal control tag attribute and event definition of a root node, and then converts the gspx into internal page metadata structure for use by the object model management module. 3.The metadata-based front-end UI componentization single-page application system of claim 2, wherein: The binding verification module automatically traverses all controls with DataField in the current container and outputs a standard JSON data structure when form.saveData() or container.saveData() is called in the interaction stage. 4.The metadata-based front-end UI componentization single-page application system of claim 3, wherein: The layout controls comprise FlexBlock, FlexColumn and FlowPanel; and the list controls comprise grid control Grid and list view control ListView.