Low-code routing configuration method based on Web visual arrangement component and page

Abstract

The invention discloses a low-code routing configuration method based on a Web visual arrangement component and a page. Comprising visual arrangement of components and pages; routing information extraction and abstraction: in the visual arrangement process of the components and the pages, a system automatically extracts routing information, generates a unique page identifier for each page, extracts routing parameters for the components according to the positions and functions of the components in the pages, and sends the routing parameters to a server; abstracting the routing information into a data structure containing a source page identifier, a target page identifier and routing parameters; and low-code routing configuration: providing a low-code routing configuration interface, displaying the routing relationship between the page and the component in a graphical manner, and entering the interface to perform routing configuration operation. According to the method, the visualization degree is high, the routing configuration method is flexible, the webpage development efficiency is improved, the development cost is reduced, and the configuration accuracy is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of web page development, and specifically relates to a low-code routing configuration method based on Web visual orchestration components and pages. Background Art

[0002] With the rapid development of Internet applications, the demand for Web application development is growing. Traditional Web development methods require a lot of code writing, especially in routing configuration. Developers need to deeply understand the routing mechanism and write complex code.

[0003] The traditional development method has the following disadvantages: 1. High technical threshold for development. The traditional development method requires developers to have deep programming skills and expertise. People without programming experience or insufficient skills find it difficult to participate in the development process, which limits the team's collaboration and innovation capabilities; 2. High manpower and time costs for developers. The traditional development method requires developers to manually write a lot of code, which usually leads to a long development cycle. Even for experienced developers, it takes a lot of time to ensure the correctness and stability of the code. In the process of manually writing code, errors and vulnerabilities are inevitable. Therefore, developers need to do a lot of debugging and testing to ensure the quality and reliability of the application, which further prolongs the development cycle. 3. Poor flexibility. Since the code in the traditional development method is usually closely related to a specific hardware or software environment, it is difficult to adapt to the rapidly changing market demand and user behavior. The traditional development method lacks visual configuration options, making it difficult for developers to flexibly adjust the functions and behaviors of the application according to business needs; 4. Routing configuration is cumbersome. In traditional development, routing configuration usually needs to be done manually, involving a large number of mappings of paths, components, and parameters. As the scale of the application expands, the routing configuration files may become very complex and difficult to maintain and manage, especially in the case of multi-level nested routing and dynamic routing, the configuration difficulty is further increased.

[0004] With the rise of low-code development platforms, the need for an efficient and convenient routing configuration method has become increasingly urgent. Some existing low-code development platforms still have many deficiencies in routing configuration, such as inflexible configuration, low visualization, and poor processing capabilities for complex pages and component relationships. As a result, developers still face many problems during use, affecting development efficiency and application quality.

[0005] In view of this, the present invention proposes a low-code routing configuration method based on Web visual orchestration components and pages to solve the above problems. Summary of the invention

[0006] The purpose of the present invention is to provide a low-code routing configuration method based on Web visual orchestration components and pages.

[0007] In order to achieve the above-mentioned purpose, the technical solution adopted by the present invention is: a low-code routing configuration method based on Web visual orchestration of components and pages, comprising the following steps: S1, visual orchestration of components and pages, adding predefined components or pages to the canvas by clicking or dragging and dropping operations, wherein all components or pages that need to orchestrate routing relationships are displayed in the canvas in the form of thumbnails; S2, routing information extraction and abstraction, in the process of visual orchestration of components and pages, the system automatically extracts routing information, generates a unique page identifier for each page, extracts routing parameters for the component based on the position and function of the component in the page, and abstracts the routing information into a data structure containing a source page identifier, a target page identifier, and routing parameters; S3, low-code routing configuration, providing a low-code routing configuration interface, graphically displaying the routing relationship between pages and components, and entering the interface to perform routing configuration operations.

[0008] In a feasible implementation, the low-code routing configuration method based on Web visual orchestration components and pages also includes the following steps: S4, setting security mechanisms and routing protection, setting access permission requirements, encrypting sensitive data in routing parameters with encryption algorithms, decrypting when received by the backend, and setting encryption-related parameters in the routing configuration interface; S5, verification and optimization of routing configuration; S6, routing performance monitoring and optimization; S7, version management and routing evolution; S8, extending components and customizing routing functions; S9, integration with back-end services.

[0009] In a feasible implementation, the components in S1 include but are not limited to text boxes, buttons, tables, charts, etc., and each component has unique properties and events. The properties of the components include style properties, data binding properties, and event response properties. In a feasible implementation, the page in S1 contains multiple components and supports layout design, including setting the position, size, and alignment of the components. At the same time, parent-child and nested relationships are established between pages. Each page has unique attributes and events. The attributes of the page include page title, page background color, and page layout.

[0010] In a feasible implementation, the routing parameters in S2 include the target page identifier, the transferred data, and the data format. In a feasible implementation, the routing configuration operations in S3 include modifying the target page of the route, adding new routes, deleting unnecessary routes, and processing routing updates caused by component updates. The configuration process is completed by selecting the source component and the target page, setting routing parameters, and the dynamic routing parameters are bound to the attribute parameters or events exposed by the component or page.

[0011] In a feasible implementation, the encryption algorithm in S4 includes a symmetric encryption algorithm and an asymmetric encryption algorithm.

[0012] In a feasible implementation, S5 specifically completes the routing configuration, and the system automatically verifies the legitimacy of the routing configuration, including checking whether the target page exists, whether the routing parameters meet the requirements, and the routing connectivity; optimizes the routing configuration, including cache optimization of frequently used routing paths. The cache optimization adopts cache strategies including memory cache and local storage cache, and optimizes the routing search algorithm in the complex page nested structure to reduce time complexity.

[0013] In a feasible implementation, S6 specifically monitors routing performance in real time when the Web application is running, including indicators such as execution time, number of searches, and transmission volume. Data is collected by inserting monitoring codes at key points of routing execution, and sent to the monitoring system for analysis and visualization. Developers view performance status through the monitoring interface. Based on performance monitoring data, when routing performance problems are found, the system automatically or reminds developers to optimize. For problems with long execution time, if the search algorithm is inefficient, the search algorithm is optimized. If the backend service responds slowly, the backend service configuration and performance are checked and the routing and backend interaction parts are adjusted. The optimized search algorithm includes index structure and hierarchical traversal algorithm.

[0014] In a feasible implementation, the S8 specifically supports developers to create or introduce extension components. When introducing, developers can add rules for them in the routing configuration interface and integrate them into the routing system by setting information such as source components, target pages or components, and routing parameters; a custom routing interface is provided, and developers can write custom routing functions to implement special routing logic. The function can be combined with the existing routing configuration data structure to overwrite or supplement existing routing rules under specific conditions. The custom routing function is written in languages ​​including JavaScript or Python.

[0015] Beneficial effects of the present invention: The present invention completes routing configuration through an intuitive graphical interface and simple drag and drop, configuration and other operations, without the need to write a large amount of complex code; the pages and functions are divided into multiple independent components, each component has specific functions and attributes, and these components are combined into complete pages and applications through visual arrangement, which improves the reusability of the code and reduces the workload of repeated development. Routes are dynamically generated and switched according to different user roles, permissions, business rules or data status conditions, thereby realizing personalized display of pages and permission control.

[0016] The present invention provides a visual development environment, supports point-and-click or drag-and-drop arrangement of components and pages, can establish complex page structures and display thumbnails, and can filter components or pages according to conditions. Routing information is automatically extracted during the page arrangement process and abstracted into a data structure containing source page identifiers, target page identifiers, and routing parameters. Through a special low-code routing configuration interface, routing is displayed and configured in a graphical manner, and dynamic routing parameter binding is supported. Combined with the user authority management system and encryption algorithm to ensure routing security, automatically verify and optimize routing configuration, monitor routing performance in real time, support version management, extended components and custom routing functions, and can also be seamlessly integrated with back-end services. This method can improve development efficiency, reduce costs, enhance configuration flexibility and accuracy, and optimize application performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 This is a system block diagram of the present invention. DETAILED DESCRIPTION

[0018] See also Figure 1 , the embodiment of the present application provides a low-code routing configuration method based on Web visual orchestration components and pages, including the following steps: Step 1: Visual arrangement of components and pages: ① Provide a visual development environment, developers can add predefined components or pages to the canvas by clicking or dragging and dropping. Components include but are not limited to text boxes, buttons, tables, charts, etc., and each component has unique properties and events. A page can contain multiple components and support layout design, including setting the position, size, and alignment of components. At the same time, complex structures such as parent-child relationships and nested relationships can be established between pages. Each page also has unique properties and events; ② All components or pages that need to arrange routing relationships are displayed in the canvas in the form of thumbnails. The canvas display level can be enlarged or reduced. Zooming out can fully display all components or pages, and zooming in can carefully display page or component details. The canvas can filter the components or pages to be displayed according to conditions; Step 2: Routing information extraction and abstraction: During the visual arrangement of components and pages, the system automatically extracts routing information, generates a unique page identifier for each page, extracts routing parameters for components based on their position and function in the page, and abstracts routing information into a data structure containing source page identifier, target page identifier, and routing parameters. Step 3: Operation steps of low-code routing configuration interface: ① Provide a low-code routing configuration interface to graphically display the routing relationship between pages and components; ② Developers can perform routing configuration operations on this interface, including modifying the target page of the route, adding new routes, deleting unnecessary routes, and handling routing updates caused by component updates. The configuration process is completed by selecting the source component and the target page and setting routing parameters. There is no need to write a lot of code, and dynamic routing parameters can be bound to attribute parameters or events exposed by components or pages; Step 4: Security mechanism and route protection steps: ① Combine route configuration with user authority management system to set access permission requirements for each route. Check whether user authority matches the requirements before route execution. If not, jump is prohibited and prompts that no permission is given; ② Use appropriate encryption algorithm to encrypt sensitive data in route parameters, decrypt when receiving at the back end, and encryption related parameters can be set in the route configuration interface; Step 5: Verification and optimization of routing configuration: ① After completing the routing configuration, the system automatically verifies the legitimacy of the routing configuration, including checking whether the target page exists, whether the routing parameters meet the requirements, and routing connectivity; ② Optimize the routing configuration, including caching optimization of frequently used routing paths, and optimizing the routing search algorithm in the complex page nested structure to reduce time complexity; Step 6: Routing performance monitoring and optimization steps: ① When the Web application is running, the routing performance is monitored in real time, including execution time, number of searches, transmission volume and other indicators. The data is collected by inserting monitoring codes at the key points of routing execution, and sent to the monitoring system for analysis and visualization. Developers can view the performance status through the monitoring interface; ② Based on the performance monitoring data, when routing performance problems are found, the system automatically or reminds developers to optimize. For the problem of long execution time, if the search algorithm is inefficient, the search algorithm is optimized. If the backend service response is slow, the backend service configuration and performance are checked and the interaction between routing and the backend is adjusted; Step 7: Version management and routing evolution steps: ① Support Web application version management, automatically detect routing configuration change requirements when the version is upgraded, and automatically or assist developers to update routing configuration; ② Record the historical version of routing configuration to facilitate developers to view the routing status of different versions; Step 8: Extended components and custom routing function steps: ① Support developers to create or introduce extended components. When introducing, developers can add rules for them in the routing configuration interface and integrate them into the routing system by setting information such as source components, target pages or components, and routing parameters; ② Provide a custom routing interface. Developers can write custom routing functions to implement special routing logic. This function can be combined with the existing routing configuration data structure to overwrite or supplement existing routing rules under specific conditions; Step 9: Integration with backend services: ① The routing configuration method is seamlessly integrated with the backend service. During the routing execution, requests are sent to the backend service according to the configured routing information. ② The backend service processes the request according to the routing parameters and returns the corresponding data to ensure the normal display and interaction of pages and components.

[0019] The properties of the component include, but are not limited to, style properties, data binding properties, and event response properties.

[0020] The attributes of the page in this embodiment include page title, page background color, and page layout mode.

[0021] The routing parameters described in this embodiment include but are not limited to the target page identifier, the transmitted data, and the data format.

[0022] The encryption algorithm described in this embodiment includes a symmetric encryption algorithm and an asymmetric encryption algorithm.

[0023] The cache strategies adopted by the cache optimization described in this embodiment include but are not limited to memory cache and local storage cache.

[0024] The optimized search algorithm described in this embodiment includes but is not limited to using an index structure and a hierarchical traversal algorithm.

[0025] The programming language of the custom routing function described in this embodiment includes but is not limited to JavaScript, Python and other programming languages ​​suitable for Web development.

[0026] The specific implementation process of the present invention is as follows: 1. Initialize the visual development environment 1) Start the low-code development platform and load the resources required for the visual development environment, including component libraries, page templates, etc.

[0027] 2) The developer logs in to the development platform and enters the visual development interface. At this time, the interface displays a blank canvas workspace, where you can start creating a new page or opening an existing project.

[0028] 2. Visual arrangement of components and pages 2.1 Create a page 1) Developers can create a new page by clicking the "New Page" button. They can name the page and set basic page properties, such as page title, page background color, etc.

[0029] 2) The newly created page will be presented as a blank container in the workspace.

[0030] 2.2 Add components to the page 1) Select the required component from the component library and add it to the page by dragging and dropping. For example, select a text box component and drag and drop it to the specified location on the page.

[0031] 2) For each component added to the page, you can set its properties in the Properties panel. For example, for a text box component, you can set its default text content, font size, color, etc.

[0032] 3) You can add multiple components to the page and adjust the layout of the components through layout tools. For example, use the alignment tool to align multiple components horizontally or vertically, and use the spacing tool to set the spacing between components.

[0033] 2.3 Establishing relationships between pages 1) You can create multiple pages and establish a parent-child relationship or nested relationship between the pages. For example, create a home page and multiple sub-pages, and nest the sub-pages in a specific area of ​​the home page.

[0034] 2) Through the page navigation components, you can set the jump relationship between pages. These navigation components are also added to the page by dragging and dropping, and the target page they point to is set in the property panel.

[0035] 3. Extraction and Abstraction of Routing Information 3.1 Page Logo Generation 1) When creating a page, the system automatically generates a unique identifier for each page. This identifier can be a number or a hash value generated based on the page name and other information.

[0036] 2) Page ID is used to uniquely identify each page in the routing configuration, making it easier to manage and find routes.

[0037] 3.2 Component routing parameter extraction 1) For each component in the page, extract the routing parameters based on its type and function. For example, for a button component, its routing parameters may include the target page ID triggered by the click event, the data passed to the target page, etc.

[0038] 2) If the component has specific interactive functions, such as a form submission component, its routing parameters may also include the format of the form data, the target address of the submission, etc. These routing parameters are stored in a data structure related to the component.

[0039] 3.3 Data structure creation of routing information 1) The system integrates the extracted routing information into a unified data structure. This data structure can be a tree structure or a table, which includes information such as source page identifier, target page identifier, routing parameters, routing type (such as page jump, component internal navigation, etc.).

[0040] 4. Low-code routing configuration interface operation 4.1 Enter the routing configuration interface 1) Trigger entry: In the visual development environment, developers can start the operation of entering the low-code routing configuration interface by explicitly clicking the dedicated "routing configuration" button. This button is in a prominent position in the interface layout of the development environment, making it easy for developers to quickly find and use it.

[0041] 2) Graphical display principle: After entering the interface, the system will build a graphical display diagram based on the existing pages and component information in the current project. This display diagram is presented in a form similar to a flow chart, and its construction process involves in-depth analysis and precise mapping of the relationship between pages and components. Each page is represented by a rectangle in the diagram, and the rectangle contains key identification information of the page, such as the page name or some attributes, so that developers can quickly identify it. The components in the page are displayed in circles or other suitable shapes, and some brief icons or logos will be attached to the component shapes to indicate the type of component. For example, a button component may display a small button icon. The route is represented by an arrow in the diagram, and the direction of the arrow clearly indicates the direction of the route, from the source component to the target page or component.

[0042] 3) Data acquisition and update: In order to accurately display the relationship between pages and components in real time, the system will immediately obtain the latest routing configuration data from the background when entering the interface. This data includes detailed information of the page, the properties and functions of the components, and the routing connection relationship between them. After obtaining the data, the system will quickly convert this data into elements in the graphical interface through an efficient data binding and update mechanism. At the same time, the system will continue to monitor data changes. Once there is any update to the routing configuration data, such as adding new pages, components, or modifying routing relationships, the graphical interface will be automatically updated immediately to ensure that developers always see the latest and accurate routing configuration.

[0043] 4.2 Routing addition and modification 1) Select source component: Developers first select a source component in the graphical interface as the starting point of the new route. The selection method can be to click the component graphic with the mouse. After the component is selected, there will be a corresponding selection prompt (such as a dotted box around it or a color change). After selecting the source component, the system will record the relevant information of the component, such as component type, unique identifier, etc., for subsequent route configuration.

[0044] 2) Select the target page: After selecting the source component, the developer selects the target page through the drop-down menu. The drop-down menu lists all the pages created in the current project. Each page is displayed in clear and readable text, which may contain the page title or some key attributes, making it easier for developers to identify and select. At the same time, the system will intelligently filter and prompt the selectable target pages based on the type and function of the source component. For example, certain types of components can only jump to certain types of pages. The system will only display qualified pages in the drop-down menu to reduce the number of mistakes made by developers.

[0045] 3) Set routing parameters: After selecting the target page, developers need to set routing parameters. The system will dynamically generate a routing parameter setting interface based on the requirements of the target page and source components. For example, if the target page needs to receive specific data, the routing parameter setting interface will display the corresponding input box to prompt the developer to enter the data. The type and format of the routing parameters will be strictly restricted and verified according to the requirements of the target page. For example, date type parameters will provide a date selector, and numeric type parameters will have a numerical range limit.

[0046] 4) Add route operation: After setting the route parameters, the developer clicks the "Add route" button (the button has a clear text mark and is in a prominent position in the interface), and the system will build a new route object. The route object contains complete route configuration information such as source component information, target page information, and route parameters. Then, the system sends the new route object to the backend server through an HTTP request (POST request). After receiving the request, the backend server will perform a validity check on the new route, including checking the validity of the source component and the target page, the correctness of the route parameters, etc. If the check passes, the backend server will save the new route information to the database or configuration file and return a successful response. After the front-end interface receives a successful response, it will update the graphical display and display a new route arrow between the source component and the target page, indicating that the new route has been successfully added. At the same time, the system will automatically update the route list (if there is a separate route list display area) and display the newly added route information in the list, which is convenient for developers to view and manage.

[0047] Modify the route 1) Select a route: In the graphical interface, developers can click the arrow representing the route with the mouse to accurately select the route to be modified. After selection, the interface will highlight the route in some way (such as color change, bold display, etc.) to help developers confirm that the selection is correct.

[0048] 2) Property panel display: After selecting a route, the related property panel will automatically pop up in the appropriate location of the interface (sidebar or lower area) and display detailed route property information. These properties include target page identifier, route parameters, route type, etc. The target page identifier is displayed in readable text form, and a drop-down menu may be provided to list all available pages in the current project, so that developers can quickly switch target pages. The route parameter area is displayed according to the type and format of the parameter. For example, text type parameters are displayed as text boxes, numeric type parameters may have numerical input restrictions or steppers, and Boolean type parameters are displayed as check boxes. Developers can directly modify the corresponding values ​​in these property areas.

[0049] 3) Data update and save: When the developer has modified the routing properties in the property panel, click the "Save" button (there is a clear text mark on the button, such as "Save changes"), and the system will start the data update process. First, the system will verify the legitimacy of the modified data, check whether the new target page logo is valid, whether the routing parameter format is correct, etc. If the verification passes, the system will send the modified routing information to the backend server through an HTTP request (POST request). After receiving the request, the backend server will update the corresponding routing configuration data in the database or configuration file. After the update is successful, the backend server will return a successful response, the front-end interface will receive the response and update the graphical display to show the modified routing relationship.

[0050] The code is as follows: saveRouteChanges() { axios.post(' / update-route', { targetPageId: this.targetPageId,routeParams: this.routeParams}) .then(response => { console.log('Route modification successful'); / / You can update the interface display or perform other operations as needed}) .catch(error => {console.log('Route modification failed:', error);}); } addNewRoute() { / / Build a new route object const newRoute = { source: this.sourceComponent, target: this.targetPage, params: this.newRouteParams}; axios.post(' / add-route', newRoute).then(response => { console.log('Route added successfully'); / / You can update the graphical interface based on the data returned by the backend (the specific code for updating the graphics is omitted here) this.fetchRoutes();}) .catch(error=> { console.log('Route addition failed:', error);});} fetchRoutes(){ axios.get(' / api / get-routes') .then(response => { this.routes =response.data;}) .catch(error => { console.log('Failed to get route data:', error);});} 4.3 Route Deletion For unnecessary routes, developers can select the corresponding arrow in the graphical interface and then click the "Delete" button. The system will delete the route information from the route configuration data structure and update the graphical interface.

[0051] 1. Route update: component events trigger route updates 1) During the page running process, component interaction events may cause route updates. For example, an option change event of a drop-down menu component may trigger different routes. When the user selects an option in the drop-down menu, the system updates the current route path according to the pre-configured route information.

[0052] 2) For components with complex interactions, such as dynamic form components, changes in form data may affect routing. If the form data meets certain conditions, the route may jump to a different page or a specific area in the page. The system listens to component events, obtains component status changes in real time, and updates the route according to the routing configuration rules.

[0053] The code is as follows: $('#dropdown').change(function() { const selectedOption = $(this).val(); / / Get the corresponding routing information according to the selected option const newRoute = getRouteByOption(selectedOption); / / Update route updateCurrentRoute(newRoute);} ); Interaction between components and routing coordination 1) The interaction between multiple components also affects routing. For example, in a page that contains a search box and a result list, when a user enters a keyword in the search box and clicks the search button, the search button component works together with the search box component. The click event of the search button generates routing parameters based on the keywords in the search box and routes to the page that displays the search results.

[0054] 2) This interaction between components requires fine coordination in the routing configuration. By setting the association relationship and routing rules between components in the routing configuration interface, the correct execution of routing during component interaction can be ensured. By defining the message transmission mechanism between components, when a component triggers an event, it sends a message to the related components, and the related components update their own status and routing according to the message and routing configuration.

[0055] 5. Security Mechanism and Routing Protection 5.1 User permissions and routing access control 1) In Web applications, different users may have different permissions, and routing access needs to be controlled. The routing configuration method of the present invention is combined with a user permission management system.

[0056] 2) In the route configuration, you can set access permission requirements for each route. For example, some pages can only be accessed by administrators. In the route configuration, you can specify that only users with administrator permissions can successfully jump when the corresponding route is triggered. Before executing the route, the system first checks the permissions of the current user and matches them with the permission requirements of the route. If the user does not have sufficient permissions, the route jump is prohibited and the user is prompted that he does not have permission to access.

[0057] 5.2 Data transmission security and routing encryption 1) During the routing process, sensitive data may be transmitted, such as user login information, payment information, etc. In order to ensure the security of data transmission, the present invention encrypts the data transmission during routing.

[0058] 2) Use appropriate encryption algorithms, such as symmetric encryption algorithms or asymmetric encryption algorithms, to encrypt sensitive data in routing parameters. When the backend service receives the data, it will be decrypted. At the same time, in the routing configuration interface, encryption-related parameters can be set, such as encryption key management, encryption algorithm selection, etc., to facilitate developers to configure according to the security requirements of the application.

[0059] 6. Verification and optimization of routing configuration 6.1 Verification Process 1) After completing the route configuration, the system automatically starts the verification program. First, it checks whether the target page ID of each route exists in the page ID list. If not, it prompts the developer with an error that the target page does not exist.

[0060] 2) For routing parameters, check whether their format meets the requirements. For example, if the routing parameter is specified as a numeric type, but it is actually a string type in the configuration, it will prompt that the parameter type is wrong.

[0061] 3) Check the connectivity of the route to ensure that the target page can be correctly reached through the route from any source page or component to avoid routing dead ends.

[0062] The code is as follows: function validateRoutes(routes) { routes.forEach(route => { if (!route.component) { console.log(`The route ${route.path} lacks component configuration`);} if (route.meta && route.meta.requiresAuth &&!isAuthenticated()) { console.log(`The route ${route.path} requires authentication but the user is not authenticated`);} / / You can add more verification logic, such as checking the format of route parameters, etc.});} / / Call the verification function after creating a Vue Router instance const router = new Router({ routes: [ / / route configuration]}); 6.2 Optimization process 1) For frequently used routing paths, the system automatically creates a cache mechanism. When the same route is requested again, the routing information can be directly obtained from the cache, reducing the time for route lookup.

[0063] 2) In complex page nesting structures, optimize the routing search algorithm. For example, use an index structure or hierarchical traversal algorithm to quickly locate the target page and component and reduce the time complexity of routing search.

[0064] 7. Routing performance monitoring and optimization 7.1 Routing Performance Index Monitoring 1) During the operation of the Web application, the performance of the route is monitored in real time. The monitoring indicators include route execution time, route lookup times, data transmission volume, etc. These performance indicator data are collected by inserting monitoring code at key nodes of route execution.

[0065] 2) These data are sent to the performance monitoring system, which can analyze and visualize the data. Developers can view the performance of the route through the performance monitoring interface and find performance bottlenecks in a timely manner.

[0066] 7.2 Routing Optimization Adjustment Based on Performance Data 1) Based on performance monitoring data, when routing performance issues are found, the system automatically or prompts developers to make optimization adjustments. For example, if routing execution takes too long, it may be because the routing lookup algorithm is inefficient or the backend service is slow to respond.

[0067] 2) For routing lookup algorithm problems, you can re-optimize the lookup algorithm based on performance data, such as adjusting the index structure, changing the traversal strategy, etc. If it is a backend service response problem, you can check the configuration and performance of the backend service, such as optimizing database queries, increasing server resources, etc. At the same time, adjust the part of the routing configuration that interacts with the backend service to improve routing performance.

[0068] 8. Version Management and Routing Evolution 8.1 Application version upgrade and routing update 1) During the development of Web applications, version upgrades will be carried out continuously. The new version may add new pages and components or modify the functions of existing pages and components, which requires corresponding updates to the routing.

[0069] 2) The routing configuration method of the present invention supports version management. During the version upgrade process, the system can automatically detect the need for changes in routing configuration. For example, if a new page is added, the routing configuration interface will prompt the developer to add the corresponding route, or automatically add some default routes according to the preset upgrade rules. At the same time, for the modified pages and components, the system will check their impact on the existing routes and assist the developer in making routing adjustments.

[0070] 8.2 Routing History and Rollback 1) To help developers manage changes in routing configuration, the system records historical versions of routing configuration. Developers can view different versions of routing configuration and understand how routing has evolved.

[0071] 2) When necessary, you can roll back the routing configuration to a historical version. For example, if a problem occurs in the latest routing configuration, you can roll back to the last stable version, and then gradually troubleshoot the problem and make modifications. This routing history record and rollback function improves the maintainability of routing configuration.

[0072] 9. Extended components and custom routing functions 9.1 Routing configuration of extension components 1) In order to meet the needs of different application scenarios, the development platform allows developers to create or introduce extension components. These extension components may have special functions and interaction methods, requiring corresponding routing configuration.

[0073] 2) When introducing an extension component, developers can add routing rules for the extension component in the routing configuration interface. Similar to ordinary components, the extension component can be integrated into the entire routing system by setting information such as the source component (extension component), target page or component, and routing parameters. At the same time, for the routing configuration of the extension component, its special functions can be used for more flexible routing design, such as generating dynamic routes based on complex state changes within the extension component.

[0074] 9.2 Implementation of custom routing function 1) For some advanced users or specific application scenarios, a custom routing function may be required. The routing configuration method of the present invention provides an interface for custom routing.

[0075] 2) Developers can implement special routing logic by writing custom routing functions. These custom routing functions can be combined with existing routing configuration data structures to override or supplement existing routing rules under certain conditions. For example, you can create a route that dynamically generates routes based on user behavior analysis results.

[0076] 10. Integration with backend services 10.1 Backend service interface configuration 1) In the low-code development platform, developers can configure the interface information of the backend service, including the interface address, request method (such as GET, POST, etc.), request parameter format, etc.

[0077] 2) These interface information are associated with the routing configuration, and the backend service interface that needs to be called is determined based on the target page and component requirements pointed to by the route.

[0078] 10.2 Data Interaction 1) During the routing execution process, when data needs to be obtained, a request is sent to the backend service according to the configured backend service interface information. For example, when the route jumps to a page that needs to display user information, a request to obtain user information is sent to the backend service.

[0079] 2) The backend service processes the request and returns the corresponding data based on the received request parameters. For example, it queries user information from the database, formats it into the format required by the front end (such as JSON format), and then returns it to the front end. After receiving the data, the front end fills it into the page and components to complete the normal display and interaction of the page.

[0080] The beneficial effects of the present invention are: 1. Improve development efficiency Through visual orchestration and low-code routing configuration, developers do not need to write a lot of complex routing codes. They can complete the routing construction by simply dragging, configuring and setting properties. There is no need to deal with the binding relationship between routing and roles, which greatly shortens the development cycle. Developers can focus more on business logic and user experience design.

[0081] 2. Reduce development costs Since developers are not required to have in-depth coding skills, the reliance on professional developers is reduced. Non-professional developers can also perform routing configuration operations after a certain amount of training, which reduces human resource costs. At the same time, the shortening of the development cycle also indirectly reduces development costs.

[0082] 3. Improve configuration flexibility and accuracy The visual routing configuration interface allows developers to intuitively configure routing, reducing routing problems caused by coding errors. At the same time, the flexibility of configuration can adapt to and meet the needs of various complex and changing markets and application scenarios.

[0083] 4. Optimize application performance By verifying and optimizing the routing configuration, the correctness and efficiency of routing are guaranteed, the performance of Web applications during operation is improved, and the slow page loading and interaction anomalies caused by routing problems are reduced.

[0084] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A low-code routing configuration method based on Web visual orchestration components and pages, characterized in that: The following steps are involved: S1, visual arrangement of components and pages, adding predefined components or pages to the canvas by clicking or dragging and dropping, where all components or pages that need to arrange routing relationships are displayed in the canvas in the form of thumbnails; S2, routing information extraction and abstraction. During the visual arrangement of components and pages, the system automatically extracts routing information, generates a unique page identifier for each page, extracts routing parameters for components based on their position and function in the page, and abstracts routing information into a data structure containing source page identifier, target page identifier, and routing parameters. S3, low-code routing configuration. It provides a low-code routing configuration interface to graphically display the routing relationship between pages and components, and enters the interface to perform routing configuration operations.

2. According to claim 1, a low-code routing configuration method based on Web visual orchestration components and pages is characterized in that: The low-code routing configuration method based on Web visual orchestration components and pages also includes the following steps: S4, setting security mechanisms and routing protection, setting access permission requirements, encrypting sensitive data in routing parameters with encryption algorithms, decrypting when received by the backend, and setting encryption-related parameters in the routing configuration interface; S5, verification and optimization of routing configuration; S6, routing performance monitoring and optimization; S7, version management and routing evolution; S8, extending components and customizing routing functions; S9, integration with back-end services.

3. The low-code routing configuration method based on Web visual orchestration components and pages according to claim 1 or 2 is characterized in that: The components in S1 include but are not limited to text boxes, buttons, tables, and charts, and each component has unique properties and events. The properties of the components include style properties, data binding properties, and event response properties.

4. The low-code routing configuration method based on Web visual orchestration components and pages according to claim 3 is characterized in that: The page in S1 contains multiple components and supports layout design, including setting the position, size, and alignment of the components. At the same time, parent-child and nested relationships are established between pages. Each page has unique attributes and events. The attributes of the page include page title, page background color, and page layout.

5. According to claim 4, the low-code routing configuration method based on Web visual arrangement components and pages is characterized in that: The routing parameters in S2 include the target page identifier, the transferred data, and the data format.

6. The low-code routing configuration method based on Web visual orchestration components and pages according to claim 4 is characterized in that: The routing configuration operations in S3 include modifying the target page of the route, adding new routes, deleting unnecessary routes, and processing routing updates caused by component updates. The configuration process is completed by selecting the source component and the target page, setting routing parameters, and the dynamic routing parameters are bound to the attribute parameters or events exposed by the component or page.

7. The low-code routing configuration method based on Web visual orchestration components and pages according to claim 6 is characterized in that: The encryption algorithm in S4 includes a symmetric encryption algorithm and an asymmetric encryption algorithm.

8. The low-code routing configuration method based on Web visual arrangement components and pages according to claim 7 is characterized in that: Specifically, after completing the routing configuration, the system automatically verifies the legitimacy of the routing configuration, including checking whether the target page exists, whether the routing parameters meet the requirements, and the routing connectivity; optimizing the routing configuration, including caching optimization of frequently used routing paths. The caching strategies adopted by the cache optimization include memory caching and local storage caching, and optimizing the routing search algorithm in the complex page nested structure to reduce time complexity.

9. The low-code routing configuration method based on Web visual orchestration components and pages according to claim 8 is characterized in that: S6 specifically monitors routing performance in real time when the Web application is running, including execution time, search times, and transmission volume indicators. The data is collected by inserting monitoring codes at key points of routing execution, and sent to the monitoring system for analysis and visualization. Developers can view performance status through the monitoring interface. Based on performance monitoring data, when routing performance problems are found, the system automatically or reminds developers to optimize. For problems with long execution time, if the search algorithm is inefficient, the search algorithm is optimized. If the backend service responds slowly, the backend service configuration and performance are checked and the routing and backend interaction parts are adjusted. The optimized search algorithm includes the index structure and the hierarchical traversal algorithm.

10. The low-code routing configuration method based on Web visual arrangement components and pages according to claim 9 is characterized in that: The S8 specifically supports developers to create or introduce extension components. When introducing, developers can add rules for them in the routing configuration interface and integrate them into the routing system by setting the source component, target page or component, and routing parameter information; it provides a custom routing interface, and developers can write custom routing functions to implement special routing logic. This function can be combined with the existing routing configuration data structure to overwrite or supplement the existing routing rules under specific conditions. The custom routing function is written in languages ​​including JavaScript or Python.

Images