Low-code platform component multiplexing processing method and system and related equipment

Abstract

The invention provides a processing method and system for multiplexing low-code platform components and related equipment. The method comprises the following steps: acquiring project component parameters and managing component states by using a Vuex mode; deeply copying the multiplexing component by using a Loash library; performing data serialization on the multiplexing component to obtain to-be-processed component data; carrying out ID related parameter replacement on the to-be-processed component data based on a preset rule; performing event decoupling on the to-be-processed component data through an observer mode, and processing a nested task by using a recursive algorithm; performing message subscription, equipment resource updating, API resource updating and page resource updating on the to-be-processed component data; performing variable mapping relation updating of a preset processing mode on the to-be-processed component data based on the component type; and performing CSS style modularization and style isolation on the to-be-processed component data to obtain target component data, and registering the target component data. According to the method, the automatic processing of the component ID, the dependency relationship, the associated resources and the nested structure in the component multiplexing process is realized.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular, to a processing method, system and related devices for component reuse in a low-code platform. Background Art

[0002] With the increasing demand of enterprises for rapid application development, the low-code platform, as a tool that can significantly improve development efficiency, has gradually gained market favor. The low-code platform reduces the complexity of programming by providing pre-built components and a visual development environment, enabling non-professional developers to participate in the development of application programs.

[0003] However, the component reuse methods of traditional low-code platforms have technical problems such as system conflicts caused by duplicate component IDs, complex dependencies between components, high manual maintenance costs, difficult synchronous updates of associated resources (variables, events, styles, etc.), and difficulty in ensuring the integrity of the component nesting structure.

[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 devices for component reuse in a low-code platform. The main purpose of the present invention is to solve the technical problems mentioned in the background art of the existing technology.

[0006] The first aspect of the present invention provides a processing method for component reuse in a low-code platform, including: Obtaining the component parameters required for a project and using the Vuex mode to manage the component state; Using the Lodash tool library to deeply copy the required reusable components based on the component list in the component parameters; Performing data serialization processing on each of the reusable components to obtain data of each component to be processed; Replacing the ID-related parameters of each of the component data to be processed based on preset rules; Decoupling events of each of the component data to be processed through the observer mode, and using a recursive algorithm to process the nested tasks in each of the component data to be processed; Performing 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 method for each of the component data to be processed based on the component type; Performing CSS style modularization and style isolation on each of the component data to be processed to obtain data of each target component, and registering each of the target component data.

[0007] In an alternative embodiment of the first aspect of the present invention, the replacement of ID-related parameters for each of the to-be-processed component data based on preset rules includes: Based on the current page ID in the component parameters and using regular expressions to replace the page ID parameters of each of the to-be-processed component data; According to a custom character set and in combination with the original ID length, generate unique IDs for each of the to-be-processed component data through the nanoid library for component ID parameter replacement; Replace the variable ID parameters of each of the to-be-processed component data through a mapping table management method; Replace the event ID parameters of each of the to-be-processed component data through an event delegation mode.

[0008] In an alternative embodiment of the first aspect of the present invention, the message subscription update, device resource update, API resource update, and page resource update for each of the to-be-processed component data include: Use the observer pattern to obtain specified information to perform message subscription updates for each of the to-be-processed component data; Use the resource pool management to obtain resources to perform device resource updates for each of the to-be-processed component data; Use RESTful interface adaptation to perform API resource updates for each of the to-be-processed component data and unify the interface style; Use a difference detection strategy, incremental update, and batch processing to perform page resource updates for each of the to-be-processed component data.

[0009] In an alternative embodiment of the first aspect of the present invention, the update of the variable mapping relationship of the preset processing method for each of the to-be-processed component data based on the component type includes: For composite components, initialize a mapping object to store the old and new ID mapping relationships of sub-component variables. By traversing the variable data of each sub-component in the composite component data, for each sub-component, generate a new ID for each variable data, and store the old and new ID mapping relationships 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 two-way data binding to achieve real-time synchronization between form component data and the view; For basic components, centrally manage the component state through a store container and maintain the variable mapping relationship.

[0010] In an alternative embodiment of the first aspect of the present invention, the CSS style modularization and style isolation for each of the to-be-processed component data include: Deconstruct the relevant attributes of the style settings from the style object passed in from the component data to be processed, and then create a new cloned style object to store the copied and processed style information. For each style ID in the ID list, generate a new unique cloned ID through the generateID function, and use the getStyleById function to obtain the corresponding style object. After cloning the style object, add it to the style setting object, and at the same time add the new cloned ID to the ID list of the cloned style. If the currently processed style ID is the same as the active ID of the relevant attributes, set the active ID of the cloned style to the newly generated cloned ID.

[0011] In an alternative embodiment of the first aspect of the present invention, the data serialization process for each of the reusable components to obtain each component data to be processed includes: For simple objects of a specific type in the reusable component, by overriding the toString method of the simple object, convert the attributes of the simple object into a string in a specific format; For complex objects of non-specific types in the reusable component, according to the structure and characteristics of the complex object, write a custom serialization function to convert the complex object into a string in a specific format.

[0012] In an alternative embodiment of the first aspect of the present invention, the component registration for each of the target component data includes: Add each of the target component data to the state through store.commit of Vuex to complete component registration; Create new components of each of the target component data in the component library by updating the component ID, and at the same time restore the configuration information of the original component corresponding to the new component.

[0013] The second aspect of the present invention provides a processing system for component reuse in a low-code platform. The processing system for component reuse in the low-code platform includes: A component parameter acquisition module, configured to acquire component parameters required for a project and manage component states using the Vuex mode; A component copy module, configured to deeply copy the required reusable components based on the component list in the component parameters using the Lodash tool library; A data serialization module, configured to perform data serialization processing on each of the reusable components to obtain each component data to be processed; An ID replacement module, configured to replace ID-related parameters of each of the component data to be processed based on preset rules; An event processing module, configured to decouple events for each of the to-be-processed component data through the observer pattern, and process nested tasks in each of the to-be-processed component data using a recursive algorithm; A resource processing module, configured to perform message subscription update, device resource update, API resource update, and page resource update on each of the to-be-processed component data; A mapping update module, configured to update the variable mapping relationship of the preset processing method for each of the to-be-processed component data based on the component type; A style processing and component registration module, configured to modularize and isolate CSS styles for each of the to-be-processed component data to obtain each target component data, and register each of the target component data.

[0014] In a third aspect of the present invention, there is provided a processing device for component reuse of a low-code platform. The processing device for component reuse of the low-code platform includes: a memory and at least one processor. Instructions are stored in the memory, and the memory and the at least one processor are interconnected through a line; The at least one processor invokes the instructions in the memory, so that the processing device for component reuse of the low-code platform executes the processing method for component reuse of the low-code platform as described in any one of the first aspects of the present invention.

[0015] In a fourth aspect of the present invention, there is provided a computer-readable storage medium. A computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, it implements the processing method for component reuse of the low-code platform as described in any one of the first aspects of the present invention.

[0016] Advantageous effects: The present invention provides a processing method, system and related device for component reuse of a low-code platform. The method includes obtaining component parameters of a project and managing component states using the Vuex mode; deeply copying and reusing components using the Lodash library; performing data serialization on the reused components to obtain to-be-processed component data; replacing ID-related parameters of the to-be-processed component data based on preset rules; decoupling events for the to-be-processed component data through the observer pattern and processing nested tasks using a recursive algorithm; performing message subscription, device resource, API resource, and page resource updates on the to-be-processed component data; updating the variable mapping relationship of the preset processing method for the to-be-processed component data based on the component type; modularizing and isolating CSS styles for the to-be-processed component data to obtain target component data and registering them. The present invention realizes the automatic processing of component IDs, dependency relationships, associated resources, and nested structures during the component reuse process. Description of the Drawings

[0017] Figure 1Schematic diagram of an embodiment of a method for component reuse in a low-code platform according to the present invention; Figure 2 Schematic diagram of an embodiment of a processing system for component reuse in a low-code platform according to the present invention; Figure 3 Schematic diagram of an embodiment of a processing device for component reuse in a low-code platform according to the present invention. Detailed implementation manners

[0018] The terms "first", "second", "third", "fourth", etc. (if any) in the specification, claims and drawings of the present invention are used to distinguish similar objects and do not necessarily describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments described herein can be implemented in an order other than that illustrated or described herein. In addition, the term "comprising" or "having" and any variation thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device comprising a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0019] For ease of understanding, the specific processes of the embodiments of the present invention are described below. Please refer to Figure 1 In the first aspect of the present invention, a method for component reuse in a low-code platform is provided, including: S100. Obtain the component parameters required for the project and manage the component states using the Vuex mode; 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 the Vuex specification for state management to store the states and operations using store. The Vuex state management specification mainly uses Vuex to centrally manage the core states such as the current page ID and component list parameters to ensure data consistency and traceability. This technical means can prevent data chaos and facilitate system maintenance and function expansion. For example, when adding a new page or component later, it can be quickly integrated into the state management system based on the specification.

[0020] In some alternative embodiments of the present invention, the present invention can also use the reactive principle of Vue to replace Vuex, that is, it can directly utilize the reactive data binding of Vue, define the states to be shared in the root component or a certain common parent component, and implement the transfer and sharing of states between different components through provide / inject or the event bus. This can reduce the introduction of Vuex and may be more lightweight for some simple applications. Or other state management libraries can be used, such as Redux, MobX, etc., each of which has its own characteristics. Redux has a strict one-way data flow and is suitable for the state management of large and complex applications. MobX realizes state management through observable objects and automatic tracking of dependencies, and is relatively more flexible and concise.

[0021] S200. Use the Lodash tool library to deeply copy the reusable components required based on the component list in the component parameters; in the present invention, using Lodash deep copy to clone components can ensure that the original data is not modified and the data of the old and new components does not affect each other.

[0022] S300. Perform data serialization processing on each of the reusable components to obtain each component data to be processed; in the present invention, the component data of the copied reusable components are all serialized, which is convenient for ID replacement, data isolation, reduces the number of object traversals, and simplifies the data processing logic, achieving the effect of performance optimization. The combination of the means in step S200 and step S300 of the present invention can effectively ensure the accuracy of data operations and the system response efficiency. Especially when a large number of components are updated, it reduces the lag caused by improper data processing.

[0023] In an alternative embodiment of step S300 of the present invention, the performing data serialization processing on each of the reusable components to obtain each component data to be processed includes: for simple objects of a specific type (such as array objects and date objects, etc.) in the reusable components, by rewriting the toString method of the simple object, convert the attributes of the simple object into a string in a specific format; for complex objects of a non-specific type (i.e., non-simple objects) in the reusable components, according to the structure and characteristics of the complex object, write a custom serialization function to convert the complex object into a string in a specific format. Through the combination of these two data serialization methods in the present invention, the data serialization is more flexible and the efficiency of data serialization is improved.

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

[0025] Specifically, the technical solution of the present invention uses different replacement methods for different ID types. For page ID replacement, global replacement using a regular expression is adopted. For component ID replacement, non-sequential unique IDs are generated through the nanoid according to a custom character set plus the configured ID length (corresponding to the replaceId function). For variable ID replacement, replacement is carried out through mapping table management to ensure data consistency. For event ID replacement, it is processed through an event delegation mode. The event handling and specific implementation are separated according to event bubbling control. The unique ID generation strategy of the present invention adopts a custom character set combined with the nanoid to generate non-sequential and unique IDs. At the same time, efficient replacement of page IDs, component IDs, variable IDs, etc. is achieved by means of regular expressions, mapping tables, etc. The above technical means guarantee 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 association.

[0026] S500. Decouple events for each piece of the to-be-processed component data through the observer mode, and use a recursive algorithm to process nested tasks in each piece of the to-be-processed component data. In the present invention, the event handling mode uses the observer mode to achieve decoupling of event processors, and various events are processed by traversing the event array. When necessary, the event delegation mode can be used to handle event ID replacement, separating the event handling logic from the specific implementation. Protecting these modes can enhance the scalability and maintainability of the system. When a new event type is added or the event handling logic is modified, there is no need to make major changes to the overall architecture. Recursive processing of nested tasks: For nested tasks, a recursive algorithm is used for tree structure processing to ensure that complex task relationships are correctly processed. Protecting this technical means can ensure the stability and accuracy of the system when processing multi-level tasks. For example, in a workflow scenario involving multi-level subtasks, task loss or execution errors can be avoided.

[0027] In another alternative embodiment of the present invention, for event handling, the publish-subscribe pattern can also be used to replace the observer pattern: The publish-subscribe pattern is similar to the observer pattern but is more loosely coupled. A dedicated publish-subscribe library, such as pubsub-js, can be used to implement event publishing and subscribing. In a component, events are published to notify other components to perform corresponding processing. Or use Vue's $emit and $on methods: In a Vue component, the $emit method can be used to trigger custom events, and the $on method can be used to listen for events. This method is the built-in event handling mechanism of Vue and is closely integrated with Vue's component system, making it relatively convenient to use.

[0028] S600. Perform message subscription update, device resource update, API resource update, and page resource update on each of the to-be-processed component data; In an alternative embodiment of step S600 of the present invention, the performing message subscription update, device resource update, API resource update, and page resource update on each of the to-be-processed component data includes: using the way of obtaining specified information in the observer pattern to perform message subscription update on each of the to-be-processed component data; using the way of resource pool management to obtain resources to perform device resource update on each of the to-be-processed component data; using RESTful interface adaptation to perform API resource update on each of the to-be-processed component data and unify the interface style; using a difference detection strategy, incremental update, and batch processing to perform page resource update on each of the to-be-processed component data.

[0029] Specifically, the technical solution of the present invention also adopts different methods for updating and processing different types of associated resources. The message subscription mechanism realizes message subscription and update based on the observer pattern, ensuring that the system can obtain specified information in a timely manner and improving the information transmission efficiency. Protecting this mechanism can guarantee real-time communication among various modules of the system. For example, in scenarios such as real-time notifications and status synchronization, relevant modules can respond to messages in a timely manner; the device resource pool technology manages device resources using a resource pool, reducing the overhead of resource creation and destruction, and realizing rapid acquisition and reuse of resources. Protecting this technical means helps to improve system performance and resource utilization rate, and avoid resource exhaustion and performance bottlenecks in scenarios with high-concurrency access to device resources; the API interface adaptation uses RESTful interface adaptation for API resource update, unifying the interface style, and taking advantage of its good caching mechanism, high scalability, and characteristics that are convenient for testing and maintenance. 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 a difference detection strategy, such as incremental update and batch processing according to comparison serialization. The present invention realizes virtual DOM update through steps such as deeply cloning the original data, serializing the component state, and establishing an update mapping, and combines the difference detection strategy for incremental update and batch processing, reducing unnecessary rendering and improving page performance. Protecting this strategy can optimize the user experience and avoid page flickering or freezing caused by frequent repainting and reflow.

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

[0031] Specifically, the composite component of the present invention recursively processes and initializes the mapping relationship to store the sub-component variable ID. By recursively calling the same method to process the sub-components, the consistency processing of the composite component and its sub-components is ensured. This technical means is conducive to the management and reuse of complex component structures. For example, when constructing multi-level menu components and tree structure components, the correctness of component rendering and interaction is guaranteed. Form validation and two-way binding ensure data integrity and consistency through form validation, and use two-way data binding to achieve real-time synchronization between the data of the Form component and the view. Generally speaking, the above technologies of the present invention can improve the accuracy of user input data, enhance the fluency of form interaction, and reduce business exceptions caused by data errors. ID mapping and traceability. During the ID update process, a mapping relationship between the original ID and the new ID is established, which is convenient for subsequent operations and data traceability. This mechanism helps to accurately find the corresponding relationship in scenarios such as system debugging and data migration, reducing the maintenance cost.

[0032] S800. Perform CSS style modularization and style isolation on each of the to-be-processed component data to obtain each target component data, and perform component registration on each of the target component data. The technical solution of the present invention adopts strategies such as style inheritance and style set update to manage component styles, which can be realized by technologies such as CSS preprocessors and CSS-in-JS. This technical means helps to maintain the consistency of the system interface style and facilitates unified adjustment and personalized customization of styles.

[0033] In an optional implementation manner of step S800 of the present invention, the performing CSS style modularization and style isolation on each of the to-be-processed component data includes: deconstructing the relevant attributes of the style setting from the style object passed in by the to-be-processed component data, and then creating a new cloned style object for storing the copied and processed style information. For each style ID in the ID list, generate a new unique cloned ID through the generateID function, and use the getStyleById function to obtain the corresponding style object. After cloning the style object, add it to the style setting object, and at the same time add the new cloned ID to the ID list of the cloned style. If the currently processed style ID is the same as the active ID of the relevant attribute, set the active ID of the cloned style to the newly generated cloned ID.

[0034] Specifically, when the technical solution of the present invention performs style copying, it first deconstructs the relevant attributes 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 ID cloneId is generated through the generateID function, and the corresponding style object styles is obtained using the getStyleById function. After cloning it, it is added to the styleSet object, and at the same time, the new ID cloneId 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 used as the new styleOptions and assigned to the component componentParse. For example, the new style options are set on the component through window.$vm.$set(componentParse,'styleOptions', styleOption), thereby realizing style copying and ID update, achieving the purpose of style isolation. Through the method of style isolation of the present invention, it can be ensured that each of different components is isolated from each other, and public styles can be reused among styles, improving the maintainability of the code. The update of the style set of the present invention can adopt dynamic style injection to enhance the flexibility of the component, improve the maintainability of the code, and optimize the performance.

[0035] In an optional implementation manner of step S800 of the present invention, the registering of each of the target component data includes: adding each of the target component data to the state through store.commit of Vuex to complete component registration; creating new components of each of the target component data in the component library by updating the component ID, and at the same time restoring the configuration information of the original component corresponding to the new component.

[0036] Specifically, after the present invention obtains the updated target component data based on project parameters, the data can be added to the page components. The component registration mechanism of the present invention mainly adds component information to the state through store.commit of Vuex to complete component registration, which improves the reusability of components, facilitates management and maintenance, and realizes dynamic loading of components. Further, for reuse next time, the updated target component data can also be added to the component library. The component reuse strategy creates a new component by updating the component ID and restores the configuration information of the original component at the same time. The present invention deep-copies the component, then uses regular expressions to replace the ID while retaining the configuration information of the original component, so that there will be no conflicts.

[0037] Generally speaking, the technical solution of the present invention is used in development scenarios including but not limited to the following: Web application development: Single-page application (SPA): Using Vuex for state management can efficiently handle complex page states, such as the current page ID, component list parameters, etc. Through the virtual DOM update strategy and two-way data binding, efficient rendering and interaction of the page are achieved, improving the user experience. For example, when developing a large enterprise-level management system, state sharing between different modules and dynamic update of components can be realized through these technologies. Form-driven applications: Form validation and two-way data binding technologies in Form component processing can ensure the accuracy and real-time nature of user input data, and are applicable to various scenarios where users need to input information, such as registration and login forms, order filling forms, etc.

[0038] Mobile application development: Hybrid application (Hybrid App): Applying the above technologies to the development of HTML5-based hybrid applications, building mobile interfaces through frameworks such as Vue.js, and using state management and component-based development to improve the performance and maintainability of the application. For example, when developing a shopping mobile application, these technologies can be used to manage states such as product lists and shopping carts, as well as implement form validation and two-way data binding to facilitate user operations. Cross-platform applications (such as using Vue Native, etc.): Achieving cross-platform mobile application development with the help of relevant technologies, with a set of code that can run on multiple platforms, and at the same time using basic component processing and style processing technologies to ensure interface consistency and user experience on different platforms.

[0039] Visual Design and Development Tools: Page Building Tools: Page building tools for visual development. Users can quickly create pages by dragging and dropping components, configuring parameters, etc. Using component lifecycle management, ID update and other technologies, dynamic addition, deletion and property modification of components are realized, as well as real-time preview and update of pages. Design System Setup: Through style processing technologies such as style inheritance and style set update, a unified design system can be built to ensure style consistency of different components and pages, facilitating collaboration between designers and developers and improving design and development efficiency.

[0040] Data Management and Analysis Platform: Data Visualization Components: In the data management and analysis platform, data visualization components such as charts and reports are built using component-based development and state management technologies. Through two-way data binding and virtual DOM update strategies, real-time update of data and efficient rendering of visual display are achieved, helping users quickly analyze data. Data Editing and Processing Forms: Using Form components for processing and form validation technologies, data editing and processing forms are created to ensure that the data entered by users meets the specifications and improve data quality. For example, in the data entry interface, illegal data entry is prevented through form validation, and the data model is updated in real time through two-way data binding.

[0041] Internet of Things (IoT) Applications: Device Management Interface: Used to build the management interface of IoT devices. Vuex is used to manage device resources, page information, etc. The message subscription update technology is used to obtain device status information in real time, such as the running status of the device, sensor data, etc., and the real-time update of the interface is realized through the page resource update strategy, facilitating users to monitor and manage devices. Device Configuration Form: Using the Form component processing technology to create a device configuration form. Users can input device configuration parameters such as network parameters and sensor thresholds through the form. Form validation and two-way data binding technologies ensure the accuracy and real-time nature of the configuration data, improving the efficiency and reliability of device configuration.

[0042] See Figure 2 , the second aspect of the present invention provides a processing system for component reuse of a low-code platform. The processing system for component reuse of the low-code platform includes: Component Parameter Acquisition Module 10, which is used to acquire the component parameters required for the project and manage the component state using the Vuex mode; Component Copy Module 20, which is used to deeply copy the required reusable components based on the component list in the component parameters using the Lodash tool library; Data Serialization Module 30, which is used to perform data serialization processing on each of the reusable components to obtain each component data to be processed; ID Replacement Module 40, which is used to replace the ID-related parameters of each of the component data to be processed based on preset rules; An event processing module 50, configured to decouple events for each of the to-be-processed component data through the observer pattern, and process nested tasks in each of the to-be-processed component data using a recursive algorithm; A resource processing module 60, configured to perform message subscription update, device resource update, API resource update, and page resource update on each of the to-be-processed component data; A mapping update module 70, configured to update the variable mapping relationship of the preset processing method for each of the to-be-processed component data based on the component type; A style processing and component registration module 80, configured to modularize and isolate the CSS styles for each of the to-be-processed component data to obtain each target component data, and register components for each of the target component data.

[0043] In an optional implementation manner of the second aspect of the present invention, the ID replacement module includes: A page ID parameter replacement unit, configured to replace the page ID parameters of each of the to-be-processed component data based on the current page ID in the component parameters and using a regular expression; A component ID parameter replacement unit, configured to generate unique IDs for each of the to-be-processed component data according to a custom character set and in cooperation with the original ID length through the nanoid library for component ID parameter replacement; A variable ID parameter replacement unit, configured to replace the variable ID parameters of each of the to-be-processed component data through a mapping table management method; An event ID parameter replacement unit, configured to replace the event ID parameters of each of the to-be-processed component data through an event delegation pattern.

[0044] In an optional implementation manner of the second aspect of the present invention, the resource processing module includes: A message subscription update unit, configured to perform message subscription update on each of the to-be-processed component data by using the observer pattern to obtain specified information; A device resource update unit, configured to perform device resource update on each of the to-be-processed component data by using the resource pool management to obtain resources; An API resource update unit, configured to perform API resource update on each of the to-be-processed component data by using RESTful interface adaptation and unify the interface style; A page resource update unit, configured to perform page resource update on each of the to-be-processed component data by using a difference detection strategy, incremental update, and batch processing.

[0045] In an optional implementation manner of the second aspect of the present invention, the mapping update module includes: A composite component processing unit is used for a composite component to initialize a mapping object for storing the mapping relationship between the old and new IDs of sub-component variables. By traversing the variable data of each sub-component in the composite component data, for each of the sub-components, a new ID is generated for each of the variable data, and the mapping relationship between the old and new IDs is stored in the mapping object, and then the variable data of the remaining sub-components is recursively processed by calling the same method; A form component processing unit is used for a form component to update the form component through form validation and two-way data binding to achieve real-time synchronization between the form component data and the view; A basic component processing unit is used for a basic component to centrally manage the component state through a store container and maintain a variable mapping relationship.

[0046] In an optional implementation manner of the second aspect of the present invention, the style processing and component registration module includes: A style processing unit is used 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 cloned style object for storing the copied and processed style information. For each style ID in the ID list, a new unique cloned ID is generated through the generateID function, and the corresponding style object is obtained by using the getStyleById function. After cloning the style object, it is added to the style setting object, and at the same time, the new cloned 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 attributes, the active ID of the cloned style is set to the newly generated cloned ID.

[0047] In an optional implementation manner of the second aspect of the present invention, the data serialization module includes: A simple object processing unit is used for a specific type of simple object in the reusable component to convert the attributes of the simple object into a string in a specific format by overriding the toString method of the simple object; A payload object processing unit is used for a complex object of a non-specific type in the reusable component to write a custom serialization function according to the structure and characteristics of the complex object to convert the complex object into a string in a specific format.

[0048] In an optional implementation manner of the second aspect of the present invention, the style processing and component registration module further includes: A page component registration unit is used to add each of the target component data to the state through store.commit of Vuex to complete component registration; A component library registration unit is used to create new components of each of the target component data in the component library by updating the component IDs, and at the same time restore the configuration information of the original components corresponding to the new components.

[0049] Figure 3 FIG. 4 is a schematic structural diagram of a processing device for component reuse in a low-code platform provided by an embodiment of the present invention. The processing device for component reuse in the low-code platform may vary greatly due to configuration or performance differences, and may include one or more processors 90 (central processing units, CPUs) (for example, one or more processors) and a memory 100, and one or more storage media 110 for storing application programs or data (for example, one or more mass storage devices). Among them, the memory and the storage medium may be transient 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 on the processing device for component reuse in the low-code platform. Further, 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 component reuse in the low-code platform.

[0050] The processing device for component reuse in the low-code platform of the present invention may further include one or more power supplies 120, one or more wired or wireless network interfaces 130, one or more input / output interfaces 140, and / or one or more operating systems, such as Windows Serve, Mac OS X, Unix, Linux, FreeBSD, and so on. Those skilled in the art can understand that Figure 3 The shown structural diagram of the processing device for component reuse in the low-code platform does not limit the processing device for component reuse in the low-code platform, and may include more or fewer components than shown, or combine some components, or have different component arrangements.

[0051] 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, and when the instructions run on a computer, the computer is caused to execute the steps of the processing system for component reuse in the low-code platform.

[0052] Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the above-described system or system and unit can refer to the corresponding processes in the foregoing method embodiments, and will not be described herein again.

[0053] When 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, in essence, or the part that contributes to the prior art, or all or part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable a computer device (which may be a personal computer, a processing device for reusing low-code platform components, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs.

[0054] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of various embodiments of the present invention.

Claims

1. A processing method for component reuse in a low-code platform, characterized in that, Including: Obtain the component parameters required for the project and manage the component state using the Vuex pattern; Use the Lodash library to deeply copy the required reusable components based on the component list in the component parameters; Perform data serialization processing on each of the reusable components to obtain each component data to be processed; Replace the ID-related parameters of each of the component data to be processed based on preset rules; Decouple events for each of the component data to be processed through the observer pattern, and use a recursive algorithm to process the nested tasks in each of the component data to be processed; Perform message subscription updates, device resource updates, API resource updates, and page resource updates on each of the component data to be processed; Update the variable mapping relationship of the preset processing method for each of the component data to be processed based on the component type; Perform CSS style modularization and style isolation on each of the component data to be processed to obtain each target component data, and register the components for each of the target component data.

2. The processing method for component reuse of the low-code platform according to claim 1, characterized in that, The replacement of the ID-related parameters of each of the component data to be processed based on preset rules includes: Replace the page ID parameters of each of the component data to be processed based on the current page ID in the component parameters and using regular expressions; Generate unique IDs for each of the component data to be processed through the nanoid library according to the custom character set and the original ID length for component ID parameter replacement; Replace the variable ID parameters of each of the component data to be processed through the mapping table management method; Replace the event ID parameters of each of the component data to be processed through the event delegation pattern.

3. The processing method for component reuse of the low-code platform according to claim 1, characterized in that The message subscription updates, device resource updates, API resource updates, and page resource updates performed on each of the component data to be processed include: Perform message subscription updates on each of the component data to be processed by using the observer pattern to obtain specified information; Perform device resource updates on each of the component data to be processed by using the resource pool management to obtain resources; Perform API resource updates on each of the component data to be processed using RESTful interface adaptation and unify the interface style; Perform page resource updates on each of the component data to be processed using a difference detection strategy, incremental updates, and batch processing.

4. The processing method for component reuse of the low-code platform according to claim 1, characterized in that, The update of the variable mapping relationship of the preset processing method for each of the component data to be processed based on the component type includes: For composite components, initialize a mapping object to store the old and new ID mapping relationships of sub-component variables. By traversing the variable data of each sub-component in the composite component data, for each sub-component, generate a new ID for each variable data and store the old and new ID mapping relationships 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 two-way data binding to achieve real-time synchronization of form component data and views; For basic components, centrally manage the component state through the store container and maintain the variable mapping relationship.

5. The processing method for component reuse of the low-code platform according to claim 1, characterized in that The CSS style modularization and style isolation for each of the to-be-processed component data include: Deconstruct the relevant attributes of the style settings from the style object passed in by the to-be-processed component data, and then create a new cloned style object to store the copied and processed style information. For each style ID in the ID list, generate a new unique cloned ID through the generateID function, and use the getStyleById function to obtain the corresponding style object. After cloning the style object, add it to the style setting object, and at the same time add the new cloned ID to the ID list of the cloned style. If the currently processed style ID is the same as the active ID of the relevant attributes, set the active ID of the cloned style to the newly generated cloned ID.

6. The processing method for reusing low-code platform components according to claim 1, characterized in that, The data serialization process for each of the reusable components to obtain each to-be-processed component data includes: For the simple objects of a specific type in the reusable components, rewrite the toString method of the simple object to convert the attributes of the simple object into a string in a specific format; For the complex objects of a non-specific type in the reusable components, write a custom serialization function according to the structure and characteristics of the complex object to convert the complex object into a string in a specific format.

7. The processing method for component reuse of the low-code platform according to claim 1, wherein The component registration for each of the target component data includes: Add each of the target component data to the state through store.commit of Vuex to complete the component registration; Create new components of each of the target component data in the component library by updating the component ID, and at the same time restore the configuration information of the new components corresponding to the original components.

8. A processing system for component reuse in a low-code platform, characterized in that, The processing system for component reuse in the low-code platform includes: A component parameter acquisition module, which is used to acquire the component parameters required by the project and manage the component state using the Vuex mode; A component copy module, which is used to deeply copy the required reusable components based on the component list in the component parameters using the Lodash tool library; A data serialization module, which is used to perform data serialization processing on each of the reusable components to obtain each to-be-processed component data; An ID replacement module, which is used to replace the ID-related parameters of each of the to-be-processed component data based on preset rules; An event processing module, which is used to decouple the events of each of the to-be-processed component data through the observer mode and process the nested tasks in each of the to-be-processed component data using a recursive algorithm; A resource processing module, which is used to perform message subscription update, device resource update, API resource update, and page resource update on each of the to-be-processed component data; A mapping update module, which is used to update the variable mapping relationship of the preset processing method for each of the to-be-processed component data based on the component type; A style processing and component registration module, which is used to perform CSS style modularization and style isolation on each of the to-be-processed component data to obtain each target component data, and perform component registration on each of the target component data.

9. A processing device for component reuse in a low-code platform, characterized in that, The processing device for reusing components of the low-code platform includes: a memory and at least one processor, wherein instructions are stored in the memory, and the memory and the at least one processor are interconnected by a line; The at least one processor invokes the instructions in the memory, so that the processing device for reusing components of the low-code platform executes the processing method for reusing components of the low-code platform according to any one of claims 1-7.

10. 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 components of the low-code platform according to any one of claims 1-7.

Images