An assembly rendering method, apparatus, device and medium

Abstract

The present disclosure relates to the technical field of front-end development, and provides a component rendering method, device, equipment and medium. The method comprises: obtaining interface metadata corresponding to a target component, wherein the interface metadata comprises interface basic configuration information, mapping description information of interface parameters and mapping description information of response data; establishing a binding relationship between the target component and the interface; mapping component parameters of the target component into interface parameters based on the mapping description information of the interface parameters; determining interface response data corresponding to the interface parameters based on data query according to the interface basic configuration information; mapping the interface response data into component response data based on the mapping description information of the response data; and rendering the target component based on the component response data. The problem of repeated development of interface interaction is solved, and the development efficiency is effectively improved.

Description

Technical Field

[0001] This disclosure relates to the field of front-end development technology, and in particular to a component rendering method, apparatus, device, and medium. Background Technology

[0002] With the acceleration of digitalization, front-end development scenarios are becoming increasingly complex, and the requirements for real-time and stable data interaction in scenarios such as back-end systems and multi-terminal applications have significantly increased. With the widespread adoption of front-end / back-end separation architectures, the front-end also needs to handle a large amount of interface communication work to interact with the back-end.

[0003] The existing front-end and back-end interface interactions mainly rely on manually encapsulating the calling logic and combining it with framework-developed components. Some projects use simple encapsulation of request functions to uniformly handle basic configurations, or use custom encapsulation of common logic such as pagination and loading status. A few solutions attempt to define request rules using metadata, but none have achieved full-process automation.

[0004] The existing technology has obvious drawbacks: First, it suffers from serious duplication of development, requiring manual writing of request and parameter conversion code for each interface; second, it has high maintenance costs, requiring modification of related components for each interface change; and third, it lacks robustness, as manual exception handling is prone to omissions, which may lead to problems such as memory leaks, severely restricting development efficiency and system quality. Summary of the Invention

[0005] This disclosure provides a component rendering method, apparatus, device, and medium, which solves the problem of repetitive development of interface interactions and effectively improves development efficiency.

[0006] According to one aspect of this disclosure, a component rendering method is provided, comprising:

[0007] Obtain the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data.

[0008] Establish the binding relationship between the target component and the interface;

[0009] Based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters;

[0010] Based on the basic configuration information of the interface, perform a data query to determine the interface response data corresponding to the interface parameters;

[0011] Based on the mapping description information of the response data, the interface response data is mapped to component response data;

[0012] The target component is obtained by rendering based on the component response data.

[0013] Optionally, establish a binding relationship between the target component and the interface, including:

[0014] Determine the component template based on the component type of the target component, and configure the interface identifier in the interface binding instruction of the component template;

[0015] Execute the configured interface binding command to bind the target component to the interface corresponding to the interface identifier.

[0016] Optionally, establish a binding relationship between the target component and the interface, including:

[0017] Obtain the interface field from the component options of the target component, where the interface field is configured to declare the binding relationship between the target component and the interface;

[0018] The binding relationship between the target component and the interface is established based on the interface fields.

[0019] Optionally, the mapping description information of the interface parameters includes the mapping relationship between component parameters and interface parameters;

[0020] The mapping description information of the response data includes the relationship between interface response data and component response data.

[0021] Optionally, the component rendering method further includes:

[0022] Configure at least one of a global interceptor and a local interceptor in the interface metadata; wherein the global interceptor is used to perform a first setting process on global interface requests; and the local interceptor is used to perform a second setting process on target interface requests.

[0023] Optionally, the component rendering method further includes:

[0024] The interface metadata is configured with at least one of a status prompt processing unit and a processing exception prompting unit; wherein the status prompt processing unit is used to mark a first identifier during the interface request processing and mark a second identifier after the interface request processing is completed; the processing exception prompting unit is used to display error prompt information in the event of any interface request processing exception.

[0025] Optionally, the component rendering method further includes:

[0026] If the target component is unloaded, the processing of any unprocessed interface requests for the target component is cancelled.

[0027] According to another aspect of this disclosure, a component rendering apparatus is provided, the apparatus comprising:

[0028] The interface metadata acquisition module is used to acquire the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data.

[0029] The binding relationship establishment module is used to establish the binding relationship between the target component and the interface;

[0030] An interface parameter mapping module is used to map the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters.

[0031] The interface response data determination module is used to perform data query based on the interface basic configuration information to determine the interface response data corresponding to the interface parameters.

[0032] An interface response data mapping module is used to map the interface response data into component response data based on the mapping description information of the response data.

[0033] The target component acquisition module is used to render the target component based on the component response data.

[0034] According to another aspect of this disclosure, an electronic device is provided, the electronic device comprising:

[0035] At least one processor; and

[0036] A memory communicatively connected to the at least one processor; wherein,

[0037] The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the component rendering method according to any embodiment of this disclosure.

[0038] According to another aspect of this disclosure, a computer-readable storage medium is provided that stores computer instructions for causing a processor to execute and implement the component rendering method described in any embodiment of this disclosure.

[0039] According to another aspect of this disclosure, a computer program product is provided, which, when executed by a processor, implements the component rendering method as described in any of the embodiments of this disclosure.

[0040] This embodiment of the disclosure obtains the interface metadata corresponding to the target component, which includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data; establishes a binding relationship between the target component and the interface; maps the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters; performs data query based on the basic interface configuration information to determine the interface response data corresponding to the interface parameters; maps the interface response data to component response data based on the mapping description information of the response data; and renders the target component based on the component response data. Through the binding relationship and mapping between the target component and the interface, the problem of repetitive development of interface interactions is solved, effectively improving development efficiency.

[0041] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0042] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. It should be understood that the following drawings only show some embodiments of this disclosure and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0043] Figure 1 This is a flowchart of a component rendering method according to an embodiment of this disclosure;

[0044] Figure 2 This is a flowchart of a component rendering method according to an embodiment of this disclosure;

[0045] Figure 3 This is a flowchart of a component rendering method according to an embodiment of this disclosure;

[0046] Figure 4 This is a flowchart of a component rendering method according to an embodiment of this disclosure;

[0047] Figure 5 This is a schematic diagram of the structure of a component rendering device according to an embodiment of the present disclosure;

[0048] Figure 6 This is a schematic diagram of the structure of an electronic device according to an embodiment of this disclosure. Detailed Implementation

[0049] To enable those skilled in the art to better understand the present disclosure, the technical solutions of the present disclosure will be clearly and completely described below with reference to the accompanying drawings of the embodiments. Obviously, the described embodiments are only some embodiments of the present disclosure, and not all embodiments. Based on the embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present disclosure.

[0050] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this disclosure are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this disclosure described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover 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.

[0051] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0052] Figure 1 This flowchart illustrates a component rendering method provided in an embodiment of the present disclosure. This embodiment is applicable to front-end development scenarios where data needs to be obtained through an interface and component rendering needs to be completed. This method can be executed by the component rendering device in this embodiment, which can be implemented in software and / or hardware. This device can be integrated into electronic devices such as computer equipment, servers, mobile terminals, or processors. Figure 1 As shown, the method specifically includes the following steps:

[0053] S110, Obtain the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data.

[0054] In this embodiment, the interface metadata can be specifically understood as standardized rule data for the interaction between the front-end component and the back-end interface. It is the core configuration carrier connecting the target component and the interface. It predefines the key rules of the entire interface interaction process through a structured format, eliminating the need to write redundant interaction logic code in the component.

[0055] The interface metadata includes basic interface configuration information, mapping descriptions of interface parameters, and mapping descriptions of response data. The basic interface configuration information can be understood as the information that supports normal access to the backend interface. This information may include the interface's unique identifier, the interface's URL (Uniform Resource Locator), and the request method. The basic interface configuration information is a necessary prerequisite for initiating an interface request, clarifying how to find and call the target interface, allowing the interface access rules to be determined independently without relying on the business logic within the component. The mapping descriptions of interface parameters can be understood as structured information defining the conversion and association rules between frontend component parameters and backend interface request parameters. It is the core basis for automatically converting component data into interface-recognizable parameters, replacing the redundant code of manually concatenating parameters in traditional development. For example, the mapping descriptions of interface parameters could be "params": { "page": { "source": "pageNum", "type": "Number"}, mapping the component parameter "pageNum" in the frontend target component to the backend interface-recognizable and compatible interface request parameter "page". The mapping description information of the response data can be specifically understood as the structured information that defines the adaptation and conversion rules between the response data returned by the backend interface and the rendering data required by the frontend target component. It is the core basis for realizing the automatic conversion of the backend raw data into data that the component can directly use, replacing the redundant code of manually disassembling and formatting response data in traditional development.

[0056] Specifically, each backend interface has its own dedicated interface metadata predefined. This can be achieved by directly configuring a JSON configuration file for the interface metadata, clearly specifying the storage rules for the interface's basic configuration, parameter mapping, and response mapping; alternatively, the backend interface can define its metadata using annotations, and the frontend can use tools to extract the configuration information from the annotations to generate a JSON configuration file that the frontend can recognize. This ensures consistency between the frontend and backend interface metadata and avoids rule deviations caused by manual maintenance. For example, the backend interface can use the `@ApiMetadata` annotation to define its interface metadata, and the frontend can use a Swagger documentation parser to extract the configuration information from the annotations to generate a JSON configuration file. Based on the business identifier of the target component, its corresponding interface metadata is determined to ensure accurate acquisition of the complete rule configuration required for the component's interface interaction.

[0057] S120, establish the binding relationship between the target component and the interface.

[0058] In this embodiment, the binding relationship between the target component and the interface can be specifically understood as the relationship between the front-end target component and the interface established through the interface metadata, which clarifies which component needs to call which interface and based on what rules, providing a basis for subsequent automatic parameter mapping and response data adaptation.

[0059] Specifically, the target component is bound to the backend interface through interface metadata. There is no need to manually code the association logic between the component and the interface. The interface metadata automatically determines which interface the component calls and how the parameters are mapped, which greatly reduces the manual configuration cost and error rate in development and improves development efficiency.

[0060] Optionally, based on the above embodiments, establishing a binding relationship between the target component and the interface includes: determining a component template according to the component type of the target component, configuring an interface identifier in the interface binding instruction in the component template; executing the configured interface binding instruction to bind the target component to the interface corresponding to the interface identifier.

[0061] In this embodiment, the component type of the target component can be specifically understood as the type of target component determined according to the business functions that the target component needs to implement, used to match a preset component template. For example, the component type of the target component can be a list component, a table component, etc. The component template can be specifically understood as a template preset for a specific component type. It is a standardized template that contains the core business logic, basic interface interaction configuration, and page structure of that type of component, and can be reused by only adding personalized configurations. The interface binding instruction can be specifically understood as an instruction customized based on the front-end framework, used to quickly establish the association between the target component and the interface. The interface binding instruction is the core binding carrier embedded in the component template. There is no need to write complex function call logic. The automatic association between the component and the interface can be triggered by simple configuration. The interface identifier can be specifically understood as a standardized identifier used to uniquely associate the backend interface with the corresponding interface metadata. It is the core configuration item of the interface binding instruction. Through this identifier, the interface metadata required by the component can be accurately located, thereby establishing the association between the component and the backend interface and avoiding metadata matching confusion.

[0062] Specifically, based on the type of the target component, a component template is matched from a pre-defined component template library. For example, if the target component is a user table component, the table component template is automatically invoked. This template configures the table structure, pagination components, and a fixed format for the interface binding instructions. The interface identifier corresponding to the target interface is entered into the pre-defined interface binding instructions in the component template. Using the interface identifier in the instructions, the corresponding interface metadata is precisely matched from the metadata storage location. The configuration parameters in the instructions are integrated with the basic variables of the component template to form a complete interface interaction configuration. Ultimately, this achieves the binding between the target component and the backend interface corresponding to the interface metadata, providing a foundation for subsequent parameter mapping and request initiation.

[0063] Optionally, based on the above embodiments, establishing a binding relationship between the target component and the interface includes: obtaining the interface field in the component options of the target component, wherein the interface field is configured to declare the binding relationship between the target component and the interface; and establishing a binding relationship between the target component and the interface based on the interface field.

[0064] In this embodiment, component options can be specifically understood as a structured configuration set in the front-end framework used to define the core attributes, behaviors, and configurations of a component, including the component's basic information, data, methods, and custom extended configurations. The interface field in the target component's component options can be specifically understood as a structured field in the target component options specifically used to declare the rules for associating the component with interface metadata. It is a non-template-based declarative binding carrier, which does not rely on instructions in the component template. It clarifies which interface the component should bind to and how to bind it solely through the component configuration. Its core function is to carry the core rules of the binding relationship, adapting to complex logic components or template-free scenarios.

[0065] Specifically, the interface field in the component options of the target component is obtained. This interface field declares the binding relationship between the target component and the interface. The interface identifier declared in this interface field is read, and the corresponding interface metadata is matched with the interface metadata identifier to establish the binding between the component and the interface. There is no need to manually write the code to associate the component and the interface. Automatic binding can be achieved simply by parsing the interface field in the component options.

[0066] S130, based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters.

[0067] In this embodiment, the mapping description information can be specifically understood as the structured information in the interface metadata that predefines the conversion rules for component parameter conversion to interface parameters, and is the core basis for parameter mapping. The mapping description information clarifies how component data adapts to the parameter requirements of the backend interface. The mapping description information may include field name mapping, type conversion, default value supplementation, etc.

[0068] Specifically, based on the mapping description information of the interface parameters read from the interface metadata, the corresponding component parameters are extracted from the target component, the parameter conversion is completed according to the conversion rules, and the converted parameters are organized according to the field names required by the interface parameters to form an interface parameter object sent to the backend, without the need for manual conversion.

[0069] Optionally, based on the above embodiments, the mapping description information of the interface parameters includes the mapping relationship between component parameters and interface parameters; the mapping description information of the response data includes the relationship between interface response data and component response data.

[0070] In this embodiment, the mapping relationship between component parameters and interface parameters can be specifically understood as the correspondence between component parameters defined in the interface metadata and backend interface parameters. This clarifies which component parameter corresponds to which interface parameter and how they are adapted, ensuring that component data accurately matches the parameter requirements of the backend interface. For example, "pageNum" in the component corresponds to "page" in the interface parameter. The mapping description information of the response data can be specifically understood as the information between the response data returned by the backend interface and the response data received by the target component, as defined in the interface metadata. This clarifies which field returned by the backend corresponds to which variable in the component and how it is assigned a value, ensuring that the interface response accurately adapts to the component's data storage needs without requiring manual field mapping.

[0071] S140, perform a data query based on the interface basic configuration information to determine the interface response data corresponding to the interface parameters.

[0072] In this embodiment, the interface response data can be specifically understood as the data returned by the backend interface after receiving the mapped interface parameters, processing them according to business logic. The interface response data is the formal feedback from the backend to the data query request, containing key information such as core business data and status identifiers, and is also the source of target data required by the component.

[0073] Specifically, data is queried based on the basic configuration information of the interface, and the returned data results are structured. There is no need to manually construct requests, set request methods, or manually write request initiation code. Requests are initiated based on the basic configuration information of the interface, greatly reducing repetitive coding.

[0074] S150, based on the mapping description information of the response data, the interface response data is mapped to component response data.

[0075] In this embodiment, the component response data can be specifically understood as the interface response data transformed by the mapping description information of the response data, which is adapted to the target component's data structure and usage requirements. It can be directly rendered by the component's page and called by business logic without the component needing to perform secondary processing on the data format.

[0076] Specifically, by using mapping description information pre-configured in the interface metadata, after the interface returns response data, this mapping description information is read and converted according to preset rules. This transforms the interface response data into structured component response data that the component can directly use for rendering and state updates. This avoids repeatedly writing data processing code within the component, improving development efficiency and reducing errors caused by format mismatches.

[0077] S160, the target component is obtained by rendering based on the component response data.

[0078] Specifically, the component's response data is injected into the target component's rendering context. According to the component's preset template structure, style, and data binding rules, the data is associated with the corresponding position in the template for rendering, thus obtaining the target component.

[0079] The technical solution of this embodiment obtains the interface metadata corresponding to the target component, which includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data; establishes a binding relationship between the target component and the interface; maps the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters; performs data query based on the basic interface configuration information to determine the interface response data corresponding to the interface parameters; maps the interface response data to component response data based on the mapping description information of the response data; and renders the target component based on the component response data. Through the binding relationship and mapping between the target component and the interface, the problem of repetitive development of interface interactions is solved, effectively improving development efficiency.

[0080] Figure 2 This is a flowchart of a component rendering method provided in an embodiment of the present disclosure. This embodiment refines the above-mentioned optional methods, such as... Figure 2 As shown, the method specifically includes the following steps:

[0081] S210, obtain the interface metadata corresponding to the target component, wherein the interface metadata includes basic interface configuration information, mapping description information of interface parameters and mapping description information of response data.

[0082] S220, configure at least one of a global interceptor and a local interceptor in the interface metadata; wherein, the global interceptor is used to perform a first setting process on a global interface request; and the local interceptor is used to perform a second setting process on a target interface request.

[0083] In this embodiment, a global interceptor can be understood as a general processing module preset in the global configuration of the interface metadata, which takes effect uniformly on all interface requests. The global interceptor is used to batch process common global requirements, avoiding redundant configuration. It can be registered using the setupApi (interface configuration initialization) in the Vue framework. A global interface can be understood as all backend interfaces that can be uniformly affected by the global interceptor; that is, all backend interfaces defined in the interface metadata and associated with frontend components belong to the global interface. The first setting processing can be understood as a general, standardized processing preset by the global interceptor for all global interface requests. It is a fixed operation defined to solve common needs of all interfaces, eliminating the need for repeated configuration for individual interfaces and ensuring the consistency and efficiency of global interface interactions.

[0084] A local interceptor can be understood as a personalized processing module configured separately for a target interface in the interface metadata, effective only for requests made on that specific interface. Local interceptors supplement or adjust the general logic of global interceptors, meeting the specific needs of a single interface and preventing the uniformity of global rules from being disrupted by differences in individual interfaces. Local interceptors can be configured through the "options" field of the interface metadata. A target interface can be understood as a specific backend interface for which a local interceptor is configured separately in the interface metadata, requiring personalized processing; it is the sole object of the local interceptor. The target interface differs from ordinary global interfaces that are uniformly processed by the global interceptor; processing logic is customized only for the specific needs of that interface. The second-level processing can be understood as a preset, personalized special processing for the target interface request by the local interceptor. It is an operation customized to address the differentiated needs of a single target interface, operating only on that interface, supplementing or adjusting the general rules of the global interceptor, and preventing the uniformity of global interactions from being disrupted by the specificity of individual interfaces.

[0085] Specifically, configure global interceptors in the interface metadata. For example, you can uniformly add identity identifiers and standardize parameter formatting for all requests, reducing redundant configuration and ensuring consistency in global interface interactions. Configure local interceptors in the interface metadata to supplement or override the rules of the global interceptors for the specific needs of the target interface, adding special processing not present in the global rules. For example, the statistics interface needs to retain redundant fields that would be filtered by the global rules, meeting the differentiated needs of individual interfaces and avoiding the disruption of the uniformity of global rules due to the special characteristics of individual interfaces.

[0086] S230, establish the binding relationship between the target component and the interface.

[0087] S240, based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters.

[0088] S250, perform a data query based on the interface basic configuration information to determine the interface response data corresponding to the interface parameters.

[0089] S260, based on the mapping description information of the response data, the interface response data is mapped to component response data.

[0090] S270, the target component is obtained by rendering based on the component response data.

[0091] The technical solution of this embodiment obtains the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data. At least one of a global interceptor and a local interceptor is configured in the interface metadata. The global interceptor is used to perform a first setting process on global interface requests; the local interceptor is used to perform a second setting process on target interface requests. A binding relationship is established between the target component and the interface. Based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters. Data is queried based on the basic interface configuration information to determine the interface response data corresponding to the interface parameters. Based on the mapping description information of the response data, the interface response data is mapped to component response data. The target component is rendered based on the component response data. By configuring global and local interceptors, the consistency and flexibility of interface interaction can be balanced, significantly reducing repetitive development costs, while accurately adapting to the differentiated needs of special interfaces.

[0092] Figure 3 This is a flowchart of a component rendering method provided in an embodiment of the present disclosure. This embodiment refines the above-mentioned optional methods, such as... Figure 3 As shown, the method specifically includes the following steps:

[0093] S310, Obtain the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data.

[0094] S320, configure at least one of the interface metadata configuration status prompt processing unit and processing exception prompt unit; wherein, the status prompt processing unit is used to mark a first identifier during the interface request processing and mark a second identifier after the interface request processing is completed; the processing exception prompt unit is used to display error prompt information in the event of any interface request processing exception.

[0095] In this embodiment, the status prompt processing unit can be specifically understood as a processing unit preset in the interface metadata for visually identifying the lifecycle status of an interface request. It provides real-time progress feedback on the interface request through status prompts, allowing for intuitive understanding of the request status. The first identifier can be specifically understood as an identifier triggered by the status prompt processing unit after the interface request is initiated but before processing is completed, used to mark that the request is in progress. For example, the first identifier can be "true," its core function being to indicate that the request has not yet ended, avoiding duplicate operations. The second identifier can be specifically understood as an identifier triggered by the status prompt processing unit after the interface request processing is completed, used to mark that the request has ended. For example, the second identifier can be "false," its function being to release the waiting state of the first identifier, conveying a signal that the request process has ended, and synchronously updating the interaction status. The exception handling prompt unit can be specifically understood as a unit specifically configured in the interface metadata for handling interface request exceptions. When an interface request fails, there is no need to manually write prompt logic; it automatically reads and displays preset error text. The error prompt information can be specifically understood as information generated and output by the exception handling prompt unit when an interface request processing exception occurs, providing feedback on the exception that occurred during the interface request process.

[0096] Specifically, for the interface metadata configuration status prompt handling unit, the `option.loading` option can be configured in the interface metadata configuration to set a first flag during the interface request processing and a second flag after the interface request processing is completed. For the interface metadata configuration exception prompt unit, the `options.errorMsg` option can be configured in the interface metadata configuration to display error messages in the event of any interface request processing exception. This allows for a clear understanding of the interface request status and exceptions, unifies interaction standards, reduces repetitive coding, and significantly improves development and maintenance efficiency.

[0097] S330 establishes the binding relationship between the target component and the interface.

[0098] S340, based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters.

[0099] S350, perform a data query based on the basic configuration information of the interface to determine the interface response data corresponding to the interface parameters.

[0100] S360, based on the mapping description information of the response data, the interface response data is mapped to component response data.

[0101] S370, the target component is obtained by rendering based on the component response data.

[0102] The technical solution of this embodiment obtains the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data. At least one of a status prompt processing unit and a processing exception prompting unit is configured for the interface metadata. The status prompt processing unit is used to mark a first identifier during interface request processing and a second identifier after interface request processing is completed. The processing exception prompting unit is used to display error prompt information in the event of any interface request processing exception. A binding relationship is established between the target component and the interface. Based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters. Data is queried based on the basic interface configuration information to determine the interface response data corresponding to the interface parameters. Based on the mapping description information of the response data, the interface response data is mapped to component response data. The target component is rendered based on the component response data. By configuring the status prompt processing unit and processing exception prompting unit in the interface metadata, the interface request status and exceptions can be clearly understood, interaction specifications can be unified, and repetitive coding can be reduced, significantly improving development and maintenance efficiency.

[0103] Figure 4 This is a flowchart of a component rendering method provided in an embodiment of the present disclosure. This embodiment refines the above-mentioned optional methods, such as... Figure 4 As shown, the method specifically includes the following steps:

[0104] S410, obtain the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data.

[0105] S420 establishes the binding relationship between the target component and the interface.

[0106] S430, based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters.

[0107] S440, perform a data query based on the interface basic configuration information to determine the interface response data corresponding to the interface parameters.

[0108] S450, based on the mapping description information of the response data, the interface response data is mapped to component response data.

[0109] S460, the target component is obtained by rendering based on the component response data.

[0110] S470, if the target component is unloaded, cancel the processing of unprocessed interface requests for the target component.

[0111] In this embodiment, an unprocessed interface request of the target component can be specifically understood as an interface request that has been initiated by the target component, but has not received a backend response or completed a full processing flow when the component is unloaded.

[0112] Specifically, when the target component is unmounted, the processing of unhandled interface requests for the target component can be canceled. The onUnmounted hook function can be used to cancel the processing of unhandled interface requests for the target component, which can directly sever the association between the request and the destroyed component, thereby avoiding memory leaks caused by subsequent responses to the request triggering state updates of the unmounted component.

[0113] The technical solution of this embodiment obtains the interface metadata corresponding to the target component, which includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data; establishes a binding relationship between the target component and the interface; maps the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters; performs data query based on the basic interface configuration information to determine the interface response data corresponding to the interface parameters; maps the interface response data to component response data based on the mapping description information of the response data; renders the target component based on the component response data; and cancels the processing of unprocessed interface requests for the target component when the target component is uninstalled. By canceling the processing of unprocessed interface requests for uninstalled components, memory leaks caused by subsequent responses to unprocessed requests triggering state updates of uninstalled components can be avoided, thus ensuring the stability of the front-end application.

[0114] Based on the above embodiments, an optional example is provided, which can be used in front-end development in scenarios where user list data needs to be obtained through an interface and component rendering needs to be completed.

[0115] First, determine the template structure of the table component, configure the unique identifier of the target interface in the interface binding instruction of the template, and by executing the binding instruction, establish an association between the table component and the "user list query interface" corresponding to the identifier, and at the same time read the interface metadata corresponding to the interface.

[0116] Secondly, based on the parameter mapping description information preset in the interface metadata, the component parameters of the table component are transformed, such as mapping the component's "pageNum" to the "page" required by the interface, completing data type conversion, and filling in the default values ​​of missing parameters to obtain standard interface parameters; then, a data query is initiated based on the basic configuration of the interface metadata to obtain the interface response data; finally, according to the mapping description information of the response data, the original interface response data is converted into component response data that the table component can directly use, and finally, a component containing the user list is rendered based on this data.

[0117] Figure 5 This is a schematic diagram of a component rendering apparatus provided in an embodiment of the present disclosure. This embodiment is applicable to front-end development scenarios where data needs to be acquired through an interface and component rendering needs to be completed. The apparatus can be implemented using software and / or hardware, and can be integrated into any device that provides component rendering functionality, such as… Figure 5 As shown, the component rendering device specifically includes: an interface metadata acquisition module 510, a binding relationship establishment module 520, an interface parameter mapping module 530, an interface response data determination module 540, an interface response data mapping module 550, and a target component acquisition module 560.

[0118] The interface metadata acquisition module 510 is used to acquire the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data.

[0119] The binding relationship establishment module 520 is used to establish the binding relationship between the target component and the interface;

[0120] The interface parameter mapping module 530 is used to map the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters.

[0121] The interface response data determination module 540 is used to perform data query based on the interface basic configuration information to determine the interface response data corresponding to the interface parameters.

[0122] The interface response data mapping module 550 is used to map the interface response data into component response data based on the mapping description information of the response data.

[0123] The target component acquisition module 560 is used to render the target component based on the component response data.

[0124] The technical solution of this embodiment obtains the interface metadata corresponding to the target component, which includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data; establishes a binding relationship between the target component and the interface; maps the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters; performs data query based on the basic interface configuration information to determine the interface response data corresponding to the interface parameters; maps the interface response data to component response data based on the mapping description information of the response data; and renders the target component based on the component response data. Through the binding relationship and mapping between the target component and the interface, the problem of repetitive development of interface interactions is solved, effectively improving development efficiency.

[0125] Based on the above embodiments, optionally, the binding relationship establishment module 520 is used to: determine a component template according to the component type of the target component, configure an interface identifier in the interface binding instruction in the component template; execute the configured interface binding instruction to bind the target component to the interface corresponding to the interface identifier.

[0126] Based on the above embodiments, optionally, the binding relationship establishment module 520 is further configured to: obtain the interface field in the component options of the target component, wherein the interface field is configured to declare the binding relationship between the target component and the interface; and establish the binding relationship between the target component and the interface based on the interface field.

[0127] Based on the above embodiments, optionally, the mapping description information of the interface parameters includes the mapping relationship between component parameters and interface parameters; the mapping description information of the response data includes the relationship between interface response data and component response data.

[0128] Based on the above embodiments, optionally, the device further includes an interceptor configuration module, configured to: configure at least one of a global interceptor and a local interceptor in the interface metadata; wherein the global interceptor is used to perform a first setting process on a global interface request; and the local interceptor is used to perform a second setting process on a target interface request.

[0129] Optionally, based on the above embodiments, the device further includes a prompting unit configuration module, used to: configure at least one of the interface metadata status prompting processing unit and the processing exception prompting unit; wherein, the status prompting processing unit is used to mark a first identifier during the interface request processing and mark a second identifier after the interface request processing is completed; the processing exception prompting unit is used to display error prompt information in the event of any interface request processing exception.

[0130] Based on the above embodiments, optionally, the device further includes a process cancellation module, used to: cancel the processing of unprocessed interface requests for the target component when the target component is unloaded.

[0131] The above-described products can perform the methods provided in any embodiment of this disclosure, and have the corresponding functional modules and beneficial effects for performing the methods.

[0132] Figure 6A schematic diagram of an electronic device 10 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0133] like Figure 6 As shown, the electronic device 10 includes at least one processor 11 and a memory, such as a read-only memory (ROM) 12 or a random access memory (RAM) 13, communicatively connected to the at least one processor 11. The memory stores computer programs executable by the at least one processor. The processor 11 can perform various appropriate actions and processes based on the computer program stored in the ROM 12 or loaded from storage unit 18 into the RAM 13. The RAM 13 can also store various programs and data required for the operation of the electronic device 10. The processor 11, ROM 12, and RAM 13 are interconnected via a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0134] Multiple components in electronic device 10 are connected to I / O interface 15, including: input unit 16, such as keyboard, mouse, etc.; output unit 17, such as various types of displays, speakers, etc.; storage unit 18, such as disk, optical disk, etc.; and communication unit 19, such as network card, modem, wireless transceiver, etc. Communication unit 19 allows electronic device 10 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0135] Processor 11 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 11 performs the various methods and processes described above, such as component rendering methods.

[0136] In some embodiments, the component rendering method may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or mounted on electronic device 10 via ROM 12 and / or communication unit 19. When the computer program is loaded into RAM 13 and executed by processor 11, one or more steps of the component rendering method described above may be performed. Alternatively, in other embodiments, processor 11 may be configured to execute the component rendering method by any other suitable means (e.g., by means of firmware).

[0137] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0138] Computer programs used to implement the methods of this disclosure may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

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

[0140] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0141] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or middleware components (e.g., application servers), or frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0142] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0143] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this disclosure can be achieved, and this is not limited herein.

[0144] This disclosure also provides a computer program product, including a computer program that, when executed by a processor, implements the component rendering method according to any embodiment of this disclosure.

[0145] In implementing a computer program product, computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof. Programming languages ​​include object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0146] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A component rendering method, characterized in that, include: Obtain the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data. Establish the binding relationship between the target component and the interface; Based on the mapping description information of the interface parameters, the component parameters of the target component are mapped to interface parameters; Based on the basic configuration information of the interface, perform a data query to determine the interface response data corresponding to the interface parameters; Based on the mapping description information of the response data, the interface response data is mapped to component response data; The target component is obtained by rendering based on the component response data; The mapping description information of the interface parameters includes the mapping relationship between component parameters and interface parameters; the mapping description information of the response data includes the relationship between interface response data and component response data; the mapping description information includes field name mapping, type conversion, and default value supplementation.

2. The component rendering method according to claim 1, characterized in that, Establish the binding relationship between the target component and the interface, including: Determine the component template based on the component type of the target component, and configure the interface identifier in the interface binding instruction of the component template; Execute the configured interface binding command to bind the target component to the interface corresponding to the interface identifier.

3. The component rendering method according to claim 1, characterized in that, Establish the binding relationship between the target component and the interface, including: Obtain the interface field from the component options of the target component, where the interface field is configured to declare the binding relationship between the target component and the interface; The binding relationship between the target component and the interface is established based on the interface fields.

4. The component rendering method according to claim 1, characterized in that, The component rendering method also includes: Configure at least one of a global interceptor and a local interceptor in the interface metadata; wherein the global interceptor is used to perform a first setting process on global interface requests; and the local interceptor is used to perform a second setting process on target interface requests.

5. The component rendering method according to claim 1, characterized in that, The component rendering method also includes: The interface metadata is configured with at least one of a status prompt processing unit and a processing exception prompting unit; wherein the status prompt processing unit is used to mark a first identifier during the interface request processing and mark a second identifier after the interface request processing is completed; the processing exception prompting unit is used to display error prompt information in the event of any interface request processing exception.

6. The component rendering method according to claim 1, characterized in that, The component rendering method also includes: If the target component is unloaded, the processing of any unprocessed interface requests for the target component is cancelled.

7. A component rendering apparatus, characterized in that, include: The interface metadata acquisition module is used to acquire the interface metadata corresponding to the target component. The interface metadata includes basic interface configuration information, mapping description information of interface parameters, and mapping description information of response data. The binding relationship establishment module is used to establish the binding relationship between the target component and the interface; An interface parameter mapping module is used to map the component parameters of the target component to interface parameters based on the mapping description information of the interface parameters. The interface response data determination module is used to perform data query based on the interface basic configuration information to determine the interface response data corresponding to the interface parameters. An interface response data mapping module is used to map the interface response data into component response data based on the mapping description information of the response data. A target component acquisition module is used to render the target component based on the component response data. The mapping description information of the interface parameters includes the mapping relationship between component parameters and interface parameters; the mapping description information of the response data includes the relationship between interface response data and component response data; the mapping description information includes field name mapping, type conversion, and default value supplementation.

8. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the component rendering method according to any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that cause a processor to execute the component rendering method of any one of claims 1-6.

Images