Dynamic page management method and system based on uniform interface

Abstract

The invention belongs to the technical field of software engineering and information, and particularly relates to a dynamic page management method and system based on a uniform interface, response data is sent to an authentication management layer, a customization management layer and a single page component through the uniform interface, a user accessible path table is generated through the customization management layer, and the single page component is accessed to the user. The authentication management layer switches the page to a corresponding page level, the single-page component generates corresponding single-page content, and the dynamic user interface is obtained.The interface management is simplified, the adaptability of the system to different software development kits is enhanced, the flexibility and expandability of the user interface component are improved, the page display and implicit control process is simplified, and the dynamic user interface is obtained. Therefore, the overall efficiency of development and maintenance is obviously improved.

Description

Technical Field

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

[0002] Network communication devices often have a large number of parameters that need to be configured or managed. Therefore, the development of their Web applications usually involves the drawing and adaptation of various configuration pages. In current development practices, developers often use scattered APIs (Application Programming Interfaces) and hard-coded binding methods for UI (User Interface) components, which easily lead to duplicate interfaces, redundant code, and complex management. 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, the backend interfaces provided by different SDKs (Software Development Kits) are different, and it is difficult to unify the UI designs of different SDKs. The workload of UI adaptation is large and cumbersome. When customization is required according to customer needs, a considerable part of it involves the display and hiding control of functional pages, facing the problems that the interface design is not unified and manual display and hiding control make the customization maintenance and development more complex. Summary of the Invention

[0004] The present invention provides a dynamic page management method and system based on a unified interface to overcome at least one of the above-mentioned defects of the prior art.

[0005] The present invention aims to solve the above technical problems to at least some extent.

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

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

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

[0009] S2: The unified interface 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 are all connected to the backend server through the unified interface;

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

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

[0012] S5: The single-page component receives the response data. The single-page component generates corresponding single-page content according to the corresponding page level, obtaining 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. The interceptor parses the request content through the customization parameter table and updates the customization status, obtaining the user interface information of the user interface.

[0015] Preferably, before step S4, it further includes that the customization 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:

[0016] The customization management layer performs addition or deletion operations on the user accessible path table according to the path routing display and hide control rule table provided by the unified interface.

[0017] Preferably, in step S3, the authentication management layer updates the authentication status of the user interface according to the login interface provided by the unified interface, obtaining the user interface after the authentication status is updated, including the following steps:

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

[0019] Preferably, after step S4, it further includes that the routing navigation manages the switching, refreshing or jumping behaviors of the user interface according to the current authentication status of the user and the path routing display and hide 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, obtaining the user interface after the user interface information is updated, including:

[0021] The single-page component includes a form definition unit, a method binding unit and a display and hide logic rule unit. The form definition unit defines parameter configurations 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 / hide 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 with updated user interface information.

[0024] Preferably, the form definition unit further includes obtaining a verification result by performing cross-verification on fields, including the following steps:

[0025] Step 1: Receive a field verification request, where the field is the parameter name of the configuration page, and determine whether the field is already in the verification set. If the field is already in the verification set, jump to Step 4; if the field is not in the verification set, add the field to the verification set.

[0026] Step 2: Verify the content of the field added to the verification set.

[0027] Step 3: Remove the verified field from the verification set.

[0028] Step 4: Obtain the verification result.

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

[0030] 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 a corresponding user interface.

[0031] Preferably, the display / hide 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 with updated user interface information, including the following steps:

[0032] The display / hide logic rule unit establishes a logical state for each object in the user interface, and initializes the logical states of all objects to the display state.

[0033] When the parameter configuration of the user interface changes, the display / hide logic rule unit traverses the preset display / hide rule content. If the parameter configuration of the user interface meets the corresponding display / hide rule content, set the logical state of the current object to the display state; if the parameter configuration of the user interface does not meet the corresponding display / hide rule content, set the logical state of the current object to the 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, includes:

[0035] A data acquisition module, configured to receive response data sent by a backend server through a unified interface;

[0036] A sending module, configured to send response data to an authentication management layer, a customization management layer, and a single-page component respectively through a unified interface. The authentication management layer, the customization management layer, and the single-page component are all connected to a backend server through the unified interface;

[0037] A customization management layer receiving module, configured to receive response data by the customization management layer. The customization management layer parses the response data according to a customization parameter mapping table provided by the unified interface and caches it as customization status parameters, and then generates a user-accessible path table according to a path routing display and hide control rule table and the customization status parameters provided by the unified interface;

[0038] An authentication management layer module, configured to receive response data by the authentication management layer. The authentication management layer updates the authentication status of a user according to a login interface provided by the unified interface, obtains the current authentication status of the user, and switches the page to a corresponding page level, where the page level is a display framework;

[0039] A single-page component module, configured to receive response data by the single-page component. The single-page component generates corresponding single-page content according to the corresponding page level 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] The present invention sends response data to an authentication management layer, a customization management layer, and a single-page component respectively through a unified interface, generates a user-accessible path table by the customization management layer, the authentication management layer switches the page to a corresponding page level, and the single-page component generates corresponding single-page content to obtain a dynamic user interface. The present invention simplifies interface management, enhances the adaptability of the system to different software development kits, improves the flexibility and scalability of user interface components, and simplifies the page display and hide control process, thereby significantly improving the overall efficiency of development and maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 It is a flowchart of the dynamic page management method according to the present invention;

[0043] Figure 2 It is a schematic diagram of the dynamic page management method according to this embodiment;

[0044] Figure 3 It is a schematic diagram of the work of the customization management layer according to the present invention;

[0045] Figure 4 It is a schematic diagram of the work of the authentication management layer according to the present invention;

[0046] Figure 5 It is a flowchart of the page level switching according to this embodiment;

[0047] Figure 6 It is an execution process of the routing navigation according to this embodiment;

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

[0049] Figure 8 Writing of verification method rules described in this embodiment;

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

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

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

[0053] Figure 12 Exemplary diagram of the path routing display and hide control table described in this embodiment;

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

[0055] Figure 14 Final result effect diagram described in this embodiment;

[0056] Figure 15 Exemplary diagram of the configuration page display and hide logic rules described in this embodiment;

[0057] Figure 16 Schematic diagram of the dynamic page management system according to the present invention. Detailed implementation manners

[0058] The accompanying drawings are only for illustrative purposes and should not be construed as limitations to this patent;

[0059] To better illustrate this embodiment, some components in the accompanying drawings are omitted, enlarged or reduced, and do not represent the dimensions of the actual product;

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

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

[0062] Embodiment 1

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

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

[0065] S2: The unified interface 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 are all connected to the backend server through the unified interface;

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

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

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

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

[0070] Then the unified interface 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 are all connected to the backend server through the unified interface;

[0071] After that, the customization management layer receives the response data. The customization management layer parses the response data according to the customization parameter mapping table provided by the unified interface and caches it as customization status parameters, and then generates a user-accessible path table according to the path routing display and hide control rule table and the customization status parameters provided by the unified interface;

[0072] Then the authentication management layer receives the response data. The authentication management layer updates the authentication status of the user according to the login interface provided by the unified interface, obtains the current authentication status of the user and switches the page to the corresponding page level, and the page level is the display framework;

[0073] Finally, the single-page component receives the response data. The single-page component generates the corresponding single-page content according to the corresponding page level to obtain a dynamic user interface;

[0074] In this embodiment, the response data is sent to the authentication management layer, the customization management layer, and the single-page component respectively through a unified interface, and the user interfaces corresponding to the switched page hierarchy and the user interface with updated user interface information are generated respectively, and the user interface is jointly generated, which simplifies the interface management, enhances the adaptability of the system to different software development kits, improves the flexibility and scalability of the user interface components, simplifies the page display and hiding control process, and thus significantly improves the overall efficiency of development and maintenance.

[0075] Embodiment 2

[0076] On the basis of Embodiment 1, this embodiment further discloses the following content:

[0077] 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:

[0078] 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, the interceptor parses the request content through the customization parameter table, and updates the customization status to obtain the user interface information of the user interface.

[0079] Before step S4, it further includes that the customization management layer changes the path of the user interface according to the path routing display and hiding control rule table provided by the unified interface, including:

[0080] The customization management layer performs addition or deletion operations on the user accessible path table according to the path routing display and hiding control rule table provided by the unified interface.

[0081] In the specific implementation process, as Figure 3 shown, the customization management layer uses the customization parameter mapping table provided by the unified interface to set URL request capture. After the request is captured, according to the method defined in the customization parameter mapping table, the captured content is parsed to update the customization status information in real time. In the initialization stage, the customization management layer reads the customization parameter mapping table from the unified interface and establishes a request interceptor according to the customization parameter mapping table. When the user operates on the interface, the page sends a data request to the backend through the unified interface. The request content returned by the backend will be intercepted by the interceptor first. The interceptor parses the request content according to the parsing method defined in the customization parameter table, then updates the customization status of the customization management layer, and finally returns the request content to the unified interface to continue the subsequent processing; when the customization status in the customization management layer changes, through the response mechanism of Vue, the user interface will display the customized content according to the new customization status.

[0082] The writing method of the path routing display and hide control rule is similar to that of the display and hide control rule on the configuration page, and it is also completed through item (who is controlled by the rule), when (when the rule is executed), and action (execution action).

[0083] Embodiment 3

[0084] Based on Embodiments 1 and 2, this embodiment further discloses the following content:

[0085] In step S3, the authentication management layer updates the authentication status of the user interface according to the login interface provided by the unified interface, and obtains 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, and records the current authentication information to obtain the user interface with the updated authentication status.

[0087] In the specific implementation process, as Figure 4 shown, the login page executes the login operation through the proxy of the authentication management layer. The management layer records the authentication information submitted during login, and updates the internal authentication status through the login interface of the unified interface. When the authentication status is updated, the page then combines with the route navigation through the response mechanism of Vue to update the page hierarchy, where the page hierarchy includes the visitor user interface, the ordinary user interface, the administrator user interface, the wizard interface, etc.

[0088] As Figure 5 shown, in the case of normal access, the switching of the page hierarchy is completed by the authentication management layer, and the URL jump is executed by the page framework corresponding to the page hierarchy. The route navigation only ensures that the target path is legal in this case.

[0089] Embodiment 4

[0090] Based on Embodiments 1, 2, and 3, this embodiment further discloses the following content:

[0091] After step S4, it further includes that the route navigation manages the behavior of switching, refreshing, or jumping of the user interface according to the current authentication status of the user and the path routing display and hide control rule table.

[0092] In the specific implementation process, the execution flow of the route navigation is as Figure 6 shown. When the user refreshes, jumps, or switches the page, the path routing mechanism of Vue will trigger the pre-route navigation. First, the route navigation checks whether the current authentication status has been initialized. If it has not been initialized, it means that the user is accessing the page for the first time, and the current authentication status needs to be obtained through a reconnection operation.

[0093] Next, the routing navigation will determine whether the user's target path is legal. It will check whether there are restrictions on the access level for the target path. If there are no restrictions, the routing navigation will succeed, and the user will be allowed to jump. If the target path has restrictions on the level, it will compare whether the level of the target path is the same as the user's current level. If they are the same, the user will be allowed to jump.

[0094] If the levels are not the same, the path routing will attempt to update the user's level through the authentication management layer and switch it to the level of the target path. If the switch is successful, the navigation is successfully completed. Otherwise, the navigation fails, and the user will stay on the current page, or the page will be refreshed and return to the root directory to restart the routing navigation process.

[0095] In some specific embodiments, the refresh behavior includes: the user manually clicks the refresh of the browser. Since the refresh of the browser will reset 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 according to the URL at the time of refresh and the user status. (The final effect may be that the user reloads the current url interface, or the authentication times out, returns to the unauthenticated level, and then returns to the login page);

[0096] The jump behavior includes: the user manually enters the URL to jump. Similar to the refresh, the browser re-obtains the authentication status. If the authentication has not expired and the target URL belongs to the accessible page level under the current authentication status, then switch the page level and complete the loading of the URL; if the authentication has not expired and the target URL is not in the accessible page level under the current authentication status, then no jump will be performed; if the authentication status has expired, then return to the login interface.

[0097] Embodiment 5

[0098] Based on Embodiments 1, 2, 3, and 4, this embodiment 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 with updated user interface information, including:

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

[0101] In the embodiment, developing a configuration page is summarized into three parts: parameter description, method binding, and display and hide logic. These three parts are all placed in an object to form a complete page. Developers only need to edit the content of these three parts to implement the drawing of a configuration page;

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

[0103] The display and hiding logic rule unit updates the user interface information according to the display logic of each object on 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: the standard configuration page and the tabular configuration page. The standard configuration page is suitable for conventional parameter settings, while the tabular configuration page is used to process more complex and multi-dimensional configuration items;

[0105] Developers can independently choose to use the standard or tabular page generation components according to specific configuration requirements to build the user interface;

[0106] Regardless of which type is selected, they share a unified underlying configuration description structure. This unified structure ensures the consistency of the configuration logic and provides a standardized development framework for different types of configuration pages;

[0107] The form definition part consists of a series of objects as shown in Table 1, and each object defines a UI element;

[0108] Table 1

[0109]

[0110]

[0111]

[0112] The unified interface provides the methods of adding, deleting, querying, and modifying required by the page. The page generation component can automatically generate the corresponding operation UI of the page according to whether the method is bound or not.

[0113] The methods defined in the unified interface have unified requirements for input and output. For example, all getMethod are required to be object arrays. In a single configuration page, the unified interface acts as an adaptation layer between the front end and the back end.

[0114] The method binding unit includes methods related to data operations, and these methods are all bound through the devAPI. The unified interface provides the methods of adding, deleting, querying, and modifying required by the page. The page generation unit can automatically generate the corresponding operation UI of the page according to whether the method is bound or not. Table 2 shows the names and functions of the methods of the method binding unit;

[0115] Table 2

[0116]

[0117]

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

[0119] Table 3

[0120]

[0121] The customization management layer provides customization information for a single page, and these customization information can be arbitrarily used in form definition, method binding, and display / hide logic control to achieve flexible customization of the page.

[0122] Embodiment 6

[0123] Based on Embodiments 1, 2, 3, 4, and 5, this embodiment further discloses the following content:

[0124] The form definition unit further includes obtaining a verification result by performing cross-verification on fields, as Figure 7 shown, including the following steps:

[0125] Step 1: Receive a field verification request, where the field is the parameter name of the configuration page, and determine whether the field is already in the verification set. If the field is already in the verification set, jump to Step 4; if the field is not in the verification set, add the field to the verification set.

[0126] Step 2: Verify the content of the field added to the verification set.

[0127] Step 3: Remove the verified field from the verification set.

[0128] Step 4: Obtain the verification result.

[0129] In the specific implementation process, as Figure 6 shown, a process of performing cross-verification in rules.

[0130] Trigger cross-verification: The cross-verification process starts with receiving a verification target field name, which corresponds to the model attribute in the form definition.

[0131] Loop detection: First, check whether the cross-verification set (Set data structure) already contains the target field name. If it contains, immediately return through the callback function to prevent infinite recursion.

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

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

[0134] Status cleaning: After verification is completed, the target field name is removed from the cross-validation set, indicating the end of the verification for that field.

[0135] Completion callback: Finally, the verification result is returned through a callback function to end the entire verification process.

[0136] As Figure 8 shown, the verification content of this framework is concentrated in rules, and a series of predefined verification generators are provided, greatly simplifying the rule definition process.

[0137] These verification generators do not simply generate a fixed verification rule. It allows developers to supplement the verification of the rule through an anonymous function based on the predefined rules, which greatly improves the freedom of writing verification rules.

[0138] As Figure 9 shown, another example of rules is to first check whether the parameter is empty, then check whether the parameter is a legal ipv4 address, then perform a custom check, check whether the configuration conforms to the customization, check whether the address pool configuration in the form is legal, and finally trigger the check rule of another parameter to perform cross-validation.

[0139] From Figure 9 it can be seen more clearly that under the verification rules written by this kind of verification generator, the verification rules and logic of the parameters will be very clear, and the freedom is high, which greatly improves the maintenance and development efficiency.

[0140] Embodiment 7

[0141] Based on Embodiments 1, 2, 3, 4, 5, and 6, this embodiment further discloses the following content:

[0142] The method binding unit generates a corresponding user interface according to the binding method provided by the unified interface, including:

[0143] The method binding unit edits the user interface information through the binding method according to the binding method provided by the unified interface to generate a corresponding user interface.

[0144] The show / hide logic rule unit updates the user interface information according to the display logic of each object in the user interface to obtain the user interface with updated user interface information, including the following steps:

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

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

[0147] In the entire control rule, each item in the controlled parameter list (item) can only appear once. This principle is especially helpful for handling complex scenarios such as nested display and hide logic. By concentrating complex logic into a single rule, developers can manage and maintain the system more effectively. This method 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, automatically intercepting and parsing the request content, and updating the custom state in real time, the management of custom content is simplified and the development efficiency is improved.

[0149] In some embodiments, based on Vue3.0+, the unified interface imports all the interfaces in the specified directory of the project through the dynamic import function of Vite. Developers can freely create modules in this directory to meet the request adaptation processing for adding, deleting, querying, and modifying all configuration pages. In addition, for the normal operation of the system's authentication management layer and custom management layer, basic interfaces and settings need to be defined in the module:

[0150] Step s1: login, logout, reConnect login, logout, and reconnection interfaces: By judging the content returned by the backend in these interfaces, an authentication status is then returned, such as auth, unauth, firstBoot, etc., which are specifically set according to device or custom needs.

[0151] Step s2: accessControlRule page permission control rule: Figure 10 It is the access control rule written in this embodiment, which stipulates that in the unauthenticated state, users can only access the login page. Under the complete authentication auth, users will first enter the user level, and at the same time, users are allowed to switch between the administrator level and the wizard level. For ordinary user authentication auth_user, they can only access the custom user_admin level. When the device is started for the first time, the device automatically enters the wizard page.

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

[0153] Step s3: The routeControl path routing display and hide control table, Figure 12 is an example of the path routing display and hide control table. The item members in the above figure are sourced from the name attribute generated by the Pages plugin in the Vue path routing table, and the parameter mode of the customization status is specified in when. The above content indicates that when the device is in the main route and the mesh function is enabled, the network_map and user_map pages are displayed, and if the conditions are not met, they are not displayed. The same applies to network_setup. When the customization management layer detects a change in the customization status, it modifies the Vue path routing table.

[0154] The customization management layer and the authentication management layer are mainly implemented through the open-source module Pinia, which is a library for Vue state management. The state management logic described by the method is customized through the Vue3 composition API method. For route guards and other pages, the current state can be directly accessed in the way specified by Pinia.

[0155] Step s4: As Figure 13 shown is the description setting of a configuration page, which describes the UI of the two parameters returned by getMethod, specifies the title, UI component property settings, formatting method when echoed to the table, and specifies the content check during the configuration process. Through the binding of Method, the component automatically completes all the request logic processing of the page.

[0156] The final result is as Figure 14 shown, having a basic table, a UI for adding configurations, a UI for batch deletion, and allowing users to click on the row configuration to modify or delete.

[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] The parsing of label is achieved by binding label to the label slot in the table header or form form component.

[0159] The parsing of type is to establish a mapping between the UI component and the string to obtain the specific UI component, and then complete the basic UI drawing through the Vue component tag. If type directly inputs a virtual node, it can also be directly parsed by the compoent tag.

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

[0161] The rules are re - encapsulated and developed based on the async - validator open - source validator used in Element Plus. Validation generation and cross - validation are completed by establishing a custom validation generator and a cross - check status set. In the component, the validation generator generates validation logic and binds it to the form validation method to check the configured content when the user modifies the parameters or submits the form.

[0162] Format is mainly called by the component to obtain its return content, and finally, the formatted display is implemented through the slot of the UI component. In the embodiment, it is allowed that the return content is a virtual node, so that the formatted content can be a specific UI rather than just simple text content.

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

[0164] In the page - generating component, the component establishes the logical status of all parameters, which are all true by default. When the parameters of the page change, the component traverses the rule content. For the parameters that exist in the rules, the logical status of the parameters that meet the rule conditions will be set according to the action. show corresponds to true, hide corresponds to false. If the rule requirements are not met, the behavior opposite to the action will be executed. Finally, the UI component is bound to its logical status through v - show. When the logical status changes, the response mechanism of vue can make the UI also show or hide synchronously.

[0165] In the shown embodiment, the rules also allow the use of custom methods to implement complex logical expressions for specific parameters. The figure mainly shows non - logical expressions. In item, it is allowed to specify the specific options of the menu - type parameters to control the display and hide of the parameter specific options.

[0166] When adapting different SDK devices, due to the differences in the page - level definitions of different devices caused by the differences in functional forms, the urls of their operation interfaces may be different. Developers often need to repeatedly write these jump operations. If it also involves multi - page layouts such as ordinary user interfaces and wizard pages, these jump logics will be more complex and cumbersome.

[0167] Under 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 re - connection interfaces according to these rules in the unified interface to implement the page behavior management of the device. All page jump and page - level switching operations will be triggered by changes in the status of the authentication management layer, without the need to manually manage url jumps.

[0168] Example 8

[0169] On the basis of Examples 1, 2, 3, 4, 5, 6 and 7, the following content is further disclosed:

[0170] Second, the present invention provides a dynamic page management system based on a unified interface, which is applied to the dynamic page management method based on the unified interface, as Figure 16 shown, including:

[0171] A data acquisition module, configured to receive response data sent by a backend server through a unified interface;

[0172] A sending module, configured to send the response data to an authentication management layer, a customization management layer, and a single-page component respectively through the unified interface. The authentication management layer, the customization management layer, and the single-page component are all connected to the backend server through the unified interface;

[0173] A customization management layer receiving module, configured to receive the response data by the customization management layer. The customization management layer parses the response data according to the customization parameter mapping table provided by the unified interface and caches it as customization status parameters, and then generates a user-accessible path table according to the path routing display and hide control rule table and the customization status parameters provided by the unified interface;

[0174] An authentication management layer module, configured to receive the response data by the authentication management layer. The authentication management layer updates the authentication status of the user according to the login interface provided by the unified interface, obtains the current authentication status of the user and switches the page to the corresponding page level, and the page level is a display framework;

[0175] A single-page component module, configured to receive the response data by the single-page component. The single-page component generates corresponding single-page content according to the corresponding page level to obtain a dynamic user interface.

[0176] The same or similar reference numerals correspond to the same or similar components;

[0177] The terms used to describe the positional relationship in the drawings are only for illustrative purposes and should not be construed as a limitation of this patent;

[0178] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, rather than a limitation of the implementation manners of the present invention. For those of ordinary skill in the art, other different forms of changes or modifications can be made on the basis of the above description. It is not necessary and impossible to enumerate all the implementation manners here. Any modifications, equivalent replacements, and improvements made within the spirit and principle of the present invention shall be included in the protection scope of the claims of the present invention.

Claims

1. A dynamic page management method based on a unified interface, characterized in that including the following steps: S1: The unified interface receives the response data sent by the backend server; S2: The unified interface 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 are all connected to the backend server through the unified interface; S3: The customization management layer receives the response data. The customization management layer parses the response data according to the customization parameter mapping table provided by the unified interface and caches it as the customization status parameter, and then generates the user-accessible path table according to the path routing display and hide control rule table and the customization status parameter provided by the unified interface; S4: The authentication management layer receives the response data. The authentication management layer updates the authentication status of the user according to the login interface provided by the unified interface, obtains the current authentication status of the user and switches the page to the corresponding page level, and the page level is the display framework; S5: The single-page component receives the response data. The single-page component generates the corresponding single-page content according to the corresponding page level to obtain the dynamic user interface.

2. The dynamic page management method based on a unified interface according to claim 1, wherein In step S3, the customization management layer generates the user interface according to the customization parameter mapping table provided by the unified interface, including the following steps: 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 status to obtain the 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, it also includes that the customization 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 customization management layer performs addition or deletion operations on 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, wherein In step S3, the authentication management layer updates the authentication status of the user interface according to the login interface provided by the unified interface to obtain the user interface after the authentication status is updated, including the following steps: The authentication management layer updates the authentication status of the user interface through the login interface provided by the unified interface and records the current authentication information to obtain the user interface after the authentication status is updated.

5. The dynamic page management method based on a unified interface according to claim 1, characterized in that After step S4, it also includes that the routing navigation manages the switching, refreshing, or jumping behavior of the user interface according to the current authentication status 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 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: The single-page component includes a form definition unit, a method binding unit, and a display and hide logic rule unit. The form definition unit defines parameter configurations for each object of the user interface; The method binding unit generates the corresponding user interface information according to the 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.

7. The dynamic page management method based on a unified interface according to claim 6, wherein The form definition unit also includes obtaining the verification result by cross-verifying the fields, including the following steps: Step 1: Receive a field verification request, where the field is the parameter name of the configuration page, and determine whether the field is already in the verification set. If the field is already in the verification set, jump to Step 4. If the field is not in the verification set, add the field to the verification set; Step 2: Verify the content of the field added to the verification set; Step 3: Remove the verified field from the verification set; Step 4: Obtain the verification result.

8. The dynamic page management method based on a unified interface according to claim 6, characterized in that, The method binding unit generates a 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 to generate a corresponding user interface.

9. The dynamic page management method based on a unified interface according to claim 6, characterized in that 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 with updated user interface information, including the following steps: The display and hide logic rule unit establishes a logical state for each object of the user interface and initializes the logical states of all objects to the display state; When the parameter configuration of the user interface changes, the display and hide logic rule unit traverses the preset display and hide rule content. If the parameter configuration of the user interface meets the corresponding display and hide rule content, set the logical state of the current object to the display state. If the parameter configuration of the user interface does not meet the corresponding display and hide rule content, set the logical state of the current object to the hidden state.

10. A dynamic page management system based on a unified interface, characterized in that Applied to the dynamic page management method based on the unified interface as described in any one of claims 1 to 9, including: A data acquisition module for receiving response data sent by the backend server through the unified interface; A sending module for the unified interface to send 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 are all connected to the backend server through the unified interface; A customization management layer receiving module for the customization management layer to receive the response data. The customization management layer parses the response data according to the customization parameter mapping table provided by the unified interface and caches it as customization status parameters, and then generates a user-accessible path table according to the path routing display and hide control rule table and the customization status parameters provided by the unified interface; An authentication management layer module for the authentication management layer to receive the response data. The authentication management layer updates the authentication status of the user according to the login interface provided by the unified interface, obtains the current authentication status of the user, and switches the page to the corresponding page level, where the page level is the display framework; A single-page component module for the single-page component to receive the response data. The single-page component generates corresponding single-page content according to the corresponding page level to obtain a dynamic user interface.

Images