Form component development system, rendering method and device, equipment and storage medium
Through an independent form component development system, the form component and the referenced code library are decoupled, which realizes efficient expansion and flexibility of form rendering logic, solving the problem of poor expansion of form components in front-end development.
Patent Information
- Application Number
- CN202412000149.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-30
- Publication Date
- 2025-05-06
AI Technical Summary
In front-end development, form components are deeply bonded to the referenced code base, resulting in the form rendering logic being unable to be efficiently expanded, resulting in poor flexibility and complex operation problems.
Provides a development system for form components, which decouples form components, rendering logic and reference code base through independent control units, intermediate modules and component modules. The system includes rendering components and non-rendering components. The reference party defines the form through the intermediate module and automatically renders the form through the rendering components.
It realizes independent updates of form components and rendering logic, improves the scalability and flexibility of the development system, reduces the complexity of form rendering operations, and reduces the maintenance costs of referencers.
Smart Images

Figure CN119938039A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to but is not limited to the field of front-end technology, and in particular to a development system, rendering method and apparatus, device and storage medium for a form component. Background Art
[0002] In front-end development, commonly used HyperText Markup Language (HTML) page elements include tables, forms, lists, etc.
[0003] In the related art, form components are usually hard-coded in the code base of the referencing party to facilitate the generation of the form interface. However, when a new form component needs to be added, the code base of the referencing party needs to be redeveloped. At the same time, the form component, the rendering logic of the form and the code base of the referencing party are deeply bonded, and the form rendering logic cannot be efficiently expanded between the referencing parties, resulting in problems such as poor flexibility and complex operation. Summary of the invention
[0004] In view of this, embodiments of the present application provide at least a form component development system, rendering method and apparatus, device, storage medium and computer program product.
[0005] The technical solution of the embodiment of the present application is implemented as follows:
[0006] The embodiment of the present application provides a form component development system, the development system includes a control unit, the control unit includes an intermediate module and a component module, the component module includes a rendering component and a non-rendering component, wherein:
[0007] The intermediate module is used to determine the form acquisition interface corresponding to the first form based on the definition information of the first form; wherein the form acquisition interface is used by the reference party to obtain the first form;
[0008] The rendering component is used to render the second form based on the target component; wherein the second form is determined based on the reference parameters in the rendering component, and the target component is determined by the rendering component from the non-rendering component based on the definition information of the second form.
[0009] In the embodiments of the present application, on the one hand, the development system exists independently of the code base of the referee, thereby realizing the decoupling of the development system and the code base of the referee. When a new form component needs to be added, the development system can be updated separately without the need to redevelop the code base of the referee, thereby improving the scalability of the development system. On the other hand, the rendering of the form is realized through the independent rendering component and the target component in the non-rendering component, thereby achieving the purpose of decoupling the form component, the rendering logic of the form and the code base of the referee. On the other hand, the referee realizes the definition of the form by calling the intermediate module, thereby improving the flexibility and accuracy of the form definition. At the same time, the referee only needs to call the rendering component to realize the automatic rendering of the form, thereby reducing the complexity of the form rendering operation. On the other hand, the independent development system is portable and can be applied to different referees, thereby reducing the maintenance cost of the referee and improving the flexibility of form rendering.
[0010] In some embodiments, the development system also includes a form database, wherein: the form database is used to store definition information of at least one form; the intermediate module is also used to obtain definition information of the first form from the form database, and based on the definition information of the first form, determine the form acquisition interface corresponding to the first form.
[0011] In the implementation manner of the present application, on the one hand, the definition information of at least one form is stored in a form database so that the intermediate module can obtain the definition information of each form; on the other hand, the intermediate module can directly obtain the definition information of the first form from the form database and determine the form acquisition interface corresponding to the first form, thereby improving the accuracy of the form acquisition interface and shortening the time for determining the form acquisition interface.
[0012] In some embodiments, the definition information of the form includes multiple form item fields, and the form item fields include at least one of the following: an index value field, a display attribute field, and a conditional attribute field. The display attribute field is used to set whether the corresponding form item is displayed in the form, and the conditional attribute field is used to set whether the corresponding form item has a hidden condition.
[0013] In the implementation manner of the present application, the form items are sorted, displayed, hidden, etc. by defining the fields of multiple form items in the definition information of the form, thereby improving the accuracy and flexibility of the form item definition.
[0014] In some implementations, the development system further includes a management unit, wherein: the management unit is used to perform configuration operations on the definition information of the form; wherein the configuration operation includes at least one of the following: an add operation, a delete operation, a modify operation, and a view operation.
[0015] In the implementation manner of the present application, the management unit performs configuration operations including adding, deleting, modifying, and viewing the definition information of the form, thereby improving the flexibility and convenience of configuring the definition information, thereby improving the compatibility of the development system and broadening the usage scenarios of the development system.
[0016] In some embodiments, the management unit includes at least one of the following: a preview module, a linkage module, and a verification module, wherein: the preview module is used to display a third form corresponding to the preview operation in response to detecting a preview operation of the reference party; the linkage module is used to link at least two form items in a fourth form corresponding to the linkage operation in response to detecting a linkage operation of the reference party; the verification module is used to verify a target form item in a fifth form corresponding to the verification operation in response to detecting a verification operation of the reference party.
[0017] In the implementation manner of the present application, the preview module, linkage module and verification module of the management unit are used to implement the preview, linkage and verification functions of the form, thereby broadening the use scenarios of the management unit and improving the compatibility of the development system.
[0018] In some embodiments, the rendering component includes a verification interface and a data acquisition interface, wherein: the verification interface is used to verify at least one form item in the form; the data acquisition interface is used to acquire data of at least one form item in the rendered form.
[0019] In the implementation manner of the present application, on the one hand, at least one form item in the form is verified through the verification interface of the rendering component, so that the accuracy of the rendered form can be checked in time during the rendering process, ensuring the normal rendering of the form; on the other hand, the rendered form data is obtained through the data acquisition interface to facilitate the referee to perform the next step.
[0020] In some embodiments, the non-rendering component includes at least one of the following: a basic component and a business component; wherein: the basic component includes at least one of the following: a text input box component, a number input box component, a drop-down list component, a switch component, a single or double selection component, a password input box component, a combination input box component, a multi-line text input box component, a structure form combination component, and a form item combination radio button component; the business component includes at least one of the following: an image input box component, a key selector component, a disk quantity component, a Helm repository list component, a Helm Chart selection box component, a Helm Chart version selection box component, a Helm value list component, a processor number input box component, a memory number input box component, a SecretKey selection box component, a service governance radio button component, a grayscale release radio button component, a policy radio button component, a policy selection box component, and a deployment target selection box component.
[0021] In the implementation manner of the present application, various basic components and various business components in the non-rendering components can meet various requirements of the referencing party for form rendering, thereby broadening the use scenarios of the development system.
[0022] In some embodiments, the component module includes a component library corresponding to the target front-end framework and an introduction method corresponding to the component library, the target front-end framework includes at least one of the following: Vue front-end framework, React front-end framework, Angular front-end framework, and the introduction method corresponding to the component library includes at least one of the following: content distribution network, package manager.
[0023] In the implementation mode of the present application, the component module includes a component library corresponding to the target front-end framework and an introduction method corresponding to the component library, so that the development system can be compatible with multiple front-end frameworks, thereby improving the scalability and adaptability of the development system.
[0024] The present application embodiment provides a method for rendering a form component, the method comprising:
[0025] The target form is obtained through a form obtaining interface corresponding to the target form; wherein the form obtaining interface is determined by an intermediate module of a control unit in the development system based on definition information of the target form, and the control unit further includes a component module, and the component module includes a rendering component and a non-rendering component;
[0026] Based on the target form, the rendering component is called so that the rendering component renders the target form based on the target component; wherein the target component is determined by the rendering component from the non-rendering component based on the definition information of the target form.
[0027] In the embodiments of the present application, on the one hand, the development system exists independently of the code base of the referee, thereby realizing the decoupling of the development system and the code base of the referee. When a new form component needs to be added, the development system can be updated separately without the need to redevelop the code base of the referee, thereby improving the scalability of the rendering method. On the other hand, the rendering of the form is realized through independent rendering components and target components in non-rendering components, thereby achieving the purpose of decoupling the form components, the rendering logic of the form and the code base of the referee. On the other hand, the referee realizes the definition of the form by calling the intermediate module, thereby improving the flexibility and accuracy of the form definition. At the same time, the referee only needs to call the rendering component to realize the automatic rendering of the form, thereby reducing the complexity of the form rendering operation. On the other hand, the independent development system is portable and can be applied to different referees, thereby reducing the maintenance cost of the referee and improving the flexibility of form rendering.
[0028] The present application embodiment provides a rendering device for a form component, the device comprising:
[0029] An acquisition unit is used to acquire a target form through a form acquisition interface corresponding to the target form; wherein the form acquisition interface is determined by an intermediate module of a control unit in a development system based on definition information of the target form, and the control unit further includes a component module, and the component module includes a rendering component and a non-rendering component;
[0030] The calling unit is used to call the rendering component based on the target form, so that the rendering component renders the target form based on the target component; wherein the target component is determined by the rendering component from the non-rendering component based on the definition information of the target form.
[0031] An embodiment of the present application provides an electronic device, including a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the processor executes the program, some or all of the steps in the above method are implemented.
[0032] An embodiment of the present application provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, some or all of the steps in the above method are implemented.
[0033] An embodiment of the present application provides a computer program product, including a computer program or instructions, which implement some or all of the steps in the above method when executed by a processor.
[0034] It should be understood that the above general description and the following detailed description are merely exemplary and explanatory, and are not intended to limit the technical solutions of the present application. BRIEF DESCRIPTION OF THE DRAWINGS
[0035] The drawings herein are incorporated into the specification and constitute a part of the specification. These drawings illustrate embodiments consistent with the present application and are used together with the specification to illustrate the technical solution of the present application.
[0036] Figure 1 A schematic diagram of the composition structure of a form component development system provided in an embodiment of the present application Figure 1 ;
[0037] Figure 2 A schematic diagram of the distribution structure of a component module provided in an embodiment of the present application;
[0038] Figure 3 A schematic diagram of the composition structure of a form component development system provided in an embodiment of the present application Figure 2 ;
[0039] Figure 4 A flowchart of a method for rendering a form component provided in an embodiment of the present application;
[0040] Figure 5A schematic diagram of the interaction between a reference party and a development system provided in an embodiment of the present application;
[0041] Figure 6 A schematic diagram of a rendering device for a form component provided in an embodiment of the present application;
[0042] Figure 7 A hardware entity schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0043] In order to make the purpose, technical solutions and advantages of the present application clearer, the technical solutions of the present application are further elaborated in detail below in conjunction with the drawings and embodiments. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.
[0044] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.
[0045] It should be pointed out that the terms "first\second\third" involved in the embodiments of the present application are merely to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged in a specific order or sequence where permitted, so that the embodiments of the present application described here can be implemented in an order other than that illustrated or described here.
[0046] It will be understood by those skilled in the art that, unless otherwise defined, all terms (including technical terms and scientific terms) used herein have the same meaning as the general understanding of those skilled in the art in the field to which the embodiments of the present application belong. It should also be understood that terms such as those defined in general dictionaries should be understood to have meanings consistent with the meanings in the context of the prior art, and will not be interpreted with idealized or overly formal meanings unless specifically defined as here.
[0047] In front-end development, commonly used HTML page elements include tables, forms, lists, etc. According to statistics, the proportion of forms in a product's page elements is no less than 50%. Accordingly, form development occupies a large proportion in front-end development. In addition, the style, layout, and verification methods of the form are unified, and there are many reusable codes. This makes form development have the characteristics of single content and high repetitiveness.
[0048] In the related art, when developing a form, the form components are usually hard-coded in the code base of the reference party to facilitate the generation of the form interface. However, when a new form component needs to be added, the code base of the reference party needs to be redeveloped. At the same time, the form components, the rendering logic of the form, and the code base of the reference party are deeply bonded, and the form rendering logic cannot be efficiently expanded between the reference parties. The above process does not take into account the characteristics of the form. While occupying a large amount of development costs, the code does not achieve the effect of reuse, and there are problems such as poor flexibility and complex operation.
[0049] An embodiment of the present application provides a development system for form components. On the one hand, the development system exists independently of the code base of the referee, thereby decoupling the development system from the code base of the referee. When a new form component needs to be added, the development system can be updated separately without redeveloping the code base of the referee, thereby improving the scalability of the development system. On the other hand, form rendering is achieved through independent rendering components and target components in non-rendering components, thereby achieving the purpose of decoupling the form component, the rendering logic of the form, and the code base of the referee. On the other hand, the referee implements the definition of the form by calling the intermediate module, thereby improving the flexibility and accuracy of the form definition. At the same time, the referee only needs to call the rendering component to realize automatic rendering of the form, thereby reducing the complexity of the form rendering operation. On the other hand, the independent development system is portable and can be applied to different referees, thereby reducing the maintenance cost of the referee and improving the flexibility of form rendering.
[0050] Figure 1 A schematic diagram of the structure of a form component development system provided in an embodiment of the present application
[0051] One, such as Figure 1 As shown, the development system 10 includes a control unit 11, and the control unit 11 includes an intermediate module 111
[0052] and a component module 112, the component module 112 comprising a rendering component 1121 and a non-rendering component 1122, wherein:
[0053] The intermediate module 111 is used to determine the form acquisition interface corresponding to the first form based on the definition information of the first form; wherein the form acquisition interface is used by the reference party to obtain the first form;
[0054] The rendering component 1121 is used to render the second form based on the target component; wherein the second form is determined based on the reference parameters in the rendering component, and the target component is determined by the rendering component from the non-rendering component based on the definition information of the second form.
[0055] Here, a form is a tool for collecting and submitting data entered by a user. A development system is any suitable system that has the ability to create, manage, and configure forms and integrate form components. In some embodiments, the development system can be represented by any suitable form such as a software framework, tool, or platform.
[0056] The control unit may be any suitable unit capable of implementing the function. The control unit has functions such as rendering a form, determining a form acquisition interface, etc. In some implementations, the control unit may be a unit mainly used by the referenced party.
[0057] The intermediate module can be any suitable module capable of realizing the function. The intermediate module has the function of determining the form acquisition interface.
[0058] The form acquisition interface is used for the reference party to obtain the form. The reference party refers to the execution subject that needs to render the form. In some embodiments, the form acquisition interface has a return value, which can be the definition information of the form.
[0059] The first form may be any suitable form. The definition information of the form (including the first form and other forms mentioned below) may include but is not limited to: at least one of the form item name, the form item sequence number, the grid size of the form item, etc.
[0060] In some embodiments, the development system also includes a form database, wherein: the form database is used to store definition information of at least one form; the intermediate module is also used to obtain definition information of the first form from the form database, and based on the definition information of the first form, determine the form acquisition interface corresponding to the first form.
[0061] Here, the form database can be any suitable database with the function of storing form data, and can be used to store definition information of at least one form, so that the intermediate module can obtain the definition information of the first form from the form database, and determine the form acquisition interface corresponding to the first form based on the definition information of the first form.
[0062] In some embodiments, the form database may store definition information of at least one form in any suitable target format. The target format may include, but is not limited to, YAML format, XML format, etc. YAML format is a highly readable format used to express data serialization, and can simply express data forms such as lists, hash tables, and scalars. XML format is a markup language used to store and transmit data. It is designed to be independent of any specific application and can be used to define new markup languages.
[0063] In some implementations, the intermediate module may obtain definition information of the first form stored in the target format from the form database, and then convert the definition information of the first form stored in the target format into an interface form, thereby determining a form acquisition interface corresponding to the first form.
[0064] In the implementation manner of the present application, on the one hand, the definition information of at least one form is stored in a form database so that the intermediate module can obtain the definition information of each form; on the other hand, the intermediate module can directly obtain the definition information of the first form from the form database and determine the form acquisition interface corresponding to the first form, thereby improving the accuracy of the form acquisition interface and shortening the time for determining the form acquisition interface.
[0065] In some embodiments, the definition information of the form includes multiple form item fields, and the form item fields include at least one of the following: an index value field, a display attribute field, and a conditional attribute field. The display attribute field is used to set whether the corresponding form item is displayed in the form, and the conditional attribute field is used to set whether the corresponding form item has a hidden condition.
[0066] Here, the form includes multiple form items, so the definition information of the form may include fields of multiple form items. The index value field is used to set the serial number of the corresponding expression item.
[0067] In some implementations, when the display attribute field is TRUE, it indicates that the corresponding form item is not displayed in the form, and therefore, the corresponding form item does not need to be rendered. Correspondingly, when the display attribute field is FALSE, it indicates that the corresponding form item is displayed in the form, and therefore, the corresponding form item needs to be rendered.
[0068] In some implementations, when the conditional attribute field sets the corresponding form item to have a hidden condition, it means that the corresponding form item is not displayed in the form, and therefore, it is not necessary to render the corresponding form item. Correspondingly, when the conditional attribute field sets the corresponding form item to not have a hidden condition, it means that the corresponding form item is displayed in the form, and therefore, it is necessary to render the corresponding form item.
[0069] Table 1 shows the fields of a form item in the form provided by this application, wherein the fields of the form item at least include an index value field, a display attribute field, and a condition attribute field.
[0070] Table 1 Fields of the form item
[0071]
[0072]
[0073] In some implementations, each form item may be sorted first according to the index value field of the form item, and then, in combination with the display attribute field and the conditional attribute field, it may be determined whether each form item needs to be displayed. If a form item needs to be displayed, the form item is rendered according to the target component corresponding to the form item.
[0074] Table 2 is the return value of the form acquisition interface provided by the present application, wherein the return value of the form acquisition interface includes at least an index value field, a prompt information field, etc.
[0075] Table 2 Return value of the form acquisition interface
[0076]
[0077]
[0078]
[0079] In the implementation manner of the present application, the form items are sorted, displayed, hidden, etc. by defining the fields of multiple form items in the definition information of the form, thereby improving the accuracy and flexibility of the form item definition.
[0080] The component module may be any suitable module capable of implementing the function. The component module has the function of rendering a form. The component module includes a rendering component and a non-rendering component, wherein the rendering component may be any suitable component capable of implementing the rendering function. The rendering component has functions such as rendering a form and verifying form items. The non-rendering component mainly refers to other components except the rendering component, and the non-rendering component may include various components in the form. In some embodiments, the rendering component may be a UIForm component. The rendering component may render the corresponding form according to the reference parameter passed in. The referencing party may complete the rendering of the form by calling the rendering component.
[0081] In some embodiments, the rendering component includes a verification interface and a data acquisition interface, wherein: the verification interface is used to verify at least one form item in the form; the data acquisition interface is used to acquire data of at least one form item in the rendered form.
[0082] Here, the validation interface can verify whether the form item meets the preset validation rules, and the data acquisition interface can obtain the data of the form item.
[0083] In some implementations, the verification interface and the data acquisition interface can be implemented by a verification function and an acquisition function, respectively. The reference party can implement the corresponding functions of the verification interface and the data acquisition interface by calling the verification interface and the data acquisition interface.
[0084] In some embodiments, when verifying at least one form item in a form, the verification interface may return a verification result, through which it may be determined whether the form item complies with a preset verification rule. The verification result may include TRUE or FALSE, wherein when the verification result is TRUE, it indicates that the form item complies with the preset verification rule, and correspondingly, when the verification result is FALSE, it indicates that the form item does not comply with the preset verification rule.
[0085] In the implementation manner of the present application, on the one hand, at least one form item in the form is verified through the verification interface of the rendering component, so that the accuracy of the rendered form can be checked in time during the rendering process, ensuring the normal rendering of the form; on the other hand, the rendered form data is obtained through the data acquisition interface to facilitate the referee to perform the next step.
[0086] In some embodiments, the non-rendering component includes at least one of the following: a basic component and a business component; wherein: the basic component includes at least one of the following: a text input box component, a number input box component, a drop-down list component, a switch component, a single or double selection component, a password input box component, a combination input box component, a multi-line text input box component, a structure form combination component, and a form item combination radio button component; the business component includes at least one of the following: an image input box component, a key selector component, a disk quantity component, a Helm repository list component, a Helm Chart selection box component, a Helm Chart version selection box component, a Helm value list component, a processor number input box component, a memory number input box component, a SecretKey selection box component, a service governance radio button component, a grayscale release radio button component, a policy radio button component, a policy selection box component, and a deployment target selection box component.
[0087] Here, the text input box component is an interface element that allows the input of arbitrary text information, and is usually used in scenarios where a string needs to be filled in.
[0088] The number input box component is used to enter numbers and may contain some additional functions, such as increase / decrease buttons, to facilitate quick adjustment of the value.
[0089] The drop-down list component contains a list of multiple options. You can select one or more options by clicking the drop-down arrow. The drop-down list component is used in scenarios where you need to select values from a predefined set, for example, selecting a province, selecting a city, etc.
[0090] A switch component is an interface element that represents two states (usually on / off, yes / no, enabled / disabled). The state can be switched by clicking or dragging. Switch components are often used to control whether certain functions are enabled or not.
[0091] Single and double selection components usually refer to radio buttons and check boxes. Radio buttons allow you to select one option from a group of options, while check boxes allow you to select multiple options. Single and double selection components are often used in scenarios where you need to select from multiple options.
[0092] The password input box component is a text input box specifically used for entering passwords. It usually hides the entered characters, but can display the entered characters as asterisks or dots, and may include the function of showing / hiding the password.
[0093] The combination input box component is a component composed of multiple input boxes. The combination input box component is usually used in scenarios where multiple related information (for example, telephone numbers, dates, etc.) are input.
[0094] The multi-line text input box component is an interface element that allows multiple lines of text to be entered. It provides a larger input space and more flexible text editing functions. The multi-line text input box component is often used in scenarios such as writing comments and descriptions.
[0095] The structured form component is usually composed of multiple form items of different types and is used to collect structured information. The structured form component is usually used in scenarios where users enter multiple types of data, such as registration, login, and filling in personal information.
[0096] A form item combination radio button component is a form component that contains multiple radio buttons, each of which represents an option, and one of these options can be selected. The form item combination radio button component is often used in scenarios where you need to select from a group of mutually exclusive options, such as selecting gender, preference, etc.
[0097] The image input box component is an input box component used to input the container image address. The image input box component is usually used to specify the container image to run.
[0098] The key selector component is a component used to select a key, usually used in scenarios where a key needs to be selected from a key management service for configuration. The key selector component can be presented in the form of a drop-down list, listing all available keys for selection.
[0099] The Disk Quantity component is a component used to enter or select the number of disks. The Disk Quantity component may be a numeric input box, allowing the desired number of disks to be specified, or a drop-down list with preset options to select from.
[0100] The Helm repository list component is a component that displays a list of Helm repositories. Helm is a package management tool for Kubernetes, used to manage the deployment of Kubernetes applications. The Helm repository list component can list all available Helm repositories for selection or browsing.
[0101] The Helm Chart selection box component is a component for selecting a Helm Chart. A Helm Chart is a package of Helm that contains all the resource definitions required to run a Kubernetes application. The Helm Chart selection box component can be presented in the form of a drop-down list or card, listing all available Helm Charts for selection.
[0102] The Helm Chart version selection box component is a component used to select a specific Helm Chart version. The Helm Chart version selection box component can be presented in the form of a drop-down list, listing all available versions for selection.
[0103] The Helm value list component is used to configure the Helm Chart value. Helm Charts usually contain some configurable parameters, and the values of these parameters can be set through the Helm value list component. Parameters can be presented in the form of key-value pairs, and operations such as adding, editing, or deleting can be performed.
[0104] The processor number input box component is a numeric input box component for entering the number of processors. The number of processors is an important parameter when configuring a virtual machine, container, or physical server. The processor number input box component can specify the required number of processors.
[0105] The memory numeric input box component is a numeric input box component used to enter the memory size. The memory size is an important parameter when configuring a virtual machine, container, or physical server. The memory numeric input box component can specify the memory size.
[0106] The SecretKey selection box component is used to select a SecretKey. SecretKey is usually used to store sensitive information, such as passwords, API keys, etc. The SecretKey selection box component can be presented in the form of a drop-down list, listing all available SecretKeys for selection.
[0107] The Service Governance checkbox component is a checkbox component used to select a service governance strategy. Service governance refers to a set of technologies and practices for managing and optimizing interactions between services in a microservices architecture. The Service Governance checkbox component can list different service governance strategies for selection.
[0108] Grayscale release radio button component is a radio button component used to select whether to enable grayscale release. Grayscale release is a method of gradually releasing a new version of software, first releasing the new version to some users, collecting feedback, and then gradually expanding the release scope. Grayscale release radio button component allows users to select whether to enable grayscale release function.
[0109] The policy radio button component is a radio button component used to select a specific policy. The policy may include but is not limited to at least one of a deployment policy, an update policy, a security policy, etc. The policy radio button component may list all available policies for selection.
[0110] The strategy selection box component can be used to select multiple strategies, or provide a more complex strategy selection interface that lists all available strategies for selection.
[0111] The deployment target selection box component is a component for selecting a deployment target. The deployment target is a different environment (for example, a development environment, a test environment, a production environment, etc.) or a different cluster / node. The deployment target selection box component can list all available deployments for selection.
[0112] In some implementations, the basic components and business components are scalable, and newly developed basic components and business components can be continuously added to the component module to meet different product requirements of the referee.
[0113] In the implementation manner of the present application, various basic components and various business components in the non-rendering components can meet various requirements of the referencing party for form rendering, thereby broadening the use scenarios of the development system.
[0114] In some embodiments, the component module includes a component library corresponding to the target front-end framework and an introduction method corresponding to the component library, the target front-end framework includes at least one of the following: Vue front-end framework, React front-end framework, Angular front-end framework, and the introduction method corresponding to the component library includes at least one of the following: content distribution network, package manager.
[0115] Here, the Vue front-end framework is a progressive JavaScript framework for building user interfaces, focusing on the View layer and providing data-driven and view componentization capabilities. The React front-end framework is a JavaScript library for building user interfaces. The Angular front-end framework is a TypeScript-based development platform developed by Google for building scalable web applications, including a series of frameworks, libraries, and tools.
[0116] Content Delivery Network (CDN) is a technology that uses multiple edge servers to cache and distribute website resources, aiming to improve user access speed and experience. Node Package Manager (NPM) is a package management tool that comes with Node.js. Its main functions include package installation, management, publishing and version control.
[0117] In some implementations, the reference party can call the component library corresponding to the target front-end framework through the corresponding import method of the component library. At the same time, since each target front-end framework exists independently, different target front-end frameworks can be mutually extended.
[0118] Figure 2 A schematic diagram of a distributed structure of a component module provided in an embodiment of the present application, such as Figure 2 As shown, the component module includes a component library corresponding to the target front-end framework and an introduction method corresponding to the component library, wherein the component library corresponding to the target front-end framework includes: a component library 21 corresponding to the Vue front-end framework, a component library 22 corresponding to the React front-end framework, a component library 23 corresponding to the Angular front-end framework, and a component library 24 corresponding to other front-end frameworks, and the introduction methods corresponding to the component libraries include: CDN 25, NPM 26. The referencer 27 can introduce the component library corresponding to the target front-end framework through the introduction method corresponding to the component library. At the same time, a component library corresponding to the target front-end framework can be expanded in real time based on the component library corresponding to the target front-end framework.
[0119] In the implementation mode of the present application, the component module includes a component library corresponding to the target front-end framework and an introduction method corresponding to the component library, so that the development system can be compatible with multiple front-end frameworks, thereby improving the scalability and adaptability of the development system.
[0120] The second form is determined based on the reference parameters in the rendering component. In some embodiments, the reference party can fill in the reference parameters in the rendering component, so that the second form can be determined based on the reference parameters in the rendering component. The reference parameters in the rendering component may include, but are not limited to: at least one of: the display type of the form component, the initial values of various form items in the form component, and the definition information of the form. The display type may include, but is not limited to, adding, editing, etc.
[0121] Table 3 shows the reference parameters in the rendering component provided by the present application, wherein the rendering component may be a UIForm component, and the referencer may fill in the reference parameters to determine the second form.
[0122] Table 3 Reference parameters in rendering components
[0123]
[0124] In some implementations, the second form and the first form may be the same form or different forms.
[0125] The target component is determined by the rendering component from the non-rendering component based on the definition information of the second form. The target component may include at least one of the following: a basic component and a business component.
[0126] In some embodiments, the rendering component may determine the attribute information of the component to be rendered based on the definition information of the second form, and then determine the target component from the non-rendering components according to the attribute information. The attribute information of the component may include but is not limited to at least one of the component name, component style, etc.
[0127] In some implementations, the rendering component may sort the form items in the second form in ascending order based on the sequence numbers of the form items, and then determine whether each form item needs to be displayed. If a form item needs to be displayed, the form item is rendered based on the target component corresponding to the form item.
[0128] In the embodiments of the present application, on the one hand, the development system exists independently of the code base of the referee, thereby realizing the decoupling of the development system and the code base of the referee. When a new form component needs to be added, the development system can be updated separately without the need to redevelop the code base of the referee, thereby improving the scalability of the development system. On the other hand, the rendering of the form is realized through the independent rendering component and the target component in the non-rendering component, thereby achieving the purpose of decoupling the form component, the rendering logic of the form and the code base of the referee. On the other hand, the referee realizes the definition of the form by calling the intermediate module, thereby improving the flexibility and accuracy of the form definition. At the same time, the referee only needs to call the rendering component to realize the automatic rendering of the form, thereby reducing the complexity of the form rendering operation. On the other hand, the independent development system is portable and can be applied to different referees, thereby reducing the maintenance cost of the referee and improving the flexibility of form rendering.
[0129] In some implementations, the development system further includes a management unit, wherein: the management unit is used to perform configuration operations on the definition information of the form; wherein the configuration operation includes at least one of the following: an add operation, a delete operation, a modify operation, and a view operation.
[0130] Here, the management unit may be any suitable unit capable of realizing the function. The management unit has the functions of configuring the definition information of the form, previewing the form, etc.
[0131] The configuration operation is an operation performed on the definition information of the form. The configuration operation includes at least one of the following: adding operation, deleting operation, modifying operation, and viewing operation. In some embodiments, the configuration operation can be triggered by any suitable action, such as long pressing, clicking, etc.
[0132] In some implementations, the management unit may provide a target interface, and the reference party may perform configuration operations on the definition information of the form in the target interface.
[0133] In some implementations, after the definition information of the form is configured in the management unit, the definition information of the form after the configuration operation is obtained, and then the definition information of the form after the configuration operation is stored in the form database.
[0134] In the implementation manner of the present application, the management unit performs configuration operations including adding, deleting, modifying, and viewing the definition information of the form, thereby improving the flexibility and convenience of configuring the definition information, thereby improving the compatibility of the development system and broadening the usage scenarios of the development system.
[0135] In some embodiments, the management unit includes at least one of the following: a preview module, a linkage module, and a verification module, wherein: the preview module is used to display a third form corresponding to the preview operation in response to detecting a preview operation of the reference party; the linkage module is used to link at least two form items in a fourth form corresponding to the linkage operation in response to detecting a linkage operation of the reference party; the verification module is used to verify a target form item in a fifth form corresponding to the verification operation in response to detecting a verification operation of the reference party.
[0136] Here, the preview module can be any suitable module capable of realizing the function. The preview module has the function of determining the displayed form. The linkage module can be any suitable module capable of realizing the function. The linkage module has the function of determining the linkage form items. The verification module can be any suitable module capable of realizing the function. The verification module has the function of verifying the form items.
[0137] In some implementations, when the reference party performs configuration operations on the definition information of the form in the management unit, a preview operation can be performed, so that the preview module can display a third form corresponding to the preview operation when the preview operation of the reference party is detected. The preview operation can be any appropriate operation, such as a click operation, a long press operation, etc. The third form, the first form, and the second form can be the same form or different forms.
[0138] In some implementations, when the reference party performs configuration operations on the definition information of the form in the management unit, a linkage operation may be performed, so that the linkage module may, when detecting the linkage operation of the reference party, link at least two form items in the fourth form corresponding to the linkage operation. The linkage operation may be any suitable operation, such as a drag operation, a long press operation, etc. The fourth form, the third form, the first form, and the second form may be the same form or different forms.
[0139] In some implementations, when the reference party performs configuration operations on the definition information of the form in the management unit, a verification operation may be performed, so that when the verification module detects the verification operation of the reference party, the target form item in the fifth form corresponding to the verification operation may be verified. The verification operation may be any appropriate operation, such as a double-click operation, a long-press operation, etc. The fifth form, the fourth form, the third form, the first form, and the second form may be the same form or different forms.
[0140] In some implementations, the linkage module can be implemented through the condition field in the definition information of the form. The verification module can be implemented through the verification field in the definition information of the form. The verification module supports a series of form item verifications including required, content, length, etc.
[0141] In the implementation manner of the present application, the preview module, linkage module and verification module of the management unit are used to implement the preview, linkage and verification functions of the form, thereby broadening the use scenarios of the management unit and improving the compatibility of the development system.
[0142] Figure 3 A schematic diagram of the composition structure of a form component development system provided in an embodiment of the present application Figure 2 ,like Figure 3 As shown, the development system 10 includes a management unit 12, a form database 13 and a control unit 11. The control unit 11 includes an intermediate module 111 and a component module 112. The component module 112 includes a rendering component and a non-rendering component, wherein:
[0143] A management unit 12, used for configuring the definition information of the form;
[0144] A form database 13, used to store definition information of at least one form;
[0145] The intermediate module 111 is used to obtain the definition information of the first form from the form database 13, and determine the form acquisition interface corresponding to the target form based on the definition information of the target form;
[0146] The rendering component is used to render the target form from the target component determined by the non-rendering component based on the definition information of the target form.
[0147] Based on the above embodiment, the present application embodiment also provides a rendering method of a form component. Figure 4 A flowchart of a method for rendering a form component provided in an embodiment of the present application is shown as follows: Figure 4 As shown, the method at least includes the following steps S101 to S102, wherein:
[0148] Step S101, obtaining the target form through the form acquisition interface corresponding to the target form; wherein the form acquisition interface is determined by the intermediate module of the control unit in the development system based on the definition information of the target form, and the control unit also includes a component module, and the component module includes a rendering component and a non-rendering component.
[0149] Here, a form is a tool for collecting and submitting user input data. A development system is any suitable system that has the ability to create, manage, and configure forms and integrate form components. A target form is a form that needs to be rendered by a referenced party. A referenced party is an execution entity that needs to render a form. The form acquisition interface is used by the referenced party to obtain a form.
[0150] In some implementations, the form acquisition interface has a return value, which may be definition information of the form.
[0151] The definition information of the form may include but is not limited to: at least one of the form item name, the form item sequence number, the grid size of the form item, etc. The component module may be any suitable module capable of realizing the function. The component module has the function of rendering the form.
[0152] In some implementations, the definition information of the form may further include fields for multiple form items, and the fields for the form items include at least one of the following: an index value field, a display attribute field, and a conditional attribute field. The display attribute field is used to set whether the corresponding form item is displayed in the form, and the conditional attribute field is used to set whether the corresponding form item has a hidden condition.
[0153] In some implementations, the form acquisition interface corresponding to the target form may be acquired through an intermediate module of the form component development system, and then the target form may be acquired according to definition information of the target form in the form acquisition interface corresponding to the target form.
[0154] Step S102 , based on the target form, calling the rendering component so that the rendering component renders the target form based on the target component; wherein the target component is determined by the rendering component from the non-rendering components based on the definition information of the target form.
[0155] Here, the component module includes a rendering component and a non-rendering component, wherein the rendering component can be any suitable component capable of realizing the rendering function. The rendering component has functions such as rendering forms and verifying form items. The non-rendering component mainly refers to other components except the rendering component, and the non-rendering component can include various components in the form. In some embodiments, the rendering component can be a UIForm component. The target component can include at least one of the following: a basic component, a business component.
[0156] In some embodiments, the non-rendering component may include at least one of a basic component, a business component, etc., wherein the basic component may include: a text input box component, a number input box component, a drop-down list component, a switch component, a single or double selection component, a password input box component, a combination input box component, a multi-line text input box component, a structure form combination component, a form item combination radio button component, etc. Correspondingly, the business component may include: an image input box component, a key selector component, a disk quantity component, a Helm repository list component, a Helm Chart selection box component, a Helm Chart version selection box component, a Helm value list component, a processor number input box component, a memory number input box component, a SecretKey selection box component, a service governance radio button component, a grayscale release radio button component, a policy radio button component, a policy selection box component, a deployment target selection box component, etc.
[0157] In some embodiments, the rendering component can determine the attribute information of the component to be rendered based on the definition information of the form, and then determine the target component from the non-rendering components according to the attribute information. The attribute information of the component may include but is not limited to at least one of the component name, component style, etc.
[0158] In the embodiments of the present application, on the one hand, the development system exists independently of the code base of the referee, thereby realizing the decoupling of the development system and the code base of the referee. When a new form component needs to be added, the development system can be updated separately without the need to redevelop the code base of the referee, thereby improving the scalability of the rendering method. On the other hand, the rendering of the form is realized through independent rendering components and target components in non-rendering components, thereby achieving the purpose of decoupling the form components, the rendering logic of the form and the code base of the referee. On the other hand, the referee realizes the definition of the form by calling the intermediate module, thereby improving the flexibility and accuracy of the form definition. At the same time, the referee only needs to call the rendering component to realize the automatic rendering of the form, thereby reducing the complexity of the form rendering operation. On the other hand, the independent development system is portable and can be applied to different referees, thereby reducing the maintenance cost of the referee and improving the flexibility of form rendering.
[0159] In some implementations, the development system further includes a management unit, and the method further includes step S103, wherein:
[0160] Step S103, based on the configuration operation, the definition information of the form is configured through the management unit; wherein the configuration operation includes at least one of the following: adding operation, deleting operation, modifying operation, and viewing operation.
[0161] Here, the management unit may be any suitable unit capable of realizing the function. The management unit has the functions of configuring the definition information of the form, previewing the form, etc.
[0162] The configuration operation is an operation performed on the definition information of the form. The configuration operation includes at least one of the following: adding operation, deleting operation, modifying operation, and viewing operation. In some embodiments, the configuration operation can be triggered by any suitable action, such as long pressing, clicking, etc.
[0163] In some implementations, the management unit may provide a target interface, and the reference party may perform configuration operations on the definition information of the form in the target interface.
[0164] In some implementations, after the definition information of the form is configured in the management unit, the definition information of the form after the configuration operation is obtained, and then the definition information of the form after the configuration operation is stored in the form database.
[0165] In the implementation manner of the present application, the management unit performs configuration operations including adding, deleting, modifying, and viewing the definition information of the form, thereby improving the flexibility and convenience of configuring the definition information, thereby improving the compatibility of the rendering method and broadening the usage scenarios of the rendering method.
[0166] In some embodiments, the method further comprises at least one of steps S104 to S106, wherein:
[0167] Step S104: Based on the preview operation, a third form corresponding to the preview operation is displayed by the management unit.
[0168] Here, the preview operation may be any appropriate operation, such as a click operation, a long press operation, etc.
[0169] In some implementations, when the referencer performs configuration operations on the definition information of the form in the management unit, a preview operation can be performed, so that the preview module of the management unit can display a third form corresponding to the preview operation. The preview module can be any suitable module that can realize this function. The preview module has the function of determining the displayed form.
[0170] Step S105: Based on the linkage operation, at least two form items in the fourth form corresponding to the linkage operation are linked by the management unit.
[0171] Here, the linkage operation may be any appropriate operation, for example, a drag operation, a long press operation, etc.
[0172] In some implementations, when the referencer performs configuration operations on the definition information of the form in the management unit, a linkage operation can be performed, so that the linkage module of the management unit can link at least two form items in the fourth form corresponding to the linkage operation. The linkage module can be any suitable module that can realize this function. The linkage module has the function of determining the linkage form items.
[0173] Step S106: Based on the verification operation, the management unit verifies the target form item in the fifth form corresponding to the verification operation.
[0174] Here, the verification operation may be any appropriate operation, for example, a double-click operation, a long-press operation, etc.
[0175] In some implementations, when the referencer performs configuration operations on the definition information of the form in the management unit, a verification operation can be performed, so that the verification module of the management unit can verify the target form item in the fifth form corresponding to the verification operation. The verification module can be any suitable module that can realize this function. The verification module has the function of verifying the form item.
[0176] In the implementation manner of the present application, the referencing party can implement the preview, linkage and verification functions of the form, broaden the usage scenarios of the management unit, and thus improve the compatibility of the rendering method.
[0177] The following describes the application of the form component development system provided in the embodiment of the present application in actual scenarios.
[0178] In front-end development, commonly used HTML page elements include tables, forms, lists, etc. According to statistics, the proportion of forms in a product's page elements is no less than 50%. Accordingly, form development occupies a large proportion in front-end development. In addition, the style, layout, and verification methods of the form are unified, and there are many reusable codes. This makes form development have the characteristics of single content and high repetitiveness.
[0179] In the related art, when developing a form, the form components are usually hard-coded in the code base of the reference party to facilitate the generation of the form interface. However, when a new form component needs to be added, the code base of the reference party needs to be redeveloped. At the same time, the form components, the rendering logic of the form, and the code base of the reference party are deeply bonded, and the form rendering logic cannot be efficiently expanded between the reference parties. The above process does not take into account the characteristics of the form. While occupying a large amount of development costs, the code does not achieve the effect of reuse, and there are problems such as poor flexibility and complex operation.
[0180] An embodiment of the present application provides a development system for form components. On the one hand, the development system exists independently of the code base of the referee, thereby decoupling the development system from the code base of the referee. When a new form component needs to be added, the development system can be updated separately without redeveloping the code base of the referee, thereby improving the scalability of the development system. On the other hand, form rendering is achieved through independent rendering components and target components in non-rendering components, thereby achieving the purpose of decoupling the form component, the rendering logic of the form, and the code base of the referee. On the other hand, the referee implements the definition of the form by calling the intermediate module, thereby improving the flexibility and accuracy of the form definition. At the same time, the referee only needs to call the rendering component to realize automatic rendering of the form, thereby reducing the complexity of the form rendering operation. On the other hand, the independent development system is portable and can be applied to different referees, thereby reducing the maintenance cost of the referee and improving the flexibility of form rendering.
[0181] Figure 5 A schematic diagram of the interaction between a reference party and a development system provided in an embodiment of the present application, such as Figure 5 As shown, the development system 10 includes a management unit 12, a form database 13 and a control unit 11, and the control unit 11 includes an intermediate module 111 and a component module 112, wherein:
[0182] The developer 51 in the referencer 27 configures the definition information of the form through the management unit 12;
[0183] The management unit 12 stores the definition information of the form after the configuration operation by the developer 51 in the form database 32;
[0184] The intermediate module 111 obtains the definition information of the form from the form database 13, and obtains the form acquisition interface corresponding to the form based on the definition information of the form:
[0185] The developer 51 obtains the form through the form acquisition interface provided by the intermediate module 111, and defines the reference parameters of the UIForm component in the component module 112, so as to render the form component through the UIForm component.
[0186] Based on the above embodiments, the present application also provides a rendering device for a form component. Figure 6 A schematic diagram of a rendering device for a form component provided in an embodiment of the present application, such as Figure 6 As shown, the rendering device 600 of the form component includes an acquisition unit 601 and a calling unit 602, wherein:
[0187] An acquisition unit 601 is used to acquire a target form through a form acquisition interface corresponding to the target form; wherein the form acquisition interface is determined by an intermediate module of a control unit in a development system based on definition information of the target form, and the control unit further includes a component module, and the component module includes a rendering component and a non-rendering component;
[0188] The calling unit 602 is used to call the rendering component based on the target form, so that the rendering component renders the target form based on the target component; wherein the target component is determined by the rendering component from the non-rendering component based on the definition information of the target form.
[0189] In some implementations, the rendering device further includes a configuration unit for configuring the definition information of the form through the management unit based on a configuration operation; wherein the configuration operation includes at least one of the following: an add operation, a delete operation, a modify operation, and a view operation.
[0190] In some embodiments, the configuration unit is further used to display a third form corresponding to the preview operation through the management unit based on the preview operation; to link at least two form items in the fourth form corresponding to the linkage operation through the management unit based on the linkage operation; and to verify the target form item in the fifth form corresponding to the verification operation through the management unit based on the verification operation.
[0191] It should be noted that the description of the above device embodiment is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the device embodiment of the present application, please refer to the description of the method embodiment of the present application for understanding.
[0192] The description of each embodiment above tends to emphasize the differences between the embodiments, and the same or similar aspects can be referenced to each other. The description of the above device, storage medium, computer program and computer program product embodiments is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment. For technical details not disclosed in the embodiments of the device, storage medium, computer program and computer program product of this application, please refer to the description of the method embodiment of this application for understanding.
[0193] It should be noted that in the embodiment of the present application, if the above method is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiment of the present application is essentially or the part that contributes to the relevant technology can be embodied in the form of a software product, which is stored in a storage medium, including a number of instructions to enable an electronic device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a U disk, a mobile hard disk, a read-only memory (ROM), a disk or an optical disk. In this way, the embodiment of the present application is not limited to any specific combination of hardware and software.
[0194] An embodiment of the present application provides an electronic device, including a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and the processor implements the above method when executing the computer program.
[0195] The embodiment of the present application provides a computer-readable storage medium on which a computer program is stored, and the computer program implements the above method when executed by a processor. The computer-readable storage medium may be transient or non-transient.
[0196] The embodiment of the present application provides a computer program product, which includes a non-transitory computer-readable storage medium storing a computer program, and when the computer program is read and executed by a computer, some or all of the steps in the above method are implemented. The computer program product can be implemented specifically by hardware, software or a combination thereof. In an optional embodiment, the computer program product is embodied as a computer storage medium, and in another optional embodiment, the computer program product is embodied as a software product, such as a software development kit (Software Development Kit, SDK) and the like.
[0197] It should be noted that Figure 7 A schematic diagram of a hardware entity of an electronic device provided in an embodiment of the present application is shown in the figure. As shown in the figure, the hardware entity of the electronic device 700 includes: a processor 701, a communication interface 702 and a memory 703, wherein:
[0198] The processor 701 generally controls the overall operation of the electronic device 600 .
[0199] The communication interface 702 enables the electronic device to communicate with other terminals or servers through a network.
[0200] The memory 703 is configured to store instructions and applications executable by the processor 701, and can also cache data to be processed or processed by the processor 701 and each module in the electronic device 700 (for example, image data, audio data, voice communication data, and video communication data), which can be implemented by flash memory (FLASH) or random access memory (Random Access Memory, RAM). Data transmission can be performed between the processor 701, the communication interface 702, and the memory 703 through the bus 704.
[0201] It should be noted here that the description of the above storage medium and device embodiments is similar to the description of the above method embodiments, and has similar beneficial effects as the method embodiments. For technical details not disclosed in the storage medium and device embodiments of this application, please refer to the description of the method embodiments of this application for understanding.
[0202] It should be understood that "one embodiment" or "an embodiment" mentioned throughout the specification means that specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in various embodiments of the present application, the size of the serial number of each step / process mentioned above does not mean the order of execution, and the execution order of each step / process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application. The serial numbers of the embodiments of the present application mentioned above are for description only and do not represent the advantages and disadvantages of the embodiments.
[0203] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.
[0204] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the components shown or discussed can be through some interfaces, and the indirect coupling or communication connection of the devices or units can be electrical, mechanical or other forms.
[0205] The units described above as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units; they may be located in one place or distributed on multiple network units; some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.
[0206] In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be a separate unit, or two or more units may be integrated into one unit; the above-mentioned integrated units may be implemented in the form of hardware or in the form of hardware plus software functional units.
[0207] A person of ordinary skill in the art can understand that: all or part of the steps of implementing the above-mentioned method embodiment can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps of the above-mentioned method embodiment; and the aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, read-only memories, magnetic disks or optical disks.
[0208] Alternatively, if the above-mentioned integrated unit of the present application is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application can essentially or in other words, the part that contributes to the relevant technology can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as mobile storage devices, ROMs, magnetic disks, or optical disks.
[0209] The above is only an implementation method of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application.
Claims
1. A form component development system, characterized in that: The development system includes a control unit, the control unit includes an intermediate module and a component module, the component module includes a rendering component and a non-rendering component, wherein: The intermediate module is used to determine the form acquisition interface corresponding to the first form based on the definition information of the first form; wherein the form acquisition interface is used for the reference party to obtain the first form; The rendering component is used to render a second form based on a target component; wherein the second form is determined based on a reference parameter in the rendering component, and the target component is determined by the rendering component from the non-rendering component based on definition information of the second form.
2. The development system according to claim 1, characterized in that: The development system also includes a forms database, wherein: The form database is used to store definition information of at least one form; The intermediate module is further configured to obtain definition information of the first form from the form database, and determine a form acquisition interface corresponding to the first form based on the definition information of the first form.
3. The development system according to claim 1, characterized in that: The definition information of the form includes fields of multiple form items, and the fields of the form items include at least one of the following: an index value field, a display attribute field, and a condition attribute field. The display attribute field is used to set whether the corresponding form item is displayed in the form, and the condition attribute field is used to set whether the corresponding form item has a hidden condition.
4. The development system according to claim 1, characterized in that: The development system also includes a management unit, wherein: The management unit is used to perform configuration operations on the definition information of the form; wherein the configuration operation includes at least one of the following: adding operation, deleting operation, modifying operation, and viewing operation.
5. The development system according to claim 4, characterized in that: The management unit includes at least one of the following: a preview module, a linkage module, and a verification module, wherein: The preview module is configured to, in response to detecting a preview operation of the reference party, display a third form corresponding to the preview operation; The linkage module is used to, in response to detecting a linkage operation of the reference party, link at least two form items in the fourth form corresponding to the linkage operation; The verification module is used to verify the target form item in the fifth form corresponding to the verification operation in response to detecting the verification operation of the reference party.
6. The development system according to claim 1, characterized in that: The rendering component includes a verification interface and a data acquisition interface, wherein: The verification interface is used to verify at least one form item in the form; The data acquisition interface is used to acquire data of at least one form item in the rendered form.
7. The development system according to claim 1, characterized in that: The non-rendering component includes at least one of the following: a basic component and a business component, wherein: The basic components include at least one of the following: a text input box component, a number input box component, a drop-down list component, a switch component, a single-select and double-select component, a password input box component, a combination input box component, a multi-line text input box component, a structure form combination component, and a form item combination radio button component; The business components include at least one of the following: an image input box component, a key selector component, a disk quantity component, a Helm repository list component, a Helm Chart selection box component, a Helm Chart version selection box component, a Helm value list component, a processor number input box component, a memory number input box component, a SecretKey selection box component, a service governance radio button component, a grayscale release radio button component, a policy radio button component, a policy selection box component, and a deployment target selection box component.
8. The development system according to any one of claims 1 to 7, characterized in that: The component module includes a component library corresponding to a target front-end framework and an introduction method corresponding to the component library. The target front-end framework includes at least one of the following: Vue front-end framework, React front-end framework, Angular front-end framework, and the introduction method corresponding to the component library includes at least one of the following: content distribution network, package manager.
9. A rendering method for a form component, characterized in that: The method comprises: Acquire the target form through a form acquisition interface corresponding to the target form; wherein the form acquisition interface is determined by an intermediate module of a control unit in a development system based on definition information of the target form, the control unit further includes a component module, and the component module includes a rendering component and a non-rendering component; Based on the target form, the rendering component is called so that the rendering component renders the target form based on the target component; wherein the target component is determined by the rendering component from the non-rendering components based on definition information of the target form.
10. A form rendering device, characterized in that: The device comprises: An acquisition unit, configured to acquire the target form through a form acquisition interface corresponding to the target form; wherein the form acquisition interface is determined by an intermediate module of a control unit in a development system based on definition information of the target form, and the control unit further includes a component module, and the component module includes a rendering component and a non-rendering component; A calling unit is used to call the rendering component based on the target form, so that the rendering component renders the target form based on the target component; wherein the target component is determined by the rendering component from the non-rendering component based on the definition information of the target form.
11. An electronic device comprising a processor and a memory, wherein the memory stores a computer program that can be run on the processor, characterized in that: When the processor executes the computer program, the steps in the method of claim 9 are implemented.
12. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor, the steps in the method according to claim 9 are implemented.
13. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the steps in the method of claim 9 are implemented.