Front-end data source processing method, apparatus, device, and storage medium

Abstract

The application provides a front-end data source processing method and device, equipment and a storage medium, and relates to the technical field of data processing. The method comprises the following steps: in response to an instruction operation of a user acting on a component configuration interface, determining target data sources of component attributes in a to-be-configured page, establishing an association relationship between the component attributes and the target data sources based on a data source binding expression corresponding to the target data sources, and generating page configuration information of the to-be-configured page; based on the page configuration information, obtaining and determining a target data source processing function corresponding to the target data sources according to data source configuration information of each target data source; processing the target data sources by using the target data source processing function, and obtaining target data information of the processed target data sources; and injecting each target data information into a component attribute corresponding to the target data source in the to-be-configured page, and displaying a rendered configuration page. The application improves the efficiency and accuracy of page configuration and data source use.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and in particular to a front-end data source processing method, apparatus, device and storage medium. Background Technology

[0002] With the acceleration of enterprise digital transformation and the development of cloud computing technology, more and more enterprises are beginning to adopt low-code development platforms to accelerate application development and deployment.

[0003] However, different applications typically need to access different data sources, and integrating data sources is often a time-consuming and tedious task. Currently, configuring data sources on the market usually requires technical personnel to manually write complex configuration files and code, and the types of data sources are limited, integration is difficult, and the integration cycle is long; in addition, data security is difficult to guarantee when using data sources, which is insufficient to meet the configuration and usage needs of non-technical personnel.

[0004] Therefore, there is an urgent need to provide a new data source processing solution to simplify the configuration and usage process of data sources and solve the above-mentioned problems. Summary of the Invention

[0005] This application provides a front-end data source processing method, apparatus, device, and storage medium to solve problems such as how to simplify the configuration and usage process of the data source and how to improve configuration efficiency and accuracy.

[0006] Firstly, this application provides a front-end data source processing method, the method comprising:

[0007] In response to user instructions on the component configuration interface, the target data source for each component attribute in the page to be configured is determined. Based on the data source binding expression corresponding to the target data source, the association between the component attribute and the target data source is established, and the page configuration information of the page to be configured is generated. The target data source is a data source that is pre-integrated into the low-code platform in the data source management interface.

[0008] Based on the page configuration information, obtain and determine the target data source processing function corresponding to the target data source according to the data source configuration information of each target data source;

[0009] The target data source is processed using the target data source processing function to obtain the target data information of the processed target data source;

[0010] The target data information is injected into the component properties corresponding to the target data source in the page to be configured, and the rendered configuration page is displayed.

[0011] Optionally, the step of processing the target data source using the target data source processing function to obtain the target data information of the processed target data source includes:

[0012] Iterate through the data source configuration information of each target data source, replace the dynamic parameters in the data source configuration information of the target data source, and adjust the loading order of each target data source;

[0013] Based on the loading order, the target data source processing function is used to load the data information of the target data source;

[0014] The data information of the successfully loaded target data source is transformed to obtain the transformed target data information, and the transformed target data information is determined to be the target data information of the target data source.

[0015] Optionally, loading the data information of the target data source using the target data source processing function based on the loading order includes:

[0016] If the target data source is determined to be a remote data source, then according to the loading order, a preset unified interface is invoked to send encrypted data request information to the target data source through the backend of the low-code platform; wherein, the data request information is used to instruct the target data source to provide the data information of the target data source;

[0017] The target data source processing function is used to load the data information of the target data source.

[0018] Optionally, the target data information is injected into the component attributes corresponding to the target data source in the page to be configured, and the rendered configuration page is displayed, including:

[0019] Execute the data source binding expression in the properties of each component in the page to be configured, and obtain the target data information of the processed target data source corresponding to the component property;

[0020] The value of the component property is replaced with the target data information of the processed target data source corresponding to the component property;

[0021] Read the values ​​of each component's properties and display the rendered configuration page.

[0022] Optionally, the method further includes:

[0023] In response to user instructions on the data source management interface, determine the data source type of the data source to be added and obtain the data source configuration information of the data source to be added;

[0024] If the data source to be added is determined to be a remote data source, a preset unified interface is invoked to send a connection request to the data source to be added through the backend of the low-code platform; wherein, the connection request is used to indicate the establishment of a connection relationship between the data source to be added and the low-code platform;

[0025] If it is determined that the data source to be added is successfully connected to the low-code platform, then the legality of the data source configuration information of the data source to be added is verified.

[0026] If the verification is successful, the data source configuration information of the data source to be added is saved to the low-code platform.

[0027] Optionally, the method further includes:

[0028] If it is determined that the data source to be added fails to connect with the low-code platform, a prompt message is displayed; wherein, the prompt message is used to instruct the user to modify the connection parameters in the data source configuration information of the data source to be added;

[0029] In response to the user's modification of the connection parameters, the preset unified interface is invoked again, and the connection request information is resent to the data source to be added through the backend of the low-code platform.

[0030] Optionally, the method further includes:

[0031] The target data information of the target data source is refreshed and monitored periodically. If it is determined that the target data information of the target data source has changed, the changed target data information is sent to the component property corresponding to the target data source, and the rendering process is automatically triggered.

[0032] Secondly, this application provides a front-end data source processing apparatus, the apparatus comprising:

[0033] The configuration unit is used to respond to the user's instruction operation on the component configuration interface, determine the target data source of each component attribute in the page to be configured, establish the association relationship between the component attribute and the target data source based on the data source binding expression corresponding to the target data source, and generate the page configuration information of the page to be configured; wherein, the target data source is a data source that is pre-integrated into the low-code platform in the data source management interface;

[0034] The determining unit is used to obtain and determine the target data source processing function corresponding to the target data source based on the page configuration information and the data source configuration information of each target data source.

[0035] The processing unit is used to process the target data source using the target data source processing function to obtain the target data information of the processed target data source;

[0036] The injection unit is used to inject the target data information into the component properties corresponding to the target data source in the page to be configured, and display the rendered configuration page.

[0037] Optionally, the processing unit includes an adjustment module, a loading module, and a conversion module;

[0038] The adjustment module is used to traverse the data source configuration information of each target data source, replace the dynamic parameters in the data source configuration information of the target data source, and adjust the loading order of each target data source.

[0039] The loading module is used to load the data information of the target data source using the target data source processing function based on the loading order;

[0040] The conversion module is used to convert the data information of the successfully loaded target data source, obtain the converted data information of the target data source, and determine the converted data information of the target data source as the target data information of the target data source.

[0041] Optionally, the loading module is specifically configured to, if the target data source is determined to be a remote data source, call a preset unified interface according to the loading order to send encrypted data request information to the target data source through the backend of the low-code platform; wherein, the data request information is used to instruct the target data source to provide the data information of the target data source; and load the data information of the target data source using the target data source processing function.

[0042] Optionally, the injection unit includes an execution module, a replacement module, and a display module;

[0043] The execution module is used to execute the data source binding expressions in the properties of each component in the page to be configured, and obtain the target data information of the processed target data source corresponding to the component properties;

[0044] The replacement module is used to replace the value of the component attribute with the target data information of the processed target data source corresponding to the component attribute;

[0045] The display module is used to read the values ​​of the attributes of each component and display the rendered configuration page.

[0046] Optionally, the device further includes an integration unit, which includes an acquisition module, a testing module, a verification module, and a storage module;

[0047] The acquisition module is used to respond to the user's instruction operation on the data source management interface, determine the data source type of the data source to be added, and acquire the data source configuration information of the data source to be added.

[0048] The testing module is used to, if it is determined that the data source to be added is a remote data source, call a preset unified interface to send connection request information to the data source to be added through the backend of the low-code platform; wherein, the connection request information is used to indicate the establishment of a connection relationship between the data source to be added and the low-code platform.

[0049] The verification module is used to verify the legality of the data source configuration information of the data source to be added if it is determined that the data source to be added is successfully connected to the low-code platform.

[0050] The saving module is used to save the data source configuration information of the data source to be added to the low-code platform if the verification is successful.

[0051] Optionally, the testing module is further configured to display a prompt message if it is determined that the connection between the data source to be added and the low-code platform fails; wherein the prompt message is used to instruct the user to modify the connection parameters in the data source configuration information of the data source to be added; and in response to the user's modification of the connection parameters, to call the preset unified interface again and resend the connection request information to the data source to be added through the backend of the low-code platform.

[0052] Optionally, the device further includes a monitoring unit;

[0053] The monitoring unit is used to periodically refresh and monitor the target data information of the target data source. If it is determined that the target data information of the target data source has changed, the changed target data information is sent to the component property corresponding to the target data source to automatically trigger the rendering process.

[0054] Thirdly, this application provides an electronic device, the electronic device comprising: a processor, and a memory communicatively connected to the processor;

[0055] The memory stores computer-executed instructions;

[0056] The processor executes computer execution instructions stored in the memory to implement the method as described in the preceding one.

[0057] Fourthly, this application provides a computer-readable storage medium storing computer-executable instructions that, when executed by a processor, are used to implement the method as described in any of the preceding claims.

[0058] Fifthly, this application provides a computer program product, including a computer program that, when executed by a processor, is used to implement the method as described in any of the foregoing.

[0059] The front-end data source processing method, apparatus, device, and storage medium provided in this application include: responding to a user's instruction operation on a component configuration interface, determining the target data source for each component attribute in the page to be configured; establishing an association between the component attributes and the target data source based on a data source binding expression corresponding to the target data source; and generating page configuration information for the page to be configured. The target data source is a data source pre-integrated into the low-code platform within the data source management interface. Based on the page configuration information, obtaining and determining the target data source processing function corresponding to each target data source according to its data source configuration information; processing the target data source using the target data source processing function to obtain the processed target data information; and injecting the target data information into the component attributes corresponding to the target data source in the page to be configured, and displaying the rendered configuration page. This solution completes the process of configuring the data source for components in the page to be configured and loading the data information of the data source through a visual interface. This facilitates page configuration for users, simplifies the data source usage process, improves the efficiency and accuracy of page configuration and data source usage, and is more practical. Overall, it improves the performance of the low-code platform, provides better services to users, and enhances the user experience. Attached Figure Description

[0060] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0061] Figure 1 A flowchart illustrating a front-end data source processing method provided in an embodiment of this application;

[0062] Figure 2 A schematic diagram of a data source binding dialog box provided in an embodiment of this application;

[0063] Figure 3 A flowchart illustrating a data source integration method provided in an embodiment of this application;

[0064] Figure 4 A schematic diagram of a data source management interface provided in an embodiment of this application;

[0065] Figure 5 This is a schematic diagram of the structure of a front-end data source processing device provided in an embodiment of this application;

[0066] Figure 6A schematic diagram of the structure of another front-end data source processing device provided in the embodiments of this application;

[0067] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0068] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0069] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0070] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of the invention described herein can be implemented, for example, in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0071] It should be noted that if this application involves user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.), all of which are information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with relevant laws, regulations and standards, and corresponding operation entry points are provided for users to choose to authorize or refuse.

[0072] Low-code platforms are development platforms that allow application development without writing large amounts of code. They make application development simpler and faster through technologies such as visual interfaces, automatic code generation, and componentization.

[0073] In low-code platforms, data source configuration is a crucial step, determining the scope and method of data access for applications. However, different applications typically need to access different data sources, and data source integration is often a time-consuming and tedious task. In particular, to achieve reliable and efficient data use, current solutions often require developers to write substantial amounts of code, including data access, data transformation, and data cleaning, making the data source integration process extremely cumbersome and complex.

[0074] In one example, when integrating a data source, the data source and its type are first determined and configured. Then, a pre-built component is dragged and dropped to generate a visual page, establishing a connection between the component and the data source. When backend data is received, the corresponding data is passed to the component through this connection. The frontend then requests data from the backend based on different data source interface types. Finally, the React framework monitors state changes and renders the changes on the frontend accordingly, thus enabling the configuration and use of the data source. While this approach achieves data source configuration, it still requires technical personnel to manually write complex configuration files and code, making it difficult to meet the needs of non-technical users.

[0075] In addition, the existing low-code platform front-end data source integration solutions have the following drawbacks: (1) They usually only integrate static data and API type data sources, which is less than the number of data source types and cannot meet the needs of users; (2) Existing data source integration solutions require technical personnel to be proficient in the interfaces and data formats of various data sources, and require professional technical personnel to operate, which makes integration difficult; (3) When integrating data sources, a lot of code needs to be written, and the quality and maintainability of the code cannot be guaranteed; (4) Data source integration requires a long time to debug and verify the data source, and the integration cycle is long; (5) Existing solutions mostly use plaintext transmission and storage of data, and the requests are directly initiated by the front end, which has many problems such as data hijacking, tampering, and cross-domain, and data security cannot be guaranteed.

[0076] To address the aforementioned issues, this application provides a front-end data source processing method. When integrating a data source, the integration and configuration are completed through the data source management interface of a low-code platform. The method offers a wide variety of data source types, enriching the types of data sources that can be integrated and better meeting user needs. It also provides data source testing capabilities to ensure the correctness of the data source configuration, reducing subsequent debugging time and costs. When using the data source, page component configuration, data loading, and processing are performed through the component configuration interface of the low-code platform. Overall, this simplifies the data source configuration and usage process, and also enables configuration visualization, improving the efficiency and accuracy of configuration and usage.

[0077] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0078] Figure 1 This is a flowchart illustrating a front-end data source processing method provided in an embodiment of this application. The execution entity of this embodiment can be a front-end data source processing device, which can be integrated on a low-code platform to implement the solution of this application. The low-code platform can be located on an electronic device, which can be a mobile terminal, such as a mobile phone, tablet, or computer; this application does not impose any limitations on this.

[0079] This application uses a front-end data source processing device as an example to illustrate the implementation of the embodiments.

[0080] like Figure 1 As shown, the front-end data source processing method provided in this embodiment includes:

[0081] S101. In response to the user's instruction operation on the component configuration interface, determine the target data source for each component attribute in the page to be configured, establish the association between the component attribute and the target data source based on the data source binding expression corresponding to the target data source, and generate the page configuration information of the page to be configured; wherein, the target data source is a data source that is pre-integrated into the low-code platform in the data source management interface.

[0082] For example, the process of using data sources pre-integrated into and stored in the low-code platform's data source management interface can be implemented in the low-code platform's component configuration interface. Users can perform a series of instructions in the component configuration interface to determine the target data source for the component properties of each page component in the page to be configured. Each time a target data source for a component property is determined, the corresponding data source binding expression is displayed in the interface, and users can edit the data source binding expression as needed.

[0083] This application's front-end data source processing device determines the target data source for the component attributes of page components based on user instructions. Then, based on the data source binding expression corresponding to the target data source, it performs data source binding to establish the association between component attributes and the target data source. After binding all component attributes requiring data source binding in the interface to be configured, it generates the page configuration information for that page. The page configuration information describes each page component and its related attributes. In low-code platforms, this page configuration information is typically stored in JSON format.

[0084] For example, Figure 2 This is a schematic diagram of a data source binding dialog box provided in an embodiment of this application. When visually configuring the relationship between a data source and a component in the configuration interface, one can first enter the page editor of the code platform and select a component that has been added to the configuration interface. Then, in the component configuration interface, click the "Data Source Binding" button. This button is usually located at the top or bottom of the component configuration interface, but can also be located anywhere else; this application does not impose any restrictions. After clicking the "Data Source Binding" button, the interface will display as follows: Figure 2 The data source binding dialog box is shown. In this dialog box, users can select a data source from the list of added variables to bind as the target data source for the component's property. The data sources in the variable list are pre-integrated into the low-code platform's data source management interface and are available for use by various components. After selecting the target data source, the corresponding data source binding expression will be displayed in the binding content interface. Users can edit the data source binding expression to better suit their needs and save it after editing to complete the data source binding. To bind other data sources, the above steps can be repeated. Additionally, the interface can display specific usage instructions for user operation.

[0085] The data source binding expression is a JavaScript expression that defines how to retrieve and transform data from a data source. It can be implemented using built-in JavaScript methods such as `map` and `filter`, and this application does not impose any restrictions. The data source binding expression may vary depending on the component type. For example, for a table component, the data source binding expression is typically a function that returns an array of data and associates it with the rows and columns of the table, enabling the table component to accurately retrieve data from the data source subsequently.

[0086] Furthermore, the implementation of using data sources in custom functions is similar to the binding method described above. In a custom function, you can use the expression `this.state[sourceName]` to retrieve data from the data source, where `sourceName` is the name of the data source. For example, if there is a data source named "customers", you can use `this.state.customers` to access the data in that data source.

[0087] In addition, if you need to remove the association between the component and the data source and unbind the relationship, you can delete the data source binding expression in the data source binding dialog box and save it to complete the unbinding; you can also unbind by clicking the "Remove Binding" button. This application does not impose any restrictions.

[0088] S102. Based on the page configuration information, obtain and determine the target data source processing function corresponding to each target data source according to the data source configuration information of each target data source.

[0089] For example, since the page configuration information of the page to be configured describes each page component and its related attributes, after the page configuration information of the page to be configured is generated, the front-end data source processing device of this application can obtain the data source configuration information of each target data source in the page based on the page configuration information. The data source configuration information is usually stored in certain attributes of the page configuration information, such as the "data source" attribute of the data table component or the "series data" attribute of the chart component. Each type of data source has a corresponding data source processing function. Based on the data source configuration information, the type of data source can be determined, and thus the target data source processing function corresponding to the target data source can be determined.

[0090] The data source configuration information is some configuration information related to the data source, which is determined when integrating the data source. It includes the data source name, data source description, authentication information, processing functions, default values, etc. The data source configuration information is different for each data source, and this application does not impose any restrictions.

[0091] S103. Use the target data source processing function to process the target data source and obtain the target data information of the processed target data source.

[0092] For example, the target data source processing function is a specific type of JavaScript function used to obtain data from the data source and convert it into a data format suitable for a specific component type. The front-end data source processing device of this application can use the target data source processing function to process the target data source to obtain the target data information of the processed target data source, so as to facilitate the subsequent rendering of the component.

[0093] This application does not restrict how the target data source processing function is used to process the target data source to obtain the target data information of the processed target data source. In one example, using the target data source processing function to process the target data source and obtain the target data information of the processed target data source may include:

[0094] S10. Traverse the data source configuration information of each target data source, replace the dynamic parameters in the data source configuration information of the target data source, and adjust the loading order of each target data source.

[0095] S20. Based on the loading order, use the target data source processing function to load the data information of the target data source.

[0096] S30. Perform conversion processing on the data information of the successfully loaded target data source, obtain the converted data information of the target data source, and determine the converted data information of the target data source as the target data information of the target data source.

[0097] For example, when the front-end data source processing device of this application processes the target data source using the target data source processing function, it first iterates through the data source configuration information of each target data source and replaces the dynamic parameters in the data source configuration information of the target data source. For example, if the data source configuration information contains the dynamic parameter "{userId}", it needs to be replaced with the actual user ID value. Then, it adjusts the loading order of each target data source according to the synchronization priority strategy. When adjusting the loading order of each target data source, it is also necessary to consider the dependencies between the target data sources. If a data source depends on another data source to be loaded before it can load data, its loading order needs to be adjusted to synchronization. After determining the loading order of each target data source, the target data source processing function corresponding to each target data source is used to load the data information of each target data source, and the successfully loaded target data source data information is transformed to obtain the transformed target data source data information. Then, the transformed target data source data information is determined as the target data information of the target data source.

[0098] In one example, loading data from a target data source using a target data source processing function based on the loading order can include:

[0099] S21. If the target data source is determined to be a remote data source, then according to the loading order, the preset unified interface is called to send encrypted data request information to the target data source through the backend of the low-code platform; wherein, the data request information is used to instruct the target data source to provide the data information of the target data source.

[0100] S22. Use the target data source processing function to load the data information from the target data source.

[0101] For example, when loading data from a target data source, if the target data source is determined to be a remote data source, the pre-defined unified interface in the low-code platform needs to be called in the loading order. The low-code platform's backend sends encrypted data request information to the target data source. This data request information may include the target data source's configuration information and replaced dynamic parameters to facilitate a successful connection to the target data source. The system then requests encrypted data from the target data source, and the corresponding target data source processing function is used to load the data. Encrypting the information during transmission effectively prevents data hijacking and tampering, improving data security.

[0102] For example, after all target data sources have been loaded, their status information can be adjusted based on their loading status. For data sources that fail to load, the failure information is recorded, and the data source status is updated to "loading failed." For data sources that load successfully, the data source processing function is used for further data transformation, and their status is updated to "transformation successful." The data information of the successfully transformed target data source is determined as the target data information of the target data source for subsequent use. The data transformation is performed to make the data provided by the data source more suitable for the needs of the page components, making it easier for subsequent components to use.

[0103] For example, the target data information obtained from the target data source can be automatically updated in the state object in the low-code engine's runtime context. The reactive state object is an important concept in low-code platforms, used to store components and their related data, making it easier for subsequent components to use the data information from the data source.

[0104] S104. Inject the target data information into the component properties corresponding to the target data source in the page to be configured, and display the rendered configuration page.

[0105] For example, after obtaining the target data information of each target data source, the target data information of each target data source is injected into the component property corresponding to the target data source in the page to be configured. The component reads and displays the target data information, thus completing the component rendering of the configuration page.

[0106] In one example, injecting target data information into the component properties corresponding to the target data source in the page to be configured, and displaying the rendered configuration page, can include:

[0107] S100: Execute the data source binding expression in the properties of each component in the page to be configured, and obtain the target data information of the target data source after processing corresponding to the component properties.

[0108] S200, Replace the component property with the target data information of the target data source after processing, corresponding to the component property.

[0109] S300: Read the values ​​of each component's properties and display the rendered configuration page.

[0110] For example, when injecting target data information into the component properties corresponding to the target data source in the page to be configured, the front-end data source processing device of this application recursively traverses the configuration of each component property in the page to be configured, checks the data source binding expression in the component property configuration, determines whether there is a relationship between each component property and the data source, and then determines whether the property needs to obtain data from the data source. If a relationship is determined to exist, the data source binding expression in each component property in the page to be configured is executed, and the target data information of the processed target data source corresponding to the component property can be obtained. Then, the value of the component property is replaced with the obtained target data information of the processed target data source corresponding to the component property, and the value of each component property is read again to display the rendered configuration page.

[0111] In this process, after replacing the value of a component property with the target data information of the target data source corresponding to the component property, it can be passed to the corresponding component through the props of the React component to ensure that the corresponding component can correctly read and display its property value and complete the component rendering process.

[0112] The front-end data source processing method provided in this application includes: responding to a user's instruction operation on the component configuration interface, determining the target data source for each component attribute in the page to be configured; establishing an association between the component attributes and the target data source based on the data source binding expression corresponding to the target data source; and generating page configuration information for the page to be configured. The target data source is a data source pre-integrated into the low-code platform within the data source management interface. Based on the page configuration information, obtaining and determining the target data source processing function corresponding to each target data source according to the data source configuration information of each target data source; processing the target data source using the target data source processing function to obtain the target data information of the processed target data source; injecting each target data information into the component attributes corresponding to the target data source in the page to be configured; and displaying the rendered configuration page. This application's solution completes the process of configuring the data source for components in the page to be configured and loading the data information of the data source through a visual interface. This facilitates page configuration for users, simplifies the data source usage process, improves the efficiency and accuracy of page configuration and data source usage, and is more practical. Overall, it improves the performance of the low-code platform, provides better services to users, and enhances the user experience.

[0113] In some examples, data modification and refresh functions can also be provided for the data information provided by the data source. The solution of this application may also include:

[0114] The system periodically refreshes and monitors the target data information of the target data source. If it is determined that the target data information of the target data source has changed, the system sends the changed target data information to the component property corresponding to the target data source, automatically triggering the rendering process.

[0115] For example, a timed refresh and monitoring function can also be set up on the low-code platform to refresh and monitor the target data information of the target data source at regular intervals. When the target data information of the target data source changes, the changed target data information of the target data source is sent to the component property corresponding to the target data source, automatically triggering the rendering process so that the component using the data information of the data source can render and display the latest data, ensuring the timeliness of the data.

[0116] For example, to refresh data from a single data source, you can use the method "dataSourceEngine.loadSource(sourceName)" provided by the data source engine to reload the data from the specified data source. To refresh data from all data sources, you can use the method "dataSourceEngine.reloadDatasource()" provided by the data source engine to reload the data from all data sources. Additionally, to modify data from a specific data source, you can directly modify the data in a custom function using "this.state[sourceName] = value", where sourceName represents the name of the data source. This application does not impose any restrictions on this. This application automatically refreshes and monitors the target data from the target data source at regular intervals. When a change is detected in the data from the data source, the React framework will detect the change in the props property of the component using that data source and automatically trigger a re-rendering of the component. Through regular refresh and monitoring, the real-time validity of the data is ensured.

[0117] Based on the above embodiments, in some examples, it is also necessary to integrate the data source in order to facilitate subsequent calls to the data source. Figure 3 This is a flowchart illustrating a data source integration method provided in an embodiment of this application. Figure 3 As shown, the data source integration process provided in this application embodiment may include:

[0118] S301. Respond to the user's instruction operation on the data source management interface, determine the data source type of the data source to be added, and obtain the data source configuration information of the data source to be added.

[0119] For example, a data source management interface is provided in the low-code platform. Users can perform a series of instructions through the data source management interface, select the data source type to be added, and enter the data source configuration information to complete the data source integration. The front-end data source processing device of this application responds to the user's series of instructions, determines the data source type to be added, and also obtains the data source configuration information to be added.

[0120] The data source type can be a variable, global parameter, API, database, third-party service, etc., and this application does not impose any restrictions. In the low-code platform, each data source type has a built-in corresponding data source handler (i.e., data source processing function). If a new data source type needs to be added, a new data source handler can be registered using the registerHandler(type, handler) method provided by the data source engine, based on the base class of the original data source handler. Here, type represents the data source type, and handler represents the data source handler. For example, the code to register a data source handler for the API type can be registerHandler('API', new ApiHandler()).

[0121] Furthermore, the data source configuration information may include the data source name, data source description, authentication information, data source processing functions, default values, etc. The data source name must be unique for identification and referencing throughout the platform; the data source description explains the data source, such as its function; authentication information is also typically required, ensuring that only authorized users can access the data source; each data source configuration can be configured according to actual needs, and this application does not impose any restrictions.

[0122] S302. If it is determined that the data source to be added is a remote data source, the preset unified interface is called to send connection request information to the data source to be added through the backend of the low-code platform; wherein, the connection request information is used to indicate the establishment of a connection relationship between the data source to be added and the low-code platform.

[0123] For example, in order to ensure that the added data source can be used normally in the future, it is also necessary to determine whether the data source to be added is a remote data source. If it is determined that the data source to be added is a remote data source, you can also click the "Test Connection" button in the interface to call the preset unified interface of the low-code platform, and send connection request information to the data source to be added through the backend of the low-code platform to request the establishment of a connection relationship between the data source to be added and the low-code platform, and determine whether the connection can be successfully established.

[0124] S303. If it is determined that the data source to be added is successfully connected to the low-code platform, then verify the legality of the data source configuration information of the data source to be added.

[0125] For example, if it is determined that the data source to be added is successfully connected to the low-code platform, the validity of the data source configuration information of the data source to be added is further verified. Verifying the validity of the data source configuration information is to determine whether the data source configuration information entered by the user is complete and valid. If the data source configuration information entered by the user is found to be complete and valid, the verification passes; if the data source configuration information entered by the user is found to be defective, the user is prompted with the reason for the failure and asked to make corrections.

[0126] In one example, if it is determined that the connection between the data source to be added and the low-code platform fails, a prompt message is displayed. The prompt message is used to instruct the user to modify the connection parameters in the data source configuration information of the data source to be added. In response to the user's modification of the connection parameters, the preset unified interface is called again to resend the connection request information to the data source to be added through the backend of the low-code platform.

[0127] For example, if it is determined that the connection between the data source to be added and the low-code platform fails, a prompt message will be displayed on the interface to remind the user to modify the connection parameters in the data source configuration information of the data source to be added. After the user modifies the connection parameters in the data source configuration information of the data source to be added, the front-end data source processing device of this application responds to the user's modification of the connection parameters by calling the preset unified interface again and resending the connection request information to the data source to be added through the back-end of the low-code platform until the connection is successful. After the connection is successful, the step of verifying the legality of the data source configuration information of the data source to be added continues.

[0128] S304. If the verification is successful, the data source configuration information of the data source to be added will be saved to the low-code platform.

[0129] For example, once the verification is successful, the data source configuration information of the data source to be added is saved to the low-code platform, thus completing the data source integration. The data source can then be used if needed in the future.

[0130] For example, Figure 4 This is a schematic diagram of a data source management interface provided in an embodiment of this application. Figure 4 As shown, users can click the "Add Data Source" button in the data source management interface and select the type of data source to add, for example, Figure 4The user selected an API-type data source. The interface will then display the data source configuration information required from the user, such as the data source name, description, authentication information, loading method, request address, and request method. After filling in the data source configuration information, the user can click the "Test API" button to test the connection. Additionally, if request headers or parameters are involved, these can also be configured; this application does not impose restrictions and can be determined according to the actual situation.

[0131] Furthermore, after configuring the data source, users can edit and modify the added data source using the "Edit" button in the interface; to delete an added data source, they can click the "Delete" button. When deleting an added data source, the user can be prompted to confirm the operation, and the data source will be deleted after confirmation. Deleted data sources cannot be recovered. For added data sources, buttons such as "Edit," "Modify," "Update," "Delete," and "Adjust" can be set as needed to facilitate users' configuration of the data source configuration information; this application does not impose any restrictions. In addition, this application does not limit the way all the buttons mentioned in the embodiments are displayed in the interface; they can be displayed in any feasible way, such as text, icons, graphics, symbols, or marks.

[0132] The data source integration method provided in this application includes: responding to a user's instruction operation on the data source management interface, determining the data source type of the data source to be added, and obtaining the data source configuration information of the data source to be added; if the data source to be added is determined to be a remote data source, then calling a preset unified interface to send connection request information to the data source to be added through the backend of the low-code platform; wherein, the connection request information is used to indicate the establishment of a connection relationship between the data source to be added and the low-code platform; if it is determined that the connection between the data source to be added and the low-code platform is successful, then verifying the legality of the data source configuration information of the data source to be added; if the verification is successful, then saving the data source configuration information of the data source to be added to the low-code platform. Since the connection is tested after obtaining the data source configuration information, data source testing capabilities are provided, ensuring the correctness of the data source configuration and reducing subsequent debugging time and costs; in addition, verifying the legality of the data source configuration information further ensures the accuracy of the data source, guaranteeing that the data source can be used normally, and improving the efficiency and accuracy of subsequent page component configuration; users can also operate the data source efficiently and flexibly to meet the needs of different application scenarios, improving the overall performance of the low-code platform, providing better services to users, and enhancing the user experience.

[0133] The following are embodiments of the apparatus described in this application, which can be used to execute the embodiments of the method described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method described in this application.

[0134] Figure 5 This is a schematic diagram of a front-end data source processing device provided in an embodiment of this application. Figure 5 As shown, the front-end data source processing device 50 provided in this application embodiment includes a configuration unit 501, a determination unit 502, a processing unit 503, and an injection unit 504.

[0135] The configuration unit 501 is used to respond to the user's instruction operation on the component configuration interface, determine the target data source of each component attribute in the page to be configured, establish the association between the component attribute and the target data source based on the data source binding expression corresponding to the target data source, and generate the page configuration information of the page to be configured; wherein, the target data source is a data source that is pre-integrated into the low-code platform in the data source management interface.

[0136] The determination unit 502 is used to obtain and determine the target data source processing function corresponding to the target data source based on the page configuration information and the data source configuration information of each target data source.

[0137] The processing unit 503 is used to process the target data source using the target data source processing function to obtain the target data information of the processed target data source.

[0138] Injection unit 504 is used to inject the target data information into the component properties corresponding to the target data source in the page to be configured, and display the rendered configuration page.

[0139] The apparatus provided in this embodiment can be used to execute the methods of the above embodiments. Its implementation principle and technical effects are similar, and will not be described again here.

[0140] Figure 6 This is a schematic diagram of another front-end data source processing device provided in an embodiment of this application. Figure 6 As shown, the front-end data source processing device 60 provided in this application embodiment includes a configuration unit 601, a determination unit 602, a processing unit 603, and an injection unit 604.

[0141] The configuration unit 601 is used to respond to the user's instruction operation on the component configuration interface, determine the target data source of each component attribute in the page to be configured, establish the association between the component attribute and the target data source based on the data source binding expression corresponding to the target data source, and generate the page configuration information of the page to be configured; wherein, the target data source is a data source that is pre-integrated into the low-code platform in the data source management interface.

[0142] The determining unit 602 is used to obtain and determine the target data source processing function corresponding to the target data source based on the page configuration information and the data source configuration information of each target data source.

[0143] The processing unit 603 is used to process the target data source using the target data source processing function to obtain the target data information of the processed target data source.

[0144] Injection unit 604 is used to inject the target data information into the component properties corresponding to the target data source in the page to be configured, and display the rendered configuration page.

[0145] In one example, the processing unit 603 includes an adjustment module 6031, a loading module 6032, and a conversion module 6033.

[0146] The adjustment module 6031 is used to traverse the data source configuration information of each target data source, replace the dynamic parameters in the data source configuration information of the target data source, and adjust the loading order of each target data source.

[0147] Loading module 6032 is used to load data information from the target data source based on the loading order and using the target data source processing function.

[0148] The conversion module 6033 is used to convert the data information of the successfully loaded target data source, obtain the converted data information of the target data source, and determine the converted data information of the target data source as the target data information of the target data source.

[0149] In one example, module 6032 is specifically used to, if the target data source is determined to be a remote data source, call a preset unified interface according to the loading order, and send encrypted data request information to the target data source through the backend of the low-code platform; wherein, the data request information is used to instruct the target data source to provide the data information of the target data source; and the target data source processing function is used to load the data information of the target data source.

[0150] In one example, the injection unit 604 includes an execution module 6041, a replacement module 6042, and a display module 6043.

[0151] The execution module 6041 is used to execute the data source binding expressions in the properties of each component in the page to be configured, and to obtain the target data information of the target data source corresponding to the component properties.

[0152] Replacement module 6042 is used to replace the value of a component property with the target data information of the processed target data source corresponding to the component property.

[0153] Display module 6043 is used to read the values ​​of the properties of each component and display the rendered configuration page.

[0154] In one example, device 60 further includes an integration unit 605, which includes an acquisition module 6051, a test module 6052, a verification module 6053, and a storage module 6054.

[0155] The acquisition module 6051 is used to respond to the user's instruction operation on the data source management interface, determine the data source type of the data source to be added, and obtain the data source configuration information of the data source to be added.

[0156] The test module 6052 is used to call a preset unified interface to send connection request information to the data source to be added through the backend of the low-code platform if it is determined that the data source to be added is a remote data source; the connection request information is used to indicate the establishment of a connection relationship between the data source to be added and the low-code platform.

[0157] The verification module 6053 is used to verify the validity of the data source configuration information of the data source to be added if it is determined that the data source to be added is successfully connected to the low-code platform.

[0158] The save module 6054 is used to save the data source configuration information of the data source to be added to the low-code platform if the verification is successful.

[0159] In one example, test module 6052 is also used to display a prompt message if it is determined that the connection between the data source to be added and the low-code platform fails; wherein the prompt message is used to instruct the user to modify the connection parameters in the data source configuration information of the data source to be added; and in response to the user's modification of the connection parameters, to call the preset unified interface again to resend the connection request information to the data source to be added through the backend of the low-code platform.

[0160] In one example, device 60 also includes a monitoring unit 606.

[0161] The monitoring unit 606 is used to periodically refresh and monitor the target data information of the target data source. If it is determined that the target data information of the target data source has changed, the changed target data information of the target data source is sent to the component property corresponding to the target data source, and the rendering process is automatically triggered.

[0162] The apparatus provided in this embodiment can be used to execute the methods of the above embodiments. Its implementation principle and technical effects are similar, and will not be described again here.

[0163] It should be noted that the division of the various modules in the above device is merely a logical functional division. In actual implementation, they can be fully or partially integrated into a single physical entity, or they can be physically separated. These modules can be implemented entirely in software via processing element calls; they can be fully implemented in hardware; or some modules can be implemented in software via processing element calls, while others are implemented in hardware. Furthermore, they can be stored as program code in the device's memory, and the data processing modules can be called and executed by a specific processing element. The implementation of other modules is similar. These modules can be fully or partially integrated together, or implemented independently. The processing element here can be an integrated circuit with signal processing capabilities. During implementation, each step of the above method or each of the above modules can be completed through integrated logic circuits in the hardware of the processor element or through software instructions.

[0164] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Figure 7 As shown, the electronic device 70 includes a processor 701 and a memory 702 communicatively connected to the processor.

[0165] The memory 702 stores computer-executable instructions; the processor 701 executes the computer-executable instructions stored in the memory 702 to implement the method as described in any of the preceding descriptions.

[0166] In the specific implementation of the aforementioned electronic device, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. A general-purpose processor can be a microprocessor or any conventional processor. The methods disclosed in the embodiments of this application can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.

[0167] This application also provides a computer-readable storage medium storing computer-executable instructions that, when executed by a processor, are used to implement the methods described in any of the foregoing embodiments.

[0168] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to computer instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0169] This application also provides a computer program product, including a computer program that, when executed by a processor, is used to implement the method as described in any of the foregoing embodiments.

[0170] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this application are indicated by the following claims.

[0171] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A front-end data source processing method, characterized in that, The method includes: In response to user instructions on the component configuration interface, the target data source for each component attribute in the page to be configured is determined. Based on the data source binding expression corresponding to the target data source, the association between the component attribute and the target data source is established, and the page configuration information of the page to be configured is generated. The target data source is a data source that is pre-integrated into the low-code platform in the data source management interface. Based on the page configuration information, obtain and determine the target data source processing function corresponding to the target data source according to the data source configuration information of each target data source; The target data source is processed using the target data source processing function to obtain the target data information of the processed target data source; The target data information is injected into the component properties corresponding to the target data source in the page to be configured, and the rendered configuration page is displayed; the target data information of the target data source is automatically updated to the state object in the runtime context of the low-code engine, and when the data information of the data source is detected to have changed, the process of re-rendering the component is automatically triggered; The step of processing the target data source using the target data source processing function to obtain the target data information of the processed target data source includes: Iterate through the data source configuration information of each target data source, replace the dynamic parameters in the data source configuration information of the target data source, and adjust the loading order of each target data source; Based on the loading order, the target data source processing function is used to load the data information of the target data source; The data information of the successfully loaded target data source is transformed to obtain the transformed target data information, and the transformed target data information is determined to be the target data information of the target data source.

2. The method according to claim 1, characterized in that, The step of loading the data information of the target data source using the target data source processing function based on the loading order includes: If the target data source is determined to be a remote data source, then according to the loading order, a preset unified interface is invoked to send encrypted data request information to the target data source through the backend of the low-code platform; wherein, the data request information is used to instruct the target data source to provide the data information of the target data source; The target data source processing function is used to load the data information of the target data source.

3. The method according to claim 1, characterized in that, Injecting the target data information into the component properties corresponding to the target data source in the page to be configured, and displaying the rendered configuration page, including: Execute the data source binding expression in the properties of each component in the page to be configured, and obtain the target data information of the processed target data source corresponding to the component property; The value of the component property is replaced with the target data information of the processed target data source corresponding to the component property; Read the values ​​of each component's properties and display the rendered configuration page.

4. The method according to any one of claims 1-3, characterized in that, The method further includes: In response to user instructions on the data source management interface, determine the data source type of the data source to be added and obtain the data source configuration information of the data source to be added; If the data source to be added is determined to be a remote data source, a preset unified interface is invoked to send a connection request to the data source to be added through the backend of the low-code platform; wherein, the connection request is used to indicate the establishment of a connection relationship between the data source to be added and the low-code platform; If it is determined that the data source to be added is successfully connected to the low-code platform, then the legality of the data source configuration information of the data source to be added is verified. If the verification is successful, the data source configuration information of the data source to be added is saved to the low-code platform.

5. The method according to claim 4, characterized in that, The method further includes: If it is determined that the data source to be added fails to connect with the low-code platform, a prompt message is displayed; wherein, the prompt message is used to instruct the user to modify the connection parameters in the data source configuration information of the data source to be added; In response to the user's modification of the connection parameters, the preset unified interface is invoked again, and the connection request information is resent to the data source to be added through the backend of the low-code platform.

6. The method according to any one of claims 1-3, characterized in that, The method further includes: The target data information of the target data source is refreshed and monitored periodically. If it is determined that the target data information of the target data source has changed, the changed target data information is sent to the component property corresponding to the target data source, and the rendering process is automatically triggered.

7. A front-end data source processing device, characterized in that, The device includes: The configuration unit is used to respond to the user's instruction operation on the component configuration interface, determine the target data source of each component attribute in the page to be configured, establish the association relationship between the component attribute and the target data source based on the data source binding expression corresponding to the target data source, and generate the page configuration information of the page to be configured; wherein, the target data source is a data source that is pre-integrated into the low-code platform in the data source management interface; The determining unit is used to obtain and determine the target data source processing function corresponding to the target data source based on the page configuration information and the data source configuration information of each target data source. The processing unit is used to process the target data source using the target data source processing function to obtain the target data information of the processed target data source; The injection unit is used to inject the target data information into the component properties corresponding to the target data source in the page to be configured, and display the rendered configuration page; automatically update the target data information of the target data source to the state object in the runtime context of the low-code engine; and automatically trigger the process of re-rendering the component when the data information of the data source is detected to have changed. The processing unit is specifically used to traverse the data source configuration information of each target data source, replace the dynamic parameters in the data source configuration information of the target data source, and adjust the loading order of each target data source; based on the loading order, use the target data source processing function to load the data information of the target data source; perform conversion processing on the successfully loaded target data source data information, obtain the converted target data source data information, and determine the converted target data source data information as the target data information of the target data source.

8. An electronic device, characterized in that, The electronic device includes: a processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the method as described in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-6.

Images