Visual interface configuration method and device and storage medium

Through the visual interface configuration method, the Vue2 editor and preset format verification rules are used to solve the problem of high technical threshold and heavy repetitive workload for interface calls, and fast iteration and efficient configuration are achieved.

CN120295663APending Publication Date: 2025-07-11深圳渊联技术有限公司
View PDF 0 Cites 1 Cited by

Patent Information

Application Number
CN202510367649.5
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2025-03-26
Publication Date
2025-07-11

AI Technical Summary

Technical Problem

Interface calls require developers to write code with high technical barriers and heavy repetitive workload, which makes it impossible to meet the needs of rapid iteration.

Method used

Using the visual interface configuration method, the Vue2 editor is used to create an initialization page, receive the interface to generate instructions and configure binding parameters, and combine preset format verification rules and environment variable simulation requests to generate visual configuration data.

Benefits of technology

It reduces the difficulty of developers' understanding of different interface protocols, reduces the amount of repetitive work, improves the speed of interface call configuration, supports dynamic adjustment and real-time verification, and achieves rapid iteration.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN120295663A_ABST
    Figure CN120295663A_ABST
Patent Text Reader

Abstract

The invention relates to the field of interface management, and discloses a visual interface configuration method and device and a storage medium. The method comprises the steps of creating an initialized page based on a Vue2 editor; receiving an interface generation instruction by utilizing the initialized page, and configuring and displaying interface binding parameters according to the interface generation instruction; when a user adjustment instruction is received, adjusting the interface binding parameter according to the user adjustment instruction to obtain an interface adjustment parameter, and performing format verification processing on the interface adjustment parameter based on a format verification rule to obtain a qualified interface adjustment parameter; according to the environment variable, performing simulation request processing on the interface binding parameter to generate request record data; and based on a JSONPath function, performing field analysis processing on the request record data to generate visual configuration data. According to the embodiment of the invention, the visual interface is used for providing the structured data interface setting, so that the interface calling configuration speed is increased, and the rapid iteration requirement is met.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of interface management, and in particular, to a visual interface configuration method, device, and storage medium. Background Art

[0002] With the rapid development of Internet technology, interface calls between software systems have become the core means of business integration and data interaction. In the traditional development mode, interface calls require developers to manually write code for different interface protocols (such as HTTP / REST, WebService, GraphQL, etc.) to implement the following core links: 1) Assemble parameters according to the interface specification, including parameter type conversion, data encryption, and signature processing; 2) Construct a request message that conforms to the protocol standard and handle network communication; 3) Deserialize and parse the response result and handle the exception status code. This mode has significant technical defects:

[0003] There are technical differences between different interface protocols. For example, the REST interface uses the JSON format while WebService uses XML. Developers need to master multiple technical specifications, resulting in a high technical threshold. The repetitive development workload is large, and the parameter processing logic of similar interfaces cannot be reused. For example, although the payment interface and the logistics interface have different businesses, basic functions such as request encryption and timeout retry need to be coded repeatedly. Again, when the interface changes, the code logic needs to be modified manually. In a microservices architecture, when dozens of interfaces are involved in joint debugging, the development and debugging cycle can be as long as several days, seriously restricting the iteration efficiency. Therefore, in view of the technical problems that the high technical threshold and large repetitive workload of writing code by developers for interface calls lead to the inability of interface calls to meet the rapid iteration requirements, a new technology is needed to solve the current problems. Summary of the Invention

[0004] The main purpose of the present invention is to solve the technical problems that the high technical threshold and large repetitive workload of writing code by developers for interface calls lead to the inability of interface calls to meet the rapid iteration requirements.

[0005] In a first aspect of the present invention, a visual interface configuration method is provided. The visual interface configuration method includes:

[0006] Create an initialization page based on a pre-set Vue2 editor;

[0007] Use the initialization page to receive an interface generation instruction, and configure and display interface binding parameters according to the interface generation instruction;

[0008] When a user adjustment instruction is received, the interface binding parameters are adjusted according to the user adjustment instruction to obtain interface adjustment parameters, and format verification processing is performed on the interface adjustment parameters based on a preset format verification rule to obtain qualified interface adjustment parameters;

[0009] Assign the qualified interface adjustment parameters to the interface binding parameters;

[0010] When a trigger instruction is received, simulation request processing is performed on the interface binding parameters according to preset environment variables to generate request record data;

[0011] Field parsing processing is performed on the request record data based on a preset JSONPath function to generate visual configuration data.

[0012] Optionally, in the first implementation manner of the first aspect of the present invention, before creating an initialization page based on a preset Vue2 editor, it further includes:

[0013] Receive API configuration request parameters;

[0014] Send the API configuration request parameters to a target API address and receive return data from the target API address;

[0015] Generate an interface database based on the return data, where the interface database is used to pull interface data for the initialization page.

[0016] Optionally, in the second implementation manner of the first aspect of the present invention, the receiving of API configuration request parameters includes:

[0017] Receive a URL address, a request method, a request header, and entity parameters input by a user;

[0018] Package the URL address, the request method, the request header, and the entity parameters to generate API configuration request parameters.

[0019] Optionally, in the third implementation manner of the first aspect of the present invention, the interface generation instruction includes: a drag-and-click instruction, using the initialization page to receive the interface generation instruction, and configuring and displaying interface binding parameters according to the interface generation instruction includes:

[0020] Configure text and components for the initialization page according to the drag-and-click instruction to generate a new initialization page;

[0021] Perform interface data binding according to the drag-and-click instruction, and configure and display interface binding parameters on the new initialization page.

[0022] Optionally, in the fourth implementation manner of the first aspect of the present invention, the generating visual configuration data by performing field parsing processing on the request record data based on a preset JSONPath function includes:

[0023] When the request record data is qualified data, perform nested field parsing processing on the request record data based on a preset JSONPath function to generate an interface mapping component on the initialization page;

[0024] When the request record data is unqualified data, generate interface error prompt information and log data according to the request record data.

[0025] Optionally, in the fifth implementation manner of the first aspect of the present invention, after performing nested field parsing processing on the request record data based on a preset JSONPath function to generate an interface mapping component on the initialization page, it further includes:

[0026] Receive a parameter dependency setting instruction, and set a call trigger event for the interface mapping component, where the trigger setting event includes: a JS script execution event and a page jump event.

[0027] Optionally, in the sixth implementation manner of the first aspect of the present invention, the interface generation instruction includes: a natural language instruction, and the using the initialization page to receive the interface generation instruction and configuring and displaying interface binding parameters according to the interface generation instruction includes:

[0028] Use the initialization page to receive the natural language instruction;

[0029] Based on a preset neural network algorithm, perform semantic recognition and execution processing on the natural language instruction to generate configured and displayed interface binding parameters.

[0030] Optionally, in the seventh implementation manner of the first aspect of the present invention, the generating request record data by performing a simulated request process on the interface binding parameters according to a preset environment variable includes:

[0031] Perform a simulated request process on the interface binding parameters according to a preset environment variable;

[0032] Read the request duration, call path, and request frequency in the simulated request, and monitor the request result;

[0033] Combine the request duration, the call path, the request frequency, and the request result to generate request record data.

[0034] In a second aspect of the present invention, a visual interface configuration device is provided, including: a memory and at least one processor, instructions are stored in the memory, and the memory and the at least one processor are interconnected by a line; the at least one processor invokes the instructions in the memory to enable the visual interface configuration device to execute the above-mentioned visual interface configuration method.

[0035] In a third aspect of the present invention, a computer-readable storage medium is provided, and instructions are stored in the computer-readable storage medium. When it runs on a computer, it enables the computer to execute the above-mentioned visual interface configuration method.

[0036] In the embodiments of the present invention, a visual configuration page is constructed based on the Vue2 editor, converting code development into graphical parameter configuration. Developers can complete interface definition without having to deeply understand protocol details such as HTTP / REST. Through preset format verification rules, automatic conversion of parameter types and reuse of encryption signature policies are achieved. Combining with the JSONPath function to automatically parse response data eliminates duplicate coding of basic functions. It supports dynamically adjusting interface-bound parameters and real-time verification, combined with an environment variable simulation request mechanism, improving the speed of interface call configuration, changing the traditional development mode that depends on manual coding for interface calls, and providing a standardized configuration solution for complex system integration. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 It is a schematic diagram of an embodiment of the visual interface configuration method in the embodiments of the present invention;

[0038] Figure 2 It is a schematic diagram of a specific embodiment of step 105 of the visual interface configuration method in the embodiments of the present invention;

[0039] Figure 3 It is a schematic diagram of a specific embodiment of step 106 of the visual interface configuration method in the embodiments of the present invention;

[0040] Figure 4 It is a schematic diagram of an embodiment of the visual interface configuration device in the embodiments of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0041] The embodiments of the present invention provide a visual interface configuration method, device, and storage medium.

[0042] The embodiments disclosed in the present invention will be described in more detail below with reference to the accompanying drawings. Although some embodiments of the present invention are shown in the drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. On the contrary, these embodiments are provided to more thoroughly and completely understand the present disclosure. It should be understood that the drawings and embodiments of the present invention are only for exemplary purposes and are not intended to limit the protection scope of the present invention.

[0043] In the description of the embodiments disclosed in the present invention, the term "including" and its similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "an embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc. may refer to different or the same objects. There may also be other explicit and implicit definitions hereinafter.

[0044] For ease of understanding, the specific process of the embodiments of the present invention will be described below. Please refer to Figure 1 , an embodiment of the visualization interface configuration method in the embodiments of the present invention includes:

[0045] 101. Create an initialization page based on a pre-set Vue2 editor;

[0046] In this embodiment, the Vue2 editor needs to install the Vue2 core library (version 2.6.14) and the ElementUI component library (version 2.15.9) in the Node.js 14.x environment to build a front-end engineering project. Integrate the pre-set interface configuration plug-in package (including the interface-config-editor module) and register it as a global component through the Vue.use() method.

[0047] Call <interface-config-editor>When passing in the `protocols` property for a component, declare the supported interface protocol types; when the component is initialized, load the pre-set protocol adaptation template library (stored in the ` / public / templates` directory). For example, the HTTP protocol template includes standardized form controls for URL paths, request headers, and query parameters, and the WebService template provides a WSDL parsing engine and a SOAP message generator. Finally, render the above parameters to generate the initialization page.

[0048] Specifically, before step 101, the following specific implementation manners are further included:

[0049] 1011. Receive API configuration request parameters;

[0050] 1012. Send the API configuration request parameters to the target API address and receive the return data from the target API address;

[0051] 1013. Generate an interface database based on the return data, where the interface database is used to initialize the page to pull interface data.

[0052] In steps 1011 - 1013, first create an Express routing interface ` / api / config / init` on the Node.js server side, configure the cross-origin middleware `cors`, and define the structure of the API configuration request parameters. Then, the user creates the request parameters and the authentication information is automatically injected. Here, the API configuration data is an interface option that has been pre-set and verified, so it needs to be verified first. Send the API configuration request parameters to the target API address and receive the return data from the target API address. In the case where the return data is valid response data, perform field standardization mapping based on the return data, and through server-side proxy requests and automated database construction, achieve centralized management of interface metadata, standardize the parameter structure and protocol adaptation parser, ensure the compatibility of multi-source API configuration data, and generate an interface database. In the initialization stage of the Vue2 editor, call the interface database interface ` / api / config / list` through `axios` to provide multiple legal API interfaces for the user to choose from based on the feedback of the interface database.

[0053] Specifically, step 1011 includes the following specific implementation manners:

[0054] 10111. Receive the URL address, request method, request header, and entity parameters input by the user;

[0055] 10112. Package the URL address, the request method, the request header, and the entity parameters to generate API configuration request parameters.

[0056] In steps 10111 - 10112, the user inputs the URL of the API interface, the request method (GET / POST / PUT / DELETE), the request headers (such as Content-Type, Authorization), and the request entity parameters. The above data is encapsulated into the APIConfigRequest() function to generate API configuration request parameters. During the configuration process, a parameter verification rule configuration function can be provided to ensure the legality of the input.

[0057] 102. Use the initialized page receiving interface to generate instructions, and configure and display interface binding parameters according to the interface generation instructions;

[0058] In this embodiment, on the already rendered initialized page, receive the interface generation instructions input by the user, find the corresponding interface through the interface generation instructions, and configure and display the selected interface binding parameters, facilitating the user to make visual modifications, adjustments, and confirmations.

[0059] Specifically, the interface generation instructions include: drag-and-click instructions. In step 102, the following specific implementation manners are included:

[0060] 1021. According to the drag-and-click instructions, configure the text and components on the initialized page to generate a new initialized page;

[0061] 1022. According to the drag-and-click instructions, perform interface data binding, and configure and display the interface binding parameters on the new initialized page.

[0062] In steps 1021 - 1022, in the initialization interface, the user drags and clicks instructions, and can drag and drop components such as text, buttons, and lists, configure the events of the page and components (such as click, initialization, etc.) to generate a new initialized page. In the component events, the user adds data obtained from API management through the editor, selects the API interface using the ID and binds dynamic parameters. After binding, the interface binding parameters are displayed on the generated new initialized page.

[0063] Specifically, the interface generation instructions include: natural language instructions. In step 102, the following specific implementation manners are also included:

[0064] 1023. Use the initialized page to receive the natural language instructions;

[0065] 1024. Based on a preset neural network algorithm, perform semantic recognition and execution processing on the natural language instructions to generate the configured and displayed interface binding parameters.

[0066] In steps 1023 - 1024, using natural language processing (NLP) technology, the user only needs to describe the required API functions and parameter requirements in natural language, and the system can automatically parse and complete the API configuration. For example, when the user inputs "I need an API that can obtain weather information, and the parameters should include the city name", after the system understands the semantics through NLP, it automatically searches for and configures the appropriate weather API and its parameters, and generates and displays the interface - bound parameters.

[0067] 103. When a user adjustment instruction is received, then according to the user adjustment instruction, perform adjustment processing on the interface - bound parameters to obtain interface adjustment parameters, and based on a preset format verification rule, perform format verification processing on the interface adjustment parameters to obtain qualified interface adjustment parameters;

[0068] In this embodiment, during the page display process, the user can perform adjustment processing on the interface - bound parameters through the expression editor to support runtime dynamic variable substitution to obtain interface adjustment parameters, automatically verify the input legality based on rules such as regular expressions and type checking, and obtain qualified interface adjustment parameters after passing the check.

[0069] 104. Assign the qualified interface adjustment parameters to the interface - bound parameters;

[0070] In this embodiment, re - assign the qualified interface adjustment parameters to the interface - bound parameters specified on the interface, realizing the generation of a new interface - bound parameter.

[0071] 105. When a trigger instruction is received, then according to preset environment variables, perform a simulated request processing on the interface - bound parameters to generate request record data;

[0072] In this embodiment, after the user configures the relevant interface parameters, a connection test is required. For example, a confirmation button is set on the interface. When the user clicks the confirmation button, a trigger instruction is generated. The environment variable BaseUrl is an environment that has been previously encapsulated, and there is no need for the user to adapt different versions for adjustment. It should be noted here that incompatibility errors may occur due to different environments and different versions of interface parameters. However, an interface with a fixed string declaration (such as "get: / api / data") has its environment variables configured for the API addresses in the development / production environment. The interface - bound parameters can be directly used for simulated request processing, monitor the process data during the simulated request, and obtain the test request record data.

[0073] Specifically, please refer to Figure 2 , Figure 2 This is a specific embodiment of step 105 of the visual interface configuration method in the embodiment of the present invention. The following specific implementation manners are included in step 105:

[0074] 1051. Process the interface binding parameters through a simulated request according to the preset environment variables;

[0075] 1052. Read the request duration, call path, and request frequency in the simulated request, and monitor the request result;

[0076] 1053. Combine the request duration, the call path, the request frequency, and the request result to generate request record data.

[0077] In steps 1051 - 1053, an intelligent proxy is used to simulate requests. The intelligent proxy can automatically adjust the request strategy according to different API characteristics and request rules, such as dynamically adjusting the request frequency according to the server load, and monitoring the request result to automatically retry and handle errors when the request fails. At the same time, the intelligent proxy can also perform preliminary analysis and screening on the returned data, only record key information, and improve the efficiency and quality of data recording. Introduce a distributed tracing system, such as Zipkin, Jaeger, etc., to trace and monitor the entire process of the simulated request. Information such as the duration and call path of the request in each link can be recorded, which helps users quickly locate problems, optimize the request process, and also contributes to the management and performance analysis of API requests in large-scale distributed systems. Finally, combine the request duration, call path, request frequency, and request result to generate request record data.

[0078] 106. Based on the preset JSONPath function, perform field parsing processing on the request record data to generate visual configuration data.

[0079] In this embodiment, according to the data format of the simulated request record, automatically parse nested fields through JSONPath and map them to component attributes (such as text content, data source). Specifically, an API knowledge graph can be constructed to associate and model information, parameter relationships, application scenarios, etc. of various APIs. During configuration, the system can perform intelligent recommendation and guidance based on the knowledge graph to help users complete the configuration more accurately, and at the same time facilitate the discovery of potential connections and combination methods between different APs.

[0080] Specifically, please refer to Figure 3 , Figure 3 which is a specific embodiment of step 106 of the visual interface configuration method in the embodiment of the present invention. The following specific implementation manners are included in step 106:

[0081] 1061. When the request record data is qualified data, perform nested field parsing processing on the request record data based on the preset JSONPath function to generate an interface mapping component on the initialization page;

[0082] 1062. When the request record data is unqualified data, interface error prompt information and log data are generated based on the request record data.

[0083] In steps 1061 - 1062, according to the data format of the simulated request record, nested fields are automatically parsed through JSONPath and mapped to component attributes (such as text content, data source) to generate an interface mapping component with an interface link. When the request record data is unqualified data (such as status ≠ 0 triggering error handling), interface error prompt information and log data are generated based on the request record data, facilitating users to adjust relevant error settings based on the error prompt information and enabling query of data records of interface requests for relevant time periods through the log data. Since there may be only partial errors in the interface request connection, it is possible to record request execution data and error prompt information simultaneously.

[0084] Specifically, after step 1061, the following specific implementation manners are further included:

[0085] 10611. Receive a parameter dependency setting instruction and set a call trigger event for the interface mapping component, where the trigger setting event is: a JS script execution event, a page jump event.

[0086] In step 10611, receive a parameter dependency setting instruction, set a call trigger event for the interface mapping component, and after response, trigger a configurable behavior chain: execute a conditional branch according to the status code (such as if (status = 0) display a pop - up window), call other APIs or jump to a page, or use a JS script to implement complex calculations and data formatting, and use expression editing and variable replacement techniques to enhance the flexibility of parameter configuration.

[0087] It should be noted that the above method can be applied to the following fields:

[0088] I. Internet of Things (IoT) field, application method:

[0089] Device management: There are a large number of devices in the IoT system, and each device has its own API for data collection and control. The present invention can be used to configure the APIs of these devices to achieve centralized management and monitoring of the devices. Through a visual editor, a device management interface can be quickly built, the status information of the devices can be displayed in real - time, and the devices can be remotely controlled through the API.

[0090] Data Fusion and Analysis: Different types of IoT devices generate a large amount of data. The data processing and linkage module of the present invention can parse and fuse this data, analyze and mine the data through customized business logic, and provide support for intelligent decision-making. For example, in the construction of a smart city, the data generated by traffic sensors, environmental monitoring devices, etc. are integrated and analyzed to optimize urban management.

[0091] II. In the field of medical informatization, application methods:

[0092] Medical Data Sharing: Different information systems within a hospital, such as the electronic medical record system, inspection and examination system, etc., need to share and interact data. The present invention can configure the APIs between these systems to achieve safe and efficient sharing of medical data. For example, when a doctor views a patient's electronic medical record, they can call the results of the inspection and examination system through the API, improving the diagnostic efficiency.

[0093] Telemedicine: In the telemedicine scenario, by configuring the API to connect to remote medical devices, real-time access to the patient's vital sign data can be obtained. Using a visual editor to build a telemedicine platform, doctors can diagnose and provide treatment guidance for patients on the platform. At the same time, through business linkage to expand functions, an alarm can be issued in a timely manner when the patient's vital signs are abnormal.

[0094] III. Cross-platform application development, application methods:

[0095] A low-code solution for multi-terminal adaptation. The front-end page generated based on the Vue2 visual editor can automatically adapt to the interfaces of Web, mobile, and embedded devices, and realize cross-platform data synchronization through dynamic parameter cascading dependencies.

[0096] Application method: Develop a smart home control panel. Users can configure the control logic of household appliances (such as light switches, temperature control rules) by dragging components and link them with the cloud API.

[0097] In the embodiment of the present invention, a visual configuration page is constructed based on the Vue2 editor, converting code development into graphical parameter configuration. Developers can complete interface definition without in-depth understanding of protocol details such as HTTP / REST. Through preset format verification rules, automatic conversion of parameter types and reuse of encryption signature policies are realized. Combined with the JSONPath function, the response data is automatically parsed to eliminate duplicate coding of basic functions. Support for dynamically adjusting interface-bound parameters and real-time verification, combined with an environment variable simulation request mechanism, improves the speed of interface call configuration, changes the traditional development mode of interface calls relying on manual coding, and provides a standardized configuration solution for complex system integration.

[0098] Figure 4 FIG. 0 is a schematic structural diagram of a visualization interface configuration device provided by an embodiment of the present invention. The visualization interface configuration device 400 may vary greatly due to different configurations or performances, and may include one or more central processing units (CPUs) 410 (for example, one or more processors) and a memory 420, and one or more storage media 430 for storing application programs 433 or data 432 (for example, one or more mass storage devices). Among them, the memory 420 and the storage media 430 may be transient storage or persistent storage. The program stored in the storage media 430 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the visualization interface configuration device 400. Further, the processor 410 may be configured to communicate with the storage media 430 and execute a series of instruction operations in the storage media 430 on the visualization interface configuration device 400.

[0099] Based on the visualization interface configuration device 400 may further include one or more power supplies 440, one or more wired or wireless network interfaces 450, one or more input / output interfaces 460, and / or one or more operating systems 431, such as Windows Server, Mac OS X, Unix, Linux, FreeBSD, and so on. Those skilled in the art can understand that Figure 4 the shown structure of the visualization interface configuration device does not constitute a limitation on the visualization interface configuration device, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0100] The present invention also provides a computer-readable storage medium. The computer-readable storage medium may be a non-volatile computer-readable storage medium, or may also be a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions run on a computer, the computer is caused to execute the steps of the visualization interface configuration method.

[0101] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0102] Moreover, although the operations are depicted in a particular order, this should be understood as requiring that such operations be performed in the particular order shown or in sequential order, or that all illustrated operations be performed to achieve the desired result. In certain circumstances, multitasking and parallel processing may be advantageous. Likewise, although several specific implementation details are included in the foregoing discussion, these should not be construed as limiting the scope of the present disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single implementation. Conversely, the various features that are described in the context of a single implementation can also be implemented separately or in any suitable subcombination in multiple implementations.

[0103] Although the subject matter has been described in language specific to structural features and / or methodological acts, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are merely example forms of implementing the claims.

Claims

1. A method for visual interface configuration, characterized in that, Including the steps: Create an initial page based on a pre-set Vue2 editor; Use the initial page to receive interface generation instructions, and configure and display interface binding parameters according to the interface generation instructions; When a user adjustment instruction is received, adjust the interface binding parameters according to the user adjustment instruction to obtain interface adjustment parameters, and perform format verification processing on the interface adjustment parameters based on pre-set format verification rules to obtain qualified interface adjustment parameters; Assign the qualified interface adjustment parameters to the interface binding parameters; When a trigger instruction is received, perform a simulated request process on the interface binding parameters according to pre-set environment variables to generate request record data; Perform field parsing processing on the request record data based on pre-set JSONPath functions to generate visual configuration data.

2. The visualization interface configuration method according to claim 1, wherein Before creating the initial page based on the pre-set Vue2 editor, it further includes: Receive API configuration request parameters; Send the API configuration request parameters to the target API address and receive the return data from the target API address; Generate an interface database based on the return data, where the interface database is used for the initial page to pull interface data.

3. The visualization interface configuration method according to claim 2, wherein The receiving of API configuration request parameters includes: Receive the URL address, request method, request header, and entity parameters input by the user; Package the URL address, request method, request header, and entity parameters to generate API configuration request parameters.

4. The visualization interface configuration method according to claim 1, wherein The interface generation instructions include: drag-and-click instructions. The use of the initial page to receive interface generation instructions and the configuration and display of interface binding parameters according to the interface generation instructions include: Configure the text and components of the initial page according to the drag-and-click instructions to generate a new initial page; Perform interface data binding according to the drag-and-click instructions, and configure and display interface binding parameters on the new initial page.

5. The visualization interface configuration method according to claim 1, wherein The performing of field parsing processing on the request record data based on pre-set JSONPath functions to generate visual configuration data includes: When the request record data is qualified data, perform nested field parsing processing on the request record data based on pre-set JSONPath functions to generate interface mapping components on the initial page; When the request record data is unqualified data, generate interface error prompt information and log data according to the request record data.

6. The visualization interface configuration method according to claim 5, wherein After performing nested field parsing processing on the request record data based on pre-set JSONPath functions to generate interface mapping components on the initial page, it further includes: Receive a parameter dependency setting instruction and set a call trigger event for the interface mapping components, where the trigger setting events are: JS script execution event, page jump event.

7. The visualization interface configuration method according to claim 1, wherein The interface generation instructions include: natural language instructions. The use of the initial page to receive interface generation instructions and the configuration and display of interface binding parameters according to the interface generation instructions further include: Use the initial page to receive the natural language instructions; Based on a preset neural network algorithm, semantic recognition and execution processing are performed on the natural language instruction to generate interface binding parameters for configuration and display.

8. The visualization interface configuration method according to claim 1, wherein According to the preset environment variables, simulation request processing is performed on the interface binding parameters, and the generated request record data includes: According to the preset environment variables, simulation request processing is performed on the interface binding parameters; Read the request duration, call path, and request frequency in the simulation request, and monitor the request result; Combine the request duration, the call path, the request frequency, and the request result to generate request record data.

9. A visual interface configuration device, characterized in that, The visual interface configuration device includes: a memory and at least one processor, wherein instructions are stored in the memory, and the memory and the at least one processor are interconnected by a line; The at least one processor calls the instructions in the memory so that the visual interface configuration device executes the visual interface configuration method according to any one of claims 1-8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the visual interface configuration method according to any one of claims 1-8.

Citation Information

Cited By

  • Method for integrating multiple standard data interfaces into one data interface

    CN120705172A