Low-code platform page block construction method and device, equipment and medium

Abstract

The invention relates to the technical field of computers, and discloses a low-code platform page block construction method, device and equipment and a medium, and the method comprises the steps: obtaining a container identifier, a component identifier and container position distribution which are respectively included in each container in at least one container, and the position of each component in the container; according to the component identifier, determining and storing component resources and component configuration parameters associated with the component corresponding to the component identifier; generating a block based on the container identifier, the component identifier, the position of each component in the container, the container position distribution, the component resources and the component configuration parameters; and after setting the block attribute in the block, storing the block. By means of the method, it can be guaranteed that when the page is constructed, the blocks formed by the multiple containers and the container assemblies are directly reused. And the page does not need to be constructed by dragging a plurality of components mentioned in the background technology. The page construction efficiency can be greatly improved, and the time for manually dragging the component is shortened.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and specifically to methods, devices, equipment and media for constructing page blocks on a low-code platform. Background Art

[0002] Low-code platforms have experienced rapid and significant development in the past few years. With its simple and easy-to-use features, this platform provides developers with a solution to quickly build applications and web pages. With the acceleration of digital transformation and the increase in enterprises' demand for rapid development, low-code platforms have become more and more popular.

[0003] In terms of page creation, the low-code platform provides a simple and easy-to-use interface and tools, allowing the operating object to quickly create various types of pages. It mainly uses drag-and-drop components to design and layout, and create pages. Commonly used modules are usually abstracted into components, such as buttons, pictures, text, tables, forms, etc. As a reuse unit of low-code modules, the same page or different pages can use the same components for page creation, which is more flexible to use. However, components are usually of small granularity, such as buttons, pictures, text, menus, radio buttons, multiple-choice boxes, etc., and page creation requires the combination of a large number of components for layout design. If you need to use so many components to drag and drop to create pages every time, your work efficiency will be very low. Summary of the invention

[0004] In view of this, the present invention provides a low-code platform page block construction method, device, equipment and medium to solve the problem of low efficiency of low-code platform page layout design due to repeated use of multiple components.

[0005] In a first aspect, the present invention provides a method for constructing a page block of a low-code platform, the method comprising:

[0006] Obtaining a container identifier, a component identifier, a container position distribution, and a position of each component in the container respectively included in at least one container;

[0007] According to the component identifier, determining and saving component resources and component configuration parameters associated with the component corresponding to the component identifier;

[0008] Generate a block based on the container identifier, the component identifier, the location of each component in the container, the container location distribution, the component resources, and the component configuration parameters;

[0009] After setting the block attributes in the block, the block is saved.

[0010] The present invention provides a method for constructing a low-code platform page block, which has the following advantages:

[0011] By abstracting and saving the identification, location distribution and configuration parameters of containers and components, and generating blocks based on these parameters. When building a page later, you can directly reuse multiple containers and blocks composed of container components. There is no need to build a page by dragging multiple components as mentioned in the background technology. The efficiency of page construction can be greatly improved and the time of manually dragging components can be reduced. Since components and configuration parameters are saved and block-based, developers can reuse the same components and configurations in different pages and projects, thereby reducing duplication of work. Furthermore, by combining components into blocks, the operating object can build complex page structures more quickly without adjusting the position and style of each small component separately. Block-based design allows the operating object to quickly adjust the page layout by only changing the properties of the block without redesigning the entire page. For non-professional developers or business personnel, block-based design reduces the learning curve and enables them to get started and start building applications faster. Due to the standardization and block-based nature of components and configuration parameters, system maintenance and updates become easier because changes can be concentrated on a few blocks rather than on each individual component.

[0012] In an optional implementation, the obtaining of the container identifier, the component identifier, the container position distribution, and the position of each component in the container respectively included in the at least one container specifically includes:

[0013] When at least one container is selected in the target page according to the sliding track, a container identifier, a component identifier, a container position distribution, and a position of each component in the container are extracted from the target page;

[0014] or,

[0015] When it is detected that at least one container is dragged from the low-code platform component library to a blank page, a container identifier and a container position distribution of each container in the at least one container are obtained;

[0016] When it is detected that at least one component is dragged from the low-code platform component library to the first container, the component identifier of each of the at least one component and the position of each of the components in the first container are obtained, wherein the first container is any one of the at least one container;

[0017] When the container dragging behavior or the component dragging behavior is not detected within a preset time period, the detection action is stopped.

[0018] Specifically, by automatically detecting and extracting information about containers and components, the identification process of block elements can be automated, reducing manual operations and improving development efficiency. In this process, there is no need to manually record and enter information such as the identification and location of containers and components, which simplifies the development process of the low-code platform. Automated information extraction reduces design problems caused by manual input errors and improves the accuracy of block construction. For blocks that are not on the current page, the operating object can also create new blocks as needed by dragging and dropping. The construction of blocks can adapt to different low-code platforms and page design requirements and has good versatility.

[0019] In an optional implementation, the component resources include local resources and third-party resources;

[0020] The component configuration parameters include one or more of component reference variable data, component event callback method definition, component CSS class style definition, component access data source, and component tree used by the block.

[0021] In an optional embodiment, the method further includes:

[0022] Generate block identification information corresponding to each block;

[0023] Based on the block identification information respectively corresponding to each of the blocks, the parameter name of the component configuration parameter included in the block is changed.

[0024] Specifically, each block has a unique identifier, which ensures that each block in the system can be uniquely identified and avoids naming conflicts. The block identifier can be used as a unique reference for tracking and managing different blocks, which is convenient for developers to locate and debug. In order to prevent the parameter names of the component configuration parameters in the block from conflicting with the parameter names of the configuration parameters of the components or individual components in other blocks in the page when using blocks on low-code pages, the parameter names of the component configuration parameters included in the block can be changed according to the block identifier. By unifying the parameter naming specifications, the configuration parameter naming of components in different blocks or between individual components is ensured to be consistent, which improves the readability and maintainability of the code. Unified parameter naming can reduce configuration errors caused by incorrect parameter names and reduce the risks of application development and maintenance. Developers can locate and modify parameters more quickly, reducing the time to find and understand the meaning of parameters.

[0025] In an optional example, the method further includes:

[0026] Saving the block in a pre-built block library and generating a corresponding block version;

[0027] A block list is generated based on the blocks in the block library, wherein the block list includes the block identification information and block version corresponding to each of the blocks.

[0028] Specifically, through the pre-built block library, developers can quickly access and use defined page components without having to design from scratch, reducing development costs. In addition, the components in the pre-built block library follow consistent design and functional standards, which helps maintain the consistency of the application's appearance and the experience of the operating object. Version management of blocks allows developers to track and roll back to previous versions, enhancing the maintainability and reliability of the code. In a team collaboration environment, version management facilitates communication and coordination between team members, ensuring that everyone is using the same version of components. When problems arise, they can be quickly restored by rolling back to the previous stable version, reducing downtime. Automatically generating a block list simplifies the page production process, and the operating object can quickly browse and select the required components. Through the block list, the operating object can select and combine components according to specific needs to achieve personalized page design. Moreover, organizing multiple blocks into a block list also facilitates the management of all blocks. The identification of each block is closely associated with its version control, which makes it easy to track the historical changes and version iterations of the block.

[0029] In an optional embodiment, the method further includes:

[0030] When a block modification instruction is received, according to the block modification instruction, the selected target block from the block library is connected to the low-code designer to modify the selected block in the low-code designer;

[0031] After the modified block is saved, a new block version is generated and saved to the block library.

[0032] Specifically, in this method, developers are allowed to modify pre-built blocks directly in the low-code designer without having to design from scratch, saving a lot of development time. The modified blocks can be saved again and added to the block library as a new version, and other developers can reuse the modified blocks, which improves the reusability of the code. By saving a new block version, developers can trace the historical modification records of the blocks, which facilitates code review, problem tracking, and function rollback. Because this method directly modifies existing blocks instead of starting from scratch, and pre-built blocks are usually tested and verified, it can reduce errors in development. Furthermore, developers can modify blocks according to specific needs, which increases the flexibility and customization capabilities of the platform and can better meet specific business needs. Especially for operators with no operating experience, quickly building applications by modifying existing blocks can reduce the difficulty of learning to use low-code platforms. Finally, by continuously optimizing and updating components in the block library, the application quality of the entire platform can be improved and potential errors and vulnerabilities can be reduced. Focusing on modifying and optimizing existing blocks instead of repeated development helps optimize the allocation of development resources and improve resource utilization efficiency.

[0033] In an optional example, after the modified block is saved, a new block version is generated and saved to the block library, the method further includes:

[0034] The block list is updated based on the block version information of the modified block.

[0035] In a second aspect, the present invention provides a low-code platform page block construction device, the device comprising:

[0036] An acquisition module, used to acquire a container identifier, a component identifier, a container position distribution, and a position of each component in the container respectively included in at least one container;

[0037] A processing module, configured to determine and save, according to the component identifier, component resources and component configuration parameters associated with the component corresponding to the component identifier;

[0038] A generation module, configured to generate a block based on the container identifier, the component identifier, the position of each component in the container, the container position distribution, the component resources, and the component configuration parameters;

[0039] The processing module is further configured to save the block after setting the block attributes in the block.

[0040] The low-code platform page block construction device provided by the present invention has the following advantages:

[0041] By abstracting and saving the identification, location distribution and configuration parameters of containers and components, and generating blocks based on these parameters. When building a page later, you can directly reuse multiple containers and blocks composed of container components. There is no need to build a page by dragging multiple components as mentioned in the background technology. The efficiency of page construction can be greatly improved and the time of manually dragging components can be reduced. Since components and configuration parameters are saved and block-based, developers can reuse the same components and configurations in different pages and projects, thereby reducing duplication of work. Furthermore, by combining components into blocks, the operating object can build complex page structures more quickly without adjusting the position and style of each small component separately. Block-based design allows the operating object to quickly adjust the page layout by only changing the properties of the block without redesigning the entire page. For non-professional developers or business personnel, block-based design reduces the learning curve and enables them to get started and start building applications faster. Due to the standardization and block-based nature of components and configuration parameters, system maintenance and updates become easier because changes can be concentrated on a few blocks rather than on each individual component.

[0042] In the third aspect, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, computer instructions are stored in the memory, and the processor executes the low-code platform page block construction method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0043] In a fourth aspect, the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the low-code platform page block construction method of the first aspect or any corresponding embodiment thereof.

[0044] In a fifth aspect, the present invention provides a computer program product, comprising computer instructions, which are used to enable a computer to execute the low-code platform page block construction method of the above-mentioned first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0046] Figure 1 It is a schematic diagram of the low-code page structure provided by the present invention;

[0047] Figure 2It is a flowchart of a method for constructing a page block of a low-code platform provided by an embodiment of the present invention;

[0048] Figure 3 It is a flowchart of a method for constructing a low-code platform page block provided by an embodiment of the present invention;

[0049] Figure 4 It is a structural schematic diagram of the low-code platform block management device provided by the present invention;

[0050] Figure 5 It is a schematic diagram of the overall process structure provided by an embodiment of the present invention;

[0051] Figure 6 It is a structural block diagram of a low-code platform page block construction device provided by an embodiment of the present invention;

[0052] Figure 7 It is a schematic diagram of the hardware structure of a computer device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0053] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0054] Low-code platforms have experienced rapid and significant development in the past few years. With its simple and easy-to-use features, this platform provides developers with a solution to quickly build applications and web pages. With the acceleration of digital transformation and the increase in enterprises' demand for rapid development, low-code platforms have become more and more popular.

[0055] In terms of page creation, the low-code platform provides a simple and easy-to-use interface and tools, allowing the operator to quickly create various types of pages. The operator can easily design the page layout, add functional modules, and preview the page effect in real time by dragging components, setting properties, configuring data sources, etc. This visual page creation method not only simplifies the development process, but also makes page creation more flexible and creative.

[0056] Low-code platforms mainly use drag-and-drop components to design, layout, and create pages. Common modules are usually abstracted into components, such as buttons, pictures, text, tables, forms, etc. Components are reused units of low-code modules. The same page or different pages can use the same components for page creation, which is more flexible to use.

[0057] However, components are usually small in size, such as buttons, images, text, menus, radio buttons, multiple-choice boxes, etc. When creating a page, you need to combine a lot of components for layout design. Figure 1 The commonly used query page in , needs to place multiple container layout components, 2 input box components, 4 button components, 1 table component, 1 label component, 4 icon components, and 1 paging component. In many business systems, there are many table query areas like this. If you need to use so many components to drag and drop to make a page every time, the work efficiency will be very low.

[0058] To solve the above problems, an embodiment of the present invention provides an embodiment of building a low-code platform page block. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system (computer device) including a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0059] In this embodiment, a low-code platform page block construction method is provided, which can be used for the above-mentioned terminal devices, such as mobile phones, tablet computers, etc. Figure 2 It is a flowchart of a method for constructing a low-code platform page block provided by an embodiment of the present invention, such as Figure 2 As shown, the process includes the following steps. Before introducing the method steps, some terms are explained first, see as follows:

[0060] Low-code platform: A low-code platform is a software development tool designed to accelerate the application development process with minimal coding effort. These platforms usually provide a visual interface and component library, allowing developers to create applications using simple methods such as drag and drop and configuration without having to write a lot of code in depth. Low-code platforms can help non-technical personnel and professional developers quickly build applications, thereby improving productivity and reducing development costs.

[0061] Low-code designer: Low-code designer is the core module of the low-code platform. Its main function is to create low-code pages. Generally speaking, it is divided into component selection area, page display area, component setter area, and also includes low-code JavaScript editor, page style CSS editor, data source access module and other functional modules. In the low-code designer, the operation object can select and drag the component to the page, set the properties of the component through the setter, and see the rendering effect of the page in real time in the page display area.

[0062] Step S201 : obtaining a container identifier, a component identifier, a container position distribution, and a position of each component in the container respectively included in at least one container.

[0063] Step S202: according to the component identifier, determine and save the component resources and component configuration parameters associated with the component corresponding to the component identifier.

[0064] Specifically, when building a block, it is not enough to include only the component identification, but more importantly, it is necessary to call the component resources and component configuration parameters that establish an association relationship with the component. Therefore, in this step, it is necessary to determine the component resources and component configuration parameters that establish an association relationship with the component corresponding to the component identification according to the component identification.

[0065] In an optional example, component resources include, for example, local resources (such as CPU resources, network resources, etc.) or third-party resources (such as echarts charts, momentjs components, etc.) corresponding to the calling component execution function.

[0066] Component configuration parameters may include, for example, one or more of component reference variable data, component event callback method definition, component CSS class style definition, component access data source, component tree Schema content used by blocks, etc.

[0067] Step S203, generating a block based on the container identifier, the component identifier, the position of each component in the container, the container position distribution, the component resources, and the component configuration parameters.

[0068] Specifically, the container ID, component ID, the position of each component in the container, the container position distribution, etc. can be laid out and displayed in the block display interface, and the corresponding component resources and component configuration parameters are executed according to the corresponding component configuration parameters and component resources when the block is called to perform the corresponding operation.

[0069] Step S204, after setting the block attributes in the block, save the block.

[0070] Specifically, blocks may be used in multiple page scenarios. In order to support different access requirements, some block attributes that are exposed to the outside need to be set. Different page scenarios can inject different attribute values ​​as needed (such as block titles, text of a button in a block, etc.). When making blocks, you can set the attributes of these blocks that are exposed to the outside. Finally, the above block data is saved through the service interface, and the block is formed and saved, which is convenient for subsequent direct call of the block.

[0071] The low-code platform page block construction method provided in this embodiment generates blocks based on these parameters by abstracting and saving the identification, location distribution and configuration parameters of containers and components. When building a page later, multiple containers and blocks composed of container components can be reused directly. There is no need to build a page by dragging multiple components as mentioned in the background technology. The efficiency of page construction can be greatly improved and the time of manually dragging components can be reduced. Since components and configuration parameters are saved and block-based, developers can reuse the same components and configurations in different pages and projects, thereby reducing duplication of work. Furthermore, by combining components into blocks, the operating object can build complex page structures more quickly without adjusting the position and style of each widget separately. Block-based design allows the operating object to quickly adjust the page layout by only changing the properties of the block without redesigning the entire page. For non-professional developers or business personnel, block-based design reduces the learning curve and can get started and start building applications faster. Due to the standardization and block-based nature of components and configuration parameters, system maintenance and updates become easier because changes can be concentrated on a few blocks rather than on each individual component.

[0072] In this embodiment, a low-code platform page block construction method is provided, which can be used for the above-mentioned mobile terminals, such as mobile phones, tablet computers, etc. Figure 3 It is a flowchart of a method for constructing a low-code platform page block according to an embodiment of the present invention. Figure 3 As shown, based on the above-mentioned embodiment, obtaining the container identifier, component identifier, container position distribution, and the position of each component in the container respectively included in at least one container includes the following steps:

[0073] Step S301, when at least one container is selected in the target page according to the sliding track, the container identifier, component identifier, container position distribution, and the position of each component in the container of each container in the at least one container are extracted from the target page.

[0074] or,

[0075] Step S302, when it is detected that at least one container is dragged from the low-code platform component library to a blank page, the container identifier and container position distribution of each container in the at least one container are obtained.

[0076] Step S303, when it is detected that at least one component is dragged from the low-code platform component library to the first container, the component identifier of each component in the at least one component and the position of each component in the first container are obtained.

[0077] The first container is any one of the at least one container.

[0078] When no container dragging behavior or component dragging behavior is detected within a preset time period, the detection action is stopped.

[0079] Specifically, when obtaining the container identifier, component identifier, container position distribution, and the position of each component in the container respectively included in at least one container, the two situations described above may be included.

[0080] One of them is, when a region is selected in the generated page, the above information is extracted from the selected region.

[0081] Specifically, for example, in the currently displayed page, the sliding track is detected, and the circled range is identified through the sliding track to identify the selected area. Then, at least the container identifier, component identifier, container position distribution of the container included in the area, and the position of each component in the container are extracted from the selected area.

[0082] The selected area may include one or more containers, each of which includes one or more components. When there are multiple containers, it is also necessary to identify the position distribution between the containers, such as the relative position relationship between the containers, the position of the container in the selected area, etc. Because the container includes one or more components, it is also necessary to obtain the position of each component in the container.

[0083] In another optional implementation, the following method may also be included:

[0084] That is, when it is detected that a container is dragged from the low-code platform component library to a blank page, and then one or more components are dragged into the container in a similar manner, the container identification, the position of the container on the blank page, the component identification information included in the container, and the position of each component in the container can be obtained respectively.

[0085] Of course, if multiple containers are dragged, container identification information corresponding to each container, position distribution information of multiple containers on the blank page, and other contents may be obtained respectively.

[0086] Finally, in order to determine whether the drag operation is completed, it can be determined by time, that is, when no container dragging behavior or component dragging behavior is detected within a preset time period, the detection action is stopped.

[0087] A method for building page blocks on a low-code platform provided by an embodiment of the present invention can automate the identification process of block elements, reduce manual operations, and improve development efficiency by automatically detecting and extracting information about containers and components. In this process, there is no need to manually record and input information such as the identification and location of containers and components, which simplifies the development process of the low-code platform. Automated information extraction reduces design problems caused by manual input errors and improves the accuracy of block construction. For blocks that are not on the current page, the operating object can also create new blocks as needed by dragging and dropping. The construction of blocks can adapt to different low-code platforms and page design requirements and has good versatility.

[0088] In an optional example, based on the above method steps, when the operation object drags a container or a component, the method may further include:

[0089] Automatically adjust the page layout based on the size, position and other data of containers and components.

[0090] Specifically, when the system monitors a drag event or a drag track, it identifies whether the operation object is performing an operation such as dragging a container or a component, and when it is determined that an operation such as dragging a container or a component is being performed, it determines the object being dragged, and then obtains the size and position change of the dragged object.

[0091] Automatically achieve position alignment based on the size and position changes of the dragged object.

[0092] During specific implementation, for example, the positions of containers and components are automatically adjusted based on the grid system to ensure that the alignment is uniform.

[0093] Or, arrange containers and components according to specific alignment. Or, ensure page usage by automatically filling blank areas.

[0094] In an optional example, when performing layout, it also includes automatically adjusting the size and position of containers and / or components according to the size and resolution of the screen, and during the adjustment process, the operating object can intuitively view the entire automatic optimization process, such as highlighting through highlighting, shadows or dynamic animations.

[0095] In order to ensure that the operation object has autonomy, this function is not effective by default and will only be executed after the operation object is started.

[0096] In this way, the operating object can be more efficient and convenient when making blocks, thereby improving the operating object's experience and satisfaction.

[0097] In an optional example, the method further includes: generating block identification information corresponding to each block;

[0098] Based on the block identification information respectively corresponding to each of the blocks, the parameter name of the component configuration parameter included in the block is changed.

[0099] Furthermore, in an optional example, the method further includes:

[0100] Saving the block in a pre-built block library and generating a corresponding block version;

[0101] A block list is generated based on the blocks in the block library, wherein the block list includes the block identification information and block version corresponding to each of the blocks.

[0102] Specifically, after building a block, the block can be saved in the block library, and a corresponding block version can be generated, so that the corresponding block can be called according to different block versions in subsequent calls. In particular, because a block may be referenced by multiple pages, different pages need to make adaptive adjustments to the block. Alternatively, in order to further optimize different blocks, different versions of blocks are generated, and the corresponding block versions are indicated, and then different versions of blocks are saved in the block library, which is convenient for the operation object to select when making pages.

[0103] At the same time, in order to facilitate the operation object to directly call different versions of blocks, the method can also include generating a block list based on different versions of blocks in the block library, and displaying the block identification information and block version corresponding to each block in the block list.

[0104] Therefore, a block function module can also be added in the low-coder. The block function module displays a list of blocks that can be used on the page. The operation object can select the required block (select the block identification information) and its corresponding version.

[0105] Further optionally, in a specific example, the method further includes:

[0106] When a block modification instruction is received, according to the block modification instruction, the selected target block from the block library is connected to the low-code designer to modify the selected block in the low-code designer;

[0107] After the modified block is saved, a new block version is generated and saved to the block library.

[0108] Specifically, the principle is similar to that described above. Considering that a block may be referenced by multiple pages, different pages need to make adaptive adjustments to the adaptation of the block, or, in order to further optimize different blocks, the method may also include receiving a block modification instruction, and according to the block modification instruction, connecting the selected target block in the block library to the low-code designer, and modifying the selected block in the low-code designer. Through the corresponding modification operation, a new version of the block is generated, and then the block of the new block version is saved to the block library, so that the blocks in the block library can be continuously iterated and updated.

[0109] Specifically, modifying blocks and adding new blocks (both summarized as modification operations) can be connected to the low-code designer, and the block content can be displayed and edited in the low-code designer. After modification, save the new block version to the block library, retain the block content of each modified version in the block library, and record its modified content to facilitate the selection of relevant personnel when making pages.

[0110] Thereafter, the method may further include:

[0111] The block list is updated based on the block version information of the modified block.

[0112] Specifically, in order to ensure the storage and management of the prepared blocks, the block version of the modified block must be updated to the block list, so that the subsequent operation object can call the corresponding version of the block according to the displayed block list.

[0113] See Figure 4 As shown, Figure 4 The schematic diagram of the low-code platform block management device structure is shown. For example, it includes block list management, block deletion, block addition and modification, block content storage, block history version maintenance ( Figure 4 Multiple versions are shown in the figure), connecting to the low-code designer to edit blocks, editing blocks to expose external attributes and other modules and content.

[0114] The main function of the block management device is to manage the content of the blocks that have been made and to store and manage the made blocks. The block list data is displayed in the management page, and the specified block can be selected to modify and delete the block. Modifying blocks and adding new blocks can be connected to the low-code designer, and the block content can be displayed and edited in the low-code designer. The modified block is saved as a new block version. Because the block introduced by the low-code page may not be compatible with the new modified content of the block, it is necessary to save the historical version of the block record and reference it by the low-code page through the block + version. Set the external exposure attributes of the edited block. Different page scenarios can inject different attribute values ​​as needed (such as block title, text of a button in the block, etc.). When making blocks, you can set the attributes of these blocks exposed to the outside. Finally, the above block data is saved through the service interface to form a block.

[0115] The block access device is used to connect the already made blocks to the low-code page production and drag and drop them for use. Connect the block module in the low-code designer to display the list of blocks that have been made and the corresponding content. When making a page in the low-code designer, you generally use the drag-and-drop method to drag the components to the specified location. The use of blocks is the same as that of components. Drag the blocks to the specified location of the page and download the static resources required by the blocks (referring to the component resources and third-party resources extracted from the block production device).

[0116] After dragging a block to the low-code platform designer, the block rendering operation is also included. Its main function is to render and display the block content in the low-code page.

[0117] First, the content of the block must be parsed, including JavaScript variables, methods, CSS content, Schema component tree content, etc., and then the corresponding content of the parsed block must be inserted into the overall content of the page. In order to ensure that the JavaScript scripts and CSS content in the block do not conflict with the original content in the page, the JavaScript variable names, CSS class names, etc. in the block are spliced ​​and modified to ensure uniqueness. At the same time, the setter of the exposed properties of the block is displayed in the low-code designer, and the operation object can fill in the value of the injected property. Finally, the spliced ​​overall page content is handed over to the low-code designer for page rendering.

[0118] Among them, when using blocks, low-code pages need to splice the component configuration parameters in the block into the page. In order to prevent conflicts in parameter names, it is necessary to change the parameter names of the component configuration parameters included in the block based on the block identifier.

[0119] For example, when splicing JavaScript content into a page, in order to prevent the variable name and method name from being repeated with the existing content on the page, the JavaScript variable name and method name in the block data need to be processed. For example, the variable name is spliced ​​with the block name (const dataList = xxx is changed to const dataList_blockA = xxx) to process the JavaScript content in the block content. The processed content is spliced ​​into the JavaScript script content of the low-code page.

[0120] Splice CSS content. CSS styles are used in low-code pages. When using blocks, the CSS content in the blocks needs to be spliced ​​into the page. In order to prevent the CSS class names from being repeated with the class names in the page, the CSS class names in the block data need to be processed, such as the splicing block name method (.content{xxx} is changed to .content_blockA{xxx}). Splice the processed content into the CSS style content of the low-code page.

[0121] Splice Schema content. Low-code pages save the page component tree content through Schema. To use blocks, you need to splice the block part of the Schema content into the page Schema content. The component content of the block Schema needs to be synchronized according to the above JavaScript and CSS content changes. For example, the component attribute binding JavaScript variable name needs to be changed to the variable name after the spliced ​​block name (<input:value=”dataList”> Change to<input:value=”dataList_blockA”> ). Splice the processed block Schema content into the page Schema content.

[0122] Then, the setter of the exposed properties of the block is displayed in the low-code designer, and the operation object can fill in the value of the injected property. Finally, the spliced ​​overall page content is handed over to the low-code designer for page rendering.

[0123] In the following, a specific example including the above method steps will be described in the form of a specific example:

[0124] 1) The operation object uses the low-code platform to visually drag components, templates, etc. to generate blocks, or selects part of the content in the existing low-code platform page to set as blocks.

[0125] 2) After setting the block, extract the block-related content, set the attributes that can be exposed to the outside, and then save the generated block content. The specific steps include the following:

[0126] a) Extract the resources involved in the block.

[0127] Specifically, the low-code platform may involve external component libraries or third-party components, and corresponding resource files of the external component libraries or third-party components.

[0128] First, start from the outermost container of the block to traverse the components in the block, record the components of the resource files involved, and save the deduplicated data of the resource files.

[0129] b) Extract JavaScript variables, JavaScript methods, CSS content, and data source references in the block.

[0130] Specifically, the components in the block will set JavaScript variables, CSS styles, etc. when setting event interactions and styles, so the block content needs to store this data.

[0131] Therefore, it is necessary to traverse the components in the block starting from the outermost container of the block, save the JavaScript variables referenced in the components, the bound JavaScript callback methods, the CSS class styles, and the referenced data sources, and store them in the block content.

[0132] c) Extract the component tree Schema data in the block.

[0133] Specifically, low-code platforms usually save the component tree structure corresponding to the page through Schema, and extract the Schema content of the block part for saving.

[0134] d) Set the properties of the block to be exposed to the outside world.

[0135] The function of a block is to allow pages to reuse the content of the area, but different pages may have different requirements for blocks, such as setting titles, setting background colors, etc. Therefore, blocks need to set externally exposed properties, and specific values ​​can be set when the page references them.

[0136] Provide the settings panel to set the property name and property type exposed by the block, and reference the property name in the component properties or styles in the corresponding block to complete the property configuration.

[0137] e) Save the contents of the above blocks to form a complete block.

[0138] 3) Manage the blocks that have been made, mainly including the following functions:

[0139] a) Provide a block list for the operation object to operate on the prepared blocks.

[0140] b) Create a new block: you can create a new block.

[0141] Specifically, connecting to the low-code designer is similar to selecting an area on the page to create a block. The operation of creating a new block can be implemented according to the previous steps, so I will not go into details here.

[0142] c) Block editing.

[0143] You can edit a created block by selecting it and connect the block content to the low-code designer, where you can modify the block content.

[0144] d) Block preservation.

[0145] After the block editing is completed, save it and generate a new block version. Because the block may be referenced by multiple pages, and the modified block may not be compatible with some pages, the block content of each modified version should be retained and its modified content should be recorded to facilitate the selection of the operating object when making the page.

[0146] 4) Connect the block content to the low-code designer, and use the prepared blocks when making low-code pages. For example, the steps include:

[0147] a) Add the block function module in the low-code designer. The block function module displays a list of blocks that can be used on the page. The operation object can select the required block and its corresponding version.

[0148] b) After selecting the block and block version, download the required static resource files (including external component library resources, third-party component resources, etc.) corresponding to the block version, and preview the block content.

[0149] c) Drag the selected block to the low-code page to generate a block exposure property setting panel, in which you can enter the specified field value.

[0150] After configuration is completed, the block rendering device renders the block in the low-code designer.

[0151] 5) Use the block rendering device to parse the block content, process each part of the block content and connect it to the low-code page, and finally render the block display through the low-code designer. The specific steps include:

[0152] a) Parse the content in the block data, including JavaScript data, CSS data, Schema data, and data source data.

[0153] b) Concatenate JavaScript content.

[0154] JavaScript scripts are used in low-code pages, and the main contents include JavaScript variables, JavaScript methods, life cycle functions, etc.

[0155] When using blocks on a low-code page, the JavaScript content of the block needs to be spliced ​​into the page. In order to prevent the variable name and method name from being repeated with the existing content on the page, the JavaScript variable name and method name in the block data need to be processed. For example, the variable name is spliced ​​with the block name (const dataList = xxx is changed to const dataList_blockA = xxx) to process the JavaScript content in the block content. The processed content is spliced ​​into the JavaScript script content of the low-code page.

[0156] c) Concatenate CSS content.

[0157] CSS styles are used in low-code pages. When using blocks, the CSS content in the blocks needs to be spliced ​​into the page. In order to prevent the CSS class names from being repeated with the class names in the page, the CSS class names in the block data need to be processed, such as the way of splicing block names (.content{xxx} is changed to .content_blockA{xxx}). The processed content is spliced ​​into the CSS style content of the low-code page.

[0158] d) Concatenate Schema content.

[0159] Low-code pages save the content of the page component tree through Schema. To use blocks, you need to splice the Schema content of the block part into the page Schema content. The component content of the block Schema needs to be synchronized according to the above JavaScript and CSS content changes. For example, the JavaScript variable name bound to the component attribute needs to be changed to the variable name after the block name is spliced ​​(<input:value=”dataList”> Change to<input:value=”dataList_blockA”> ). Splice the processed block Schema content into the page Schema content.

[0160] e) Connect to the data source. Low-code pages usually use data sources to load page data. The data source used for data loading within the block needs to be connected to the page to complete data loading.

[0161] f) Set and inject the externally exposed properties, and inject the externally exposed properties through the setter provided by the block access device.

[0162] g) Rendering blocks.

[0163] After splicing the page Schema, JavaScript content, CSS content, etc. into the page content, the low-code designer can parse the block-related content according to the normal component content to render the low-code page and complete the access and use of the block.

[0164] Figure 5 The overall flow structure diagram provided for the embodiment of the present invention and the specific implementation process have been described in detail in the previous text, so they will not be described in detail here.

[0165] In this embodiment, a low-code platform page block building device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated here. As used below, the term "module" can implement a combination of software and / or hardware for a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0166] This embodiment provides a low-code platform page block construction device, such as Figure 6 The figure shows a structural schematic diagram of a low-code platform page block construction device provided in an embodiment of the present invention, including: an acquisition module 601, a processing module 602, and a generation module 603.

[0167] An acquisition module 601 is used to acquire a container identifier, a component identifier, a container position distribution, and a position of each component in the container, respectively, included in each container of at least one container;

[0168] Processing module 602, used to determine and save component resources and component configuration parameters associated with the component corresponding to the component identifier according to the component identifier;

[0169] A generation module 603, for generating a block based on the container identifier, the component identifier, the location of each component in the container, the container location distribution, the component resources, and the component configuration parameters;

[0170] The processing module 602 is further configured to save the block after setting the block attributes in the block.

[0171] In an optional example, the acquisition module 601 is specifically used to: when it is determined according to the sliding track that at least one container is selected in the target page, extract from the target page the container identifier, the component identifier, the container position distribution, and the position of each component in the container respectively included in each container of the at least one container;

[0172] or,

[0173] When it is detected that at least one container is dragged from the low-code platform component library to a blank page, a container identifier and a container position distribution of each container in the at least one container are obtained;

[0174] When it is detected that at least one component is dragged from the low-code platform component library to the first container, the component identifier of each component in the at least one component and the position of each component in the first container are obtained, wherein the first container is any one of the at least one container;

[0175] When no container dragging behavior or component dragging behavior is detected within a preset time period, the detection action is stopped.

[0176] In an optional example, the component resources include local resources and third-party resources;

[0177] Component configuration parameters include one or more of component reference variable data, component event callback method definition, component CSS class style definition, component access data source, and component tree used by the block.

[0178] In an optional example, the generating module 603 is further used to generate block identification information corresponding to each block;

[0179] The processing module 602 is further configured to change the parameter name of the component configuration parameter included in the block based on the block identification information corresponding to each of the blocks.

[0180] In an optional example, the processing module 602 is further configured to store the block in a pre-built block library and generate a corresponding block version;

[0181] The generating module 603 is further configured to generate a block list based on the blocks in the block library, wherein the block list includes the block identification information and block version corresponding to each of the blocks.

[0182] In an optional example, the device further includes: a receiving module;

[0183] The receiving module is also used to receive block modification instructions;

[0184] The processing module 602 is further used to connect the selected target block from the block library to the low-code designer according to the block modification instruction, so as to modify the selected block in the low-code designer and save the modified block;

[0185] The generation module 603 is also used to generate a new block version;

[0186] The processing module 602 is further configured to save the new block version to the block library.

[0187] In an optional example, the processing module 602 is further configured to update the block list based on the block version information of the modified block.

[0188] The low-code platform page block building device in this embodiment is presented in the form of a functional module, where the module refers to an application-specific integrated circuit (ASIC), a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above-mentioned functions.

[0189] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

[0190] A low-code platform page block construction device provided by an embodiment of the present invention generates blocks based on these parameters by abstracting and saving the identification, location distribution and configuration parameters of containers and components. When building a page later, multiple containers and blocks composed of container components can be directly reused. There is no need to build a page by dragging multiple components as mentioned in the background technology. The efficiency of page construction can be greatly improved and the time of manually dragging components can be reduced. Since components and configuration parameters are saved and block-based, developers can reuse the same components and configurations in different pages and projects, thereby reducing duplication of work. Furthermore, by combining components into blocks, the operating object can build complex page structures more quickly without adjusting the position and style of each widget separately. The block-based design allows the operating object to quickly adjust the page layout by only changing the properties of the block without redesigning the entire page. For non-professional developers or business personnel, the block-based design reduces the learning curve and can get started and start building applications faster. Due to the standardization and block-based nature of components and configuration parameters, system maintenance and updates become easier because changes can be concentrated on a few blocks rather than on each individual component.

[0191] The embodiment of the present invention also provides a computer device having the above Figure 6 The low-code platform page block building device shown.

[0192] See also Figure 7 , Figure 7 is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 7As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 7 A processor 10 is taken as an example.

[0193] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include an integrated circuit. The integrated circuit may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0194] The memory 20 stores instructions executable by at least one processor 10, so that at least one processor 10 executes the method shown in the above embodiment.

[0195] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created by the use of a computer device based on the presentation of a small program landing page, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0196] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.

[0197] The computer device also includes an input device 30 and an output device 40. The processor 10, the memory 20, the input device 30 and the output device 40 may be connected via a bus or other means. Figure 7 The example of connecting through bus is taken in the following.

[0198] The input device 30 can receive input digital or character information, and generate key signal input related to the operation object setting and function control of the computer device, such as a touch screen, a keypad, a mouse, a track pad, a touch pad, an indicator rod, one or more mouse buttons, a trackball, a joystick, etc. The output device 40 may include a display device, an auxiliary lighting device (e.g., an LED) and a tactile feedback device (e.g., a vibration motor), etc. The above-mentioned display device includes but is not limited to a liquid crystal display, a light emitting diode, a display and a plasma display. In some optional embodiments, the display device can be a touch screen.

[0199] The embodiment of the present invention also provides a computer-readable storage medium. The method provided in the above embodiment of the present invention can be implemented in hardware, firmware, or implemented as a computer code that can be recorded in a storage medium, or is implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium and downloaded through a network, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0200] A part of the present invention may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present invention through the operation of the computer. Those skilled in the art should understand that the existence of the computer program instruction in a computer-readable medium includes, but is not limited to, a source file, an executable file, an installation package file, etc., and accordingly, the way in which the computer program instruction is executed by the computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium may be any available computer-readable storage medium or communication medium accessible to the computer.

[0201] Although the embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present invention, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A method for constructing page blocks on a low-code platform, characterized in that: The method comprises: Obtaining a container identifier, a component identifier, a container position distribution, and a position of each component in the container respectively included in at least one container; According to the component identifier, determining and saving component resources and component configuration parameters associated with the component corresponding to the component identifier; Generate a block based on the container identifier, the component identifier, the location of each component in the container, the container location distribution, the component resources, and the component configuration parameters; After setting the block attributes in the block, the block is saved.

2. The method according to claim 1, characterized in that The obtaining of the container identifier, the component identifier, the container position distribution, and the position of each component in the container respectively included in the at least one container specifically includes: When at least one container is selected in the target page according to the sliding track, a container identifier, a component identifier, a container position distribution, and a position of each component in the container are extracted from the target page; or, When it is detected that at least one container is dragged from the low-code platform component library to a blank page, a container identifier and a container position distribution of each container in the at least one container are obtained; When it is detected that at least one component is dragged from the low-code platform component library to the first container, the component identifier of each of the at least one component and the position of each of the components in the first container are obtained, wherein the first container is any one of the at least one container; When the container dragging behavior or the component dragging behavior is not detected within a preset time period, the detection action is stopped.

3. The method according to claim 1 or 2, characterized in that: The component resources include local resources and third-party resources; The component configuration parameters include one or more of component reference variable data, component event callback method definition, component CSS class style definition, component access data source, and component tree used by the block.

4. The method according to claim 1 or 2, characterized in that: The method further comprises: Generate block identification information corresponding to each block; Based on the block identification information respectively corresponding to each of the blocks, the parameter name of the component configuration parameter included in the block is changed.

5. The method according to claim 4, characterized in that The method further comprises: Saving the block in a pre-built block library and generating a corresponding block version; A block list is generated based on the blocks in the block library, wherein the block list includes the block identification information and block version corresponding to each of the blocks.

6. The method according to claim 5, characterized in that The method further comprises: When a block modification instruction is received, according to the block modification instruction, the selected target block from the block library is connected to the low-code designer to modify the selected block in the low-code designer; After the modified block is saved, a new block version is generated and saved to the block library.

7. The method according to claim 6, characterized in that After the modified block is saved, a new block version is generated and saved to the block library, the method further includes: The block list is updated based on the block version information of the modified block.

8. A low-code platform page block construction device, characterized in that: The device comprises: An acquisition module, used to acquire a container identifier, a component identifier, a container position distribution, and a position of each component in the container respectively included in at least one container; A processing module, configured to determine and save, according to the component identifier, component resources and component configuration parameters associated with the component corresponding to the component identifier; A generation module, configured to generate a block based on the container identifier, the component identifier, the position of each component in the container, the container position distribution, the component resources, and the component configuration parameters; The processing module is further configured to save the block after setting the block attributes in the block.

9. A computer device, characterized in that: include: A memory and a processor, the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the low-code platform page block construction method described in any one of claims 1 to 7 by executing the computer instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, which are used to enable a computer to execute the low-code platform page block construction method described in any one of claims 1 to 7.

Images