Method and device for realizing custom component configuration rule based on low-code platform

Abstract

The invention belongs to the field of front-end low-code platforms, and relates to a method and a device for realizing custom component configuration rules based on a low-code platform, computer equipment and a storage medium, and the method comprises the following steps: customizing and classifying components, and determining functions, attributes and use scenes of each custom component; according to business requirements, a configurable rule is designed, and the configurable rule comprises a display condition, a data binding mode and event processing logic of the self-defined component; a rule engine is constructed to analyze and execute the configurable rule, and the rule engine is used for reading configuration information and dynamically adjusting and combining the custom component according to preset rule logic; a data binding mechanism is established, so that the user-defined component can acquire and update data in real time; a low-code component library is established to store and manage the custom components, and the custom components in the low-code component library can be reused and combined according to business requirements. And the defect that the user-defined component cannot be synchronously upgraded on project demand iteration upgrading is overcome.

Description

Technical Field

[0001] The present invention relates to the field of front-end low-code platform technology, and in particular to a method, device, computer equipment and storage medium for implementing custom component configuration rules based on a low-code platform. Background Art

[0002] Custom components of a low-code platform refer to the components that are implemented as a supplement to the basic components and templates in the low-code platform when they do not meet the special scenarios of the project party. The low-code platform usually requires a blank area with a slot within a boundary. The content is implemented by the project team to meet internal business function requirements. The low-code platform can also customize some rules to facilitate the project team to implement custom components to meet business needs more quickly and efficiently. Summary of the invention

[0003] The purpose of the embodiments of the present invention is to propose a method, device, computer equipment and storage medium for implementing custom component configuration rules based on a low-code platform, so as to solve the problem in the prior art that custom components cannot be upgraded synchronously with the iterative upgrade of project requirements.

[0004] In order to solve the above technical problems, the present invention provides a method for implementing custom component configuration rules based on a low-code platform, which adopts the following technical solution, including:

[0005] Customize and classify components, and clarify the functions, properties, and usage scenarios of each custom component;

[0006] Design configurable rules based on business needs. The configurable rules include display conditions, data binding methods, and event processing logic of custom components.

[0007] Building a rule engine to parse and execute the configurable rules, the rule engine is used to read configuration information and dynamically adjust and combine custom components according to preset rule logic;

[0008] Establish a data binding mechanism so that custom components can obtain and update data in real time;

[0009] A low-code component library is established to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs.

[0010] Preferably, the step of customizing and classifying components and clarifying the functions, properties and usage scenarios of each customized component specifically further includes:

[0011] Customize the components according to their common UI business scenarios: form input components, basic table data display components, form display components, article list display components, and H5 animation components.

[0012] According to the actual business functions of the components, custom classification is carried out: input verification type components, upload file interaction type components, visual animation interaction type components, animation map interaction type components, and UI display only type components.

[0013] Preferably, the steps of designing configurable rules according to business requirements, wherein the configurable rules include display conditions, data binding methods, and event processing logic of custom components specifically include:

[0014] According to the v-if, v-else, v-else-if, v-show, and v-dialog instructions provided by the Vue standard library, set the display or hiding of custom components. According to the APIs provided by the v-model, v-html, and v-text provided by the vue standard library and the innerHTML InnerText provided by the official Javascript standard library in the browser, data is bound to the DOM.

[0015] The event processing logic relies on the event binding APIs provided by Javascript syntax: addeventListener, onClick, on-@window.body.click. Event binding is performed through event bubbling or event delegation, and business logic is processed inside the bound callback function.

[0016] Preferably, the step of constructing a rule engine to parse and execute the configurable rules, wherein the rule engine is used to read configuration information, and dynamically adjusting and combining custom components according to preset rule logic specifically includes:

[0017] Define the logical properties of the parsing engine;

[0018] The event cache data produced after the logical properties of the parsing engine are extracted and defined, and the template generation API provided by the component is used to produce the initial version of the event engine data. The decompression algorithm provided by jsZip is used again to optimize the output source code data.

[0019] Preferably, the step of establishing a data binding mechanism so that the custom component can obtain and update data in real time also includes:

[0020] Update data in real time through the v-model directive and $emit callback function API provided by Vue to achieve mutual binding of data;

[0021] The data is bound to each other through the value form attribute assignment and the monitoring proxy for the value attribute provided by the Proxy API provided by the JavaScript standard protocol.

[0022] Preferably, the step of establishing a low-code component library to store and manage custom components, wherein the custom components in the low-code component library can be reused and combined according to business needs, specifically includes:

[0023] Use the npm repository tool to store low-code component libraries;

[0024] The specific steps of combining custom components are as follows in order: first, the declaration code of the custom component is extracted and packaged, and then the source code file produced in step S51 is introduced, and then the combined component provides instruction documents and precautions.

[0025] In order to solve the above technical problems, the present invention also provides a device for implementing custom component configuration rules based on a low-code platform, which adopts the following technical solution, including:

[0026] Customization module, used to customize and classify components, and clarify the functions, properties, and usage scenarios of each custom component;

[0027] Configuration module, which is used to design configurable rules according to business needs. The configurable rules include display conditions, data binding methods, and event processing logic of custom components.

[0028] A construction module, used to construct a rule engine to parse and execute the configurable rules, wherein the rule engine is used to read configuration information and dynamically adjust and combine custom components according to preset rule logic;

[0029] Establish a module for establishing a data binding mechanism so that custom components can obtain and update data in real time;

[0030] The component library module is used to establish a low-code component library to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs.

[0031] Preferably, the building blocks include:

[0032] Definition module, used to define the logical properties of the parsing engine;

[0033] The processing module is used to extract the event cache data produced after defining the logical properties of the parsing engine, generate the API through the template provided by the component, produce the initial version of the event engine data, and then optimize the output source code data through the decompression algorithm provided by jsZip.

[0034] In order to solve the above-mentioned technical problems, the present invention also provides a computer device, which adopts the technical solution described below, including a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, it implements the steps of the above-mentioned method for implementing custom component configuration rules based on a low-code platform.

[0035] In order to solve the above-mentioned technical problems, the present invention also provides a computer-readable storage medium, which adopts the technical solution described below, and stores computer-readable instructions on the computer-readable storage medium. When the computer-readable instructions are executed by the processor, the steps of the above-mentioned method for implementing custom component configuration rules based on a low-code platform are implemented.

[0036] Compared with the prior art, the present invention has the following beneficial effects: by implementing custom component configuration rules based on a low-code platform, it makes up for the shortcoming that custom components cannot be upgraded synchronously with the iterative upgrade of project requirements; it ensures that custom components can enjoy the resource version management function of the low-code platform; it is designed with a visual configuration solution, which greatly reduces the learning and development costs of custom controls. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] In order to more clearly illustrate the scheme in the present invention, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0038] Figure 1 It is a flow chart of an embodiment of a method for implementing custom component configuration rules based on a low-code platform of the present invention;

[0039] Figure 2 It is a flow chart of an embodiment of a method for implementing custom component configuration rules based on a low-code platform using the present invention;

[0040] Figure 3 This is a diagram of the custom component mailbox input box;

[0041] Figure 4 It is a UI diagram of custom controls configuration in low code;

[0042] Figure 5 It is a structural diagram of an embodiment of a device for implementing a custom component configuration rule based on a low-code platform of the present invention;

[0043] Figure 6 It is a schematic structural diagram of an embodiment of a computer device of the present invention. DETAILED DESCRIPTION

[0044] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present invention; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present invention or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0045] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0046] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings.

[0047] It should be noted that the method for implementing custom component configuration rules based on a low-code platform provided in an embodiment of the present invention is generally executed by a server / terminal device, and accordingly, the device for implementing custom component configuration rules based on a low-code platform is generally set in a server / terminal device.

[0048] It should be understood that the number of terminal devices, networks and servers is only illustrative. Depending on the implementation requirements, there can be any number of terminal devices, networks and servers.

[0049] Embodiment 1

[0050] Please refer to Figure 1 , showing a flow chart of an embodiment of a method for implementing a custom component configuration rule based on a low-code platform of the present invention. The method for implementing a custom component configuration rule based on a low-code platform comprises the following steps:

[0051] Step S1, customize and classify components, and clarify the functions, properties and usage scenarios of each customized component.

[0052] In this embodiment, the electronic device (e.g., server / terminal device) on which the method for implementing the custom component configuration rule based on the low-code platform runs can receive the request for implementing the custom component configuration rule based on the low-code platform through a wired connection or a wireless connection. It should be noted that the above-mentioned wireless connection method may include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAXX connection, Zigbee connection, UWB (ultra wideband) connection, and other wireless connection methods currently known or to be developed in the future.

[0053] In this embodiment, step S1, customizing and classifying components, clarifying the functions, properties and usage scenarios of each customized component, may also include the following steps:

[0054] S11. Customize the components according to their common UI business scenarios: form input components, basic table data display components, form display-only components, article list display components, and H5 animation components.

[0055] The specific business components are determined by the needs of the project team.

[0056] Form input components allow users to enter and submit data. Such components usually contain input elements such as text boxes, drop-down boxes, radio buttons, check boxes, and submit buttons.

[0057] The basic table data display component is used to present structured data. It usually displays data in the form of a table and supports operations such as column selection, sorting, and filtering.

[0058] Display-only forms are mainly used to display submitted or processed data, and do not contain input elements. This type of component usually displays data in a read-only form, and users cannot modify it. The value of display-only forms lies in their clarity and security. By displaying data in a read-only form, users can avoid misoperation or tampering with the data. At the same time, this component can also improve the credibility of the data, allowing users to view and use the data with more confidence.

[0059] The article list display component is mainly used to display a list of articles or news. It usually contains key information such as title, summary, release time, etc., and supports interactive operations such as paging and sorting.

[0060] H5 animation components refer to components with animation effects implemented using HTML5 technology. This type of component can achieve various complex animation effects such as gradient, sliding, rotation, etc. through CSS3 animation, JavaScript and other technologies.

[0061] S12. Customize the components according to their actual business functions: input verification components, file upload interaction components, visual animation interaction components, animated map interaction components, and UI display-only components.

[0062] The specific business interaction functions are determined by the needs of the project team;

[0063] Input validation components ensure that the data entered by the user complies with the preset rules and standards. Such components usually include text boxes, drop-down lists, radio buttons, check boxes, etc. They are closely connected with the background validation logic to verify the user input in real time.

[0064] The upload file interaction type component is mainly used to process the file operations uploaded by users. This type of component usually includes elements such as file selection box, upload button, progress bar, file list, etc., which together constitute a complete file upload process.

[0065] Visual animation interactive components enhance the interactivity and attractiveness of the user interface by using animation effects. Such components include various dynamic effects, transition animations, responsive layouts, etc.

[0066] Animated map interactive components combine the advantages of map display and animation effects, providing users with a more intuitive and vivid way to display geographic information. Such components usually include map controls, animation layers, interactive elements, etc.

[0067] UI display type components are mainly responsible for displaying static information content that does not require user interaction. Such components include various icons, pictures, text labels, static tables, etc.

[0068] In a low-code platform, custom components are the basis for implementing configurable rules. First, components need to be defined and classified to clarify the functions, properties, and usage scenarios of each component.

[0069] Through step S1, components can also be divided into UI components, form controls, library components, source code components, business logic components, data components, etc. Each component has corresponding properties and methods for developers to call.

[0070] UI components are UI display components that do not interact with the outside world and only involve browser interaction. They are often used in the initial version of the project.

[0071] Form control: It is a custom control of the form type that is required by the project. It usually needs to interact with the outside world for input, output, disabling, verification, and other common interactions.

[0072] Library component: represents a relatively complex custom component that a project needs to introduce a third-party library or SKD, such as a chart library, encryption library, platform-related resource package, etc.

[0073] Source code components: represent custom component libraries reserved for the above three backup solutions that cannot meet project requirements. They are also the demand scenarios that the low-code platform tries to avoid. Such components cannot enjoy the agile interaction functions provided by the low-code platform.

[0074] Step S2, designing configurable rules according to business requirements, wherein the configurable rules include display conditions, data binding methods, and event processing logic of custom components.

[0075] In this embodiment, step S2, according to business needs, designs configurable rules, which include display conditions, data binding methods, and event processing logic of custom components, and specifically may include the following steps:

[0076] S21. Set the display or hiding of custom components according to the v-if, v-else, v-else-if, v-show, and v-dialog instructions provided by the Vue standard library;

[0077] Data binding is performed on DOM according to the API provided by v-model, v-html, v-text provided by the vue standard library and innerHTML InnerText provided by the official Javascript standard library in the browser.

[0078] S22. Event processing logic relies on the event binding APIs provided by Javascript syntax: addeventListener, onClick, on-@window.body.click. Event binding is performed through event bubbling or event delegation, and business logic is processed inside the bound callback function.

[0079] For example: Window.addEventListener("click", function clickBtn(){

[0080] / / Business processing logic operation flow code block;

[0081] },false)

[0082] Step S3, constructing a rule engine to parse and execute the configurable rules, wherein the rule engine is used to read configuration information and dynamically adjust and combine custom components according to preset rule logic.

[0083] In this embodiment, step S3, building a rule engine to parse and execute the configurable rules, the rule engine is used to read the configuration information, and dynamically adjust and combine the custom components according to the preset rule logic, and specifically may include the following steps:

[0084] S31. Define the logical properties of the parsing engine.

[0085] The specific operation is: according to the declaration file related to the component, collect the valid fields changed by the user, use the jszip compression algorithm to crop the compressed data of the field control area, and finally pass it to the event cache library.

[0086] S32. Extract the event cache data produced after defining the logical properties of the parsing engine, generate an API through the template provided by the component, produce the initial version of the event engine data, and then optimize the output source code data through the decompression algorithm provided by jsZip.

[0087] Step S4, establishing a data binding mechanism so that the custom component can obtain and update data in real time.

[0088] In this embodiment, step S4, establishing a data binding mechanism so that the custom component can obtain and update data in real time, may further include the following steps:

[0089] S41. Update data in real time through the v-model instruction and $emit callback function API provided by Vue to achieve mutual binding of data.

[0090] The data is updated in real time through the v-model directive and $emit callback function API provided by Vue. The condition for mutual binding of data depends on importing the third-party library Vue.js.

[0091] S42. Through the form attribute assignment of value and the monitoring proxy for the value attribute provided by the Proxy API provided by the JavaScript standard protocol, the data is bound to each other.

[0092] The conditions for mutual binding of data are achieved through the value form attribute assignment and the monitoring proxy for the value attribute provided by the Proxy API provided by the JavaScript standard protocol, which depends on the latest version of the browser.

[0093] Step S5, establish a low-code component library to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs.

[0094] In this embodiment, step S5, a low-code component library is established to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs. Specifically, the steps may also be included:

[0095] S51. Use the npm warehouse tool to store low-code component libraries.

[0096] The specific operation logic is: npminit command initializes the project, npm run dev starts the development and design project, and npm run build packages and compresses the low-code project.

[0097] S52. The specific steps of combining custom components are as follows: first, the declaration code of the custom component is extracted and packaged, and then the source code file produced in step S51 is introduced, and then the combined component provides instruction documents and precautions.

[0098] Figure 2 This is a flow chart of an embodiment of a method for implementing custom component configuration rules based on a low-code platform using the present invention. Figure 2 As shown in the figure, a method for implementing custom component configuration rules based on a low-code platform includes the following steps:

[0099] S61. Determine the type of the selected custom component.

[0100] According to business scenarios and project team requirements, they can be divided into: functional components, display components, form components, table components, and chart components; the specific classification can be changed dynamically according to specific business scenarios.

[0101] S62. Determine that the selected custom component type is a UI component type, and proceed to step S68.

[0102] After defining the specific component type as the UI component type, declare the specific display attributes of this UI component type, which are provided by the product or project team.

[0103] S63. Determine that the selected custom component type is a form component type, and proceed to step S66.

[0104] When a custom component has verification operations such as an input box, a drop-down menu, a date, or a switch, it is determined to be a form control; then operation S62 is performed to define specific form properties of the form component through specific operation step interaction and verification information provided by the UE personnel.

[0105] S64. Determine whether the selected custom component type is a library component type, and proceed to step S67.

[0106] When a custom component cannot meet its own needs and needs to introduce a third-party library, when the Import or required attribute is used, the type is determined to be a library component.

[0107] S65. Determine whether the selected custom component type is a source code component type, and proceed to step S69.

[0108] When a custom component cannot meet the functional services provided by the above S64 and needs to introduce the nodejs runtime operation API, it is determined to be a source code component type.

[0109] Iterative upgrades can be performed from UI components to form components, form components to library components, and library components to source code components. For custom components, the continuous iterative development of the project and the uncertainty of requirements usually gradually develop into more complex scenarios. Custom components need to provide an upgraded continuous iteration solution to ensure that the custom components of the project meet the requirements of project iteration, from the simplest and most basic UI components, to form components, library components, and finally to custom develop source code components in the form of source code IDE.

[0110] S66. Get the form component identifier and proceed to step S68.

[0111] The form component identifier is a unique uuid identifier automatically generated by the low-code platform system, which is formatted using the encryption algorithm API:Cypto officially provided by the browser. The form identifier is obtained through lcs.getFormId.

[0112] There may be multiple custom form components in a project, so a business identifier (that is, an ID with business semantics) is needed to locate the component. At the same time, some API attribute methods that are thrown outward in the component can also be called based on this identifier.

[0113] S67. Get the import library name and go to step S68.

[0114] The low-code system provides the function of default import library name. This library name is manually entered and imported by the project team, imported into the low-code system through a txt file, and then the API provided by the low-code system is used: getPacakge to obtain the import library name.

[0115] When library components introduce platform packages or other resource packages, the low-code platform cannot perceive it. In order to enjoy the built-in library management platform function of the low-code platform, it is necessary to enter the name of the import package, and the low-code platform will perform customized optimization for the input package.

[0116] S68. Obtain component configuration item information and proceed to step S69.

[0117] The low-code system provides basic template information for the component configuration item information, which is then manually input by the project team and stored in the low-code system in the format of a json file for maintenance; the component configuration item information can be obtained through the low-code system's API: getComponentInfo.

[0118] The configuration item information provided by custom components is usually a visual display method of static text data. It is generally divided into field name, field initial value, field update and field-related APIs (listening, assignment, calculation, etc.), and is uniformly maintained by the low-code platform.

[0119] Figure 3 This is a diagram of the custom component mailbox input box. Figure 3 As shown, taking the custom component mailbox input box as an example, the generated initial Schema data format is:

[0120] {

[0121] labelkey:"1abe1', / / Email title field

[0122] label: "Mailbox", / / input box title

[0123] labelvisiblekey:'', / / input box display field

[0124] labelvisible:true, / / Show input box

[0125] 1abelIconKey:'labelIcon', / / Email title icon field

[0126] 1abelIcon:'icon-info', / / Email title icon

[0127] labelIconInfoKey:'labelIconInfo", / / Email title icon information field

[0128] labelIconInfo:'Only for public mailboxes", / / Mailbox title icon information

[0129] valueKey:'value', / / input box value binding field

[0130] Value: ", / / Default value of input box

[0131] disabledkey:'disabled', / / input box disabled field

[0132] disabled:false, / / input box disables default value

[0133] readonlykey:'readonly', / / input box read-only field

[0134] readonly:false, / / input box read-only default value

[0135] visiblekey:'visible', / / input box display field

[0136] visible:true, / / The input box is displayed by default

[0137] placeholderKey:'placeholder', / / input box prompt information field

[0138] placeholder: "Please enter your email address", / / Input box prompt information initial value

[0139] oncopy:false, / / Prohibit copying input box contents

[0140] oncut:false, / / Disable cutting of input box contents

[0141] onPaste:false, / / Prohibit pasting input box content

[0142] buttonTitlekey:'buttonTitle', / / button title field

[0143] buttonTitle:'Import', / / button title

[0144] buttonIconKey:'buttonIcon', / / button icon field

[0145] buttonIcon:'icon-import', / / button icon

[0146] buttonIconPosKey:'buttonIconPos', / / button icon position field

[0147] buttonIconPos:'right', / / button icon position

[0148] buttonDisabledkey:'buttonpisabled', / / button disabled key

[0149] buttonDisabled:false, / / button is not disabled by default

[0150]

[0151] In the low-code custom control configuration UI, Figure 4 As shown, Figure 4 It is a UI diagram for configuring custom controls in low code.

[0152] S69. Obtain the API method provided by the custom component and proceed to step S70.

[0153] The low-code system provides a calling API for obtaining the external system API method of custom components. Specifically, it uses the getCustomComponentMethodByOuter method, which is built-in by the low-code system.

[0154] like Figure 4 As shown, the format of the API list provided to external components for calling is:

[0155]

[0156] There are two ways to register custom components to low-code components. You can choose any one of the methods to register: first, use the use function officially provided by Vue, specifically Vue.use to register the component library; second, use the property registration method provided by the browser, specifically lcs.property.constructor to register the component.

[0157] The purpose of registering to the low-code component library is to allow external components to call it. Custom components need to be registered in the component library of the low-code platform, which will be maintained uniformly by the low-code platform and can be called at will in other projects.

[0158] The beneficial effects of implementing this embodiment are as follows: by implementing custom component configuration rules based on a low-code platform, the shortcoming that custom components cannot be upgraded synchronously with iterative upgrades of project requirements is compensated; it ensures that custom components can enjoy the resource version management function of the low-code platform; and it is designed with a visual configuration solution, which greatly reduces the learning and development costs of custom controls.

[0159] The present invention can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present invention can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0160] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0161] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0162] Embodiment 2

[0163] Further references Figure 5 , as a response to the above Figure 1 The present invention provides an embodiment of a device for implementing a custom component configuration rule based on a low-code platform. Figure 1 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0164] like Figure 5 As shown, the apparatus 60 for implementing custom component configuration rules based on the low-code platform in this embodiment includes: a custom module 61, a configuration module 62, a construction module 63, a building module 64 and a component library module 65. Among them:

[0165] A custom module 61 is used to customize and classify components and clarify the functions, properties and usage scenarios of each custom component;

[0166] Configuration module 62, used to design configurable rules according to business requirements, the configurable rules include display conditions, data binding methods, and event processing logic of custom components;

[0167] A construction module 63 is used to construct a rule engine to parse and execute the configurable rules, wherein the rule engine is used to read configuration information and dynamically adjust and combine custom components according to preset rule logic;

[0168] Establishing module 64, for establishing a data binding mechanism, so that the custom component can obtain and update data in real time;

[0169] The component library module 65 is used to establish a low-code component library to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs.

[0170] In some optional implementations of this embodiment, the custom module 61 further includes:

[0171] The scenario module 611 is used to perform custom classification according to the general UI business scenario of the component: form input component, basic table data display component, form display-only component, article list display component, H5 animation component;

[0172] Functional module 612 is used to perform custom classification according to the actual business functions of the components: input verification type components, upload file interaction type components, visual animation interaction type components, animation map interaction type components, and UI display only type components.

[0173] In some optional implementations of this embodiment, the configuration module 62 further includes:

[0174] The first configuration module 621 is used to set the display or hiding of the custom component according to the v-if, v-else, v-else-if, v-show, and v-dialog instructions provided by the Vue standard library, and to perform data binding on the DOM according to the API provided by v-model, v-html, and v-text provided by the vue standard library and innerHTML InnerText provided by the official Javascript standard library in the browser;

[0175] The second configuration module 622 is used for event processing logic that relies on the event binding APIs provided by Javascript syntax: addeventListener, onClick, on-@window.body.click, event binding is performed through event bubbling or event delegation, and business logic is processed inside the bound callback function function.

[0176] In some optional implementations of this embodiment, the building module 63 further includes:

[0177] A definition module 631, used to define the logical properties of the parsing engine;

[0178] Processing module 632 is used to extract the event cache data generated after defining the logical properties of the parsing engine, generate an API through the template provided by the component, generate the initial version of the event engine data, and optimize the output source code data again through the decompression algorithm provided by jsZip.

[0179] In some optional implementations of this embodiment, the establishing module 64 further includes:

[0180] The first building module 641 is used to update data in real time through the v-model instruction and $emit callback function API provided by Vue to achieve mutual binding of data;

[0181] The second establishing module 642 is used to achieve mutual binding of data through the form attribute assignment of value and the monitoring proxy of the value attribute provided by the Proxy API provided by the JavaScript standard protocol.

[0182] In some optional implementations of this embodiment, the component library module 65 further includes:

[0183] The storage module 651 is used to store the low-code component library using the npm warehouse tool;

[0184] The specific steps for combining custom components in combination module 652 are as follows: first, the declaration code of the custom component is extracted and packaged, and then the source code files generated by storing the low-code component library using the npm warehouse tool are introduced, and then the combined component provides instructions for use and precautions.

[0185] The beneficial effects of implementing this embodiment are as follows: by implementing custom component configuration rules based on a low-code platform, the shortcoming that custom components cannot be upgraded synchronously with iterative upgrades of project requirements is compensated; it ensures that custom components can enjoy the resource version management function of the low-code platform; and it is designed with a visual configuration solution, which greatly reduces the learning and development costs of custom controls.

[0186] Embodiment 3

[0187] To solve the above technical problems, the embodiment of the present invention also provides a computer device. Figure 6 , Figure 6 This is a basic structural block diagram of the computer device in this embodiment.

[0188] The computer device 7 includes a memory 71, a processor 72, and a network interface 73 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 7 having components of a memory 71, a processor 72, and a network interface 73, but it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), a digital processor (DSP), an embedded device, etc.

[0189] The computer device may be a desktop computer, a notebook computer, a PDA, a cloud server, etc. The computer device may interact with the user through a keyboard, a mouse, a remote control, a touch pad, or a voice control device.

[0190] The memory 71 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 71 may be an internal storage unit of the computer device 7, such as a hard disk or memory of the computer device 7. In other embodiments, the memory 71 may also be an external storage device of the computer device 7, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 7. Of course, the memory 71 may also include both the internal storage unit of the computer device 7 and its external storage device. In this embodiment, the memory 71 is generally used to store the operating system and various application software installed on the computer device 7, such as computer-readable instructions for implementing a custom component configuration rule method based on a low-code platform. In addition, the memory 71 can also be used to temporarily store various types of data that have been output or are to be output.

[0191] The processor 72 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments. The processor 72 is generally used to control the overall operation of the computer device 7. In this embodiment, the processor 72 is used to run the computer-readable instructions stored in the memory 71 or process data, such as running the computer-readable instructions for implementing the custom component configuration rule method based on the low-code platform.

[0192] The network interface 73 may include a wireless network interface or a wired network interface. The network interface 73 is generally used to establish a communication connection between the computer device 7 and other electronic devices.

[0193] The beneficial effects of implementing this embodiment are as follows: by implementing custom component configuration rules based on a low-code platform, the shortcoming that custom components cannot be upgraded synchronously with iterative upgrades of project requirements is compensated; it ensures that custom components can enjoy the resource version management function of the low-code platform; and it is designed with a visual configuration solution, which greatly reduces the learning and development costs of custom controls.

[0194] Embodiment 4

[0195] The present invention also provides another embodiment, namely, providing a computer-readable storage medium, which stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the method for implementing custom component configuration rules based on a low-code platform as described above.

[0196] The beneficial effects of implementing this embodiment are as follows: by implementing custom component configuration rules based on a low-code platform, the shortcoming that custom components cannot be upgraded synchronously with iterative upgrades of project requirements is compensated; it ensures that custom components can enjoy the resource version management function of the low-code platform; and it is designed with a visual configuration solution, which greatly reduces the learning and development costs of custom controls.

[0197] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the various embodiment methods of the present invention.

[0198] Obviously, the embodiments described above are only some embodiments of the present invention, rather than all embodiments. The preferred embodiments of the present invention are given in the accompanying drawings, but they do not limit the patent scope of the present invention. The present invention can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present invention more thorough and comprehensive. Although the present invention has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific embodiments, or to perform equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of the present invention, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present invention.

Claims

1. A method for implementing custom component configuration rules based on a low-code platform, characterized in that: The steps include: Customize and classify components, and clarify the functions, properties, and usage scenarios of each custom component; Design configurable rules based on business needs. The configurable rules include display conditions, data binding methods, and event processing logic of custom components. Building a rule engine to parse and execute the configurable rules, the rule engine is used to read configuration information and dynamically adjust and combine custom components according to preset rule logic; Establish a data binding mechanism so that custom components can obtain and update data in real time; A low-code component library is established to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs.

2. According to the method for implementing custom component configuration rules based on a low-code platform according to claim 1, it is characterized in that: The steps of customizing and classifying components and clarifying the functions, properties and usage scenarios of each customized component specifically include: Customize the components according to their common UI business scenarios: form input components, basic table data display components, form display components, article list display components, and H5 animation components. According to the actual business functions of the components, custom classification is carried out: input verification type components, upload file interaction type components, visual animation interaction type components, animation map interaction type components, and UI display only type components.

3. According to the method for implementing custom component configuration rules based on a low-code platform according to claim 1, it is characterized in that: The steps of designing configurable rules according to business needs, wherein the configurable rules include display conditions, data binding methods, and event processing logic of custom components, specifically include: According to the v-if, v-else, v-else-if, v-show, and v-dialog instructions provided by the Vue standard library, set the display or hiding of custom components. According to the APIs provided by the v-model, v-html, and v-text provided by the vue standard library and the innerHTML InnerText provided by the official Javascript standard library in the browser, data is bound to the DOM. The event handling logic depends on the event binding API provided by Javascript syntax: addeventListener, onClick, on-@window.body.click, event binding is performed through event bubbling or event delegation, and business logic is processed inside the bound callback function.

4. According to claim 1, the method for implementing custom component configuration rules based on a low-code platform is characterized in that: The step of constructing a rule engine to parse and execute the configurable rules, wherein the rule engine is used to read configuration information, and dynamically adjust and combine custom components according to preset rule logic specifically includes: Define the logical properties of the parsing engine; The event cache data produced after the logical properties of the parsing engine are extracted and defined, and the template generation API provided by the component is used to produce the initial version of the event engine data. The decompression algorithm provided by jsZip is used again to optimize the output source code data.

5. According to the method for implementing custom component configuration rules based on a low-code platform according to claim 1, it is characterized in that: The step of establishing a data binding mechanism so that the custom component can obtain and update data in real time specifically includes: Update data in real time through the v-model directive and $emit callback function API provided by Vue to achieve mutual binding of data; The data is bound to each other through the value form attribute assignment and the monitoring proxy for the value attribute provided by the Proxy API provided by the JavaScript standard protocol.

6. According to the method for implementing custom component configuration rules based on a low-code platform according to claim 1, it is characterized in that: The step of establishing a low-code component library to store and manage custom components, wherein the custom components in the low-code component library can be reused and combined according to business needs specifically includes: Use the npm repository tool to store low-code component libraries; The specific steps of combining custom components are as follows in order: first, the declaration code of the custom component is extracted and packaged, and then the source code file produced in step S51 is introduced, and then the combined component provides instruction documents and precautions.

7. A device for implementing custom component configuration rules based on a low-code platform, characterized in that: include: Customization module, used to customize and classify components, and clarify the functions, properties, and usage scenarios of each custom component; Configuration module, which is used to design configurable rules according to business needs. The configurable rules include display conditions, data binding methods, and event processing logic of custom components. A construction module, used to construct a rule engine to parse and execute the configurable rules, wherein the rule engine is used to read configuration information and dynamically adjust and combine custom components according to preset rule logic; Establish a module for establishing a data binding mechanism so that custom components can obtain and update data in real time; The component library module is used to establish a low-code component library to store and manage custom components. The custom components in the low-code component library can be reused and combined according to business needs.

8. The device for implementing custom component configuration rules based on a low-code platform according to claim 7, characterized in that: The building blocks include: Definition module, used to define the logical properties of the parsing engine; The processing module is used to extract the event cache data produced after defining the logical properties of the parsing engine, generate the API through the template provided by the component, produce the initial version of the event engine data, and then optimize the output source code data through the decompression algorithm provided by jsZip.

9. A computer device comprising a memory and a processor, wherein the memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, it implements the steps of the method for implementing custom component configuration rules based on a low-code platform as described in any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of a method for implementing custom component configuration rules based on a low-code platform as described in any one of claims 1 to 6.

Images