Front-end page code generation method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a front-end page code generation method and device, electronic equipment and a storage medium, and relates to the technical field of software development. The method comprises the steps of obtaining design parameters of a front-end page, wherein the design parameters comprise a private attribute, a public attribute, a private method and a public method of the front-end page; in response to the platform selection input, configuration information of a target platform is obtained, the target platform is determined according to the platform selection input, and the configuration information comprises a format conversion rule; obtaining a code template corresponding to the platform identifier of the target platform from a template database, wherein the template database comprises a plurality of platform identifiers and a code template corresponding to each platform identifier; performing format conversion on the design parameter according to a format conversion rule to obtain a target parameter; and obtaining a target code of the front-end page according to the target parameter and the code template. According to the embodiment of the invention, the development efficiency of the front-end page can be improved.

Description

Technical Field

[0001] The present application relates to the field of software development technology, and in particular to a front-end page code generation method, device, electronic device and storage medium. Background Art

[0002] The front-end page refers to the interface part of the Internet application that users can directly view and interact with through the browser. At present, the development of the front-end page is mainly carried out by the front-end page designer to obtain the design drawing of the front-end page, and then the front-end developer writes the code according to the design drawing to obtain the code of the front-end page. The demand for front-end page development is large. However, even when facing a front-end page that is very similar to the page style and page components of the developed front-end page, the front-end developer needs to re-write the code, resulting in low development efficiency of the front-end page. Therefore, how to improve the development efficiency of the front-end page has become a technical problem that needs to be solved urgently. Summary of the invention

[0003] The main purpose of the embodiments of the present application is to propose a front-end page code generation method, device, electronic device and storage medium, aiming to improve the development efficiency of the front-end page.

[0004] To achieve the above purpose, a first aspect of an embodiment of the present application proposes a method for generating a front-end page code, the method comprising:

[0005] Acquire design parameters of the front-end page, wherein the design parameters include private properties, public properties, private methods, and public methods of the front-end page;

[0006] In response to a platform selection input, acquiring configuration information of a target platform, the target platform being determined according to the platform selection input, the configuration information including a format conversion rule;

[0007] Acquire a code template corresponding to the platform identifier of the target platform from a template database, wherein the template database includes multiple platform identifiers and a code template corresponding to each platform identifier;

[0008] Performing format conversion on the design parameters according to the format conversion rules to obtain target parameters;

[0009] The target code of the front-end page is obtained according to the target parameter and the code template.

[0010] In some embodiments, obtaining the target code of the front-end page according to the target parameter and the code template includes:

[0011] Replace the placeholder of the first insertion point in the code template with the private attribute in the target parameter, and replace the placeholder of the second insertion point in the code template with the public attribute in the target parameter, wherein the private attribute includes a private attribute name and a private attribute value, and the public attribute includes a public attribute name and a public attribute value, the placeholder of the first insertion point matches the private attribute name, and the placeholder of the second insertion point matches the public attribute name;

[0012] Matching the private method with the preset method name in the template database to obtain the implementation code of the private method corresponding to the private method, and matching the public method with the preset method name in the template database to obtain the implementation code of the public method corresponding to the public method; the private method and the public method are both method names, and the template database includes a plurality of the preset method names, and the implementation code of the method corresponding to each of the preset method names;

[0013] The implementation code of the private method and the implementation code of the public method are respectively filled into the code template to obtain the target code of the front-end page.

[0014] In some embodiments, the front-end page includes a plurality of front-end components, and obtaining the target code of the front-end page according to the target parameter and the code template includes:

[0015] If the component database stores the code of a first front-end component among the plurality of front-end components, acquiring the code of the first front-end component from the component database;

[0016] For a second front-end component among the plurality of front-end components, the code of the second front-end component is obtained according to the parameter corresponding to the second front-end component in the target parameter and the code sub-template corresponding to the second front-end component in the code template, where the second front-end code is a front-end component other than the first front-end component among the plurality of front-end components;

[0017] The target code is obtained according to the code of the first front-end component and the code of the second front-end component.

[0018] In some embodiments, the target parameter includes an association relationship between a plurality of the front-end components, and before obtaining the target code according to the code of the first front-end component and the code of the second front-end component, the method further includes:

[0019] If the first front-end component and the second front-end component are associated with each other, the placeholder of the third insertion point in the code of the first front-end component is replaced with the name of the second front-end component to obtain the updated code of the first front-end component, and the placeholder of the fourth insertion point in the code of the second front-end component is replaced with the name of the first front-end component to obtain the updated code of the second front-end component, and the placeholder of the third insertion point matches the name of the second front-end component, and the placeholder of the fourth insertion point matches the name of the first front-end component.

[0020] In some embodiments, the configuration information further includes a file directory structure, the front-end page includes a plurality of front-end components, the target code includes codes of the plurality of front-end components, and after obtaining the target code of the front-end page according to the target parameter and the code template, the method further includes:

[0021] According to the file directory structure, obtain the code file directory of the front-end page;

[0022] Obtaining the name corresponding to the code of each front-end component and the storage location of the code of each front-end component;

[0023] Determine the directory entry corresponding to the code of each front-end component according to the name corresponding to the code of each front-end component and the storage location of the code of each front-end component, and obtain a plurality of the directory entries;

[0024] The plurality of directory entries are stored in the code file directory.

[0025] In some embodiments, after storing the plurality of directory entries in the code file directory, the method further comprises:

[0026] Display the code file directory;

[0027] Receiving a selection instruction for at least one of the directory items in the code file directory;

[0028] In response to the selection instruction, the code of the front-end component corresponding to the directory item is displayed.

[0029] In some embodiments, after obtaining the target code of the front-end page according to the target parameter and the code template, the method further includes:

[0030] receiving a modification input, the modification input comprising a modification parameter;

[0031] In response to the modification input, the target parameters are changed to the modification parameters, and updated target code is generated according to the modification parameters and the code template.

[0032] To achieve the above-mentioned purpose, a second aspect of an embodiment of the present application proposes a front-end page code generation device, the device comprising:

[0033] A parameter acquisition module, used to acquire design parameters of the front-end page, wherein the design parameters include private attributes, public attributes, private methods and public methods of the front-end page;

[0034] a configuration information acquisition module, configured to acquire configuration information of a target platform in response to a platform selection input, wherein the target platform is determined according to the platform selection input, and the configuration information includes a format conversion rule;

[0035] A template acquisition module, used to acquire a code template corresponding to the platform identifier of the target platform from a template database, wherein the template database includes multiple platform identifiers and a code template corresponding to each platform identifier;

[0036] A conversion module, used for performing format conversion on the design parameters according to the format conversion rules to obtain target parameters;

[0037] The code generation module is used to obtain the target code of the front-end page according to the target parameters and the code template.

[0038] To achieve the above-mentioned purpose, the third aspect of an embodiment of the present application proposes an electronic device, which includes a memory and a processor, the memory stores a computer program, and the processor implements the front-end page code generation method described in the first aspect when executing the computer program.

[0039] To achieve the above objectives, the fourth aspect of an embodiment of the present application proposes a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the front-end page code generation method described in the first aspect above.

[0040] The front-end page code generation method, device, electronic device and storage medium proposed in the present application obtain the design parameters of the front-end page, and in response to the platform selection input, obtain the configuration information of the target platform, then obtain the code template corresponding to the platform identifier of the target platform from the template database, perform format conversion on the design parameters according to the format conversion rules in the configuration information, obtain the target parameters, and finally obtain the target code of the front-end page according to the target parameters and the code template. The present application obtains the design parameters of the front-end page, the configuration information of the target platform and the code template corresponding to the platform identifier of the target platform, and then performs format conversion on the design parameters based on the format conversion rules in the configuration information to obtain the target parameters, and then obtains the target code of the front-end page according to the target parameters and the code template. In this way, the automatic generation of the front-end page code can be realized, the workload in the front-end page development process can be reduced, and the development efficiency of the front-end page can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 It is a flowchart of the front-end page code generation method provided by an embodiment of the present application;

[0042] Figure 2 yes Figure 1 A flow chart of step S105 in FIG.

[0043] Figure 3 yes Figure 1 Another flow chart of step S105 in;

[0044] Figure 4 This is a flowchart of generating a code file directory provided by an embodiment of the present application;

[0045] Figure 5 It is a structural diagram of a front-end page code generation device provided in an embodiment of the present application;

[0046] Figure 6 It is a schematic diagram of the hardware structure of the electronic device provided in the embodiment of the present application. DETAILED DESCRIPTION

[0047] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with 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.

[0048] It should be noted that, although the functional modules are divided in the device schematic diagram and the logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first", "second", etc. in the specification, claims and the above drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0049] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0050] First, some nouns involved in this application are analyzed:

[0051] Front-end page: refers to the interface that users directly interact with when using an Internet application or website, such as a financial platform page, an insurance platform page, a medical platform page, etc. The front-end page is a collection of all visual and functional elements that users can see, hear, and interact with.

[0052] Front-end component: A code unit that simply encapsulates data and methods, which can form the front-end page content. Front-end components include properties and methods. Properties are used to describe the state or characteristics of front-end components, while methods are used to perform specific operations or behaviors, which can change the state of front-end components, trigger events, or interact with other front-end components.

[0053] In order to solve the problems of the prior art, the embodiments of the present application provide a front-end page code generation method, device, electronic device and storage medium, aiming to improve the development efficiency of the front-end page.

[0054] The front-end page code generation method, device, electronic device and storage medium provided in the embodiments of the present application are specifically illustrated through the following embodiments. First, the front-end page code generation method in the embodiments of the present application is described.

[0055] The front-end page code generation method provided in the embodiment of the present application relates to the field of software development technology. The front-end page code generation method provided in the embodiment of the present application can be applied to the terminal, can also be applied to the server side, and can also be software running in the terminal or the server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc.; the server side can be configured as an independent physical server, or it can be configured as a server cluster or a distributed system composed of multiple physical servers, and can also be configured to provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms and other basic cloud computing services. Cloud servers; software can be applications that implement the front-end page code generation method, etc., but are not limited to the above forms.

[0056] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0057] Figure 1 is a flowchart of a method for generating front-end page code provided in an embodiment of the present application. Figure 1 The method may include but is not limited to steps S101 to S105.

[0058] Step S101, obtaining design parameters of the front-end page, wherein the design parameters include private attributes, public attributes, private methods and public methods of the front-end page.

[0059] The electronic device can obtain the design parameters of the front-end page. The front-end page can be a financial platform page, an insurance platform page, or a medical platform page. The design parameters can be input by the user, including but not limited to private attributes, public attributes, private methods, and public methods of the front-end page. Among them, private attributes refer to attributes in the objects or classes of the front-end page that are only accessible internally, and are mainly used for logical processing, state management, and data storage within the front-end page, such as data attributes and internal reference attributes. Public attributes are attributes exposed to the outside in the objects or classes of the front-end page, which can be accessed and modified by external code. They are usually used to configure the behavior of the front-end page, obtain the state of the front-end page, or interact with the outside, such as configuration attributes (including font attributes and color attributes, etc.). Private methods are methods that can only be accessed internally in the objects or classes of the front-end page. They are usually used to encapsulate implementation details to prevent direct calls from external code, such as internal calculation methods and data validation methods. Public methods are methods in the objects or classes of the front-end page that can be accessed externally, and are usually used to provide interfaces to allow other codes to call these methods to perform specific functions, such as event handling functions. Private attributes, public attributes, private methods, and public methods can all be set according to actual business needs, and all comply with the basic specifications of the metamodel.

[0060] Step S102, in response to the platform selection input, obtaining configuration information of the target platform, the target platform is determined according to the platform selection input, and the configuration information includes format conversion rules.

[0061] The electronic device can receive the platform selection input input by the user. The platform selection input is used to indicate the platform running the front-end page. Different platforms running the front-end page have different configuration information for the corresponding platform, and the language, code template, etc. used in the generated front-end page code are also different. Therefore, according to the platform selection input, the electronic device can determine the target platform, that is, the platform running the front-end page, such as a mobile operating system, a small program, a web application platform, etc. Each platform has its corresponding platform identifier. The platform identifier can be the name of the platform, or the number of the platform, or other identifiers that can be used to distinguish different platforms. In this way, after determining the target platform, according to the platform identifier of the target platform, the electronic device can further obtain the configuration information of the target platform from the pre-built platform database, such as basic configuration (including configurations such as naming rules), format conversion rules, file directory structure and other information.

[0062] Step S103: acquiring a code template corresponding to the platform identifier of the target platform from a template database, wherein the template database includes a plurality of platform identifiers and a code template corresponding to each platform identifier.

[0063] The template database is a database for storing code templates, including code templates such as models, views, logic and components of the front-end page, which can be pre-built by the electronic device. The template database stores multiple platform identifiers and code templates corresponding to each platform identifier. Then, after determining the target platform, the electronic device can obtain the code template corresponding to the platform identifier of the target platform from the template database. Through the code template, the basic structure, declaration, expression, etc. of the front-end page code can be determined. In this way, the code template corresponding to the platform running the front-end page can be obtained, so as to generate the target code of the front-end page later.

[0064] Step S104: convert the format of the design parameters according to the format conversion rules to obtain target parameters.

[0065] The format adopted by the design parameters may not meet the format requirements. For example, the design parameters usually adopt the extensible markup language format. At this time, in the process of generating the target code of the front-end page, the format adopted by the design parameters does not meet the format requirements of the target code of the front-end page, and the target code cannot be generated directly based on the design parameters. Therefore, according to the format conversion rules in the configuration information, the design parameters can be format converted. Exemplarily, if the design parameters adopt the extensible markup language format, and the target format obtained by the electronic device is not the extensible markup language format, then the design parameters can be format converted. For example, the target format is json format. Based on the format conversion rules, the electronic device can perform format conversion on the design parameters, so that the design parameters are converted from the extensible markup language format to the json format, thereby obtaining the target parameters. It should be noted that the aforementioned process is only a conversion of the format of the design parameters, and does not change the actual data of the design parameters. That is to say, the design parameters include private attributes, public attributes, private methods and public methods, and the target parameters include private attributes, public attributes, private methods and public methods after the conversion format.

[0066] Step S105, obtaining the target code of the front-end page according to the target parameter and the code template.

[0067] The electronic device can obtain the target code of the front-end page according to the target parameters and the code template. Exemplarily, the target parameters can be directly rendered into the code template through the template generator to generate the target code of the front-end page. Alternatively, the private attributes and public attributes in the target parameters can be respectively inserted into the corresponding insertion points in the code template, and the implementation code of the private method and the implementation code of the public method can be obtained from the template database according to the private method and the public method in the target parameter, and filled into the corresponding positions in the code template respectively, so as to obtain the target code of the front-end page.

[0068] After obtaining the target code of the front-end page, the target code can be executed to generate the front-end page.

[0069] Steps S101 to S105 shown in the embodiment of the present application, by obtaining the design parameters of the front-end page, and in response to the platform selection input, obtaining the configuration information of the target platform, then obtaining the code template corresponding to the platform identifier of the target platform from the template database, performing format conversion on the design parameters according to the format conversion rules in the configuration information, obtaining the target parameters, and finally obtaining the target code of the front-end page according to the target parameters and the code template. The present application obtains the design parameters of the front-end page, the configuration information of the target platform, and the code template corresponding to the platform identifier of the target platform, and then performs format conversion on the design parameters based on the format conversion rules in the configuration information, obtaining the target parameters, and then obtaining the target code of the front-end page according to the target parameters and the code template. In this way, the automatic generation of the front-end page code can be realized, the workload in the front-end page development process can be reduced, and the development efficiency of the front-end page can be improved.

[0070] Figure 2 yes Figure 1 For a flowchart of step S105 in Figure 2 In some embodiments, obtaining the target code of the front-end page according to the target parameter and the code template includes:

[0071] Step S201, replacing the placeholder of the first insertion point in the code template with the private attribute in the target parameter, and replacing the placeholder of the second insertion point in the code template with the public attribute in the target parameter, the private attribute includes a private attribute name and a private attribute value, the public attribute includes a public attribute name and a public attribute value, the placeholder of the first insertion point matches the private attribute name, and the placeholder of the second insertion point matches the public attribute name;

[0072] Step S202, matching the private method with the preset method name in the template database to obtain the implementation code of the private method corresponding to the private method, and matching the public method with the preset method name in the template database to obtain the implementation code of the public method corresponding to the public method; the private method and the public method are both method names, and the template database includes a plurality of the preset method names, and the implementation code of the method corresponding to each of the preset method names;

[0073] Step S203, filling the implementation code of the private method and the implementation code of the public method into the code template respectively to obtain the target code of the front-end page.

[0074] The target parameters include private attributes, public attributes, private methods and public methods after conversion. Among them, private attributes include private attribute names and private attribute values, public attributes include public attribute names and public attribute values, and the private methods and public methods here both refer to the names of methods. In the process of generating the target code, the aforementioned parameters are processed differently. Specifically, based on the private attribute name, the electronic device can determine the placeholder of the first insertion point in the code template that matches the private attribute name, and replace the placeholder of the first insertion point with the private attribute in the target parameter, so that the private attribute in the target parameter can be inserted into the first insertion point. Similarly, based on the public attribute name, the electronic device can determine the placeholder of the second insertion point in the code template that matches the public attribute name, and replace the placeholder of the second insertion point with the public attribute in the target parameter, so that the public attribute in the target parameter can be inserted into the second insertion point.

[0075] The template database includes multiple preset method names and implementation codes of methods corresponding to each preset method name. For private methods and public methods in the target parameters, the electronic device can match the private method with the preset method name stored in the template database, thereby determining the implementation code of the private method corresponding to the private method, and obtaining the implementation code of the private method from the template database. Similarly, the electronic device can match the public method with the preset method name stored in the template database, and then obtain the implementation code of the public method corresponding to the public method from the template database. Subsequently, based on the private method, the code filling position in the code template that matches the private method can be determined, and the implementation code of the private method is filled into the code filling position that matches the private method. Based on the public method, the code filling position in the code template that matches the public method can be determined, and the implementation code of the public method is filled into the code filling position that matches the public method. In this way, the target code of the front-end page can be obtained.

[0076] Figure 3 yes Figure 1 For another flowchart of step S105 in Figure 3 In some embodiments, the front-end page includes a plurality of front-end components, and obtaining the target code of the front-end page according to the target parameter and the code template includes:

[0077] Step S301, if the component database stores the code of the first front-end component among the plurality of front-end components, then the code of the first front-end component is obtained from the component database;

[0078] Step S302, for a second front-end component among the plurality of front-end components, according to the parameters corresponding to the second front-end component in the target parameters and the code sub-template corresponding to the second front-end component in the code template, obtain the code of the second front-end component, wherein the second front-end code is a front-end component other than the first front-end component among the plurality of front-end components;

[0079] Step S303, obtaining the target code according to the code of the first front-end component and the code of the second front-end component.

[0080] The electronic device also has a component database pre-built. The component database stores preset identifiers of multiple developed front-end components and the codes of the front-end components corresponding to each preset identifier. In order to further improve the efficiency of the front-end page development process, when the front-end page includes multiple front-end components, it can be determined whether the code of each front-end component is stored in the component database according to the identifier of each front-end component (that is, the identifier of each front-end component is matched with multiple preset identifiers in the component database to determine whether the identifier of each front-end component successfully matches any preset identifier). The identifier of the front-end component can be the name of the front-end component or the label of the front-end component. For the first front-end component among the multiple front-end components, if the code of the first front-end component is stored in the component database, the code of the first front-end component is obtained from the component database. The first front-end component can be any front-end component among the multiple front-end components.

[0081] For the second front-end component among multiple front-end components, that is, the front-end component whose corresponding code is not stored in the component database, the code of the second front-end component can be obtained according to the parameters corresponding to the second front-end component in the target parameters and the code sub-template corresponding to the second front-end component in the code template. Specifically, the private attributes corresponding to the second front-end component in the target parameters can be inserted into the corresponding insertion points in the code sub-template corresponding to the second front-end component, and the public attributes corresponding to the second front-end component in the target parameters can be inserted into the corresponding insertion points in the code sub-template corresponding to the second front-end component. According to the private methods corresponding to the second front-end component in the target parameters, the implementation code of the private methods corresponding to the second front-end component is obtained from the template database, and according to the public methods corresponding to the second front-end component in the target parameters, the implementation code of the public methods corresponding to the second front-end component is obtained from the template database, and the implementation code of the private methods corresponding to the second front-end component and the implementation code of the public methods corresponding to the second front-end component are respectively filled into the corresponding code filling positions in the code sub-template corresponding to the second front-end component, thereby obtaining the code of the second front-end component.

[0082] After obtaining the code of the first front-end component and the code of the second front-end component, the target code can be obtained according to the code of the first front-end component and the code of the second front-end component, that is, the code of the first front-end component and the code of the second front-end component are assembled to obtain the target code.

[0083] In addition, after the code of the second front-end component is generated, the code of the second front-end component may be stored in the component database to update the component database.

[0084] In some embodiments, the target parameter includes an association relationship between a plurality of the front-end components, and before obtaining the target code according to the code of the first front-end component and the code of the second front-end component, the method further includes:

[0085] If the first front-end component and the second front-end component are associated with each other, the placeholder of the third insertion point in the code of the first front-end component is replaced with the name of the second front-end component to obtain the updated code of the first front-end component, and the placeholder of the fourth insertion point in the code of the second front-end component is replaced with the name of the first front-end component to obtain the updated code of the second front-end component, and the placeholder of the third insertion point matches the name of the second front-end component, and the placeholder of the fourth insertion point matches the name of the first front-end component.

[0086] As can be seen from the foregoing, the formats of the design parameters and the target parameters are different, but the actual data contained are the same. Then, when the front-end page includes multiple front-end components, the design parameters and the target parameters both include the association relationship between the multiple front-end components. Therefore, after obtaining the code of the first front-end component and the code of the second front-end component, it can be determined whether there is an association relationship between the first front-end component and the second front-end component according to the association relationship. If there is an association relationship between the first front-end component and the second front-end component, according to the name of the second front-end component, the placeholder of the third insertion point in the code of the first front-end component that matches the name of the second front-end component can be determined, and according to the name of the first front-end component, the placeholder of the fourth insertion point in the code of the second front-end component that matches the name of the first front-end component can be determined. In this way, the electronic device can replace the placeholder of the third insertion point with the name of the second front-end component to obtain the updated code of the first front-end component, and replace the placeholder of the fourth insertion point with the name of the first front-end component to obtain the updated code of the second front-end component. In this way, according to the updated code of the first front-end component and the updated code of the second front-end component, the target code can be obtained.

[0087] Figure 4 This is a flowchart of generating a code file directory provided by the embodiment of the present application. Please refer to Figure 4In some embodiments, the configuration information further includes a file directory structure, the front-end page includes a plurality of front-end components, the target code includes a plurality of codes of the front-end components, and after obtaining the target code of the front-end page according to the target parameter and the code template, the method further includes:

[0088] Step S401, obtaining the code file directory of the front-end page according to the file directory structure;

[0089] Step S402, obtaining the name corresponding to the code of each front-end component and the storage location of the code of each front-end component;

[0090] Step S403, determining the directory entry corresponding to the code of each front-end component according to the name corresponding to the code of each front-end component and the storage location of the code of each front-end component, and obtaining a plurality of the directory entries;

[0091] Step S404: store the plurality of directory entries in the code file directory.

[0092] The file directory structure is a management form of files and folders, which can be divided into flat structures, hierarchical structures or modular structures. In the case where the front-end page includes multiple front-end components, the target code includes the codes of multiple front-end components, which is relatively complex. In order to meet the needs of orderly management of the target code, the code file directory of the front-end page can be obtained according to the file directory structure, and the directory item corresponding to the code of each front-end component can be determined according to the name corresponding to the code of each front-end component and the storage location of the code of each front-end component. Among them, the name corresponding to the code of each front-end component can be determined according to the function that can be realized by the code of each front-end component, or according to the identification information of each front-end component. In this way, multiple directory items can be obtained, and multiple directory items can be stored in the code file directory, which is convenient for managing the codes of multiple front-end components.

[0093] In addition, the file attributes, access permissions and other information of the code of each front-end component can be obtained, and then the directory entry corresponding to the code of each front-end component can be determined by combining the name, storage location, file attributes, access permissions and other information corresponding to the code of each front-end component.

[0094] In some embodiments, after storing the plurality of directory entries in the code file directory, the method further comprises:

[0095] Display the code file directory;

[0096] Receiving a selection instruction for at least one of the directory items in the code file directory;

[0097] In response to the selection instruction, the code of the front-end component corresponding to the directory item is displayed.

[0098] After obtaining the code file directory, the electronic device can display the code file directory. When at least one directory item in the code file directory is selected, the electronic device can receive a selection instruction. Then, according to the selection instruction, the electronic device can determine the at least one directory item selected, and then access the storage location indicated by the directory item, read the code of the front-end component stored in the storage location, and display it. In this way, the code of the front-end component can be viewed, which is convenient for checking the correctness of the code of the front-end component.

[0099] In some embodiments, after obtaining the target code of the front-end page according to the target parameter and the code template, the method further includes:

[0100] receiving a modification input, the modification input comprising a modification parameter;

[0101] In response to the modification input, the target parameters are changed to the modification parameters, and updated target code is generated according to the modification parameters and the code template.

[0102] Since the generated target code has the possibility of errors, it is allowed to modify the target code. Specifically, the electronic device can receive a modification input including a modification parameter, and update the target code according to the modification parameter. The modification parameter includes at least one of a private attribute, a public attribute, a private method, and a public method, and the modification parameter is consistent with the format adopted by the target parameter. Then, when the modification parameter includes a private attribute, according to the private attribute name of the private attribute in the modification parameter, the insertion point of the private attribute in the modification parameter in the target code can be determined (the insertion point has been inserted into the private attribute in the target parameter during the process of generating the target code), and at this time, the private attribute in the target parameter of the insertion point can be replaced with the private attribute in the modification parameter. When the modification parameter includes a public attribute, according to the public attribute name of the public attribute in the modification parameter, the insertion point of the public attribute in the modification parameter in the target code can be determined (the insertion point has been inserted into the public attribute in the target parameter during the process of generating the target code), and then the public attribute in the target parameter of the insertion point is replaced with the public attribute in the modification parameter.

[0103] When the modification parameters include private methods, the electronic device can obtain the implementation code of the private method in the modification parameters from the template database according to the private method in the modification parameters. And, according to the private method in the modification parameters, determine the code filling position in the target code that matches the private method in the modification parameters (the code filling position has been filled with the implementation code of the private method in the target parameter during the process of generating the target code), and replace the implementation code of the private method in the target parameter filled in the code filling position with the implementation code of the private method in the modification parameters. When the modification parameters include public methods, according to the public methods in the modification parameters, the electronic device can obtain the implementation code of the public method in the modification parameters from the template database, and at the same time, according to the public methods in the modification parameters, determine the code filling position in the target code that matches the public method in the modification parameters (the code filling position has been filled with the implementation code of the public method in the target parameter during the process of generating the target code), and at this time, replace the implementation code of the public method in the target parameter filled in the code filling position with the implementation code of the public method in the modification parameters.

[0104] If the modification parameters include private attributes, public attributes, private methods, and multiple items of public methods, the target code can be modified separately in the above-mentioned manner. For example, if the modification parameters include private attributes and public attributes, the insertion point corresponding to the private attributes in the modification parameters is determined, and the insertion point corresponding to the public attributes in the modification parameters is determined, and then the private attributes of the insertion point corresponding to the private attributes in the modification parameters are updated according to the private attributes in the modification parameters, and the public attributes of the insertion point corresponding to the public attributes in the modification parameters are updated according to the public attributes in the modification parameters. In this way, the target code can be modified to obtain the updated target code.

[0105] Figure 5 This is a schematic diagram of the structure of the front-end page code generation device provided in the embodiment of the present application. Figure 5 The embodiment of the present application further provides a front-end page code generation device 500, which can implement the above-mentioned front-end page code generation method, and the device 500 includes:

[0106] The parameter acquisition module 501 is used to acquire the design parameters of the front-end page, wherein the design parameters include the private attributes, public attributes, private methods and public methods of the front-end page;

[0107] A configuration information acquisition module 502, for acquiring configuration information of a target platform in response to a platform selection input, wherein the target platform is determined according to the platform selection input, and the configuration information includes a format conversion rule;

[0108] The template acquisition module 503 is used to acquire the code template corresponding to the platform identifier of the target platform from the template database, wherein the template database includes multiple platform identifiers and a code template corresponding to each platform identifier;

[0109] A conversion module 504, configured to perform format conversion on the design parameters according to the format conversion rules to obtain target parameters;

[0110] The code generation module 505 is used to obtain the target code of the front-end page according to the target parameters and the code template.

[0111] In some embodiments, the code generation module 505 is further used to:

[0112] Replace the placeholder of the first insertion point in the code template with the private attribute in the target parameter, and replace the placeholder of the second insertion point in the code template with the public attribute in the target parameter, wherein the private attribute includes a private attribute name and a private attribute value, and the public attribute includes a public attribute name and a public attribute value, the placeholder of the first insertion point matches the private attribute name, and the placeholder of the second insertion point matches the public attribute name;

[0113] Matching the private method with the preset method name in the template database to obtain the implementation code of the private method corresponding to the private method, and matching the public method with the preset method name in the template database to obtain the implementation code of the public method corresponding to the public method; the private method and the public method are both method names, and the template database includes a plurality of the preset method names, and the implementation code of the method corresponding to each of the preset method names;

[0114] The implementation code of the private method and the implementation code of the public method are respectively filled into the code template to obtain the target code of the front-end page.

[0115] In some embodiments, the code generation module 505 is further used to:

[0116] If the component database stores the code of a first front-end component among the plurality of front-end components, acquiring the code of the first front-end component from the component database;

[0117] For a second front-end component among the plurality of front-end components, the code of the second front-end component is obtained according to the parameter corresponding to the second front-end component in the target parameter and the code sub-template corresponding to the second front-end component in the code template, where the second front-end code is a front-end component other than the first front-end component among the plurality of front-end components;

[0118] The target code is obtained according to the code of the first front-end component and the code of the second front-end component.

[0119] In some embodiments, the front-end page code generating device 500 further includes an updating module, which is used to:

[0120] If the first front-end component and the second front-end component are associated with each other, the placeholder of the third insertion point in the code of the first front-end component is replaced with the name of the second front-end component to obtain the updated code of the first front-end component, and the placeholder of the fourth insertion point in the code of the second front-end component is replaced with the name of the first front-end component to obtain the updated code of the second front-end component, and the placeholder of the third insertion point matches the name of the second front-end component, and the placeholder of the fourth insertion point matches the name of the first front-end component.

[0121] In some embodiments, the front-end page code generating device 500 further includes a directory generating module, which is used to:

[0122] According to the file directory structure, obtain the code file directory of the front-end page;

[0123] Obtaining the name corresponding to the code of each front-end component and the storage location of the code of each front-end component;

[0124] Determine the directory entry corresponding to the code of each front-end component according to the name corresponding to the code of each front-end component and the storage location of the code of each front-end component, and obtain a plurality of the directory entries;

[0125] The plurality of directory entries are stored in the code file directory.

[0126] In some embodiments, the front-end page code generating device 500 further includes a display module, which is used to:

[0127] Display the code file directory;

[0128] Receiving a selection instruction for at least one of the directory items in the code file directory;

[0129] In response to the selection instruction, the code of the front-end component corresponding to the directory item is displayed.

[0130] In some embodiments, the front-end page code generating device 500 further includes a code modification module for:

[0131] receiving a modification input, the modification input comprising a modification parameter;

[0132] In response to the modification input, the target parameters are changed to the modification parameters, and updated target code is generated according to the modification parameters and the code template.

[0133] The specific implementation of the front-end page code generation device is basically the same as the specific implementation of the front-end page code generation method described above, and will not be repeated here.

[0134] The embodiment of the present application also provides an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the above-mentioned front-end page code generation method when executing the computer program. The electronic device can be any intelligent terminal including a tablet computer, a car computer, etc.

[0135] Figure 6 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiment of the present application. Figure 6 . Electronic equipment includes:

[0136] The processor 601 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;

[0137] The memory 602 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 602 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 602, and the processor 601 calls and executes the front-end page code generation method of the embodiment of this application;

[0138] Input / output interface 603, used to implement information input and output;

[0139] Communication interface 604, used to realize communication interaction between the device and other devices, which can be realized through wired mode (such as USB, network cable, etc.) or wireless mode (such as mobile network, WI FI, Bluetooth, etc.);

[0140] Bus 605 , which transmits information between various components of the device (e.g., processor 601 , memory 602 , input / output interface 603 , and communication interface 604 );

[0141] The processor 601 , the memory 602 , the input / output interface 603 and the communication interface 604 are connected to each other in communication within the device via a bus 605 .

[0142] An embodiment of the present application also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the above-mentioned front-end page code generation method is implemented.

[0143] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0144] The front-end page code generation method, device, electronic device and storage medium proposed in the present application obtain the design parameters of the front-end page, and in response to the platform selection input, obtain the configuration information of the target platform, then obtain the code template corresponding to the platform identifier of the target platform from the template database, perform format conversion on the design parameters according to the format conversion rules in the configuration information, obtain the target parameters, and finally obtain the target code of the front-end page according to the target parameters and the code template. The present application obtains the design parameters of the front-end page, the configuration information of the target platform and the code template corresponding to the platform identifier of the target platform, and then performs format conversion on the design parameters based on the format conversion rules in the configuration information to obtain the target parameters, and then obtains the target code of the front-end page according to the target parameters and the code template. In this way, the automatic generation of the front-end page code can be realized, the workload in the front-end page development process can be reduced, and the development efficiency of the front-end page can be improved.

[0145] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0146] Those skilled in the art will appreciate that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than shown in the figures, or a combination of certain steps, or different steps.

[0147] The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separated, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0148] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

[0149] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0150] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0151] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0152] The units described above as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0153] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0154] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including multiple instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, referred to as ROM), random access memory (Random Access Memory, referred to as RAM), disk or optical disk and other media that can store programs.

[0155] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention.

Claims

1. A method for generating front-end page code, characterized in that: The method comprises: Acquire design parameters of the front-end page, wherein the design parameters include private properties, public properties, private methods, and public methods of the front-end page; In response to a platform selection input, acquiring configuration information of a target platform, the target platform being determined according to the platform selection input, the configuration information including a format conversion rule; Acquire a code template corresponding to the platform identifier of the target platform from a template database, wherein the template database includes multiple platform identifiers and a code template corresponding to each platform identifier; Performing format conversion on the design parameters according to the format conversion rules to obtain target parameters; The target code of the front-end page is obtained according to the target parameter and the code template.

2. The method according to claim 1, characterized in that The step of obtaining the target code of the front-end page according to the target parameter and the code template includes: Replace the placeholder of the first insertion point in the code template with the private attribute in the target parameter, and replace the placeholder of the second insertion point in the code template with the public attribute in the target parameter, wherein the private attribute includes a private attribute name and a private attribute value, and the public attribute includes a public attribute name and a public attribute value, the placeholder of the first insertion point matches the private attribute name, and the placeholder of the second insertion point matches the public attribute name; Matching the private method with the preset method name in the template database to obtain the implementation code of the private method corresponding to the private method, and matching the public method with the preset method name in the template database to obtain the implementation code of the public method corresponding to the public method; the private method and the public method are both method names, and the template database includes a plurality of the preset method names, and the implementation code of the method corresponding to each of the preset method names; The implementation code of the private method and the implementation code of the public method are respectively filled into the code template to obtain the target code of the front-end page.

3. The method according to claim 1, characterized in that The front-end page includes a plurality of front-end components, and obtaining the target code of the front-end page according to the target parameter and the code template includes: If the component database stores the code of a first front-end component among the plurality of front-end components, acquiring the code of the first front-end component from the component database; For a second front-end component among the plurality of front-end components, the code of the second front-end component is obtained according to the parameter corresponding to the second front-end component in the target parameter and the code sub-template corresponding to the second front-end component in the code template, where the second front-end code is a front-end component other than the first front-end component among the plurality of front-end components; The target code is obtained according to the code of the first front-end component and the code of the second front-end component.

4. The method according to claim 3, characterized in that The target parameter includes an association relationship between the plurality of the front-end components. Before obtaining the target code according to the code of the first front-end component and the code of the second front-end component, the method further includes: If the first front-end component and the second front-end component are associated with each other, the placeholder of the third insertion point in the code of the first front-end component is replaced with the name of the second front-end component to obtain the updated code of the first front-end component, and the placeholder of the fourth insertion point in the code of the second front-end component is replaced with the name of the first front-end component to obtain the updated code of the second front-end component, and the placeholder of the third insertion point matches the name of the second front-end component, and the placeholder of the fourth insertion point matches the name of the first front-end component.

5. The method according to claim 1, characterized in that The configuration information also includes a file directory structure, the front-end page includes a plurality of front-end components, the target code includes a plurality of codes of the front-end components, and after obtaining the target code of the front-end page according to the target parameter and the code template, the method further includes: According to the file directory structure, obtain the code file directory of the front-end page; Obtaining the name corresponding to the code of each front-end component and the storage location of the code of each front-end component; Determine the directory entry corresponding to the code of each front-end component according to the name corresponding to the code of each front-end component and the storage location of the code of each front-end component, and obtain a plurality of the directory entries; The plurality of directory entries are stored in the code file directory.

6. The method according to claim 5, characterized in that After storing the plurality of directory entries in the code file directory, the method further comprises: Display the code file directory; Receiving a selection instruction for at least one of the directory items in the code file directory; In response to the selection instruction, the code of the front-end component corresponding to the directory item is displayed.

7. The method according to claim 1, characterized in that After obtaining the target code of the front-end page according to the target parameter and the code template, the method further includes: receiving a modification input, the modification input comprising a modification parameter; In response to the modification input, the target parameters are changed to the modification parameters, and updated target code is generated according to the modification parameters and the code template.

8. A front-end page code generation device, characterized in that: The device comprises: A parameter acquisition module, used to acquire design parameters of the front-end page, wherein the design parameters include private attributes, public attributes, private methods and public methods of the front-end page; a configuration information acquisition module, configured to acquire configuration information of a target platform in response to a platform selection input, wherein the target platform is determined according to the platform selection input, and the configuration information includes a format conversion rule; A template acquisition module, used to acquire a code template corresponding to the platform identifier of the target platform from a template database, wherein the template database includes multiple platform identifiers and a code template corresponding to each platform identifier; A conversion module, used for performing format conversion on the design parameters according to the format conversion rules to obtain target parameters; The code generation module is used to obtain the target code of the front-end page according to the target parameters and the code template.

9. An electronic device, characterized in that: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the front-end page code generation method according to any one of claims 1 to 7 when executing the computer program.

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

Images