Low-code Page Development Method, Device, Equipment and Storage Medium

Abstract

This application relates to the field of page development technology, and discloses a low-code page development method, device, equipment and storage medium. The method includes: displaying a component library, a component tree editing area, a component property editing area, a logic method library and a logic property editing area in a visual interface; obtaining a to-be-processed component tree input by a user in the component tree editing area based on the component library; for each component in the to-be-processed component tree, obtaining component property configuration data input by the user in the component property editing area; obtaining logic method configuration data input by the user in the logic property editing area based on the logic method library and the to-be-processed component tree; performing code conversion according to the to-be-processed component tree, component property configuration data and logic method configuration data input by the user to obtain a page development result. It realizes the visual construction of the page and the configuration of interaction events, and improves the development efficiency.

Description

Technical Field

[0001] This application relates to the field of page development technology, and particularly to a low-code page development method, device, equipment and storage medium. Background Art

[0002] With the development of informatization, more and more business scenarios require the support of front-end development. How to improve development efficiency and lower the development threshold has become particularly important and urgent, and low-code platform technology has emerged accordingly. Low-code platform technology builds software by using visual models and graphic design technology, reducing the time and cost of front-end development. Currently, after most low-code platforms use the visual view UI (user interface) to draw and generate business code, the logical code of interaction events is manually input, resulting in low development efficiency and poor maintainability. Summary of the Invention

[0003] The main purpose of this application is to provide a low-code page development method, device, equipment and storage medium, aiming to solve the technical problem that in the existing visual development page, after using the visual view UI to draw and generate business code, the logical code of interaction events is manually input, resulting in low development efficiency.

[0004] To achieve the above-mentioned invention purpose, this application proposes a low-code page development method, and the method includes:

[0005] Obtain a page development request;

[0006] In response to the page development request, display a component library, a component tree editing area, a component attribute editing area, a logic method library and a logic attribute editing area in the visual interface;

[0007] Based on the component library, obtain the to-be-processed component tree input by the user in the component tree editing area;

[0008] For each component in the to-be-processed component tree, obtain the component attribute configuration data input by the user in the component attribute editing area;

[0009] Based on the logic method library and the to-be-processed component tree, obtain the logic method configuration data input by the user in the logic attribute editing area;

[0010] Perform code conversion according to the to-be-processed component tree, the component attribute configuration data and the logic method configuration data input by the user to obtain a page development result.

[0011] Further, the step of obtaining the to-be-processed component tree input by the user in the component tree editing area based on the component library includes:

[0012] Based on the component library, obtain the component tree to be stored input by the user in the component tree editing area;

[0013] Obtain a component tree storage request;

[0014] In response to the component tree storage request, generate a JSON tree according to the component tree to be stored to obtain the component tree to be processed;

[0015] Store the component tree to be processed in the component tree library.

[0016] Further, the step of obtaining the logical method configuration data input by the user in the logical attribute editing area based on the logical method library and the component tree to be processed includes:

[0017] Obtain a logical method configuration request according to the component tree to be processed, and the logical method configuration request carries a component identifier to be processed;

[0018] Display a logical method configuration interface corresponding to the component identifier to be processed in the logical attribute editing area;

[0019] Based on the logical method library, obtain a set of logical method identifiers in the logical method configuration interface;

[0020] In the logical method configuration interface, obtain the input parameter configuration input by the user according to each logical method identifier in the set of logical method identifiers and each component identifier in the component tree to be processed to obtain the logical method configuration data to be processed;

[0021] Repeat the step of obtaining the logical method configuration request according to the component tree to be processed until a logical attribute editing completion signal is obtained;

[0022] According to the logical attribute editing completion signal, use each of the logical method configuration data to be processed as the logical method configuration data input by the user.

[0023] Further, the step of obtaining a set of logical method identifiers in the logical method configuration interface based on the logical method library includes:

[0024] Based on the logical method library, obtain the standard logical methods dragged into by the user in the logical method configuration interface;

[0025] Based on a logical method custom plug-in, obtain the custom logical methods input by the user;

[0026] Determine the set of logical method identifiers according to each of the standard logical methods and each of the custom logical methods.

[0027] Further, the steps for the logic method-based custom plugin to obtain the custom logic method input by the user include:

[0028] Obtain a custom request for the logic method;

[0029] In response to the custom request for the logic method, display a custom interface for the logic method according to the logic method-based custom plugin;

[0030] Obtain the custom logic method input by the user in the custom interface for the logic method.

[0031] Further, the steps for performing code conversion based on the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result include:

[0032] Adopt a traversal regression method to obtain a node from the to-be-processed component tree as the node to be converted;

[0033] Obtain the component attribute configuration data corresponding to the node to be converted from the component attribute configuration data as the to-be-converted component attribute configuration data;

[0034] Obtain the logic method configuration data corresponding to the node to be converted from the logic method configuration data as the to-be-converted logic method configuration data;

[0035] Adopt a preset format to perform business code conversion based on the node to be converted and the to-be-converted component attribute configuration data to obtain the business code to be combined;

[0036] Adopt the preset format to perform logic code conversion based on the node to be converted and the to-be-converted logic method configuration data to obtain the logic code to be combined;

[0037] Adopt a preset code insertion rule to insert the to-be-combined logic code into the to-be-combined business code to obtain the code conversion result corresponding to the node to be converted;

[0038] Repeat the step of adopting the traversal regression method to obtain a node from the to-be-processed component tree as the node to be converted until all components in the to-be-processed component tree are traversed;

[0039] Determine the page development result based on each of the code conversion results.

[0040] Further, after the step of performing code conversion based on the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result, it includes:

[0041] Obtain a packaging request, where the packaging request carries a packaging type;

[0042] Obtain a packaging tool according to the file format of the page development result;

[0043] When the packaging type is HTML type, use the packaging tool to perform HTML file conversion on the page development result to obtain a target HTML file;

[0044] When the packaging type is JavaScript type, use the packaging tool to perform JavaScript file conversion on the page development result to obtain a target JavaScript file.

[0045] This application also proposes a low-code page development device, and the device includes:

[0046] A request acquisition module, configured to obtain a page development request;

[0047] A visual interface display module, configured to respond to the page development request and display a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area in a visual interface;

[0048] A to-be-processed component tree acquisition module, configured to acquire a to-be-processed component tree input by a user in the component tree editing area based on the component library;

[0049] A component attribute configuration data acquisition module, configured to acquire component attribute configuration data input by the user in the component attribute editing area for each component in the to-be-processed component tree;

[0050] A logic method configuration data acquisition module, configured to acquire logic method configuration data input by the user in the logic attribute editing area based on the logic method library and the to-be-processed component tree;

[0051] A page development result determination module, configured to perform code conversion according to the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result.

[0052] This application also proposes a computer device, including a memory and a processor, where the memory stores a computer program, and when the processor executes the computer program, the steps of the method described in any one of the above are implemented.

[0053] This application also proposes a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the method described in any one of the above are implemented.

[0054] The low-code page development method, device, equipment and storage medium of the present application. The method first displays a component library, a component tree editing area, a component attribute editing area, a logic method library and a logic attribute editing area in a visual interface. Secondly, based on the component library, a to-be-processed component tree input by the user is obtained in the component tree editing area. For each component in the to-be-processed component tree, component attribute configuration data input by the user is obtained in the component attribute editing area. Then, based on the logic method library and the to-be-processed component tree, logic method configuration data input by the user is obtained in the logic attribute editing area. Finally, code conversion is performed according to the to-be-processed component tree, the component attribute configuration data and the logic method configuration data input by the user to obtain a page development result, realizing visual construction of the page and configuration of interaction events, improving the development efficiency, reducing the technical threshold of page development, and improving the maintainability of the page. Description of the Drawings

[0055] Figure 1 It is a schematic flowchart of the low-code page development method according to an embodiment of the present application;

[0056] Figure 2 It is a schematic block diagram of the structure of the low-code page development device according to an embodiment of the present application;

[0057] Figure 3 It is a schematic block diagram of the structure of a computer device according to an embodiment of the present application.

[0058] The realization, functional features and advantages of the object of the present application will be further described with reference to the embodiments and the accompanying drawings. Detailed Embodiments

[0059] In order to make the object, technical solution and advantages of the present application clearer, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0060] Referring to Figure 1 , an embodiment of the present application provides a low-code page development method, and the method includes:

[0061] S1: Obtain a page development request;

[0062] S2: Respond to the page development request and display a component library, a component tree editing area, a component attribute editing area, a logic method library and a logic attribute editing area in a visual interface;

[0063] S3: Based on the component library, obtain a to-be-processed component tree input by the user in the component tree editing area;

[0064] S4: For each component in the component tree to be processed, obtain the component attribute configuration data input by the user in the component attribute editing area;

[0065] S5: Based on the logic method library and the component tree to be processed, obtain the logic method configuration data input by the user in the logic attribute editing area;

[0066] S6: Perform code conversion according to the component tree to be processed, the component attribute configuration data, and the logic method configuration data input by the user to obtain the page development result.

[0067] In this embodiment, first, a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area are displayed in a visual interface. Second, based on the component library, obtain the component tree to be processed input by the user in the component tree editing area. For each component in the component tree to be processed, obtain the component attribute configuration data input by the user in the component attribute editing area. Then, based on the logic method library and the component tree to be processed, obtain the logic method configuration data input by the user in the logic attribute editing area. Finally, perform code conversion according to the component tree to be processed, the component attribute configuration data, and the logic method configuration data input by the user to obtain the page development result, realizing the visual construction of the page and the configuration of interaction events, improving the development efficiency, reducing the technical threshold of page development, and improving the maintainability of the page.

[0068] For S1, a page development request input by the user can be obtained.

[0069] The page development request is a request for page development in a visual interface.

[0070] The page refers to a Web (World Wide Web) page.

[0071] For S2, when the page development request is obtained, a visual interface is displayed using a preset interface display rule, where a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area are loaded in the visual interface.

[0072] For example, the preset interface display rule is: the component library and the logic method library are displayed on the left side, the component attribute editing area and the logic attribute editing area are located on the right side of the component library and the logic method library, and the component tree editing area is located on the right side of the component attribute editing area and the logic attribute editing area.

[0073] The component library includes, but is not limited to: Alibaba's basic component library, custom component library, non-page-layout native component library, page-layout native component library, and page templates. Alibaba's basic component library is the basic component library released by Alibaba. The non-page-layout native component library is a library of HTML (HyperText Markup Language) native components for functions other than page layout. The page-layout native component library is a library of HTML native components for page layout. Page templates are templates for Web pages.

[0074] The components in the custom component library are components obtained by secondary encapsulation based on HTML native components. The custom component library includes, but is not limited to: custom table components, custom form components, and custom button components. For example, for the table native component (i.e., the HTML native component), after secondary encapsulation by integrating functions such as interface requests and page switching, the resulting component is a custom table component. The specific example here is not limited.

[0075] Since table data is generally obtained through interface requests, the parameters that change with each interface request include: the URL (Uniform Resource Locator) path, the interface request method, and the input parameters. Therefore, for the custom table component obtained by secondary encapsulation of the table native component, only the URL path, the interface request method, and the input parameters need to be input into the custom table component, avoiding rewriting a large amount of redundant code.

[0076] The component tree editing area is a canvas where users can drag the components in the component library into the canvas to form a tree structure, thus obtaining a component tree.

[0077] The component tree includes, but is not limited to: node data, the nested relationship of nodes, and the component property data of each node. The node data includes: the component name of the current node, the component ID of the current node, and the component type of the current node. That is to say, each piece of node data corresponds to a node in the component tree. The nested relationship of nodes is the parent-child relationship of the nodes in the component tree. The component property data is the configuration data of the component properties of a node's corresponding component. Among them, the configuration data of the component properties can be preset values or personalized values set by users.

[0078] For example, the component properties of a component for displaying pictures include: the reference address of the picture, the display width, and the display height. The specific example here is not limited.

[0079] The component property editing area is an area in the interface. When the user selects the component property shortcut button of a component in the component tree editing area, the component properties of the selected component will be displayed in the component property editing area, and the user can edit the displayed component properties.

[0080] The logic method library includes one or more logic methods, where the logic methods are used to implement interaction events.

[0081] Optionally, the logic methods in the logic method library are common methods encapsulated based on Hooks (a new React feature proposal that components should be written as pure functions) of React 17 (a JavaScript library for building user interfaces). For example, interface requests are encapsulated into a common method APIFetch, and APIFetch is used to provide an interface for obtaining resources (including cross-domain requests). No specific limitation is made in this example.

[0082] Common methods are methods abstracted and encapsulated according to daily business logic.

[0083] Among them, the logic methods in the logic method library are called through input parameters and logic method identifiers.

[0084] The logical property editing area is an area in the interface. When the user selects the logical property quick button of a component in the component tree editing area, the logical properties of the selected component will be displayed in the logical property editing area, and the user can edit the displayed logical properties.

[0085] For S3, the user creates each node of the component tree in the component tree editing area, drags the components in the component library to the component tree editing area, inserts the dragged components into the nodes of the component tree, and uses the component tree in the component tree editing area as the component tree to be processed.

[0086] For S4, for each component in the component tree to be processed, the component property configuration data input by the user is obtained in the component property editing area, and the obtained component property configuration data for each component is used as the component property configuration data.

[0087] The component property configuration data is the configuration data of the component properties of each component in the component property editing area. The configuration data of the component properties can adopt preset values or personalized values configured by the user.

[0088] For S5, based on the logic method library, the logical method selection and logical method configuration performed by the user for the components in the component tree to be processed are obtained in the logical property editing area, and the configured logical methods for each are used as the logical method configuration data.

[0089] It can be understood that steps S3, S4, and S5 can be executed in a cross - loop manner. For example, by step S3, a component is inserted into the component tree editing area, and by step S4, the component property configuration data input by the user is obtained in the component property editing area for the component inserted in step S3. Step S5 obtains the logical method configuration data input by the user in the logical property editing area for the component inserted in step S3. The steps of inserting a component, obtaining component property configuration data, and obtaining logical method configuration data are executed in a loop. No specific limitation is given here for the example. Another example is that by step S3, the construction of the component tree is completed in the component tree editing area, then by step S4, the component property configuration data corresponding to the component tree obtained in step S3 is obtained, and finally by step S5, the logical method configuration data corresponding to the component tree obtained in step S3 is obtained. No specific limitation is given here for the example. For example, by step S3, multiple components are inserted into the component tree editing area, and by step S4, the component property configuration data input by the user is obtained in the component property editing area for each component inserted in step S3. Step S5 obtains the logical method configuration data input by the user in the logical property editing area for each component inserted in step S3. The steps of inserting a component, obtaining component property configuration data, and obtaining logical method configuration data are executed in a loop. No specific limitation is given here for the example.

[0090] For S6, a method of traversing and regressing the to - be - processed component tree in a preset format is adopted. Business code conversion and logical code are respectively performed according to the component property configuration data and the logical method configuration data, and the page development result is determined based on the converted business code and logical code.

[0091] Optionally, the preset format includes any one of ts, js, tsx, jsx, css, and less.

[0092] It can be understood that steps S1 to S6 are implemented based on the react17 (a JavaScript library for building user interfaces) framework, node framework, js framework, and electron framework. The node framework is an application framework, sometimes also referred to as a runtime environment. Through it, applications can be built using the JavaScript programming language. The js framework refers to the JavaScript framework, and the JavaScript framework is a programming framework built on the basis of the JavaScript language. The electron framework is a framework for creating native programs using web technologies such as JavaScript, HTML, and CSS.

[0093] JavaScript is a lightweight, interpreted or just - in - time compiled programming language with function - first priority.

[0094] In one embodiment, the step of obtaining the component tree to be processed input by the user in the component tree editing area based on the component library includes:

[0095] S31: Based on the component library, obtain the component tree to be stored input by the user in the component tree editing area;

[0096] S32: Obtain a component tree storage request;

[0097] S33: In response to the component tree storage request, generate a JSON tree according to the component tree to be stored to obtain the component tree to be processed;

[0098] S34: Store the component tree to be processed in the component tree library.

[0099] In this embodiment, the component tree to be stored in the component tree editing area is converted into a JSON tree for storage, reducing the amount of stored data and improving the storage efficiency.

[0100] For S31, the user creates each node of the component tree in the component tree editing area, drags the components in the component library to the component tree editing area, inserts the dragged components into the nodes of the component tree, and uses the component tree in the component tree editing area as the component tree to be stored.

[0101] For S32, the component tree storage request input by the user can be obtained, or it can be a component tree storage request actively generated by the program file implementing the present application at preset time intervals.

[0102] The component tree storage request is a request to convert the component tree in the component tree editing area into a JSON tree for storage.

[0103] For S33, when the component tree storage request is obtained, a preset JSON (lightweight data interchange format) tree generation rule is adopted to generate a JSON tree according to the component tree to be stored, and the generated JSON tree is used as the component tree to be processed.

[0104] The JSON tree is data in JSON format stored in a tree structure. It can be understood that the JSON tree is similar to the DOM (Document Object Model) node tree.

[0105] For S34, the component tree to be processed is stored in the component tree library in the database, thus completing the quick backup of the component tree in the component tree editing area.

[0106] In one embodiment, the step of obtaining the logical method configuration data input by the user in the logical attribute editing area based on the logical method library and the component tree to be processed includes:

[0107] S51: Obtain a logical method configuration request according to the to-be-processed component tree, where the logical method configuration request carries a component identifier to be processed;

[0108] S52: Display a logical method configuration interface corresponding to the component identifier to be processed in the logical property editing area;

[0109] S53: Based on the logical method library, obtain a set of logical method identifiers in the logical method configuration interface;

[0110] S54: In the logical method configuration interface, obtain the input parameter configuration entered by the user according to each logical method identifier in the set of logical method identifiers and each component identifier in the to-be-processed component tree, and obtain to-be-processed logical method configuration data;

[0111] S55: Repeat the step of obtaining the logical method configuration request according to the to-be-processed component tree until a logical property editing completion signal is obtained;

[0112] S56: According to the logical property editing completion signal, use each piece of the to-be-processed logical method configuration data as the logical method configuration data input by the user.

[0113] In this embodiment, based on the logical method library and the to-be-processed component tree, logical method configuration data input by the user is obtained in the logical property editing area, realizing visual configuration of interaction events, improving development efficiency, and reducing the technical threshold of page development.

[0114] For S51, when the user selects the logical property of the component corresponding to the node in the to-be-processed component tree, the logical method configuration request will be triggered. When triggering the logical method configuration request, the component identifier corresponding to the node selected by the user is used as the component identifier to be processed carried by the logical method configuration request.

[0115] For S52, when the component identifier to be processed has not been configured with a logical method, a preset logical method configuration interface will be displayed in the logical property editing area, and the displayed preset logical method configuration interface is used as the target logical method configuration interface; when the component identifier to be processed has been configured with a logical method, a logical method configuration interface including the configured logical method will be displayed in the logical property editing area, and the displayed logical method configuration interface is used as the target logical method configuration interface.

[0116] For S53, obtain the logical method that the user drags into from the logical method library in the target logical method configuration interface, and use the logical method identifiers corresponding to each logical method in the target logical method configuration interface as the logical method identifier set.

[0117] A logical method identifier can be data that uniquely identifies a logical method, such as a logical method name, a logical method ID, etc.

[0118] It can be understood that the logical method is displayed in the target logical method configuration interface using a preset logical method display template. The preset logical method display template includes but is not limited to: logical method identifier, name of the logical method, input parameter configuration items of the logical method, output parameters of the logical method.

[0119] For S54, based on the chain dependency structure between the output parameter and the dependent parameter, in the logical method configuration interface, perform input parameter configuration according to each logical method identifier in the logical method identifier set and each component identifier in the component tree to be processed, and obtain the to-be-processed logical method configuration data corresponding to the component identifier to be processed.

[0120] For example, the output parameter of logical method Fun1 is a, and parameter a is the dependent parameter (input parameter) of logical method Fun2. A chain dependency structure of Fun1 => a => Fun2 is formed between logical method Fun1 and logical method Fun2, thereby associating multiple logical methods. No specific limitation is made in this example.

[0121] For another example, the output parameter a exported by logical method Fun3 is the dependent parameter of component Comp1, forming a chain dependency structure of Fun3 => a => Comp1, thereby associating the logical method with the component. No specific limitation is made in this example.

[0122] For S55, repeatedly execute steps S51 to S55 until a logical property editing completion signal input by the user is obtained.

[0123] The logical property editing completion signal is a signal for completing the logical property editing of the component tree to be processed.

[0124] For S56, when the logical property editing completion signal is obtained, combine each piece of the to-be-processed logical method configuration data into one piece of data, and use the combined data as the logical method configuration data.

[0125] In one embodiment, the step of obtaining the logical method identifier set in the logical method configuration interface based on the logical method library includes:

[0126] S531: Obtain the standard logic methods dragged in by the user in the logic method configuration interface based on the logic method library;

[0127] S532: Obtain the custom logic methods input by the user based on the logic method custom plugin;

[0128] S533: Determine the logic method identification set according to each of the standard logic methods and each of the custom logic methods.

[0129] This embodiment realizes obtaining standard logic methods based on the logic method library and obtaining custom logic methods based on the logic method custom plugin. Thus, while reducing the code of the logic methods input by the user, the custom requirements of personalization are met through the logic method custom plugin, improving the user experience.

[0130] For S531, obtain in the target logic method configuration interface the logic methods dragged in by the user from the logic method library.

[0131] For S532, use the logic method custom plugin to obtain the custom logic methods manually input by the user.

[0132] For S533, use the logic method identifications corresponding to each of the standard logic methods in the target logic method configuration interface and the logic method identifications corresponding to each of the custom logic methods as the logic method identification set.

[0133] In one embodiment, the step of obtaining the custom logic methods input by the user based on the logic method custom plugin includes:

[0134] S5321: Obtain a logic method custom request;

[0135] S5322: Respond to the logic method custom request and display a logic method custom interface according to the logic method custom plugin;

[0136] S5323: Obtain in the logic method custom interface the custom logic methods input by the user.

[0137] This embodiment obtains custom logic methods based on the logic method custom plugin, meets the custom requirements of personalization, and improves the user experience.

[0138] For S5321, obtain the logic method custom request input by the user.

[0139] The logic method custom request is, namely, a request to call the logic method custom plugin for logic method customization.

[0140] For S5322, when the custom request for the logic method is obtained, the interface is displayed according to the custom plugin for the logic method, and the displayed interface is used as the custom interface for the logic method.

[0141] For S5323, the code of the logic method input by the user is obtained in the custom interface for the logic method, and the obtained code of the logic method is used as the custom logic method.

[0142] In one embodiment, the step of performing code conversion according to the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain the page development result includes:

[0143] S61: Using a traversal regression method, obtain a node from the to-be-processed component tree as the node to be converted;

[0144] S62: Obtain the component attribute configuration data corresponding to the node to be converted from the component attribute configuration data as the to-be-converted component attribute configuration data;

[0145] S63: Obtain the logic method configuration data corresponding to the node to be converted from the logic method configuration data as the to-be-converted logic method configuration data;

[0146] S64: Using a preset format, perform business code conversion according to the node to be converted and the to-be-converted component attribute configuration data to obtain the business code to be combined;

[0147] S65: Using the preset format, perform logic code conversion according to the node to be converted and the to-be-converted logic method configuration data to obtain the logic code to be combined;

[0148] S66: Using a preset code insertion rule, insert the to-be-combined logic code into the to-be-combined business code to obtain the code conversion result corresponding to the node to be converted;

[0149] S67: Repeat the step of using the traversal regression method to obtain a node from the to-be-processed component tree as the node to be converted until all components in the to-be-processed component tree are traversed;

[0150] S68: Determine the page development result according to each of the code conversion results.

[0151] In this embodiment, first, business code conversion and logic code conversion are performed on each node obtained by using the traversal regression method, and then the converted business code and logic code are combined to obtain the code conversion result of one node. Finally, the page development result is determined according to each code conversion result, thereby realizing the visualization of page construction and the configuration of interaction events, improving the development efficiency, reducing the technical threshold of page development, and improving the maintainability of the page.

[0152] For S61, using the traversal regression method, starting from the first node in the to-be-processed component tree, each time a node is obtained as the node to be converted.

[0153] For S62, the component identifier corresponding to the node to be converted is searched in the component attribute configuration data, and the component attribute configuration data corresponding to the component identifier found in the component attribute configuration data is used as the to-be-converted component attribute configuration data.

[0154] For S63, the component identifier corresponding to the node to be converted is searched in the logic method configuration data, and the logic method configuration data corresponding to the component identifier found in the logic method configuration data is used as the to-be-converted logic method configuration data.

[0155] For S64, according to the information of the node to be converted and the to-be-converted component attribute configuration data, business code conversion in a preset format is performed, and the converted business code is used as the business code to be combined.

[0156] For S65, according to the information of the node to be converted and the to-be-converted logic method configuration data, logic code conversion in a preset format is performed, and the converted logic code is used as the logic code to be combined.

[0157] For S66, using a preset code insertion rule, the to-be-combined logic code is inserted into the to-be-combined business code to obtain the complete code of one component, and the complete code of this component is used as the code conversion result corresponding to the node to be converted.

[0158] For S67, steps S61 to S67 are repeatedly executed until all components in the to-be-processed component tree are traversed. When all components in the to-be-processed component tree are traversed, it means that the code conversion results of all nodes in the to-be-processed component tree have been obtained.

[0159] For S68, using a preset splicing method, each of the code conversion results is spliced, and the spliced code is used as the page development result.

[0160] In one embodiment, after the step of performing code conversion based on the component tree to be processed, the component attribute configuration data, and the logic method configuration data according to the user input to obtain a page development result, the following steps are included:

[0161] S71: Obtain a packaging request, where the packaging request carries a packaging type;

[0162] S72: Obtain a packaging tool according to the file format of the page development result;

[0163] S73: When the packaging type is HTML type, use the packaging tool to perform HTML file conversion on the page development result to obtain a target HTML file;

[0164] S74: When the packaging type is JavaScript type, use the packaging tool to perform JavaScript file conversion on the page development result to obtain a target JavaScript file.

[0165] In this embodiment, different format file conversions are automatically performed according to the packaging type, thereby meeting different requirements and improving the user experience.

[0166] For S71, obtain the packaging request input by the user.

[0167] The packaging request is a request to package the page development result into a page file.

[0168] The packaging type includes: HTML type and / or JavaScript type.

[0169] For S72, obtain the packaging tool corresponding to the file format of the page development result from the packaging tool library.

[0170] The file format of the page development result is the same as the preset format.

[0171] For S73, when the packaging type is HTML type, it means that conversion to an HTML file is required. Therefore, use the packaging tool to perform HTML file conversion on the page development result, and use the converted HTML file as the target HTML file.

[0172] For S74, when the packaging type is JavaScript type, it means that conversion to a JavaScript file is required. Therefore, use the packaging tool to perform JavaScript file conversion on the page development result, and use the converted JavaScript file as the target JavaScript file.

[0173] Refer toFigure 2 , this application also proposes a low-code page development device, and the device includes:

[0174] A request acquisition module 100, configured to acquire a page development request;

[0175] A visual interface display module 200, configured to respond to the page development request and display a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area in the visual interface;

[0176] A to-be-processed component tree acquisition module 300, configured to acquire a to-be-processed component tree input by a user in the component tree editing area based on the component library;

[0177] A component attribute configuration data acquisition module 400, configured to acquire component attribute configuration data input by the user in the component attribute editing area for each component in the to-be-processed component tree;

[0178] A logic method configuration data acquisition module 500, configured to acquire logic method configuration data input by the user in the logic attribute editing area based on the logic method library and the to-be-processed component tree;

[0179] A page development result determination module 600, configured to perform code conversion according to the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result.

[0180] In this embodiment, first, a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area are displayed in the visual interface. Secondly, based on the component library, a to-be-processed component tree input by the user is acquired in the component tree editing area, and for each component in the to-be-processed component tree, component attribute configuration data input by the user is acquired in the component attribute editing area. Then, based on the logic method library and the to-be-processed component tree, logic method configuration data input by the user is acquired in the logic attribute editing area. Finally, code conversion is performed according to the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result, realizing visual construction of the page and configuration of interaction events, improving the development efficiency, reducing the technical threshold of page development, and improving the maintainability of the page.

[0181] Referring to Figure 3 , in the embodiment of this application, a computer device is further provided. The computer device may be a server, and its internal structure may be as Figure 3As shown in the figure. The computer device includes a processor, a memory, a network interface, and a database connected through a system bus. Among them, the processor of the computer design is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The database of the computer device is used to store data such as low-code page development methods. The network interface of the computer device is used to communicate with external terminals through a network connection. When the computer program is executed by the processor, it implements a low-code page development method. The low-code page development method includes: obtaining a page development request; in response to the page development request, displaying a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area in a visual interface; based on the component library, obtaining a to-be-processed component tree input by the user in the component tree editing area; for each component in the to-be-processed component tree, obtaining component attribute configuration data input by the user in the component attribute editing area; based on the logic method library and the to-be-processed component tree, obtaining logic method configuration data input by the user in the logic attribute editing area; performing code conversion according to the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result.

[0182] In this embodiment, first, a component library, a component tree editing area, a component attribute editing area, a logic method library, and a logic attribute editing area are displayed in a visual interface. Second, based on the component library, a to-be-processed component tree input by the user is obtained in the component tree editing area. For each component in the to-be-processed component tree, component attribute configuration data input by the user is obtained in the component attribute editing area. Then, based on the logic method library and the to-be-processed component tree, logic method configuration data input by the user is obtained in the logic attribute editing area. Finally, code conversion is performed according to the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user to obtain a page development result, realizing the visualization of page construction and interaction event configuration, improving the development efficiency, reducing the technical threshold of page development, and improving the maintainability of the page.

[0183] An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, a low-code page development method is implemented, including the steps of: obtaining a page development request; in response to the page development request, displaying a component library, a component tree editing area, a component property editing area, a logic method library, and a logic property editing area in a visual interface; based on the component library, obtaining a to-be-processed component tree input by a user in the component tree editing area; for each component in the to-be-processed component tree, obtaining component property configuration data input by the user in the component property editing area; based on the logic method library and the to-be-processed component tree, obtaining logic method configuration data input by the user in the logic property editing area; and performing code conversion according to the to-be-processed component tree, the component property configuration data, and the logic method configuration data input by the user to obtain a page development result.

[0184] For the above-mentioned low-code page development method, first, a component library, a component tree editing area, a component property editing area, a logic method library, and a logic property editing area are displayed in a visual interface. Secondly, based on the component library, a to-be-processed component tree input by a user is obtained in the component tree editing area. For each component in the to-be-processed component tree, component property configuration data input by the user is obtained in the component property editing area. Then, based on the logic method library and the to-be-processed component tree, logic method configuration data input by the user is obtained in the logic property editing area. Finally, code conversion is performed according to the to-be-processed component tree, the component property configuration data, and the logic method configuration data input by the user to obtain a page development result, realizing the visualization of page construction and the configuration of interaction events, improving the development efficiency, reducing the technical threshold of page development, and improving the maintainability of the page.

[0185] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, storage, database, or other medium provided in this application and used in the embodiments can include non-volatile and / or volatile memories. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and Rambus dynamic RAM (RDRAM), etc.

[0186] It should be noted that in this article, the term "including", "comprising", or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, device, article, or method including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent to such a process, device, article, or method. Without further limitation, an element defined by the statement "including one..." does not exclude the existence of another identical element in the process, device, article, or method including that element.

[0187] The above are only the preferred embodiments of this application, and do not limit the patent scope of this application. Any equivalent structure or equivalent process transformation made by using the content of the specification and drawings of this application, or directly or indirectly applied in other related technical fields, shall be equally included in the patent protection scope of this application.

Claims

1. A low-code page development method, characterized in that, The method includes: Obtain a page development request; In response to the page development request, display a component library, a component tree editing area, a component property editing area, a logic method library, and a logic property editing area in a visual interface; Based on the component library, obtain a to-be-processed component tree input by the user in the component tree editing area; For each component in the to-be-processed component tree, obtain component property configuration data input by the user in the component property editing area; Based on the logic method library and the to-be-processed component tree, obtain logic method configuration data input by the user in the logic property editing area; Perform code conversion according to the to-be-processed component tree, the component property configuration data, and the logic method configuration data input by the user to obtain a page development result; The step of, based on the logic method library and the to-be-processed component tree, obtaining logic method configuration data input by the user in the logic property editing area includes: Obtain a logic method configuration request according to the to-be-processed component tree, where the logic method configuration request carries a component identifier to be processed; Display a logic method configuration interface corresponding to the component identifier to be processed in the logic property editing area; Based on the logic method library, obtain a set of logic method identifiers in the logic method configuration interface; In the logic method configuration interface, obtain input parameter configurations input by the user according to each logic method identifier in the set of logic method identifiers and each component identifier in the to-be-processed component tree to obtain to-be-processed logic method configuration data; Repeat the step of obtaining the logic method configuration request according to the to-be-processed component tree until a logic property editing completion signal is obtained; According to the logic property editing completion signal, use each piece of the to-be-processed logic method configuration data as the logic method configuration data input by the user; The step of performing code conversion according to the to-be-processed component tree, the component property configuration data, and the logic method configuration data input by the user to obtain a page development result includes: Adopt a traversal regression method to obtain a node from the to-be-processed component tree as a node to be converted; Obtain component property configuration data corresponding to the node to be converted from the component property configuration data as to-be-converted component property configuration data; Obtain logic method configuration data corresponding to the node to be converted from the logic method configuration data as to-be-converted logic method configuration data; Adopt a preset format to perform business code conversion according to the node to be converted and the to-be-converted component property configuration data to obtain to-be-combined business code; Adopt the preset format to perform logic code conversion according to the node to be converted and the to-be-converted logic method configuration data to obtain to-be-combined logic code; Adopt a preset code insertion rule to insert the to-be-combined logic code into the to-be-combined business code to obtain a code conversion result corresponding to the node to be converted; Repeat the step of using the traversal regression method to obtain a node from the component tree to be processed as the node to be converted until all components in the component tree to be processed are traversed; Determine the page development result according to each of the code conversion results.

2. The low-code page development method according to claim 1, wherein The step of obtaining the component tree to be processed input by the user in the component tree editing area based on the component library includes: Based on the component library, obtain the component tree to be stored input by the user in the component tree editing area; Obtain a component tree storage request; In response to the component tree storage request, generate a JSON tree according to the component tree to be stored to obtain the component tree to be processed; Store the component tree to be processed in the component tree library.

3. The low-code page development method according to claim 1, characterized in that, The step of obtaining a set of logical method identifiers in the logical method configuration interface based on the logical method library includes: Based on the logical method library, obtain the standard logical methods dragged in by the user in the logical method configuration interface; Based on a logical method custom plug-in, obtain the custom logical methods input by the user; Determine the set of logical method identifiers according to each of the standard logical methods and each of the custom logical methods.

4. The low-code page development method according to claim 3, characterized in that, The step of obtaining the custom logical methods input by the user based on the logical method custom plug-in includes: Obtain a logical method customization request; In response to the logical method customization request, display a logical method customization interface according to the logical method custom plug-in; Obtain the custom logical methods input by the user in the logical method customization interface.

5. The low-code page development method according to claim 1, characterized in that After the step of performing code conversion according to the component tree to be processed, the component attribute configuration data, and the logical method configuration data input by the user to obtain a page development result, it includes: Obtain a packaging request, where the packaging request carries a packaging type; Obtain a packaging tool according to the file format of the page development result; When the packaging type is the HTML type, use the packaging tool to perform HTML file conversion on the page development result to obtain a target HTML file; When the packaging type is the JavaScript type, use the packaging tool to perform JavaScript file conversion on the page development result to obtain a target JavaScript file.

6. A low-code page development device for performing the method according to any one of claims 1-5, characterized in that The device includes: A request acquisition module, configured to acquire a page development request; A visualization interface display module, configured to respond to the page development request and display a component library, a component tree editing area, a component attribute editing area, a logical method library, and a logical attribute editing area in the visualization interface; A component tree to be processed acquisition module, configured to obtain the component tree to be processed input by the user in the component tree editing area based on the component library; A component attribute configuration data acquisition module, configured to, for each component in the component tree to be processed, obtain the component attribute configuration data input by the user in the component attribute editing area; A logical method configuration data acquisition module, configured to obtain the logical method configuration data input by the user in the logical attribute editing area based on the logical method library and the component tree to be processed; The page development result determination module is used to perform code conversion based on the to-be-processed component tree, the component attribute configuration data, and the logic method configuration data input by the user, so as to obtain a page development result.

7. A computer device, comprising a memory and a processor, the memory storing a computer program, characterized in that, When the processor executes the computer program, the steps of the method according to any one of claims 1 to 5 are implemented.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 5 are implemented.

Images