A dynamic page management method and system based on a unified interface

Abstract

The application belongs to the field of software engineering and information technology, and particularly relates to a dynamic page management method and system based on a unified interface. The application sends response data to an authentication management layer, a custom management layer and a single-page component through the unified interface. The custom management layer generates a user accessible path table. The authentication management layer switches the page to a corresponding page level. The single-page component generates corresponding single-page content to obtain a dynamic user interface. The application simplifies interface management, enhances the adaptability of the system to different software development kits, improves the flexibility and expandability of the user interface component, simplifies the page display and hiding control process, and thus significantly improves the overall efficiency of development and maintenance.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of software engineering and information technology, and more particularly, to a dynamic page management method and system based on a unified interface. BACKGROUND

[0002] Network communication equipment often has a large number of parameters to be configured or managed, and therefore, its Web application development usually involves various configuration page drawing and adaptation. In current development practices, developers often use scattered API (Application Programming Interface) and hard-coded UI (User Interface) component binding methods. This easily leads to interface duplication, code redundancy, and management complexity. In addition, traditional page display and hiding control usually requires a large amount of manual coding, increasing the difficulty of development and maintenance.

[0003] In traditional Web application development, different SDKs (Software Development Kits) provide different backend interfaces, and the UI designs of different SDKs are difficult to unify, resulting in a large and tedious workload for UI adaptation. When customization is required according to customer needs, a significant portion of the work involves display and hiding control of functional pages, and the lack of unified interface design and manual display and hiding control makes customization maintenance and development even more complex. SUMMARY

[0004] The present application provides a dynamic page management method and system based on a unified interface to overcome at least one of the deficiencies of the prior art.

[0005] The present application aims to at least partially solve the above technical problems.

[0006] To solve the above technical problems, the technical solution of the present application is as follows:

[0007] A dynamic page management method based on a unified interface, comprising the following steps:

[0008] S1: The unified interface receives response data sent by a backend server;

[0009] S2: The unified interface sends the response data to an authentication management layer, a customization management layer, and a single-page component, respectively, and the authentication management layer, the customization management layer, and the single-page component are all connected to the backend server through the unified interface;

[0010] S3: The customization management layer receives the response data, parses the response data according to a customization parameter mapping table provided by the unified interface, and caches the response data as customization state parameters, and then generates a user accessible path table according to a path routing display and hiding control rule table provided by the unified interface and the customization state parameters;

[0011] S4: The authentication management layer receives the response data, and updates the authentication state of the user interface according to the login interface provided by the unified interface, obtains the current authentication state of the user, and switches the page to the corresponding page level, which is a display framework;

[0012] S5: The single-page component receives the response data, generates corresponding single-page content according to the corresponding page level, and obtains a dynamic user interface.

[0013] Preferably, in step S3, the customization management layer generates a user interface according to the customization parameter mapping table provided by the unified interface, including the following steps:

[0014] The customization management layer reads the customization parameter mapping table from the unified interface, establishes an interceptor according to the customization parameter mapping table, the interceptor receives the response data, and the interceptor parses the request content through the customization parameter table and updates the customization state to obtain the user interface information of the user interface.

[0015] Preferably, before step S4, the customization management layer also includes changing the path of the user interface according to the path routing display control rule table provided by the unified interface, including:

[0016] The customization management layer adds or deletes the user accessible path table according to the path routing display control rule table provided by the unified interface.

[0017] Preferably, in step S3, the authentication management layer updates the authentication state of the user interface according to the login interface provided by the unified interface, obtains the user interface after updating the authentication state, and includes the following steps:

[0018] The authentication management layer updates the authentication state of the user interface through the login interface provided by the unified interface, records the current authentication information, and obtains the user interface after updating the authentication state.

[0019] Preferably, after step S4, the route navigation also includes managing the switching, refreshing, or jumping behavior of the user interface according to the current authentication state of the user and the path routing display control rule table.

[0020] Preferably, in step S5, the single-page component updates the user interface information according to the interface provided by the unified interface, obtains the user interface after updating the user interface information, and includes:

[0021] The single-page component includes a form definition unit, a method binding unit, and a display logic rule unit, the form definition unit defines parameter configuration for each object of the user interface;

[0022] The method binding unit generates corresponding user interface information according to the binding method provided by the unified interface;

[0023] The display and hiding logic rule unit updates the user interface information according to the display logic of each object of the user interface, to obtain a user interface after the user interface information is updated.

[0024] Preferably, the form definition unit further comprises the following steps of cross-verifying the fields to obtain a verification result:

[0025] Step 1: receiving a field verification request, the field being a parameter name of a configuration page, judging whether the field is in a verification set, if the field is in the verification set, jumping to step 4, if the field is not in the verification set, adding the field to the verification set;

[0026] Step 2: verifying the content of the field added to the verification set;

[0027] Step 3: removing the verified field from the verification set;

[0028] Step 4: obtaining the verification result.

[0029] Preferably, the method binding unit generates a corresponding user interface according to a binding method provided by the unified interface, comprising:

[0030] The method binding unit generates a corresponding user interface by editing the user interface information through the binding method provided by the unified interface.

[0031] Preferably, the display and hiding logic rule unit updates the user interface information according to the display logic of each object of the user interface, to obtain a user interface after the user interface information is updated, comprising the following steps:

[0032] The display and hiding logic rule unit establishes a logic state for each object of the user interface, and initializes the logic state of all objects to a display state;

[0033] When the parameter configuration of the user interface changes, the display and hiding logic rule unit traverses preset display and hiding rule content, if the parameter configuration of the user interface satisfies the corresponding display and hiding rule content, sets the logic state of the current object to a display state, if the parameter configuration of the user interface does not satisfy the corresponding display and hiding rule content, sets the logic state of the current object to a hidden state.

[0034] A dynamic page management system based on a unified interface, applied to the dynamic page management method based on the unified interface, comprising:

[0035] The data acquisition module is configured to receive response data sent by a back-end server through the unified interface.

[0036] The sending module is used to send response data to the authentication management layer, the customization management layer, and the single-page component through a unified interface. The authentication management layer, the customization management layer, and the single-page component all connect to the backend server through the unified interface.

[0037] The custom management layer interface module is used to receive response data. The custom management layer parses the response data and caches it as custom status parameters according to the custom parameter mapping table provided by the unified interface. Then, it generates a user-accessible path table according to the path routing explicit / implicit control rule table and the custom status parameters provided by the unified interface.

[0038] The authentication management layer module is used to receive response data, update the user's authentication status according to the login interface provided by the unified interface, obtain the current user's authentication status, and switch the page to the corresponding page level, where the page level is the display frame.

[0039] The Single Page Component module is used to receive response data and generate corresponding single-page content based on the corresponding page hierarchy to obtain a dynamic user interface.

[0040] Compared with the prior art, the beneficial effects of the technical solution of the present invention are:

[0041] This invention sends response data to the authentication management layer, the customization management layer, and the single-page component through a unified interface. The customization management layer generates a user-accessible path table, the authentication management layer switches the page to the corresponding page level, and the single-page component generates the corresponding single-page content, resulting in a dynamic user interface. This invention simplifies interface management, enhances the system's adaptability to different software development kits, improves the flexibility and scalability of user interface components, and simplifies the page display / hiding control process, thereby significantly improving the overall efficiency of development and maintenance. Attached Figure Description

[0042] Figure 1 This is a flowchart of the dynamic page management method described in this invention;

[0043] Figure 2 This is a schematic diagram of the dynamic page management method described in this embodiment;

[0044] Figure 3 This is a schematic diagram of the operation of the customized management layer described in this invention;

[0045] Figure 4 This is a schematic diagram of the certification management layer operation as described in this invention;

[0046] Figure 5 This is a flowchart illustrating the page hierarchy switching process described in this embodiment;

[0047] Figure 6 This is the execution flow of the routing navigation described in this embodiment;

[0048] Figure 7 Flow chart for performing cross-validation as described in this embodiment;

[0049] Figure 8 Writing of the validation method rules as described in this embodiment;

[0050] Figure 9 Examples of rules as described in this embodiment;

[0051] Figure 10 Access control rules as described in this embodiment;

[0052] Figure 11 Example diagram of custom parameter mapping as described in this embodiment;

[0053] Figure 12 Example diagram of path routing visibility control table as described in this embodiment;

[0054] Figure 13 Description setting of the configuration page as described in this embodiment;

[0055] Figure 14 Final result rendering as described in this embodiment;

[0056] Figure 15 Example diagram of configuration page visibility logic rules as described in this embodiment;

[0057] Figure 16 Schematic diagram of the dynamic page management system as described in this embodiment. DETAILED DESCRIPTION

[0058] The accompanying drawings are included to provide a further understanding of the present application, and are incorporated in and constitute a part of this specification, illustrate embodiments of the present application, and together with the description serve to explain the principles of the present application.

[0059] To better illustrate the present embodiment, some components in the drawings can be omitted, enlarged or reduced, and do not represent the actual size of the product.

[0060] For those skilled in the art, it is understandable that some well-known structures and their descriptions in the drawings can be omitted.

[0061] The technical solutions of the present application will be further described below in combination with the drawings and embodiments.

[0062] Embodiment 1

[0063] A dynamic page management method based on a unified interface, as shown in Figure 1 includes the following steps:

[0064] S1: The unified interface receives the response data sent by the backend server;

[0065] S2: The unified interface sends response data to the authentication management layer, the customization management layer, and the single-page component respectively. The authentication management layer, the customization management layer, and the single-page component all connect to the backend server through the unified interface.

[0066] S3: The custom management layer receives the response data. The custom management layer parses the response data and caches it as custom status parameters according to the custom parameter mapping table provided by the unified interface. Then, it generates a user-accessible path table according to the path routing explicit / implicit control rule table and the custom status parameters provided by the unified interface.

[0067] S4: The authentication management layer receives the response data, updates the user's authentication status according to the login interface provided by the unified interface, obtains the current user's authentication status, and switches the page to the corresponding page level, where the page level is the display frame.

[0068] S5: The single-page component receives the response data and generates the corresponding single-page content according to the corresponding page hierarchy to obtain the dynamic user interface.

[0069] In the specific implementation process, such as Figure 2 As shown, the unified interface first receives the response data sent by the backend server;

[0070] The unified interface then sends the response data to the authentication management layer, the customization management layer, and the single-page component, respectively. The authentication management layer, the customization management layer, and the single-page component all connect to the backend server through the unified interface.

[0071] The custom management layer then receives the response data. The custom management layer parses the response data and caches it as custom status parameters according to the custom parameter mapping table provided by the unified interface. Then, it generates a user-accessible path table according to the path routing explicit / implicit control rule table and the custom status parameters provided by the unified interface.

[0072] Next, the authentication management layer receives the response data, updates the user's authentication status according to the login interface provided by the unified interface, obtains the current user's authentication status, and switches the page to the corresponding page level, where the page level is the display frame.

[0073] Finally, the single-page component receives the response data and generates the corresponding single-page content according to the corresponding page hierarchy to obtain the dynamic user interface.

[0074] This embodiment sends response data to the authentication management layer, the customization management layer, and the single-page component through a unified interface. This generates the user interface corresponding to the switched page level and the user interface after the user interface information is updated. Together, they generate the user interface, simplifying interface management, enhancing the system's adaptability to different software development kits, improving the flexibility and scalability of user interface components, and simplifying the page display and hiding control process, thereby significantly improving the overall efficiency of development and maintenance.

[0075] Example 2

[0076] This embodiment, based on Embodiment 1, continues to disclose the following content:

[0077] In step S3, the customization management layer generates the user interface based on the customization parameter mapping table provided by the unified interface, including the following steps:

[0078] The customization management layer reads the customization parameter mapping table from the unified interface, establishes an interceptor based on the customization parameter mapping table, the interceptor receives response data, parses the request content through the customization parameter table, updates the customization status, and obtains the user interface information of the user interface.

[0079] Before step S4, the process also includes a custom management layer that changes the user interface path based on the path routing visibility control rule table provided by the unified interface, including:

[0080] The customized management layer adds or deletes entries in the user-accessible path table based on the path routing visibility control rule table provided by the unified interface.

[0081] In the specific implementation process, such as Figure 3 As shown, the custom management layer utilizes the custom parameter mapping table provided by the unified interface to set up URL request capture. After a request is captured, the captured content is parsed according to the methods defined in the custom parameter mapping table to update the custom status information in real time. During the initialization phase, the custom management layer reads the custom parameter mapping table from the unified interface and establishes a request interceptor based on the table. When the user interacts with the interface, the page sends a data request to the backend through the unified interface. The request content returned by the backend is first intercepted by the interceptor. The interceptor parses the request content according to the parsing methods defined in the custom parameter table, then updates the custom status of the custom management layer, and finally returns the request content to the unified interface for further processing. When the custom status in the custom management layer changes, the user interface displays custom content according to the new custom status through Vue's response mechanism.

[0082] The way to write path routing visibility control rules is similar to that of the configuration page, which is also accomplished through item (who is controlled by the rule), when (under what circumstances the rule is executed), and action (execute the action).

[0083] Example 3

[0084] Based on Examples 1 and 2, this embodiment continues to disclose the following content:

[0085] In step S3, the authentication management layer updates the authentication status of the user interface based on the login interface provided by the unified interface, obtaining the user interface with the updated authentication status, including the following steps:

[0086] The authentication management layer updates the authentication status of the user interface through the login interface provided by the unified interface, records the current authentication information, and obtains the user interface after the authentication status is updated.

[0087] In the specific implementation process, such as Figure 4 As shown, the login page executes the login operation through the authentication management layer. The management layer records the authentication information submitted during login and updates the internal authentication status through the unified login interface. After the authentication status is updated, the page updates the page hierarchy in conjunction with the routing navigation through Vue's response mechanism. The page hierarchy includes the visitor user interface, the normal user interface, the administrator user interface, the wizard interface, etc.

[0088] like Figure 5 As shown, under normal access conditions, the switching of page levels is completed by the authentication management layer, and the URL redirection is executed by the page frame corresponding to the page level. In this case, the routing navigation is only responsible for ensuring that the target path is valid.

[0089] Example 4

[0090] Based on Examples 1, 2, and 3, this embodiment continues to disclose the following content:

[0091] After step S4, the process also includes managing the switching, refreshing, or jumping behavior of the user interface based on the current user authentication status and the path route visibility control rule table.

[0092] In the specific implementation process, the execution flow of route navigation is as follows: Figure 6 As shown, when a user refreshes, navigates, or switches pages, Vue's path routing mechanism triggers the preceding route navigation. First, the route navigation checks if the current authentication state has been initialized. If it hasn't been initialized, it means the user is visiting the page for the first time and needs to reconnect to obtain the current authentication state.

[0093] Next, the routing system determines whether the user's target path is valid. It checks if the target path has any access level restrictions. If there are no restrictions, the routing system succeeds and allows the user to navigate. If the target path has level restrictions, it compares the level of the target path with the user's current level; if they match, the user is allowed to navigate.

[0094] If the hierarchy is inconsistent, the path routing will attempt to update the user's hierarchy through the authentication management layer, switching it to the hierarchy of the target path. If the switch is successful, navigation completes successfully. Otherwise, navigation fails, and the user will remain on the current page, or the page will refresh and return to the root directory to restart the route navigation process.

[0095] In some specific implementations, the refresh behavior includes: the user manually clicking the browser refresh button. Since the browser refresh resets the front-end state, the routing guard needs to re-obtain the user's authentication information through the reconnection interface, and then complete the path routing based on the URL at the time of refresh and the user's state. (The final result may be that the user reloads the current URL interface, or that authentication times out, returns to the unauthenticated level, and then returns to the login page).

[0096] The redirection behavior includes: if the user manually enters a URL to redirect, similar to refreshing, the browser re-acquires the authentication status. If the authentication has not expired and the target URL is within the accessible page level under the current authentication status, then the page level is switched and the URL is loaded; if the authentication has not expired and the target URL is not within the accessible page level under the current authentication status, then no redirection is performed; if the authentication status has expired, then the user is returned to the login page.

[0097] Example 5

[0098] This embodiment, based on embodiments 1, 2, 3, and 4, further discloses the following content:

[0099] In step S5, the single-page component updates the user interface information according to the interface provided by the unified interface to obtain the user interface after the user interface information is updated, including:

[0100] The single-page component includes a form definition unit, a method binding unit, and a display / hidden logic rule unit. The form definition unit defines parameter configurations for each object in the user interface.

[0101] In this embodiment, developing a configuration page is summarized into three parts: parameter description, method binding, and explicit / implicit logic. These three parts are all housed within a single object, forming a complete page. Developers only need to edit these three parts to render a configuration page.

[0102] The method binding unit generates corresponding user interface information based on the binding method provided by the unified interface;

[0103] The explicit / implicit logic rule unit updates the user interface information according to the display logic of each object in the user interface, and obtains the user interface after the user interface information is updated.

[0104] In this embodiment, the configuration interface of the network communication device mainly includes two types: a standard configuration page and a tabular configuration page. The standard configuration page is suitable for conventional parameter settings, while the tabular configuration page is used to handle more complex and multi-dimensional configuration items.

[0105] Developers can choose to use either standard or tabular page generation components to build the user interface based on their specific configuration requirements.

[0106] Regardless of the type chosen, they all share a unified underlying configuration description structure. This unified structure ensures the consistency of configuration logic while providing a standardized development framework for different types of configuration pages;

[0107] The form definition section, as shown in Table 1, consists of a series of objects, each of which defines a UI element.

[0108] Table 1

[0109]

[0110]

[0111]

[0112] A unified interface provides the necessary CRUD (Create, Read, Update, Delete) methods for each page. Page generation components can automatically generate the corresponding UI elements based on whether or not these methods are bound to the page.

[0113] The methods defined in the unified interface have uniform requirements for both input and output; for example, all getMethod methods must be arrays of objects. Within a single configuration page, the unified interface acts as an adaptation layer between the front-end and back-end.

[0114] The method binding unit includes methods related to data operations, all of which are bound through the devAPI. The unified interface provides the page with the necessary CRUD (Create, Read, Update, Delete) methods. The page generation unit can automatically generate the corresponding UI based on whether or not methods are bound. Table 2 lists the names and functions of the methods in the method binding unit.

[0115] Table 2

[0116]

[0117]

[0118] Table 3 shows the display control rules that define the dynamic display logic of UI elements. Each rule contains the following attributes:

[0119] Table 3

[0120]

[0121] The customization management layer provides customized information for single pages. This customized information can be used arbitrarily in form definitions, method bindings, and explicit / implicit logic control to achieve flexible customization of the page.

[0122] Example 6

[0123] This embodiment, based on embodiments 1, 2, 3, 4, and 5, further discloses the following content:

[0124] The form definition unit also includes obtaining validation results by cross-validating fields, such as... Figure 7 As shown, it includes the following steps:

[0125] Step 1: Receive a field verification request. The field is a parameter name on the configuration page. Determine whether the field is already in the verification set. If the field is already in the verification set, proceed to Step 4. If the field is not in the verification set, add the field to the verification set.

[0126] Step 2: Validate the content of the fields added to the validation set;

[0127] Step 3: Remove the validated fields from the validation set;

[0128] Step 4: Obtain the verification results.

[0129] In the specific implementation process, such as Figure 6 As shown, this is a process for performing cross-validation in rules.

[0130] Triggering cross-validation: The cross-validation process begins by receiving a validation target field name, which corresponds to the model attribute in the form definition.

[0131] Loop checking: First, check if the cross-validation set (Set data structure) already contains the target field name. If it does, return immediately via a callback function to prevent getting stuck in infinite recursion.

[0132] Status flag: If no cycle is detected, add the target field name to the cross-validation set and mark its validation status as in progress.

[0133] Perform validation: Execute the actual validation logic on the target field.

[0134] State cleanup: After validation is complete, the target field name is removed from the cross-validation set, indicating that the validation of that field is finished.

[0135] Complete callback: Finally, the verification result is returned through the callback function, ending the entire verification process.

[0136] like Figure 8 As shown, the validation content of this framework is centralized in the rules, and combined with a series of predefined validation generators, the process of defining rules is greatly simplified.

[0137] These validation generators do not simply generate a fixed validation rule; they allow developers to supplement the validation rules with an anonymous function based on predefined rules, which greatly increases the freedom in writing validation rules.

[0138] like Figure 9 As shown, another example of rules first checks if the parameter is empty, then checks if the parameter is a valid IPv4 address, then performs a custom check to check if the configuration is customizable, checks if the address pool configuration in the form is valid, and finally triggers the check rule of another parameter to perform cross-validation.

[0139] from Figure 9 As can be seen more clearly, under the verification rules written by this verification generator, the verification rules and logic of the parameters will be very clear and have a high degree of freedom, which greatly improves the efficiency of maintenance and development.

[0140] Example 7

[0141] This embodiment, based on embodiments 1, 2, 3, 4, 5, and 6, further discloses the following content:

[0142] The method binding unit generates the corresponding user interface based on the binding methods provided by the unified interface, including:

[0143] The method binding unit generates the corresponding user interface by editing the user interface information through the binding method provided by the unified interface.

[0144] The explicit / implicit logic rule unit updates the user interface information according to the display logic of each object in the user interface, resulting in a user interface with updated user interface information, including the following steps:

[0145] The explicit / implicit logic rule unit establishes a logical state for each object in the user interface and initializes the logical state of all objects to the display state;

[0146] When the user interface parameter configuration changes, the display / hidden logic rule unit traverses the preset display / hidden rule content. If the user interface parameter configuration meets the corresponding display / hidden rule content, the logical state of the current object is set to the display state. If the user interface parameter configuration does not meet the corresponding display / hidden rule content, the logical state of the current object is set to the hidden state.

[0147] Within the entire control rule, each item in the controlled parameter list (item) can only appear once. This principle is particularly helpful in handling complex scenarios such as nested explicit and implicit logic. By centralizing complex logic into a single rule, developers can manage and maintain the system more effectively. This approach not only simplifies the development process but also improves overall efficiency, making the system more robust and easier to maintain.

[0148] By establishing a custom parameter mapping, the request content is automatically intercepted and parsed, and the custom status is updated in real time, which simplifies the management of custom content and improves development efficiency.

[0149] In some implementations, based on Vue 3.0+, the unified interface imports all interfaces in a specified directory of the project via Vite's dynamic import function. Developers can freely create modules in this directory to handle CRUD requests for all configuration pages. Furthermore, for the proper functioning of the system's authentication and customization management layers, basic interfaces and settings need to be defined within the modules.

[0150] Step s1: login, loginout, reConnect login, logout, and reconnection interfaces: These interfaces judge the content returned by the backend and then return an authentication status, such as auth, unauth, firstBoot, etc. The specific settings depend on the device or customization requirements.

[0151] Step s2: accessControlRule page permission control rules: Figure 10 The access control rules implemented in this embodiment stipulate that in an unauthenticated state, users can only access the login page. Under full authentication (auth), users will first enter the user level, and are allowed to switch between the administrator and wizard levels. For ordinary user authentication (auth_user), access is only possible to the custom user_admin level. Upon first device startup, the device automatically enters the wizard page.

[0152] Step s3: customValueMap custom parameter mapping table, Figure 11 This is an example of custom parameter mapping, which specifies the URLs that the interceptor needs to intercept, as well as the parsing and processing methods for the response. The returned object of the processing method will be updated in the custom state of the custom management layer.

[0153] Step s3: routeControl shows the display / hiding control table for path routing. Figure 12 This is an example of a path routing visibility control table. The `item` member in the image above originates from the `name` attribute generated by the Pages plugin from the Vue path routing table. The `when` parameter specifies the parameter pattern for the custom state. The above indicates that when the device is on the main route and mesh functionality is enabled, the `network_map` and `user_map` pages will be displayed; otherwise, they will not be displayed. The same applies to `network_setup`. When the custom management layer detects a change in the custom state, it will modify the Vue path routing table.

[0154] The custom management layer and authentication management layer are primarily implemented using the open-source module Pinia, a library for Vue state management. It customizes the state management logic described in the methods using Vue 3's composable API. Path guards and other pages can directly access the current state through the methods defined by Pinia.

[0155] Step s4: As Figure 13 The image shows a configuration page description setting, which describes the UI for the two parameters returned by `getMethod`, specifies the title, UI component property settings, the formatting method when displaying the result in a table, and the content checks performed during the configuration process. Through the binding of the `Method`, the component automatically handles all request logic for the page.

[0156] The final result is as follows Figure 14 As shown, it has a basic table, a UI for adding configurations, a UI for batch deletion, and allows users to click on row configurations to modify or delete them.

[0157] This embodiment is mainly based on the Element Plus UI framework, and the specific details of its implementation of the description method are as follows:

[0158] Label parsing is achieved by binding the label to a label slot in the header or form component.

[0159] The `type` parameter is parsed by establishing a mapping between UI components and strings to obtain the specific UI component, and then using Vue's `component` tag to complete the basic UI rendering. If the `type` parameter is directly entered as a virtual node, it can also be directly parsed by the `component` tag.

[0160] Most of the model, props, and event settings are directly bound to the component tag.

[0161] Rules is a re-encapsulation and development based on the open-source async-validator used in Element Plus. It completes validation generation and cross-validation by creating a custom validation generator and cross-checking state sets. The component generates validation logic through the validation generator and binds it to the form validation method, checking the configuration content when the user modifies parameters or submits the form.

[0162] The format function is mainly accessed through component calls to obtain the returned content, which is then displayed in a formatted manner through slots in the UI component. In this embodiment, the returned content is allowed to be a virtual node, allowing the formatted content to be a specific UI element rather than simply text content.

[0163] Figure 15 This is an example of the configuration page display / concealment logic rules in this embodiment. Its writing format is similar to that of the path route display / concealment control table. The difference is that "item" refers to the parameters in the configuration page, and the corresponding UI will be controlled by the rules.

[0164] Within the page generation component, the component establishes the logical state of all parameters, all defaulting to true. When the page parameters change, the component iterates through the rules. For parameters that exist in the rules, those satisfying the rule conditions have their logical state set according to the action: show corresponds to true, hide corresponds to false. If the rule is not satisfied, the opposite behavior is executed. Finally, the UI component binds to its logical state via v-show. When the logical state changes, Vue's reactivity mechanism allows the UI to change accordingly.

[0165] In the illustrated embodiment, the rules also allow for the use of custom methods to implement complex logical expressions for specific parameters; the figure primarily shows non-logical expressions. The `item` property allows specifying specific options for menu-type parameters to control the visibility of those options.

[0166] When adapting to different SDK devices, the URLs of the operation interfaces may differ due to the differences in page hierarchy definitions and functional forms of different devices. Developers often need to repeatedly write these jump operations. If multiple page layouts such as ordinary user interfaces and wizard pages are also involved, these jump logics will be more complex and cumbersome.

[0167] Within the framework of the unified interface, developers only need to define the page permission control rules required by the device and set the return content of the login, logout, and reconnection interfaces according to these rules in the unified interface to achieve page behavior management for the device. All page navigation and page hierarchy switching operations are triggered by changes in the authentication management layer state, eliminating the need for manual URL navigation management.

[0168] Example 8

[0169] This embodiment, based on embodiments 1, 2, 3, 4, 5, 6, and 7, further discloses the following content:

[0170] Secondly, the present invention provides a dynamic page management system based on a unified interface, applied to the dynamic page management method based on the unified interface, such as... Figure 16 As shown, it includes:

[0171] The data acquisition module is used to receive response data sent by the backend server through a unified interface;

[0172] The sending module is used to send response data to the authentication management layer, the customization management layer, and the single-page component through a unified interface. The authentication management layer, the customization management layer, and the single-page component all connect to the backend server through the unified interface.

[0173] The custom management layer interface module is used to receive response data. The custom management layer parses the response data and caches it as custom status parameters according to the custom parameter mapping table provided by the unified interface. Then, it generates a user-accessible path table according to the path routing explicit / implicit control rule table and the custom status parameters provided by the unified interface.

[0174] The authentication management layer module is used to receive response data, update the user's authentication status according to the login interface provided by the unified interface, obtain the current user's authentication status, and switch the page to the corresponding page level, where the page level is the display frame.

[0175] The Single Page Component module is used to receive response data and generate corresponding single-page content based on the corresponding page hierarchy to obtain a dynamic user interface.

[0176] The same or similar labels correspond to the same or similar parts;

[0177] The terms used to describe positional relationships in the accompanying drawings are for illustrative purposes only and should not be construed as limiting this patent.

[0178] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not intended to limit the implementation of the present invention. Those skilled in the art will recognize that other variations or modifications can be made based on the above description. It is neither necessary nor possible to exhaustively describe all embodiments here. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the scope of protection of the claims of the present invention.

Claims

1. A method for dynamic page management based on a unified interface, characterized in that, The method comprises the following steps: S1: the unified interface receives response data sent by a backend server; S2: the unified interface sends the response data to an authentication management layer, a customization management layer and a single-page component, wherein the authentication management layer, the customization management layer and the single-page component are connected to the backend server through the unified interface; S3: the customization management layer receives the response data, parses the response data according to a customization parameter mapping table provided by the unified interface and caches the response data as customization state parameters, and generates a user accessible path table according to a path route display and hide control rule table provided by the unified interface and the customization state parameters; S4: the authentication management layer receives the response data, updates the authentication state of a user according to a login interface provided by the unified interface, obtains the current authentication state of the user and switches the page to a corresponding page level, and the page level is a display framework; S5: the single-page component receives the response data, generates corresponding single-page content according to the corresponding page level and obtains a dynamic user interface; In step S5, the single-page component updates user interface information according to an interface provided by the unified interface to obtain a user interface after the user interface information is updated, comprising: The single-page component comprises a form definition unit, a method binding unit and a display and hide logic rule unit, wherein the form definition unit defines parameter configurations for each object of the user interface; The method binding unit generates corresponding user interface information according to a binding method provided by the unified interface; The display and hide logic rule unit updates the user interface information according to the display logic of each object of the user interface to obtain the user interface after the user interface information is updated; The form definition unit further comprises the following steps of obtaining a verification result by cross-verifying fields, comprising: Step 1: receiving a field verification request, the field being a parameter name of a configuration page, judging whether the field is in a verification set, if the field is in the verification set, jumping to step 4, if the field is not in the verification set, adding the field to the verification set; Step 2: verifying the content of the field added to the verification set; Step 3: removing the verified field from the verification set; Step 4: obtaining a verification result; The display and hide logic rule unit updates the user interface information according to the display logic of each object of the user interface to obtain the user interface after the user interface information is updated, comprising the following steps: The display and hide logic rule unit establishes a logic state for each object of the user interface and initializes the logic states of all objects to a display state; When the parameter configurations of the user interface change, the display and hide logic rule unit traverses preset display and hide rule content, if the parameter configurations of the user interface meet the corresponding display and hide rule content, sets the logic state of the current object to the display state, if the parameter configurations of the user interface do not meet the corresponding display and hide rule content, sets the logic state of the current object to a hide state.

2. The dynamic page management method based on a unified interface according to claim 1, characterized in that, In step S3, the customization management layer generates a user interface according to a customization parameter mapping table provided by the unified interface, comprising the following steps: The custom management layer reads the custom parameter mapping table from the unified interface, establishes an interceptor according to the custom parameter mapping table, the interceptor receives response data, the interceptor parses the request content through the custom parameter table, and updates the custom state to obtain user interface information of the user interface.

3. The dynamic page management method based on a unified interface according to claim 1, characterized in that, Before step S4, the custom management layer changes the path of the user interface according to the path routing display and hide control rule table provided by the unified interface, including: The custom management layer adds or deletes the user accessible path table according to the path routing display and hide control rule table provided by the unified interface.

4. The dynamic page management method based on a unified interface according to claim 1, characterized in that, In step S3, the authentication management layer updates the authentication state of the user interface according to the login interface provided by the unified interface, and obtains the user interface after the authentication state is updated, including the following steps: The authentication management layer updates the authentication state of the user interface through the login interface provided by the unified interface, and records the current authentication information, and obtains the user interface after the authentication state is updated.

5. The dynamic page management method based on a unified interface according to claim 1, characterized in that, After step S4, the route navigation manages the switching, refreshing or jumping behavior of the user interface according to the current authentication state of the user and the path routing display and hide control rule table.

6. The dynamic page management method based on a unified interface according to claim 1, characterized in that, The method binding unit generates the corresponding user interface according to the binding method provided by the unified interface, including: The method binding unit edits the user interface information through the binding method according to the binding method provided by the unified interface, and generates the corresponding user interface.

7. A dynamic page management system based on a unified interface, characterized by, The method is applied to the dynamic page management method based on the unified interface as claimed in any one of claims 1 to 6, including: The data acquisition module is used for receiving the response data sent by the backend server through the unified interface; The sending module is used for sending the response data to the authentication management layer, the custom management layer and the single-page component through the unified interface, and the authentication management layer, the custom management layer and the single-page component are connected with the backend server through the unified interface; The custom management layer receiving module is used for receiving the response data by the custom management layer, and the custom management layer parses the response data according to the custom parameter mapping table provided by the unified interface and caches it as the custom state parameter, and then generates the user accessible path table according to the path routing display and hide control rule table and the custom state parameter provided by the unified interface; The authentication management layer module is used for receiving the response data by the authentication management layer, and the authentication management layer updates the authentication state of the user according to the login interface provided by the unified interface, obtains the current authentication state of the user, and switches the page to the corresponding page level, and the page level is a display framework; The single-page component module is used for receiving the response data by the single-page component, and the single-page component generates the corresponding single-page content according to the corresponding page level to obtain the dynamic user interface.

Images