Page code generation method and device, electronic equipment and storage medium

Abstract

The invention provides a page code generation method and device, electronic equipment and a storage medium, and the page code generation method comprises the steps: determining target component configuration information adaptive to different types of fields in a JSON configuration file of a CRUD page to be developed; performing code generation based on the configuration information of each target component and a preset EJS template, and determining a front-end React Type file code of the CRUD page to be developed; wherein the preset EJS template is an EJS template which is extracted from common codes of different CRUD pages in advance based on React project specifications. By using the method, the code generator can solve the technical problems that an existing low-code development platform does not have a unified standard and is high in learning cost, and existing old project code splitting and customization extension are limited, the development efficiency of an existing reaction front-end system is greatly improved, and project iteration online time is shortened.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a page code generation method, device, electronic equipment and storage medium. Background Art

[0002] As we all know, a low-code development platform is a development platform that can quickly build its own application system in a visual way without or with little coding. The editor or canvas page of the low-code development platform has multiple sets of components built in, and developers can generate code files by dragging and dropping the required components through the visual interface to layout and configure them. However, since many existing low-code development platforms do not have unified specifications and their usage is very different from each other, and they are also separated from the codes of developed projects, there are great limitations in custom expansion, which makes it basically impossible for low-code development to be integrated into existing projects and improve the development efficiency of existing projects. Summary of the invention

[0003] The present invention provides a page code generation method, device, electronic device and storage medium, which are used to solve the defects of existing low-code development platforms, such as lack of unified standards, high learning costs and limitations in customized extensions. The present invention solves the technical problems of existing low-code development platforms, such as lack of unified standards, high learning costs and limitations in customized extensions, greatly improves the development iteration efficiency of the react front-end system, and shortens the project iteration online time.

[0004] The present invention provides a page code generation method, comprising:

[0005] Determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed;

[0006] Generate code based on the target component configuration information and the preset EJS template to determine the front-end React Typescript file code of the CRUD page to be developed;

[0007] The preset EJS template is an EJS template extracted from the common codes of different CRUD pages in advance based on the React project specification.

[0008] According to a page code generation method provided by the present invention, the target component configuration information includes target table component configuration information and target string form configuration information, and the target component configuration information adapted to different types of fields in the JSON configuration file of the CRUD page to be developed is determined, including:

[0009] Parse different types of fields in the JSON configuration file to determine the target component types mapped by the different types of fields, and determine the target front-end components corresponding to the target component types based on the mapping relationship between the component type and the front-end component;

[0010] Based on the project development requirement document of the target CRUD, respectively configure table columns for at least one target table component in each of the target front-end components, and determine the target table component configuration information corresponding to each of the target table components;

[0011] Based on the project development requirement document, filtering items or newly added editing items are configured for at least one target form component in each target front-end component, and target string form configuration information corresponding to each target form component is determined.

[0012] According to a page code generation method provided by the present invention, the filtering items or newly added editing item configuration of at least one target form component in each of the target front-end components based on the project development requirement document, and determining the target string form configuration information corresponding to each of the target form components, include:

[0013] For each target form component, data source binding configuration and additional verification configuration are performed on the target form component based on the project development requirement document, or filtering item configuration is performed on the target form component; and string conversion is performed based on the data source binding configuration result and the additional verification configuration result, or string conversion is performed based on the filtering item configuration result to determine the target string form configuration information corresponding to the target form component.

[0014] According to a page code generation method provided by the present invention, the string conversion is performed based on the data source binding configuration result and the added verification configuration result, including:

[0015] Determine component import information of the target form component and a calling function required to call a target data source of the target form component;

[0016] The component import information, the calling function, the data source binding configuration result and the added verification configuration result are converted into strings.

[0017] According to a page code generation method provided by the present invention, the data source binding configuration of the target form component based on the project development requirement document includes:

[0018] Based on the type of the target form component and the project development requirement document, determining whether the target form component requires binding to a data source;

[0019] When the target form component needs to bind a data source, the data source binding mode of the target form component and the target data source to be bound are determined, and based on the data source binding mode and the target data source, the data source binding configuration of the target form component is performed.

[0020] According to a page code generation method provided by the present invention, the determining component import information of the target form component includes:

[0021] The target form component is imported from an ant-design component library or a pre-built business component library, and component import information of the target form component is determined based on a successful import result of the ant-design component library or the business component library.

[0022] According to a page code generation method provided by the present invention, the method further includes:

[0023] Based on the import failure results of the ant-design component library and the business component library, the developer is prompted to determine the target form component and then perform the import operation, and based on the successful import result, the business component library and the mapping relationship between component types and front-end components are updated respectively.

[0024] The present invention also provides a page code generating device, comprising:

[0025] The field component configuration unit is used to determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed;

[0026] A page code generation unit, used to generate code based on the target component configuration information and the preset EJS template, and determine the front-end React Typescript file code of the CRUD page to be developed;

[0027] The preset EJS template is an EJS template extracted from the common codes of different CRUD pages in advance based on the React project specification.

[0028] The present invention also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, any of the page code generation methods described above is implemented.

[0029] The present invention also provides a non-transitory computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the page code generation method described in any one of the above is implemented.

[0030] The present invention provides a page code generation method, device, electronic device and storage medium, wherein the page code generation method, a code generator generates code based on target component configuration information adapted to different types of fields in a JSON configuration file of a CRUD page to be developed, and a preset EJS template to determine the front-end ReactTypescript file code of the CRUD page to be developed. Since the preset EJS template is an EJS template extracted from the common code of different CRUD pages based on the React project specifications, it can ensure that the code generated by the code generator can be easily integrated into the existing React project, ensuring that the developed front-end CRUD page has a unified appearance and user experience, helping developers to achieve gradual upgrades of the project while maintaining project consistency, avoiding code incompatibility issues, and having higher flexibility and scalability; and developers only need to care about the configuration items of the JSON configuration file and the component selection and component configuration of the CRUD page to be developed, and can quickly customize the required generated code according to project requirements without being constrained by the constraints of the low-code development platform, greatly reducing the learning cost and code development time of front-end developers, and there is no need to manually write a large amount of repetitive code, thereby solving the technical problems of the existing low-code development platform, such as the lack of unified standards, high learning costs, and limitations in customized extensions, greatly improving the development iteration efficiency of the react front-end system, and shortening the project iteration launch time. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0032] Figure 1 It is a flow chart of the page code generation method provided by the present invention;

[0033] Figure 2 It is a structural schematic diagram of the page code generating device provided by the present invention;

[0034] Figure 3 It is a structural schematic diagram of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0035] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings 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 ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0036] In the embodiments of the present application, "at least one" means one or more, and "more" means two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. In the text description of the present application, the character " / " generally indicates that the associated objects before and after are in an "or" relationship.

[0037] As we all know, low-code development platforms refer to development platforms that can quickly build their own application systems in a visual way without or with little coding; low-code development platforms have multiple sets of components built into the editor or canvas page, and developers use the visual interface to drag and drop the required components for layout configuration to generate code files. However, existing low-code development platforms have the following defects:

[0038] 1. It cannot be well integrated into existing developed projects. The code is fragmented, which runs counter to the componentization concept of the system itself, is not conducive to long-term project maintenance and iteration, and cannot improve the development efficiency of existing projects. In addition, the low-code development platform is a complete system, and it is basically impossible to carry out technology migration in existing projects.

[0039] Second, it is mostly used for the rapid generation of display pages, which does not involve complex business logic; or it can generate business codes with complex page logic in a timely manner. The learning cost of configuring interactive logic is also very high. This is because there is no unified standard, and the use of low-code development platforms of various companies is very different, which makes developers discouraged;

[0040] 3. It is not lightweight and flexible enough and has limited scalability. The generated code often has business coupling at different levels or is strongly dependent on the back-end server. In addition, due to some conventions and constraints of the low-code platform, some content is difficult to expand and cannot fully meet product requirements.

[0041] It can be seen from this that the existing low-code development platform has technical problems such as no unified standard, high learning cost and limitations in customized expansion. In order to solve the above technical problems, the present invention provides a page code generation method, device, electronic device and storage medium.

[0042] Combine the following Figure 1 to Figure 3The page code generation method, device, electronic device and storage medium provided by the present invention are described, wherein the execution subject of the page code generation method is a code generator for front-end developers, which can be set in an electronic device or a server, or a pre-developed low-code development platform; the electronic device can be a personal computer (PC), a portable device, a laptop, a smart phone, a tablet computer, a portable wearable device and other electronic devices, and the server can refer to a server, or a server cluster composed of multiple servers, a cloud computing center, etc. The present invention does not specifically limit the specific form of the electronic device or server. Furthermore, the page code generation method can also be applied to a page code generation device set in an electronic device or a server, and the page code generation device can be implemented by software, hardware or a combination of the two. The following takes the execution subject of the page code generation method as a code generator as an example to describe the page code generation method.

[0043] In order to facilitate understanding of the page code generation method provided by the embodiment of the present invention, the page code generation method provided by the present invention will be described in detail below through the following exemplary embodiments. It is understood that the following exemplary embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0044] Reference Figure 1 , is a flow chart of the page code generation method provided by the present invention, such as Figure 1 As shown, the page code generation method includes the following steps 110 and 120.

[0045] Step 110: Determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed.

[0046] Among them, different types of fields in the JSON configuration file may include but are not limited to new fields (canCreate), edit fields (canEdit), table configuration fields (canList) and filter fields (canQuery); JSON (JavaScript Object Notation, JS object notation) is a lightweight data exchange format; CRUD pages are specifically the front-end add (Create), read (Read), update (Update) and delete (Delete) pages.

[0047] Specifically, in step 110, the code generator first obtains the JSON configuration file of the CRUD page to be developed, and the JSON configuration file can be obtained according to the project development requirement document of the CRUD page to be developed, that is, the code generator can obtain it by the developer manually inputting the configuration information of the different components required to be configured according to the project development requirement document of the CRUD page to be developed, or by the developer dragging and dropping the component modules corresponding to the different components required to be configured in the project development requirement document on the canvas page. The present invention does not specifically limit the method of obtaining the JSON configuration file.

[0048] The JSON configuration file includes all the fields required by the CRUD page to be developed and has been configured. Each configured field is used to indicate or distinguish whether the corresponding field is used for table component configuration or for form component configuration. By parsing the JSON configuration file, the fields required to be displayed by the table component and the fields required to be displayed by the form component in the CRUD page to be developed can be clearly identified.

[0049] At this time, the code generator can configure the front-end components corresponding to the different types of fields in the JSON configuration file of the CRUD page to be developed, for example, configure the table component corresponding to the table configuration field and configure the form component corresponding to the added field, the filter field and the edit field. In this way, the target component configuration information adapted to the different types of fields in the JSON configuration file of the CRUD page to be developed is determined.

[0050] Step 120: Generate code based on the configuration information of each target component and the preset EJS template to determine the front-end React Typescript file code of the CRUD page to be developed.

[0051] Among them, the preset EJS template is an EJS template extracted from the common code of different CRUD pages based on the React project specifications; EJS is a JavaScript template library used to generate HTML strings from JSON data; React is a JavaScript library for building user interfaces, and TypeScript is a typed superset of JavaScript that can be compiled into ordinary JavaScript; JavaScript (JS for short) is a lightweight, interpreted or just-in-time compiled programming language with function priority.

[0052] Specifically, in step 120, the code generator combines the configuration information of each target component with the preset EJS template, that is, inserts the configuration information of each target component into the preset EJS template. The insertion process can use the insertion logic rules of the preset EJS template for inserting in string mode to perform the insertion operation, ensuring that the conversion of double quotes and single quotes, the use of minus signs and the use of quotation marks all comply with the code compilation specifications; at this time, the code generator generates code for the combination result of each target component configuration information and the preset EJS template, and determines the front-end React Typescript file code of the CRUD page to be developed.

[0053] It should be noted that the code generator performs code generation, specifically modular development, such as developing a code block for a request function and a code body module for developing page rendering; this facilitates later code maintenance.

[0054] The page code generation method provided by the embodiment of the present invention, the code generator determines the front-end React Typescript file code of the CRUD page to be developed by performing code generation based on the target component configuration information adapted to different types of fields in the JSON configuration file of the CRUD page to be developed, and the preset EJS template. Since the preset EJS template is an EJS template extracted from the common code of different CRUD pages in advance based on the React project specification, it can ensure that the code generated by the code generator is easily integrated into the existing React project, ensure that the developed front-end CRUD page has a unified appearance and user experience, help developers to achieve the gradual upgrade of the project, while maintaining the consistency of the project, avoiding code incompatibility problems, and having higher flexibility and scalability; and the developer only needs to care about the configuration items of the JSON configuration file and the component selection and component configuration of the CRUD page to be developed, and can quickly customize the required generated code according to the project requirements, without being subject to the constraints of the low-code development platform, greatly reducing the learning cost and code development time of the front-end developers, and there is no need to manually write a large amount of repeated code, thereby solving the technical problems of no unified standards, high learning costs and limitations of customized extensions in the existing low-code development platform, greatly improving the development iteration efficiency of the react front-end system, and shortening the project iteration launch time.

[0055] Based on the above Figure 1 In the page code generation method shown in FIG. 1 , in an exemplary embodiment, when the target component configuration information includes the target table component configuration information and the target string form configuration information, the specific implementation process of step 110 may include:

[0056] First, different types of fields in the JSON configuration file are parsed to determine the target component types mapped to the different types of fields, and based on the mapping relationship between the component type and the front-end component, the target front-end component corresponding to each target component type is determined; further, based on the target CRUD project development requirement document, table columns are configured for at least one target table component in each target front-end component to determine the target table component configuration information corresponding to each target table component; based on the project development requirement document, filtering items or new editing items are configured for at least one target form component in each target front-end component to determine the target string form configuration information corresponding to each target form component.

[0057] Specifically, the code generator parses different types of fields in the JSON configuration file, and when it recognizes that the JSON configuration file contains the edit component type field "editComponentType", it can further identify the newly added field "canCreate", the edit field "canEdit", the table configuration field "canList", and the filter field "canQuery" from the JSON configuration file. At this time, it can be determined that the table configuration field maps to the table component, and the newly added field, edit field, and filter field are all mapped to the form component.

[0058] The code generator determines the target front-end component corresponding to each target component type according to the pre-stored mapping relationship between component type and front-end component. Each target front-end component is a front-end specific component, which can be a component in the ant-design component library or a component in a pre-built business component library. Moreover, all the target front-end components obtained include target table components of the same type and target form components of different types, and each target form component is a controlled component.

[0059] The code generator configures the table columns of each target table component based on the project development requirement document of the target CRUD, that is, configures the contents of the table columns as items to be configured. For example, when the project development requirement document records that the table columns include the first column "time" and the second column "amount", the developer can be instructed to manually enter the target table component's items to be configured "time" and "amount", and the code generator can generate the corresponding target table component configuration information based on the developer's input content.

[0060] The code generator performs filtering items or new editing item configuration for each target form component based on the project development requirements document. Specifically, when each target form component is a list filtering form component or a new editing form component, the list filtering form component is configured with strings that do not require verification, or the new editing form component is configured with string verification. In this way, the target string form configuration information corresponding to each target form component is obtained.

[0061] It should be noted that the code generator can pre-build a material library, and the material library is used to store the mapping relationship between form components and string form configuration information. Each string form configuration information is obtained by performing a string configuration that does not require verification on the corresponding list filtering form component, or performing a string verification configuration on the corresponding new edit form component. Based on this, the code generator can query the target string form configuration information corresponding to each target form component from the material library according to each new edit form component or each list filtering form component configured in the JSON configuration file.

[0062] The page code generation method provided in the embodiment of the present invention, the code generated by the code generator is based on the specifications of React and AntDesign, has higher flexibility and scalability, can be easily integrated into the existing React project, and solves the problems of repeated development, inefficiency, inconsistent code, etc.; at the same time, it ensures that the generated CRUD page has a unified appearance and user experience, supports the expansion of custom components, and meets various demand scenarios.

[0063] Based on the above Figure 1 In the page code generation method shown in the figure, in an exemplary embodiment, the code generator performs filtering items or newly added editing item configuration on at least one target form component in each target front-end component based on the project development requirement document, and determines the target string form configuration information corresponding to each target form component. The specific implementation process may include:

[0064] For each target form component, perform data source binding configuration and add verification configuration for the target form component based on the project development requirement document, or perform filter item configuration for the target form component; and perform string conversion based on the data source binding configuration results and the added verification configuration results, or perform string conversion based on the filter item configuration results, to determine the target string form configuration information corresponding to the target form component.

[0065] Specifically, for a new edit form that requires new edit item configuration, the code generator can configure the new edit item for the new edit form component, such as performing data source binding and verification configuration; for a filtering form component that requires filtering item configuration, the code generator can configure the filtering item for the filtering form component; among which, the configuration data required for the data source binding configuration, the configuration data required for the verification configuration, and the configuration data required for the filtering item configuration can all be obtained from the project development requirements document.

[0066] Exemplarily, by parsing the JSON configuration file of the CRUD page to be developed, the code generator determines that the JSON configuration file contains the verification configuration field "regexp", and can determine that the corresponding target form component is a newly added edit form and requires verification configuration; otherwise, it determines that the corresponding target form component is a screening form component and does not require verification. For the newly added edit form that requires verification configuration, the code generator can further determine the verification configuration rules of the newly added edit form component by parsing the project development document, and add verification configuration to the newly added edit form based on the verification configuration rules.

[0067] When the code generator determines that the target form component is a list filter form component and does not need to be verified by parsing the project development document, it can configure the filter item for the list filter form component; and further perform string conversion based on the data source binding configuration result and the verification configuration result, or perform string conversion based on the filter item configuration result. In this way, all target form components are traversed until the target string form configuration information corresponding to all target form components is obtained.

[0068] Based on the above Figure 1 In the page code generation method shown in the example embodiment, in order to ensure smooth code compilation, after configuring the data source binding and adding the verification configuration for the list filtering form, it is also necessary to configure the component import statement of the list filtering form component and the request function required to call the data source. Based on this, the code generator performs string conversion based on the data source binding configuration result and the verification configuration result, and its specific implementation process may include:

[0069] First, determine the component import information of the target form component and the calling function required to call the target data source of the target form component; then further perform string conversion on the component import information, the calling function, the data source binding configuration result and the added verification configuration result.

[0070] It should be noted that the component import information can be used to identify which component library the corresponding target form component is imported into the code generator through, for example, the list screening form component is imported into the code generator through the ant-design component library commonly used in this field, or through the pre-built business component library; and when the target data source of the target form component is a data source requested through an interface, the calling function of the target data source can be determined through the project development requirements document. In this way, other materials of the CRUD page to be developed are generated.

[0071] Based on the above Figure 1 In the page code generation method shown, in an exemplary embodiment, in order to quickly determine whether a form component needs to be bound to a data source, the project development requirements document can be queried to determine which types of form components need to be bound to a data source and how to bind the data source. Based on this, the specific process of the code generator configuring the data source binding for the target form component based on the project development requirements document may include:

[0072] Based on the type of the target form component and the project development requirements document, determine whether the target form component needs to be bound to a data source; if the target form component needs to be bound to a data source, determine the data source binding method of the target form component and the target data source to be bound, and based on the data source binding method and the target data source, perform data source binding configuration for the target form component.

[0073] Specifically, the code generator parses the JSON configuration file of the CRUD page to be developed according to the type of the target form component to determine whether the target form component is bound to the data source. That is, by parsing the JSON configuration file of the CRUD page to be developed and determining that the JSON configuration file contains the "options" field for binding the data source, it can further determine that the field identifying the data source binding method is "data" or "src". If it is "data", fixed enumeration data source binding is performed, and if it is "src", interface request data source binding is performed.

[0074] Since the project development requirement document for the CRUD page to be developed records the type of form components that need to be bound to the data source and their corresponding data sources to be bound and binding methods, the corresponding data source binding methods and the corresponding target data sources to be bound are extracted from the project development requirement document according to the type of the target form component, and the data source binding configuration is performed on the target form component; in this way, all target form components are traversed until the data source binding configuration of all target form components to be bound to the data sources is completed.

[0075] It should be noted that when the fixed enumeration data source is a Boolean type enumeration data source, the value of the enumeration data is converted from a string type to a Boolean type.

[0076] In addition, it should be noted that when the target form component is a newly added edit form and the newly added edit form is one of other special form components such as a drop-down form component, a tree iteration form component, and a cascading form component, the target form component can be bound to a data source.

[0077] Based on the above Figure 1 In the page code generation method shown in the figure, in an exemplary embodiment, for each form component in the CRUD page to be developed, the code generator can be imported through the ant-design component library or the pre-built business component library. Based on this, the specific process of the code generator determining the component import information of the target form component may include:

[0078] Import the target form component from the ant-design component library or the pre-built business component library, and determine the component import information of the target form component based on the successful import result of the ant-design component library or the business component library.

[0079] Specifically, for each target form component, you can first query and import the code generator from the ant-design component library. When a target form component does not exist in the ant-design component library, query and import the code generator from the pre-built business component library. If the import is successful, record the component import information of the corresponding target form component. In this way, traverse all target form components until the component import information of all target form components is determined.

[0080] It should be noted that the business component library stores a large number of different form components, and the types and number of these components can be greater than those of the ant-design component library, so as to achieve the purpose of providing required form components in a timely manner when the ant-design component library cannot meet the project development requirements.

[0081] Based on the above Figure 1 In the page code generation method shown in the figure, in an exemplary embodiment, when a form component in the CRUD page to be developed cannot be found in the ant-design component library and the business component library, the developer can be prompted to determine and manually import it into the code generator. Based on this, the page code generation method provided by the present invention can also include:

[0082] Based on the import failure results of the ant-design component library and the business component library, the developer is prompted to determine the target form component and then perform the import operation. Based on the successful import results, the business component library and the mapping relationship between component types and front-end components are updated respectively.

[0083] Specifically, when a target form component does not exist in the ant-design component library and the pre-built business component library also does not exist, the developer can be prompted to manually determine the target form component and then manually perform the import operation into the code generator; so that the code generator can update the pre-built business component library based on the manually determined target form component based on the successful import result, thereby achieving the purpose of automatically expanding the business component library.

[0084] Reference Figure 2 , which is a schematic diagram of the structure of the page code generating device provided by the present invention, such as Figure 2 As shown, the page code generating device 200 includes: a field component configuration unit 210 and a page code generating unit 220.

[0085] The field component configuration unit 210 is used to determine target component configuration information adapted to different types of fields in the JSON configuration file of the CRUD page to be developed.

[0086] The page code generation unit 220 is used to generate code based on the configuration information of each target component and the preset EJS template to determine the front-end React Typescript file code of the CRUD page to be developed; wherein the preset EJS template is an EJS template extracted from the common code of different CRUD pages in advance based on the React project specification.

[0087] Optionally, the field component configuration unit 210 is specifically used to parse different types of fields in the JSON configuration file when the target component configuration information includes target table component configuration information and target string form configuration information, determine the target component types mapped to the different types of fields, and determine the target front-end components corresponding to each target component type based on the mapping relationship between the component type and the front-end component; perform table column configuration on at least one target table component in each target front-end component based on the target CRUD project development requirement document to determine the target table component configuration information corresponding to each target table component; perform filtering item or new editing item configuration on at least one target form component in each target front-end component based on the project development requirement document to determine the target string form configuration information corresponding to each target form component.

[0088] Optionally, the field component configuration unit 210 is specifically used to perform data source binding configuration and additional verification configuration for each target form component based on the project development requirement document, or perform filter item configuration for the target form component; and perform string conversion based on the data source binding configuration results and the additional verification configuration results, or perform string conversion based on the filter item configuration results, to determine the target string form configuration information corresponding to the target form component.

[0089] Optionally, the field component configuration unit 210 is specifically used to determine the component import information of the target form component and the calling function required to call the target data source of the target form component; and perform string conversion on the component import information, calling function, data source binding configuration result and added verification configuration result.

[0090] Optionally, the field component configuration unit 210 is specifically used to determine whether the target form component needs to be bound to a data source based on the type of the target form component and the project development requirements document; when the target form component needs to be bound to a data source, determine the data source binding method of the target form component and the target data source to be bound, and perform data source binding configuration for the target form component based on the data source binding method and the target data source.

[0091] Optionally, the field component configuration unit 210 is specifically used to import the target form component from the ant-design component library or the pre-built business component library, and determine the component import information of the target form component based on the successful import result of the ant-design component library or the business component library.

[0092] Optionally, the field component configuration unit 210 is specifically used to prompt the developer to determine the target form component and perform the import operation based on the import failure results of the ant-design component library and the business component library, and based on the successful import results, update the business component library and the mapping relationship between the component type and the front-end component.

[0093] The page code generation device 200 provided in the embodiment of the present invention can execute the technical solution in any embodiment of the above-mentioned page code generation method. Its implementation principle and beneficial effects are similar to the implementation principle and beneficial effects of the page code generation method. Please refer to the implementation principle and beneficial effects of the page code generation method, and no further details will be given here.

[0094] Figure 3 An example of a physical structure diagram of an electronic device is shown in FIG. Figure 3 As shown, the electronic device may include: a processor 310, a communication interface 320, a memory 830 and a communication bus 340, wherein the processor 310, the communication interface 320 and the memory 330 communicate with each other through the communication bus 340. The processor 310 may call the logic instructions in the memory 330 to execute the page code generation method, which includes:

[0095] Determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed; generate code based on the target component configuration information and the preset EJS template, and determine the front-end React Typescript file code of the CRUD page to be developed; wherein the preset EJS template is an EJS template extracted from the common code of different CRUD pages in advance based on the React project specifications.

[0096] In addition, the logic instructions in the above-mentioned memory 330 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0097] On the other hand, the present invention further provides a computer program product, the computer program product comprising a computer program, the computer program can be stored on a non-transitory computer-readable storage medium, when the computer program is executed by a processor, the computer can execute the page code generation method provided by the above methods, the method comprising:

[0098] Determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed; generate code based on the target component configuration information and the preset EJS template, and determine the front-end React Typescript file code of the CRUD page to be developed; wherein the preset EJS template is an EJS template extracted from the common code of different CRUD pages in advance based on the React project specifications.

[0099] In another aspect, the present invention further provides a non-transitory computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the page code generation method provided by the above methods is implemented, and the method includes:

[0100] Determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed; generate code based on the target component configuration information and the preset EJS template, and determine the front-end React Typescript file code of the CRUD page to be developed; wherein the preset EJS template is an EJS template extracted from the common code of different CRUD pages in advance based on the React project specifications.

[0101] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0102] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0103] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A page code generation method, characterized in that: include: Determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed; Generate code based on the target component configuration information and the preset EJS template to determine the front-end React Typescript file code of the CRUD page to be developed; The preset EJS template is an EJS template extracted from the common codes of different CRUD pages in advance based on the React project specification.

2. The page code generation method according to claim 1, characterized in that: The target component configuration information includes target table component configuration information and target string form configuration information. The target component configuration information that determines the adaptation of different types of fields in the JSON configuration file of the CRUD page to be developed includes: Parse different types of fields in the JSON configuration file to determine the target component types mapped by the different types of fields, and determine the target front-end components corresponding to the target component types based on the mapping relationship between the component type and the front-end component; Based on the project development requirement document of the target CRUD, respectively configure table columns for at least one target table component in each of the target front-end components, and determine the target table component configuration information corresponding to each of the target table components; Based on the project development requirement document, filtering items or newly added editing items are configured for at least one target form component in each target front-end component, and target string form configuration information corresponding to each target form component is determined.

3. The page code generation method according to claim 2, characterized in that: The filtering items or newly adding editing items configuration for at least one target form component in each of the target front-end components based on the project development requirement document, and determining the target string form configuration information corresponding to each of the target form components, include: For each target form component, data source binding configuration and additional verification configuration are performed on the target form component based on the project development requirement document, or filtering item configuration is performed on the target form component; and string conversion is performed based on the data source binding configuration result and the additional verification configuration result, or string conversion is performed based on the filtering item configuration result to determine the target string form configuration information corresponding to the target form component.

4. The page code generation method according to claim 3, characterized in that: The character string conversion based on the data source binding configuration result and the added verification configuration result includes: Determine component import information of the target form component and a calling function required to call a target data source of the target form component; The component import information, the calling function, the data source binding configuration result and the added verification configuration result are converted into strings.

5. The page code generation method according to claim 3, characterized in that: The data source binding configuration of the target form component based on the project development requirement document includes: Based on the type of the target form component and the project development requirement document, determining whether the target form component requires binding to a data source; When the target form component needs to bind a data source, the data source binding mode of the target form component and the target data source to be bound are determined, and based on the data source binding mode and the target data source, the data source binding configuration of the target form component is performed.

6. The page code generation method according to claim 4, characterized in that: The determining of the component import information of the target form component includes: The target form component is imported from an ant-design component library or a pre-built business component library, and component import information of the target form component is determined based on a successful import result of the ant-design component library or the business component library.

7. The page code generation method according to claim 6, characterized in that: The method further comprises: Based on the import failure results of the ant-design component library and the business component library, the developer is prompted to determine the target form component and then perform the import operation, and based on the successful import result, the business component library and the mapping relationship between component types and front-end components are updated respectively.

8. A page code generating device, characterized in that: include: The field component configuration unit is used to determine the target component configuration information that is adapted to different types of fields in the JSON configuration file of the CRUD page to be developed; A page code generation unit, used to generate code based on the target component configuration information and the preset EJS template, and determine the front-end React Typescript file code of the CRUD page to be developed; The preset EJS template is an EJS template extracted from the common codes of different CRUD pages in advance based on the React project specification.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the page code generation method according to any one of claims 1 to 7 is implemented.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the page code generation method according to any one of claims 1 to 7 is implemented.

Images