Processing method, system and related equipment for reusing low-code platform components

Abstract

The present invention provides a processing method, system, and related equipment for reusing components on a low-code platform. The method includes obtaining project component parameters and using the Vuex pattern to manage component status; using the Lodash library to deep copy the reused components; serializing the reused components to obtain component data to be processed; replacing ID-related parameters of the component data to be processed based on preset rules; decoupling events from the component data to be processed through the observer pattern and processing nested tasks using a recursive algorithm; subscribing to messages, updating device resources, API resources, and page resources for the component data to be processed; updating variable mapping relationships of the component data to be processed in a preset processing mode based on the component type; modularizing and isolating the CSS style of the component data to be processed, obtaining target component data, and registering it. The present invention realizes the automatic processing of component IDs, dependencies, associated resources, and nested structures during component reuse.

Description

Technical Field

[0001] The present invention relates to the field of software development technology, and in particular to a processing method, system and related equipment for reusing low-code platform components. Background Art

[0002] As enterprises increasingly demand rapid application development, low-code platforms are gaining market favor as tools that significantly improve development efficiency. By providing pre-built components and a visual development environment, low-code platforms reduce programming complexity, enabling non-professional developers to participate in application development.

[0003] However, the component reuse method of traditional low-code platforms has technical problems such as duplicate component IDs leading to system conflicts, complex dependencies between components, high manual maintenance costs, difficulty in synchronously updating related resources (variables, events, styles, etc.), and difficulty in ensuring the integrity of component nested structures.

[0004] Therefore, the existing technology still needs to be improved and developed. Summary of the Invention

[0005] The present invention provides a processing method, system and related equipment for reusing low-code platform components. The main purpose of the present invention is to solve the technical problems mentioned in the background technology of the existing technology.

[0006] A first aspect of the present invention provides a method for reusing low-code platform components, comprising:

[0007] Get the component parameters required for the project and use the Vuex mode to manage the component status;

[0008] Use the Lodash tool library to deep copy the required reused components based on the component list in the component parameter;

[0009] Performing data serialization processing on each of the multiplexed components to obtain data of each component to be processed;

[0010] Replacing ID-related parameters of each component data to be processed based on preset rules;

[0011] Decoupling events of each component data to be processed by using an observer pattern, and processing nested tasks in each component data to be processed by using a recursive algorithm;

[0012] Perform message subscription updates, device resource updates, API resource updates, and page resource updates on each of the component data to be processed;

[0013] Updating the variable mapping relationship of the preset processing mode for each component data to be processed based on the component type;

[0014] CSS style modularization and style isolation are performed on each component data to be processed, each target component data is obtained, and component registration is performed on each target component data.

[0015] In an optional implementation of the first aspect of the present invention, the replacing of ID-related parameters of each component data to be processed based on a preset rule includes:

[0016] Based on the current page ID in the component parameter, the page ID parameter of each component data to be processed is replaced by using a regular expression;

[0017] Generate a unique ID for each component data to be processed using the nanoid library according to the custom character set and the original ID length to replace the component ID parameter;

[0018] Replacing the variable ID parameters of each component data to be processed by mapping table management;

[0019] The event ID parameters of each component data to be processed are replaced through the event delegation mode.

[0020] In an optional implementation of the first aspect of the present invention, the updating of message subscriptions, device resources, API resources, and page resources for each of the to-be-processed component data includes:

[0021] Use the observer pattern to obtain specified information to subscribe to and update the message data of each component to be processed;

[0022] Update the device resources of each component data to be processed by using resource pool management to obtain resources;

[0023] Use RESTful interface adapter to update API resources for each component data to be processed and unify the interface style;

[0024] The page resources of each component data to be processed are updated using a difference detection strategy, incremental update and batch processing.

[0025] In an optional implementation of the first aspect of the present invention, the updating of the variable mapping relationship of the preset processing mode based on the component type for each component data to be processed includes:

[0026] For a composite component, a mapping object is initialized to store the mapping relationship between the old and new IDs of subcomponent variables. By traversing the variable data of each subcomponent in the composite component data, a new ID is generated for each variable data of the subcomponent, and the mapping relationship between the old and new IDs is stored in the mapping object. Then, the variable data of the remaining subcomponents is recursively processed by calling the same method.

[0027] For form components, the form components are updated through form validation and data two-way binding to achieve real-time synchronization between form component data and views;

[0028] For basic components, the store container is used to centrally manage component status and maintain variable mapping relationships.

[0029] In an optional implementation of the first aspect of the present invention, performing CSS style modularization and style isolation on each component data to be processed includes:

[0030] Deconstruct the relevant properties of the style settings from the style object passed in by the component data to be processed, and then create a new clone style object to store the copied and processed style information. For each style ID in the ID list, generate a new unique clone ID through the generateID function, and use the getStyleById function to obtain the corresponding style object. The style object is cloned and added to the style setting object. At the same time, the new clone ID is added to the ID list of the cloned style. If the currently processed style ID is the same as the active ID of the relevant properties, the active ID of the cloned style is set to the newly generated clone ID.

[0031] In an optional implementation of the first aspect of the present invention, performing data serialization processing on each of the multiplexed components to obtain data of each component to be processed includes:

[0032] For a specific type of simple object in the reuse component, convert the properties of the simple object into a string in a specific format by overriding the toString method of the simple object;

[0033] For non-specific type complex objects in the reused component, a custom serialization function is written according to the structure and characteristics of the complex objects to convert the complex objects into strings in a specific format.

[0034] In an optional implementation manner of the first aspect of the present invention, registering each target component data includes:

[0035] Add each target component data to the state through Vuex's store.commit to complete component registration;

[0036] A new component of each target component data is created in the component library by updating the component ID, and the configuration information of the new component corresponding to the original component is restored.

[0037] A second aspect of the present invention provides a processing system for reusing low-code platform components, the processing system for reusing low-code platform components comprising:

[0038] The component parameter acquisition module is used to obtain the component parameters required by the project and use the Vuex mode to manage the component status;

[0039] The component copy module is used to use the Lodash tool library to deep copy the required reused components based on the component list in the component parameter;

[0040] A data serialization module is used to perform data serialization processing on each of the multiplexed components to obtain data of each component to be processed;

[0041] An ID replacement module, configured to replace ID-related parameters of each component data to be processed based on preset rules;

[0042] An event processing module, configured to perform event decoupling on each of the component data to be processed through an observer pattern, and to process nested tasks in each of the component data to be processed using a recursive algorithm;

[0043] A resource processing module, configured to update message subscriptions, device resources, API resources, and page resources for each component data to be processed;

[0044] A mapping update module, configured to update variable mapping relationships of preset processing modes for each component data to be processed based on the component type;

[0045] The style processing and component registration module is used to perform CSS style modularization and style isolation on each of the component data to be processed, obtain each target component data, and register each of the target component data.

[0046] A third aspect of the present invention provides a processing device for reusing low-code platform components, the processing device for reusing low-code platform components comprising: a memory and at least one processor, the memory storing instructions, the memory and the at least one processor being interconnected via a line;

[0047] The at least one processor calls the instructions in the memory so that the processing device of the low-code platform component reuse executes the processing method of low-code platform component reuse as described in any one of the first aspects of the present invention.

[0048] In the fourth aspect of the present invention, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the processing method for reusing low-code platform components as described in any one of the first aspect of the present invention is implemented.

[0049] Beneficial effects: The present invention provides a processing method, system and related equipment for component reuse on a low-code platform. The method includes obtaining component parameters of a project and using the Vuex mode to manage component status; using the Lodash library to deeply copy the reused components; serializing the data of the reused components to obtain component data to be processed; replacing ID-related parameters of the component data to be processed based on preset rules; decoupling events for the component data to be processed through the observer mode and using a recursive algorithm to process nested tasks; subscribing to messages, updating device resources, API resources and page resources for the component data to be processed; updating the variable mapping relationship of the preset processing method for the component data to be processed based on the component type; modularizing and isolating the CSS style of the component data to be processed, obtaining the target component data and registering it. The present invention realizes the automatic processing of component IDs, dependencies, associated resources and nested structures in the component reuse process. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 A schematic diagram of an embodiment of a method for reusing components of a low-code platform according to the present invention;

[0051] Figure 2 A schematic diagram of an embodiment of a processing system for reusing low-code platform components according to the present invention;

[0052] Figure 3 A schematic diagram of an embodiment of a processing device for reusing low-code platform components of the present invention. DETAILED DESCRIPTION

[0053] The terms "first," "second," "third," "fourth," and so on (if any) in the description and claims of the present invention and in the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate, so that the embodiments described herein can be implemented in an order other than that shown or described herein. In addition, the terms "including" or "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus that includes a series of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, product, or apparatus.

[0054] For ease of understanding, the specific process of the embodiment of the present invention is described below. Figure 1 The first aspect of the present invention provides a processing method for reusing low-code platform components, including:

[0055] S100. Obtain the component parameters required for the project and use the Vuex mode to manage the component status; in the present invention, the component parameters mainly include the current page ID, component list, variable pool, message list, device resources, page information and API resources, and use Vuex to manage the state specification, and use store to store status and operations. The Vuex state management specification mainly uses Vuex to centrally manage core states such as the current page ID and component list parameters to ensure data consistency and traceability. This technical means can prevent data confusion and facilitate system maintenance and function expansion. For example, when adding new pages or components later, they can be quickly integrated into the state management system based on the specification.

[0056] In other optional implementations of the present invention, the present invention can also use Vue's responsive principle to replace Vuex, that is, it can directly use Vue's responsive data binding to define the state that needs to be shared in the root component or a common parent component, and use provide / inject or event bus to realize the transfer and sharing of state between different components. This can reduce the introduction of Vuex, and for some simple applications, it may be more lightweight. Or you can use other state management libraries: such as Redux, MobX, etc., which each have their own characteristics. Redux has a strict one-way data flow and is suitable for state management of large and complex applications. MobX implements state management through observable objects and automatic tracking of dependencies, which is relatively more flexible and concise.

[0057] S200. Using the Lodash tool library to deep copy the required reused components based on the component list in the component parameters; in the present invention, using the Lodash deep copy to clone the components can ensure that the original data is not modified and the new and old component data do not affect each other.

[0058] S300: Serialize the data of each of the multiplexed components to obtain the data of each component to be processed. In the present invention, the component data of the copied multiplexed components is serialized to facilitate ID replacement, data isolation, reduce object traversal times, and simplify data processing logic, thereby achieving performance optimization. The combination of steps S200 and S300 of the present invention can effectively ensure the accuracy of data operations and the efficiency of system response, especially when updating a large number of components, reducing lag caused by improper data processing.

[0059] In an optional embodiment of step S300 of the present invention, serializing the data of each reusable component to obtain the data for each component to be processed includes: for simple objects of a specific type (such as array objects and date objects) within the reusable component, overriding the toString method of the simple object to convert the properties of the simple object into a string in a specific format; and for complex objects of non-specific types (i.e., non-simple objects) within the reusable component, writing a custom serialization function based on the structure and characteristics of the complex object to convert the complex object into a string in a specific format. By combining these two data serialization methods, the present invention provides greater flexibility and improves data serialization efficiency.

[0060] S400. Replace the ID-related parameters of each component data to be processed based on preset rules; in an optional implementation of step S400 of the present invention, the replacement of the ID-related parameters of each component data to be processed based on preset rules includes: replacing the page ID parameters of each component data to be processed based on the current page ID in the component parameters and using regular expressions; replacing the component ID parameters by generating a unique ID for each component data to be processed through the nanoid library according to a custom character set and the original ID length; replacing the variable ID parameters of each component data to be processed through a mapping table management method; replacing the event ID parameters of each component data to be processed through an event delegation mode.

[0061] Specifically, the technical solution of the present invention uses different replacement methods for different ID types. Page ID replacement uses regular expression global replacement. Component ID replacement generates a non-sequential unique ID (corresponding to the replaceId function) through nanoid based on a custom character set plus a configured ID length. Variable ID replacement is managed by a mapping table to ensure data consistency. Event ID replacement is handled through the event delegation mode. Time processing and specific implementation are separated according to event bubbling control. The unique ID generation strategy of the present invention uses a custom character set combined with nanoid to generate a non-sequential, unique ID. At the same time, it uses regular expressions, mapping tables, and other methods to achieve efficient replacement of page IDs, component IDs, variable IDs, and the like. The above technical means ensure the unique identification of each element in the system, avoid system errors caused by ID conflicts, and ensure the independence of components and the accuracy of data associations.

[0062] S500. Decouple the events of each component data to be processed by the observer pattern, and use a recursive algorithm to process the nested tasks in each component data to be processed; in the present invention, the event processing pattern uses the observer pattern to realize the decoupling of the event processor, and processes various events by traversing the event array; when necessary, the event delegation pattern can be used to handle event ID replacement, separating the event processing logic from the specific implementation. Protecting these patterns can enhance the scalability and maintainability of the system. When adding new event types or modifying the event processing logic, there is no need to significantly change the overall architecture. Recursive processing of nested tasks: A recursive algorithm is used to process the tree structure of nested tasks to ensure that complex task relationships are correctly handled. Protecting this technical means can ensure the stability and accuracy of the system when processing multi-level tasks, such as in processing workflow scenarios containing multi-level subtasks, to avoid task loss or execution errors.

[0063] In another optional embodiment of the present invention, for event processing, the publish-subscribe model can also be used instead of the observer model: the publish-subscribe model is similar to the observer model, but more loosely coupled. A special publish-subscribe library, such as pubsub-js, can be used to implement event publishing and subscription. In the component, other components are notified to perform corresponding processing by publishing events. Or use Vue's $emit and $on methods: in the Vue component, you can use the $emit method to trigger custom events and use the $on method to listen to events. This method is Vue's built-in event handling mechanism, which is closely integrated with Vue's component system and is more convenient to use.

[0064] S600, performing message subscription updates, device resource updates, API resource updates, and page resource updates on each of the component data to be processed; in an optional implementation of step S600 of the present invention, performing message subscription updates, device resource updates, API resource updates, and page resource updates on each of the component data to be processed includes: performing message subscription updates on each of the component data to be processed by using an observer pattern to obtain specified information; performing device resource updates on each of the component data to be processed by using resource pool management to obtain resources; performing API resource updates on each of the component data to be processed and unifying the interface style using a RESTful interface adapter; performing page resource updates on each of the component data to be processed by using a difference detection strategy, incremental updates, and batch processing.

[0065] Specifically, the technical solution of the present invention also adopts different ways to perform update processing for different types of associated resources. The message subscription mechanism implements message subscription updates based on the observer pattern, ensuring that the system can obtain specified information in a timely manner and improve the efficiency of information transmission. Protecting this mechanism can guarantee real-time communication between modules of the system. For example, in scenarios such as real-time notification and status synchronization, related modules can respond to messages in a timely manner; the device resource pool technology uses resource pools to manage device resources, reduce resource creation and destruction overhead, and achieve rapid resource acquisition and reuse. Protecting this technical means helps to improve system performance and resource utilization, and avoid resource exhaustion and performance bottlenecks in scenarios with high concurrent access to device resources; the API interface adaptation uses RESTful interface adaptation to update API resources, unify the interface style, and take advantage of its good caching mechanism, high scalability, and easy testing and maintenance features. Protecting this technical means can ensure the stability and efficiency of the system's interaction with external services, and reduce the risks brought by interface upgrades or replacements; the page resource update strategy logic is divided into difference detection strategy, such as serialization based on comparison, incremental update and batch processing. The present invention implements virtual DOM updates through deep cloning of original data, serializing component status, establishing update mapping and other steps, and combines difference detection strategy for incremental update and batch processing, reducing unnecessary rendering and improving page performance. Protecting this strategy can optimize user experience and avoid page flickering or freezing caused by frequent redrawing and reflow.

[0066] S700. Update the variable mapping relationship of each component data to be processed in a preset processing mode based on the component type; in an optional implementation of step S700 of the present invention, the update of the variable mapping relationship of each component data to be processed in a preset processing mode based on the component type includes: for composite components, initialize a mapping object (such as subComponentVariableMap) to store the new and old ID mapping relationship of sub-component variables, traverse the variable data (variableData) of each sub-component in the composite component data (subComponentData), generate a new ID for each variable data for each sub-component, and store the new and old ID mapping relationship in the mapping object, and then recursively process the variable data of the remaining sub-components by calling the same method; for form components, update the form components through form validation and data two-way binding to achieve real-time synchronization of form component data and view; for basic components, centrally manage component status and maintain variable mapping relationships through the store container.

[0067] Specifically, the composite component of the present invention recursively processes the initialized mapping relationship to store the subcomponent variable ID, and processes the subcomponent by recursively calling the same method to ensure the consistency of the composite component and its subcomponents. This technical means is conducive to the management and reuse of complex component structures, such as when building multi-level menu components and tree structure components, ensuring the correctness of component rendering and interaction. Form validation and two-way binding ensure data integrity and consistency through form validation, and use data two-way binding to achieve real-time synchronization of Form component data and views. The above-mentioned technology of the present invention can generally improve the accuracy of user input data, enhance the smoothness of form interaction, reduce business anomalies caused by data errors, ID mapping and tracing, and establish a mapping relationship between the original ID and the new ID during the ID update process to facilitate subsequent operations and data tracing. This mechanism helps to accurately find the corresponding relationship in scenarios such as system debugging and data migration, thereby reducing maintenance costs.

[0068] S800: Perform CSS style modularization and style isolation on each component data to be processed, obtain each target component data, and register each target component data. The technical solution of the present invention uses strategies such as style inheritance and style set updates to manage component styles. For example, this can be achieved through technologies such as CSS preprocessors and CSS-in-JS. This technical approach helps maintain the consistency of the system interface style and facilitates unified style adjustment and personalized customization.

[0069] In an optional implementation of step S800 of the present invention, the CSS style modularization and style isolation of each of the component data to be processed include: deconstructing the relevant attributes of the style setting from the style object passed in by the component data to be processed, and then creating a new clone style object to store the copied and processed style information, for each style ID in the ID list, generating a new unique clone ID through the generateID function, and using the getStyleById function to obtain the corresponding style object, cloning the style object and adding it to the style setting object, and adding the new clone ID to the ID list of the clone style, if the style ID currently being processed is the same as the active ID of the relevant attribute, then the active ID of the clone style is set to the newly generated clone ID.

[0070] Specifically, when copying a style, the technical solution of the present invention first deconstructs the relevant properties of styleOptions from the object passed in by the component data, including activeId, defaultStyle and idList. Then a new cloneStyle object is created to store the copied and processed style information. For each style ID in the idList, a new unique IDcloneId is generated by the generateID function, and the corresponding style object styles is obtained using the getStyleById function, which is cloned and added to the styleSet object, and the new IDcloneId is added to the idList of cloneStyle. If the currently processed style ID is equal to the activeId, the activeId of cloneStyle is set to the newly generated cloneId. Finally, the processed cloneStyle is assigned as the new styleOptions to the componentParse component. For example, the new style options are set to the component via window.$vm.$set(componentParse,'styleOptions',styleOption). This achieves style replication and ID update, achieving the purpose of style isolation. The style isolation method of the present invention ensures that different components are isolated from each other, allowing for reuse of common styles, improving code maintainability. The style set update of the present invention can use dynamic style injection, enhancing component flexibility, improving code maintainability, and optimizing performance.

[0071] In an optional implementation of step S800 of the present invention, the component registration of each target component data includes: adding each target component data to the state through Vuex's store.commit to complete component registration; creating a new component for each target component data in the component library by updating the component ID, and restoring the configuration information of the new component corresponding to the original component.

[0072] Specifically, after the present invention obtains the updated target component data based on the project parameters, the data can be added to the page component. The component registration mechanism of the present invention mainly adds the component information to the state through Vuex's store.commit to complete the component registration, thereby improving the reusability of the component, facilitating management and maintenance, and realizing dynamic loading of the component. Furthermore, in order to use it again next time, the updated target component data can also be added to the component library. The component reuse strategy adopts to create a new component by updating the component ID and restoring the configuration information of the original component. The present invention deeply copies the component and then uses regular replacement ID while retaining the configuration information of the meta-component, so that there will be no conflict.

[0073] In summary, the technical solution of the present invention is used in development scenarios including but not limited to the following:

[0074] Web Application Development: Single-Page Applications (SPAs): Utilizing Vuex for state management, it efficiently handles complex page states, such as the current page ID and component list parameters. Virtual DOM update strategies and two-way data binding enable efficient page rendering and interaction, enhancing the user experience. For example, developing a large-scale enterprise management system can utilize these technologies to enable state sharing between modules and dynamic component updates. Form-driven Applications: Form validation and two-way data binding within the Form component ensure the accuracy and real-time nature of user-entered data, making them suitable for a variety of scenarios requiring user input, such as registration and login forms and order entry forms.

[0075] Mobile Application Development: Hybrid Apps: Apply the above technologies to HTML5-based hybrid app development, building mobile interfaces through frameworks like Vue.js. Utilizing state management and component-based development, the application's performance and maintainability are improved. For example, when developing a shopping mobile app, these technologies can be used to manage states like product lists and shopping carts, as well as implement form validation and two-way data binding for user convenience. Cross-platform applications (such as using Vue Native): Leveraging relevant technologies to achieve cross-platform mobile app development, a single set of code can run on multiple platforms. Basic component processing and style processing techniques are utilized to ensure interface consistency and user experience across different platforms.

[0076] Visual design and development tools: Page building tools: This tool is used to develop visual page builders. Users can quickly create pages by dragging and dropping components and configuring parameters. Leveraging technologies such as component lifecycle management and ID updates, it enables dynamic addition, deletion, and property modification of components, as well as real-time preview and updates of pages. Design system development: Through style processing techniques such as style inheritance and style set updates, a unified design system can be built, ensuring style consistency across different components and pages. This facilitates collaboration between designers and developers and improves design and development efficiency.

[0077] Data Management and Analysis Platform: Data Visualization Components: Within the data management and analysis platform, component-based development and state management techniques are used to build data visualization components, such as charts and reports. Bidirectional data binding and virtual DOM update strategies enable real-time data updates and efficient rendering of visual displays, helping users quickly analyze data. Data Editing and Processing Forms: Utilizing Form component processing and form validation techniques, data editing and processing forms are created to ensure that user-entered data complies with specifications and improve data quality. For example, in the data entry interface, form validation prevents illegal data entry, and bidirectional data binding enables real-time updates of the data model.

[0078] Internet of Things (IoT) Applications: Device Management Interface: This interface is used to build a management interface for IoT devices. It manages device resources and page information through Vuex state management. It uses message subscription and update technology to obtain real-time device status information, such as the device's operating status and sensor data. It also uses page resource update strategies to achieve real-time updates to the interface, making it easier for users to monitor and manage devices. Device Configuration Form: Using Form component processing technology to create a device configuration form, users can enter device configuration parameters, such as network parameters and sensor thresholds, through the form. Form validation and two-way data binding technology ensure the accuracy and real-time nature of the configuration data, improving the efficiency and reliability of device configuration.

[0079] See also Figure 2 A second aspect of the present invention provides a processing system for reusing low-code platform components, the processing system for reusing low-code platform components comprising:

[0080] Component parameter acquisition module 10 is used to obtain the component parameters required by the project and use the Vuex mode to manage the component status;

[0081] A component copy module 20 is used to use the Lodash tool library to deep copy the required reused components based on the component list in the component parameter;

[0082] The data serialization module 30 is used to perform data serialization processing on each of the multiplexed components to obtain data of each component to be processed;

[0083] An ID replacement module 40 is configured to replace ID-related parameters of each component data to be processed based on preset rules;

[0084] An event processing module 50 is configured to perform event decoupling on each of the component data to be processed by using an observer pattern, and to process nested tasks in each of the component data to be processed by using a recursive algorithm;

[0085] The resource processing module 60 is used to update message subscriptions, device resources, API resources, and page resources for each component data to be processed;

[0086] A mapping update module 70 is configured to update variable mapping relationships of the component data to be processed in a preset processing mode based on the component type;

[0087] The style processing and component registration module 80 is used to perform CSS style modularization and style isolation on each of the component data to be processed, obtain each target component data, and register each of the target component data.

[0088] In an optional implementation of the second aspect of the present invention, the ID replacement module includes:

[0089] A page ID parameter replacement unit, configured to replace the page ID parameter of each component data to be processed based on the current page ID in the component parameter and using a regular expression;

[0090] A component ID parameter replacement unit is used to generate a unique ID for each component data to be processed through a nanoid library according to a custom character set and the original ID length to replace the component ID parameter;

[0091] A variable ID parameter replacement unit, configured to replace the variable ID parameters of each component data to be processed by means of a mapping table management method;

[0092] The event ID parameter replacement unit is used to replace the event ID parameter of each component data to be processed through the event delegation mode.

[0093] In an optional implementation of the second aspect of the present invention, the resource processing module includes:

[0094] A message subscription updating unit, configured to update the message subscription of each component data to be processed by using an observer pattern to obtain specified information;

[0095] A device resource updating unit, configured to update the device resources of each component data to be processed by using a resource pool management method to obtain resources;

[0096] An API resource updating unit, configured to use a RESTful interface adapter to update the API resources of each component data to be processed and unify the interface style;

[0097] The page resource updating unit is used to update the page resources of each of the to-be-processed component data by using a difference detection strategy, incremental update and batch processing.

[0098] In an optional implementation of the second aspect of the present invention, the mapping update module includes:

[0099] The composite component processing unit is configured to initialize a mapping object for storing the mapping relationship between the old and new IDs of subcomponent variables in the composite component, traverse the variable data of each subcomponent in the composite component data, generate a new ID for each variable data of the subcomponent, store the mapping relationship between the old and new IDs in the mapping object, and then recursively process the variable data of the remaining subcomponents by calling the same method;

[0100] A form component processing unit is used to update the form component through form validation and two-way data binding to achieve real-time synchronization between form component data and view;

[0101] The basic component processing unit is used to centrally manage component status and maintain variable mapping relationships for basic components through the store container.

[0102] In an optional implementation of the second aspect of the present invention, the style processing and component registration module includes:

[0103] A style processing unit is configured to deconstruct the relevant attributes of the style setting from the style object passed in by the component data to be processed, and then create a new clone style object to store the copied and processed style information. For each style ID in the ID list, a new unique clone ID is generated by the generateID function, and the corresponding style object is obtained by using the getStyleById function. The style object is cloned and added to the style setting object, and the new clone ID is added to the ID list of the clone style. If the style ID currently being processed is the same as the active ID of the relevant attribute, the active ID of the clone style is set to the newly generated clone ID.

[0104] In an optional implementation of the second aspect of the present invention, the data serialization module includes:

[0105] A simple object processing unit, configured to convert properties of a specific type of simple object in the reuse component into a string in a specific format by overriding the toString method of the simple object;

[0106] The load object processing unit is used to write a custom serialization function for the non-specific type of complex object in the reuse component according to the structure and characteristics of the complex object, and convert the complex object into a string of a specific format.

[0107] In an optional implementation of the second aspect of the present invention, the style processing and component registration module further includes:

[0108] The page component registration unit is used to add the target component data to the state through Vuex's store.commit to complete the component registration;

[0109] The component library registration unit is used to create new components of each target component data in the component library by updating the component ID, and restore the configuration information of the new component corresponding to the original component.

[0110] Figure 3 It is a structural diagram of a processing device for reusing low-code platform components provided by an embodiment of the present invention. The processing device for reusing low-code platform components may have relatively large differences due to different configurations or performances, and may include one or more processors 90 (central processing units, CPU) (for example, one or more processors) and memory 100, and one or more storage media 110 for storing applications or data (for example, one or more mass storage devices). Among them, the memory and storage medium can be short-term storage or persistent storage. The program stored in the storage medium may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the processing device for reusing low-code platform components. Furthermore, the processor may be configured to communicate with the storage medium and execute a series of instruction operations in the storage medium on the processing device for reusing low-code platform components.

[0111] The processing device for reusing components of the low-code platform of the present invention may also include one or more power supplies 120, one or more wired or wireless network interfaces 130, one or more input and output interfaces 140, and / or one or more operating systems, such as Windows Serve, Mac OS X, Unix, Linux, FreeBSD, etc. It will be understood by those skilled in the art that Figure 3The processing device structure for reusing low-code platform components shown does not constitute a limitation on the processing device for reusing low-code platform components. It may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.

[0112] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions are run on a computer, the computer executes the steps of the processing system for reusing low-code platform components.

[0113] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working process of the above-described system or system or unit can refer to the corresponding process in the aforementioned method embodiment and will not be repeated here.

[0114] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a processing device reused by low-code platform components, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk and other media that can store program code.

[0115] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that the technical solutions described in the above embodiments can still be modified, or some of the technical features thereof can be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A processing method for reusing low-code platform components, characterized in that: include: Get the component parameters required for the project and use the Vuex mode to manage the component status; Use the Lodash tool library to deep copy the required reused components based on the component list in the component parameter; Performing data serialization processing on each of the multiplexed components to obtain data of each component to be processed; Replacing ID-related parameters of each component data to be processed based on preset rules; Decoupling events of each component data to be processed by using an observer pattern, and processing nested tasks in each component data to be processed by using a recursive algorithm; Perform message subscription updates, device resource updates, API resource updates, and page resource updates on each of the component data to be processed; Updating the variable mapping relationship of the preset processing mode for each component data to be processed based on the component type; Performing CSS style modularization and style isolation on each component data to be processed, obtaining each target component data, and performing component registration on each target component data; The replacing of ID-related parameters of each component data to be processed based on preset rules includes: Based on the current page ID in the component parameter, the page ID parameter of each component data to be processed is replaced by using a regular expression; Generate a unique ID for each component data to be processed using the nanoid library according to the custom character set and the original ID length to replace the component ID parameter; Replacing the variable ID parameters of each component data to be processed by mapping table management; Replacing the event ID parameters of each component data to be processed through the event delegation mode; The updating of the variable mapping relationship of the preset processing mode based on the component type for each component data to be processed includes: For a composite component, a mapping object is initialized to store the mapping relationship between the old and new IDs of subcomponent variables. By traversing the variable data of each subcomponent in the composite component data, a new ID is generated for each variable data of the subcomponent, and the mapping relationship between the old and new IDs is stored in the mapping object. Then, the variable data of the remaining subcomponents is recursively processed by calling the same method. For form components, the form components are updated through form validation and data two-way binding to achieve real-time synchronization between form component data and views; For basic components, the store container is used to centrally manage component status and maintain variable mapping relationships.

2. The processing method for reusing low-code platform components according to claim 1 is characterized in that: The updating of message subscription, device resource, API resource and page resource for each component data to be processed includes: Use the observer pattern to obtain specified information to subscribe to and update the message data of each component to be processed; Update the device resources of each component data to be processed by using resource pool management to obtain resources; Use RESTful interface adapter to update API resources for each component data to be processed and unify the interface style; The page resources of each component data to be processed are updated using a difference detection strategy, incremental update and batch processing.

3. The processing method for reusing low-code platform components according to claim 1 is characterized in that: The performing CSS style modularization and style isolation on each component data to be processed includes: Deconstruct the relevant properties of the style settings from the style object passed in by the component data to be processed, and then create a new clone style object to store the copied and processed style information. For each style ID in the ID list, generate a new unique clone ID through the generateID function, and use the getStyleById function to obtain the corresponding style object. The style object is cloned and added to the style setting object. At the same time, the new clone ID is added to the ID list of the cloned style. If the currently processed style ID is the same as the active ID of the relevant properties, the active ID of the cloned style is set to the newly generated clone ID.

4. The processing method for reusing low-code platform components according to claim 1 is characterized in that: The performing data serialization processing on each of the multiplexed components to obtain the data of each component to be processed includes: For a specific type of simple object in the reuse component, convert the properties of the simple object into a string in a specific format by overriding the toString method of the simple object; For non-specific type complex objects in the reused component, a custom serialization function is written according to the structure and characteristics of the complex objects to convert the complex objects into strings in a specific format.

5. The processing method for reusing low-code platform components according to claim 1 is characterized in that: Registering each target component data includes: Add each target component data to the state through Vuex's store.commit to complete component registration; A new component of each target component data is created in the component library by updating the component ID, and the configuration information of the new component corresponding to the original component is restored.

6. A processing system for reusing low-code platform components, characterized in that: The processing system for reusing low-code platform components includes: The component parameter acquisition module is used to obtain the component parameters required by the project and use the Vuex mode to manage the component status; The component copy module is used to use the Lodash tool library to deep copy the required reused components based on the component list in the component parameter; A data serialization module is used to perform data serialization processing on each of the multiplexed components to obtain data of each component to be processed; An ID replacement module, configured to replace ID-related parameters of each component data to be processed based on preset rules; An event processing module, configured to perform event decoupling on each of the component data to be processed through an observer pattern, and to process nested tasks in each of the component data to be processed using a recursive algorithm; A resource processing module, configured to update message subscriptions, device resources, API resources, and page resources for each component data to be processed; A mapping update module, configured to update variable mapping relationships of preset processing modes for each component data to be processed based on the component type; The style processing and component registration module is used to perform CSS style modularization and style isolation on each component data to be processed, obtain each target component data, and register each target component data; The ID replacement module includes: A page ID parameter replacement unit, configured to replace the page ID parameter of each component data to be processed based on the current page ID in the component parameter and using a regular expression; A component ID parameter replacement unit is used to generate a unique ID for each component data to be processed through a nanoid library according to a custom character set and the original ID length to replace the component ID parameter; A variable ID parameter replacement unit, configured to replace the variable ID parameters of each component data to be processed by means of a mapping table management method; An event ID parameter replacement unit, configured to replace the event ID parameters of each component data to be processed through an event delegation mode; The mapping update module includes: The composite component processing unit is configured to initialize a mapping object for storing the mapping relationship between the old and new IDs of subcomponent variables in the composite component, traverse the variable data of each subcomponent in the composite component data, generate a new ID for each variable data of the subcomponent, store the mapping relationship between the old and new IDs in the mapping object, and then recursively process the variable data of the remaining subcomponents by calling the same method; A form component processing unit is used to update the form component through form validation and two-way data binding to achieve real-time synchronization between form component data and view; The basic component processing unit is used to centrally manage component status and maintain variable mapping relationships for basic components through the store container.

7. A processing device for reusing low-code platform components, characterized in that: The processing device reused by the low-code platform component includes: a memory and at least one processor, the memory storing instructions, the memory and the at least one processor being interconnected via a line; The at least one processor calls the instructions in the memory so that the processing device of the low-code platform component reuse executes the processing method of the low-code platform component reuse as described in any one of claims 1-5.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, it implements the processing method for reusing low-code platform components as described in any one of claims 1 to 5.

Images