Highly extensible portal system based on templating
By adopting templated design and hierarchical architecture in the portal system, the shortcomings of existing portal systems in rapid development and high scalability are solved, flexible configuration and powerful integration capabilities are achieved, and the needs of different business scenarios and high scalability are met.
Patent Information
- Application Number
- CN202411952612.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-27
- Publication Date
- 2025-05-27
AI Technical Summary
When the existing portal system faces multi-service applications and the increase in user base, it is difficult to achieve rapid development and high scalability, and cannot be reused, resulting in the inability to meet the needs of different business scenarios.
It adopts a hierarchical, highly scalable portal system architecture based on template ideas, including storage modules, management modules, design modules and display modules. Through template design, flexible configuration and powerful integration capabilities, the portal system can be quickly developed and built.
It realizes rapid development and construction of portal systems, supports the needs of different business scenarios, and can easily cope with future changes and expansions, meeting high scalability.
Smart Images
Figure CN120045806A_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the field of computer software, and particularly relates to a highly scalable portal system based on templatization. Background Art
[0002] Nowadays, computer software has become an important part of the development of informatization. In order to meet the requirements of people's work and life and improve work efficiency, the research and development of computer software has become an important task.
[0003] However, with the continuous increase in business application systems and the gradual increase in the number of user accesses, in order to effectively improve the efficiency of user business processing and data query, integrating, integrating, and presenting core business and high-frequency data has become a key means. The portal system is an important carrier for business and data integration and is the core software in informatization construction.
[0004] Currently, the construction of portal systems varies in different industries and fields. Most of them need to develop customized functions and pages for specific businesses, or rely on the CMS system to do some non-real-time content publishing, which cannot be reused, achieve high scalability, and form a high-value promotion effect.
[0005] For personalized and customized data integration and presentation, the present invention proposes a hierarchical and highly scalable portal system architecture and method based on the idea of templatization. This architecture and method aim to achieve the rapid development and construction of the portal system through templatized design, flexible configuration, and powerful integration capabilities. This architecture and method can not only meet the needs of different business scenarios but also easily cope with future changes and expansions. Summary of the Invention
[0006] (1) Technical Problems to be Solved
[0007] The technical problem to be solved by the present invention is how to provide a highly scalable portal system based on templatization to achieve the rapid development and construction of the portal system through templatized design, flexible configuration, and powerful integration capabilities.
[0008] (2) Technical Solutions
[0009] To solve the above technical problems, the present invention proposes a highly scalable portal system based on templatization, which includes: a storage module, a management module, a design module, and a display module;
[0010] Storage Module: Provides basic data storage services and cache support for the upper management module;
[0011] Management Module: Dependent on the underlying storage service, it provides functions such as template data model, style template management, data source management, page management, and business component management; supports the registration and management of template meta-information, the definition and management of template data models, the unified configuration and management of data sources, the creation and management of business components, and realizes the decoupling between data, templates, and components, supporting flexible configuration and combination among the three;
[0012] Design Module: Includes a template design module and a page design module; the template design module uses Vue as the coding language, encapsulates different display styles and formats into individual templates, serving as the basic atomic materials for building business components; the page design module is responsible for completing the design of the final display page. Dependent on the various business components defined by the underlying management module, it adds business components to the blank page designer in a visual way of dragging and dropping, and combines them in any way to achieve a page display with flexible configuration and rich styles;
[0013] Display Module: It is the value delivery module of the entire architecture; dependent on the underlying management module and design module, the design module completes the page design, and the management module is responsible for the management and maintenance of the page; the display module obtains the designed portal page from the page management module and renders and displays it through a browser; at the same time, it calls the data interface of the business component to obtain real-time business data, and then fills the data into the style template of the business component based on the data mapping rules of the business component and presents it.
[0014] (3) Beneficial Effects
[0015] The present invention proposes a highly extensible portal system based on templating. Compared with the prior art, the present invention proposes a layered and highly extensible portal architecture design based on the idea of templating, which includes four modules: a storage module, a management module, a design module, and a display module. Compared with the traditional customized portal system, the present invention provides a more flexible and clear layered structure, realizes the decoupling among business components, style templates, and business data, supports flexible custom configuration and combination, and meets the requirements of high extensibility. For different display styles and formats, a templating method is adopted to encapsulate different styles into reusable style templates. In addition, the development of portal pages also abandons the traditional hard-coding method and adopts a component-based approach. Based on the custom-configured business components, the design of portal pages is completed through visual methods such as dragging and dropping, and is uniformly maintained and managed by the page management module. Description of the Drawings
[0016] Figure 1 It is the overall architecture diagram of the present invention;
[0017] Figure 2 It is the flowchart of template design and registration of the present invention;
[0018] Figure 3 This is the structural diagram of the data flow of the business components of the present invention;
[0019] Figure 4 This is the structural diagram of the page design of the present invention;
[0020] Figure 5 This is the flowchart of the page rendering and display of the present invention. Detailed implementation manners
[0021] To make the objectives, content and advantages of the present invention clearer, the following further describes in detail the specific implementation manners of the present invention with reference to the accompanying drawings and embodiments.
[0022] 1. Overall architecture
[0023] Figure 1 This is the overall architecture diagram of the present invention. As Figure 1 shown, the overall architecture includes the following 4 modules:
[0024] Storage module: General relational databases and NoSQL databases provide basic data storage services and cache support for the upper management module.
[0025] Management module: It is the core part of the entire architecture. Depending on the underlying storage service, it provides functions such as template data model, style template management, data source management, page management, and business component management. It supports the registration and management of template meta-information, supports the definition and management of template data models, supports the unified configuration and management of data sources, supports the creation and management of business components, and realizes the decoupling between data, templates, and components, supporting flexible configuration and combination among the three to achieve the purpose of building business components with rich styles. It uniformly maintains and manages the custom-designed portal pages, and realizes different display pages for different departments and users.
[0026] Design module: It is the basic module of the entire architecture and includes 2 core modules: template design module and page design module. The template design module is the only part that needs to be coded in the entire architecture and is also the key to realizing style decoupling and encapsulation in the architecture. The template design module uses Vue as the coding language and encapsulates different display styles and patterns into independent templates as the basic atomic materials for building business components. The page design module is the module that completes the design of the final display page. Depending on the various business components defined by the underlying management module, it can add business components to the blank page designer in a visual way such as dragging and dropping, and combine them in any way to achieve a page display with flexible configuration and rich styles.
[0027] Display Module: It is the value delivery module of the entire architecture. Dependent on the underlying management module and design module, the design module is responsible for page design, and the management module is responsible for page management and maintenance. The display module retrieves the designed portal page from the page management module and renders and displays it through a browser. At the same time, it calls the data interface of the business component to obtain real-time business data, and then based on the data mapping rules of the business component, fills the data into the style template of the business component and presents it.
[0028] 2. Template Design and Registration
[0029] As one of the two core functions of the design module, template design uses Vue as the core programming language to encapsulate different display styles and formats, forming complete style templates, such as: text list template, graphic list template, nine-grid graphic template, etc. In the front-end project, the style template is a front-end component (i.e., component) that can be continuously accumulated and reused. At the same time, the style template is also the basic element on which the business component depends and is the most basic element in the portal page.
[0030] Figure 2 For the template design and registration flowchart, after the front-end engineer completes the definition and development of the style template, the style template metadata is registered in the style template in the management module for unified management and maintenance. The template metadata uses JSON format as the organization form, including: template name, template identifier, initial coordinates and initial width and height of the template, etc. The specific format is: {checked:false,componentLabel:'app-list',x:0,y:0,w:12,h:12,i:'1',moved:false,name:'List Template',static:false}. The template identifier is used as the unique identifier of the template to associate the metadata with the front-end component.
[0031] In addition to maintaining the style template metadata, the style template management also defines and manages the data model corresponding to the style template. Different style templates display different contents, so different data models are defined for different style templates. The data model is defined in JSON format as the organization form, defining all the content parts displayed by the style template, including: content fields, image links, jump links, etc., and is bound to the style template with a one-to-one correspondence.
[0032] 3. Data Source Management
[0033] The content displayed by the portal system is diverse and has numerous sources, including various third-party business systems. To address the issue of diverse data sources, a data source module is separately provided in the management module to manage and maintain all the data sources of third-party systems connected to the entire portal system. The data source module supports two forms of data sources, namely: interface data sources and database data sources. The interface data source provides an HTTP interface, including: interface link customization, interface request parameters, interface response fields, request methods, etc., and obtains data by calling the HTTP interface. The database data source provides the database access address, database type, database account, database password, executed query SQL, etc., and obtains data by executing the SQL.
[0034] The unified management and maintenance of data sources serve the upper-layer business components and are associated with the business components to provide a data acquisition method and ensure clear data sources.
[0035] 4. Business Components and Data Flow
[0036] Business components provide the most basic and core operation units for the design of upper-layer portal pages. At the same time, they are also the basic style units and data units that make up the portal pages. The management module separately provides a business component module to create, define, and manage all business components. A business component represents an independent business unit and contains basic information such as component name, component identifier, component title, icon, etc. At the same time, a business component is also associated with an independent data source to obtain business data; it is associated with a style template to provide the component display style and style.
[0037] In a business component, the data source represents the source of business data, that is, the interface or database table of a third-party business system, and the formats and fields of the obtained data are all different. In a business component, the data model of the style template is determined, and all fields have been defined in advance and cannot be directly matched and displayed with the different formats of data returned by each third-party business system. To solve the data mismatch problem, based on the association between the data source and the style template, the business component defines the mapping rules between the data model of the third-party business data and the data model of the style template, and completes the data format conversion during the data acquisition process to meet the data model requirements of the style template. The mapping rules are defined and managed using JSON format data, and are organized in a way that uses the fields of the data model as keys and the fields of the third-party business data as values.
[0038] As a basic data unit, data flow is one of the core capabilities of business components. The specific data flow process is as follows Figure 3As shown in the figure. In the portal page, the business component is responsible for data acquisition, parsing, transformation, and rendering. First, the business component sends an HTTP request for data acquisition to the portal service backend. Second, the service backend queries the data source associated with the business component and, depending on the configuration of the data source, sends an HTTP request or connects to the database to execute SQL to obtain data. After that, the service backend parses and transforms the raw data obtained from the data source according to the data mapping rules of the business component, converting it into a data format supported by the data model of the style template. Finally, the transformed data is returned to the business component on the portal page and rendered for display.
[0039] 5. Page Design and Display
[0040] As one of the two core functions of the design module, page design provides a blank page designer that supports page design by dragging and dropping business components onto the blank page designer. The specific page design process is as Figure 4 shown.
[0041] The portal page is freely composed of multiple business components. In page design, the blank page designer retrieves all business components from the business component module in the portal backend and displays them in a list on the left side of the page designer as basic design elements. It supports dragging one or more business components to the blank area of the page designer, freely adjusting the position of each component on the page, and adjusting the width and height of each component. After completing the page design, the management module provides an independent page management module to support saving and managing all designed pages. The page is organized, transmitted, and saved in the form of a JSON list, containing multiple business components, each corresponding to a JSON object, including: business component ID, business component name, business component identifier, style template identifier for component management, business component coordinates, width, and height, etc. The specific format is: {"static": false, "w": 12, "moved": false, "x": 36, "h": 7, "name": "Collaborative Office", "checked": false, "y": 12, "i": "xttj", "j": "37cd5b25d50f4259842bb4af158270cb", "componentLabel": "app-list"}. In addition, the page management module supports associating pages by department, person, and role to display different portal pages for different departments and different people.
[0042] Portal page display is a process of dynamically loading and rendering business components, including two parts: style rendering and data loading. The specific process is as Figure 5As shown below. First, obtain the JSON list data of the page, i.e., the business component list data, from the portal management module by sending an HTTP request. Then, parse the component list data, match the corresponding style template through the style template identifier, and render and display it. Finally, the data loading and display of the business component depend on data flow, such as Figure 3 as shown
[0043] Compared with the prior art, the present invention proposes a templatized, hierarchical, and highly scalable portal architecture design, which includes four modules: a storage module, a management module, a design module, and a display module. Compared with the traditional customized portal system, the present invention provides a more flexible and clear hierarchical structure, realizes the decoupling among business components, style templates, and business data, supports flexible custom configuration and combination, and meets the requirement of high scalability. For different display styles, the templatized method is adopted to encapsulate different styles into reusable style templates. In addition, the development of the portal page also abandons the traditional hard-coding method and adopts the component-based method. Based on the custom-configured business components, the portal page design is completed through visual methods such as dragging and dropping, and is uniformly maintained and managed by the page management module.
[0044] The above are only the preferred embodiments of the present invention. It should be noted that for those of ordinary skill in the art, without departing from the technical principle of the present invention, several improvements and modifications can be made, and these improvements and modifications should also be regarded as the protection scope of the present invention.
Claims
1. A highly scalable portal system based on template, characterized in that: The system includes: a storage module, a management module, a design module and a display module; Storage module: provides basic data storage services and cache support for the upper management module; Management module: Relying on the underlying storage service, it provides template data model, style template management, data source management, page management, and business component management functions; it supports template meta-information registration and management, template data model definition and management, data source unified configuration and management, business component creation and management, and realizes the decoupling between data, templates, and components, and supports flexible configuration and combination among the three. Design module: includes template design module and page design module; the template design module uses Vue as the coding language, encapsulating different display styles and patterns into independent templates as the basic atomic material for building business components; the page design module is the module that completes the final display page design, relying on the business components defined by the underlying management module, adding business components to the blank page designer in a visual way of dragging, pulling, and dragging, and combining them in any way to achieve flexible configuration and rich style page display; Display module: It is the value delivery module of the entire architecture. It relies on the underlying management module and design module. The design module completes the page design, and the management module is responsible for page management and maintenance. The display module obtains the designed portal page from the page management module, and renders and displays it through the browser. At the same time, it calls the data interface of the business component to obtain real-time business data, and then fills the data into the style template of the business component based on the data mapping rules of the business component and presents it.
2. The highly scalable portal system based on template according to claim 1, characterized in that: The storage module uses relational database and NoSQL database.
3. The highly scalable portal system based on template as claimed in claim 1, characterized in that: The templates of the template design module include: text list template, image and text list template, and nine-grid image and text template.
4. The highly scalable portal system based on template as claimed in claim 1, characterized in that: The template design and registration process includes: after the front-end engineer completes the definition and development of the style template, the style template metadata is registered in the style template in the management module for unified management and maintenance; the template metadata is organized in JSON format, including: template name, template identifier, template initial coordinates and initial width and height. The specific format is: {checked:false,componentLabel:'app-list',x:0,y:0,w:12,h:12,i:'1',moved:false,name:'List template',static:false}; the template identifier is the unique identifier of the template, which associates the metadata with the front-end component.
5. The highly scalable portal system based on template as claimed in claim 4, characterized in that: Different style templates display different contents. Different data models are defined for different style templates. The data model is defined in JSON format as an organization form, defining all content parts displayed by the style template, including: content fields, image links, jump links, and is bound to the style template in a one-to-one correspondence.
6. The highly scalable portal system based on template according to claim 1, characterized in that: The management module provides a separate data source module to manage and maintain all third-party system data sources that the entire portal system connects to; The data source module supports two forms of data sources, namely: interface data source and database data source; The interface data source provides an http interface, including: interface link customization, interface request parameters, interface response fields and request methods, and obtains data by calling the http interface; The database data source provides the database access address, database type, database account, database password, and query SQL to be executed, and obtains data through SQL execution.
7. The highly scalable portal system based on template as claimed in claim 1, characterized in that: The management module provides a separate business component module to create, define and manage all business components. A business component represents an independent business unit and includes basic information such as component name, component logo, component title and icon. At the same time, the business component is also associated with an independent data source to obtain business data and a style template to provide component display style and style.
8. The highly scalable portal system based on template as claimed in claim 7, characterized in that: Based on the association between the data source and the style template, the business component defines the mapping rules between the third-party business data and the data model of the style template, and completes the data format conversion during the data acquisition process to meet the data model requirements of the style template; the mapping rules are defined and managed using JSON format data, and are organized in a way that the fields of the data model are the key and the fields of the third-party business data are the value.
9. The highly scalable portal system based on template as claimed in claim 8, characterized in that: In the portal page, the business component is responsible for data acquisition, parsing, conversion, and rendering. First, the business component sends an HTTP request for data acquisition to the portal service backend. Secondly, the service backend queries the data source associated with the business component, and depending on the data source configuration, sends an http request or connects to the database to execute SQL to obtain data; then, the service backend parses and converts the original data obtained from the data source according to the data mapping rules of the business component, and converts it into a data format supported by the data model of the style template; finally, the converted data is returned to the business component of the portal page and rendered for display.
10. The highly extensible portal system based on template as claimed in claim 1, characterized in that: The portal page is composed of multiple business components. In page design, the blank page designer will obtain all business components from the business component module of the portal background and display them in a list on the left side of the page designer as basic design elements. It supports dragging one or more business components to the blank space of the page designer, and supports free adjustment of the position of each component in the page, and supports adjustment of the width and height of each component. After completing the page design, the management module provides an independent page management module to support the saving and management of all designed pages; the page is organized, transmitted and saved using data in JSON list format, which contains multiple business components. Each business component corresponds to a JSON object, including: business component ID, business component name, business component identifier, component management style template identifier, business component coordinates and width and height; in addition, the page management module supports associating pages by department, personnel, and role, so that different departments and personnel can display different portal pages; Portal page display is a process of dynamically loading and rendering business components, including style rendering and data loading. First, the JSON list data of the page, that is, the business component list data, is obtained from the portal management module by sending an http request; then, the component list data is parsed, and the corresponding style template is matched through the style template identifier for rendering and display; finally, the data loading and display of the business component depends on the data flow.