CN112965701B

CN112965701B - Front-end code generation method and device

Info

Publication number: CN112965701B
Application number: CN202110186863.2A
Authority: CN
Inventors: 刘泱; 郑凯; 杨再同; 詹娇淑
Original assignee: Industrial and Commercial Bank of China Ltd ICBC
Current assignee: Industrial and Commercial Bank of China Ltd ICBC
Priority date: 2021-02-08
Filing date: 2021-02-08
Publication date: 2024-02-09
Anticipated expiration: 2041-02-08
Also published as: CN112965701A

Abstract

The embodiment of the application provides a front-end code generation method and device, which can be used in the technical field of finance, wherein the method comprises the steps of automatically updating a corresponding configuration file and outputting a first preview page corresponding to the updated configuration file if a user is detected to add a preset target parameterization component in a current graphical display page, so that the configuration file is automatically updated again after the user edits the target parameterization component from the first preview page; translating the current latest updated configuration file into a native code; and outputting a second preview page corresponding to the original code, so that after the user edits the original code from the second preview page, a corresponding target front-end code is obtained. According to the method and the device, the professional requirements, the workload and the time cost of the developer in the front-end code generation process can be effectively reduced on the basis of meeting the personalized editing requirements of the user, and the flexibility, the intelligence and the automation of the front-end code generation can be effectively improved.

Description

Front-end code generation method and device

Technical Field

The present application relates to the field of data processing technologies, and in particular, to a method and an apparatus for generating a front end code.

Background

In the current front-end development process, about half of the workload is put into the layout of the page, and although some tools capable of generating the page in a configurable way exist at present, the idea is to analyze configuration information by using a specific parameterized component, so that the application range is common in scenes such as forms. Because the analysis work of the tool is completed by the introduced specific parameterized component, the analysis capability of the parameterized component is often a bottleneck of scene applicability, and the professional requirement, the workload and the time cost of a developer are increased; and if only the analyzed code is used as the final front-end code, the requirement of automatic development is met, but the personalized customization requirement of the developer on the front-end code cannot be met. That is, the existing front-end code generation manner cannot simultaneously meet the personalized editing requirement of the user and accords with the traditional development habit of the developer.

Disclosure of Invention

Aiming at the problems in the prior art, the application provides a front-end code generation method and device, which can effectively reduce professional requirements, workload and time cost of a developer in the front-end code generation process on the basis of meeting personalized editing requirements of users, and can effectively improve the flexibility, intelligence and automation of the front-end code generation.

In order to solve the technical problems, the application provides the following technical scheme:

in a first aspect, the present application provides a front end code generating method, including:

if the fact that a user adds a preset target parameterized component in a current graphical display page is detected, automatically updating a corresponding configuration file and outputting a first preview page corresponding to the updated configuration file, so that after the user edits the target parameterized component from the first preview page, the configuration file is automatically updated again;

translating the current latest updated configuration file into corresponding native codes;

and outputting a second preview page corresponding to the original code, so that after the user edits the original code from the second preview page, a corresponding target front-end code is obtained.

Further, the translating the current updated configuration file into the corresponding native code includes:

layout recognition: acquiring a layout container corresponding to the current updated configuration file and a corresponding layout code;

acquiring target component codes corresponding to parameterized components in the layout containers, wherein the target component codes contain parameterized component attributes;

Detecting whether other parameterized components are contained in each parameterized component of the acquired component codes, and if so, returning to execute the layout identification step until the target component codes corresponding to all parameterized components are acquired;

and generating corresponding native codes according to the layout codes and the target component codes.

Further, the obtaining the layout container and the corresponding layout code corresponding to the configuration file which is updated currently and latest includes:

traversing the configuration file which is updated currently in a preset depth-first mode, and carrying out layout identification on the configuration file to obtain a layout container corresponding to the configuration file which is updated currently;

and generating a corresponding layout code according to the layout container corresponding to the current updated configuration file.

Further, the obtaining the target component code corresponding to the parameterized component in each layout container includes:

respectively carrying out parameterization component identification on each layout container to obtain parameterization components corresponding to the current latest updated configuration file, and respectively carrying out parameterization component attribute identification on each layout container to obtain parameterization component attributes of each parameterization component corresponding to the current latest updated configuration file;

And respectively generating target component codes corresponding to the parameterization components according to the parameterization components and the parameterization component attributes of the parameterization components.

Further, the generating corresponding native code according to the layout code and the target component code includes:

the target component codes are applied to assemble to obtain corresponding html codes, js codes and CSS codes;

and generating corresponding native codes according to the layout codes, the target component codes, the html codes, the js codes and the CSS codes.

Further, before the automatically updating the corresponding configuration file and outputting the first preview page corresponding to the updated configuration file, the method further includes:

and respectively generating each parameterized component, and displaying the identification of each parameterized component in a preset graphical display page for selection by a user.

Further, the layout container includes: at least one of a row container, a column container, and a form container.

In a second aspect, the present application provides a front end code generating apparatus, including:

the parameterized component editing module is used for automatically updating the corresponding configuration file and outputting a first preview page corresponding to the updated configuration file if the fact that a user adds a preset target parameterized component in the current graphical display page is detected, so that after the user edits the target parameterized component from the first preview page, the configuration file is automatically updated again;

A code translation module for translating the current updated configuration file into a corresponding native code;

and the code editing module is used for outputting a second preview page corresponding to the original code so as to obtain a corresponding target front-end code after the user edits the original code from the second preview page.

In a third aspect, the present application provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the front end code generation method when executing the program.

In a fourth aspect, the present application provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the front-end code generation method.

According to the technical scheme, in the front-end code generation method and device, if the fact that the user adds the preset target parameterized component in the current graphical display page is detected, the corresponding configuration file is automatically updated, a first preview page corresponding to the updated configuration file is output, and after the user edits the target parameterized component from the first preview page, the configuration file is automatically updated again; translating the current latest updated configuration file into corresponding native codes; outputting a second preview page corresponding to the native code, editing the native code from the second preview page by a user to obtain a corresponding target front end code, editing the page layout by a graphical operation mode, editing related parameterization components, providing a preview effect by a configuration file form and a parser form, translating the configuration file into the native code by a translation device after the page editing is completed, supplementing service logic or performing personalized reconstruction by a developer, completing most of work of the page layout by a graphical configuration mode, translating the page layout and related configuration information into a front end native code form, supplementing service logic or performing personalized reconstruction by the developer, further effectively improving the flexibility degree and the automation degree of front end code generation, effectively reducing the professional degree requirement and the workload and time cost of a developer in the front end code generation process on the basis of meeting the personalized editing requirement of the user, enabling the adaptation scene to be wider and not to introduce specific parameterization components, enabling the developer to have a more convenient and quick and efficient development scheme to be more convenient for the developer, and the developer to generate the target front end and the development program. And no extra parameterized component or dependence is required to be introduced into the project, so that the bottleneck problem of dependence of the original similar scheme is avoided, and meanwhile, the generated codes have uniform code formats, and the standardization degree of engineering codes is improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required in the embodiments or the description of the prior art will be briefly described, and it is obvious that the drawings in the following description are some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

Fig. 1 is a first flowchart of a front end code generating method in an embodiment of the present application.

Fig. 2 is a schematic diagram of a second flow in a front end code generating method in an embodiment of the present application.

Fig. 3 is a third flowchart of a front end code generating method in an embodiment of the present application.

Fig. 4 is a fourth flowchart of a front-end code generating method in an embodiment of the present application.

Fig. 5 is a schematic diagram of a fifth flow in a front-end code generating method in an embodiment of the present application.

Fig. 6 is a schematic diagram of a sixth flow in a front-end code generating method in an embodiment of the present application.

Fig. 7 is a schematic structural diagram of a front end code generating device in the embodiment of the present application.

Fig. 8 is a schematic structural diagram of a graphically configurable front-end code generation system in an application example of the present application.

Fig. 9 is a schematic diagram showing a specific structure of a translation unit in an application example of the present application.

FIG. 10 is a flow chart of a translation unit executing a code transfer process in an application example of the present application.

Fig. 11 is a schematic structural diagram of an electronic device in an embodiment of the present application.

Detailed Description

For the purposes of making the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.

It should be noted that the front end code generating method and apparatus disclosed in the present application may be used in the financial technical field, and may also be used in any field other than the financial technical field, and the application field of the front end code generating method and apparatus disclosed in the present application is not limited.

Aiming at the problems that the existing front-end code generation method cannot meet the personalized editing requirements of users and accords with the traditional development habits of developers, the embodiment of the application provides the front-end code generation method, the front-end code generation device, the electronic equipment and the computer readable storage medium, if the fact that the users add preset target parameterized components in the current graphical display page is detected, corresponding configuration files are automatically updated, first preview pages corresponding to the updated configuration files are output, and after the users edit the target parameterized components from the first preview pages, the configuration files are automatically updated again; translating the current latest updated configuration file into corresponding native codes; outputting a second preview page corresponding to the native code, editing the native code from the second preview page by a user to obtain a corresponding target front end code, editing the page layout by a graphical operation mode, editing related parameterization components, providing a preview effect by a configuration file form and a parser form, translating the configuration file into the native code by a translation device after the page editing is completed, supplementing service logic or performing personalized reconstruction by a developer, completing most of work of the page layout by a graphical configuration mode, translating the page layout and related configuration information into a front end native code form, supplementing service logic or performing personalized reconstruction by the developer, further effectively improving the flexibility degree and the automation degree of front end code generation, effectively reducing the professional degree requirement and the workload and time cost of a developer in the front end code generation process on the basis of meeting the personalized editing requirement of the user, enabling the adaptation scene to be wider and not to introduce specific parameterization components, enabling the developer to have a more convenient and quick and efficient development scheme to be more convenient for the developer, and the developer to generate the target front end and the development program. And no extra parameterized component or dependence is required to be introduced into the project, so that the bottleneck problem of dependence of the original similar scheme is avoided, and meanwhile, the generated codes have uniform code formats, and the standardization degree of engineering codes is improved.

Based on the foregoing, the present application further provides a front end code generating device for implementing the front end code generating method provided in one or more embodiments of the present application, where the front end code generating device may be in communication connection with a client device, and the front end code generating device may receive a request from a user sent by the client device to add a preset target parameterized component to a current graphical display page, and then automatically update a corresponding configuration file and output a first preview page corresponding to the updated configuration file, so that after the user edits the target parameterized component from the first preview page, the configuration file is automatically updated again; translating the current latest updated configuration file into corresponding native codes; and outputting a second preview page corresponding to the original code, so that after the user edits the original code from the second preview page, a corresponding target front-end code is obtained and packaged and sent to the client device.

In an actual application situation, the front-end code generating device may be implemented by a server; the server may be communicatively coupled to at least one client device.

It is understood that the client device may include a smart phone, a tablet electronic device, a network set top box, a portable computer, a desktop computer, a Personal Digital Assistant (PDA), an in-vehicle device, a smart wearable device, etc. Wherein, intelligent wearing equipment can include intelligent glasses, intelligent wrist-watch, intelligent bracelet etc..

In another practical application, the foregoing part of the front-end code generating device that generates the front-end code may be executed in a server as described above, or all operations may be completed in the client device. Specifically, the selection may be made according to the processing capability of the client device, and restrictions of the use scenario of the user. The present application is not limited in this regard. If all operations are performed in the client device, the client device may further include a processor for specific processing of the front-end code generation.

The client device may have a communication module (i.e. a communication unit) and may be connected to a remote server in a communication manner, so as to implement data transmission with the server. The server may include a server on the side of the task scheduling center, and in other implementations may include a server of an intermediate platform, such as a server of a third party server platform having a communication link with the task scheduling center server. The server may include a single computer device, a server cluster formed by a plurality of servers, or a server structure of a distributed device.

Any suitable network protocol may be used for communication between the server and the client device, including those not yet developed at the filing date of this application. The network protocols may include, for example, TCP/IP protocol, UDP/IP protocol, HTTP protocol, HTTPS protocol, etc. Of course, the network protocol may also include, for example, RPC protocol (Remote Procedure Call Protocol ), REST protocol (Representational State Transfer, representational state transfer protocol), etc. used above the above-described protocol.

The following embodiments and application examples are described in detail.

In order to solve the problems that the existing front-end code generation method cannot simultaneously meet the personalized editing requirement of a user and meet the traditional development habit of a developer, the application provides an embodiment of the front-end code generation method, referring to fig. 1, the front-end code generation method executed by the application front-end code generation device specifically comprises the following contents:

step 100: if it is detected that a preset target parameterized component is added in the current graphical display page by a user, automatically updating a corresponding configuration file and outputting a first preview page corresponding to the updated configuration file, so that after the user edits the target parameterized component from the first preview page, the configuration file is automatically updated again.

In one or more embodiments of the present application, the page may refer to a web page, and the graphically displayed page refers to a web page that performs data display in a manner of graphically displaying information.

In step 100, the user may first be provided with parameterized components in the graphical display page for selection by the user, and the configuration file may be automatically updated when the user adds a component to the page. It can be understood that the parameterized component is a parameterized component that performs parameterization processing on various components used by a preset user to write codes, so as to form respective parameterized components corresponding to the various components. And rendering the updated configuration file into a new preview page, wherein the user can adjust the ordering of page components by the page editing preview unit, delete or clone some existing components, and when the user selects a certain component in the preview page, the user can modify various properties of the current component, and the modifications are updated into the configuration file in real time.

Step 200: and translating the current latest updated configuration file into corresponding native codes.

In step 200, after the user completes editing the page, the current configuration file is extracted and translated into the native code, which is then executed in the code preview unit to generate a live preview.

Step 300: and outputting a second preview page corresponding to the original code, so that after the user edits the original code from the second preview page, a corresponding target front-end code is obtained.

In step 300, the user may modify the native code in the preset editor, and these modifications may be synchronously updated into the code preview page, so that the user may view the effect of the code modification in real time, and after confirmation, may export the edited native code.

As can be seen from the above description, the front-end code generating method provided by the embodiment of the present application compiles the page layout and edits the related parameterized components in a graphical operation manner, provides a preview effect in a configuration file form and a parser form, translates the configuration file into a native code through a translation device after the page editing is completed, so that a developer can supplement service logic or perform personalized reconstruction, complete most of the work of the page layout in a graphical configuration manner, translate the page layout and related configuration information into a front-end native code form, and supplement service logic or perform personalized reconstruction for the developer, thereby effectively improving the flexibility and automation degree of front-end code generation, effectively reducing the professional requirement and the workload and time cost of the developer in the front-end code generation process on the basis of meeting the personalized editing requirement of the user, and enabling the adaptability scene to be wider without introducing a specific parameterized component, and because the finally obtained target front-end code is substantially consistent with the product of manual coding of the developer, thereby being more friendly to the developer, more conforming to the traditional development scheme, and further improving the user experience of the development scheme. And no extra parameterized component or dependence is required to be introduced into the project, so that the bottleneck problem of dependence of the original similar scheme is avoided, and meanwhile, the generated codes have uniform code formats, and the standardization degree of engineering codes is improved.

In order to provide a specific way of translating the code, in one embodiment of the front end code generating method provided in the present application, referring to fig. 2, step 200 of the front end code generating method specifically includes the following:

step 210: layout recognition: acquiring a layout container corresponding to the current updated configuration file and a corresponding layout code;

step 220: and obtaining target component codes corresponding to the parameterized components in the layout containers, wherein the target component codes contain parameterized component attributes.

Step 230: and detecting whether other parameterized components are contained in each parameterized component of the acquired component codes, and if so, returning to execute the layout identification step until the target component codes corresponding to all the parameterized components are acquired.

Step 240: and generating corresponding native codes according to the layout codes and the target component codes.

Specifically, after the configuration file is obtained, traversing the whole configuration file in a depth-first traversing mode, firstly identifying the layout and generating an outer layer layout code, then sequentially identifying components in the layout and generating component codes, if the components contain sub-components, executing the same steps on the sub-components, circularly traversing the whole configuration file, finally summarizing and combining the generated code fragments, and delivering the summarized and combined code fragments to a preview unit and updating a preview view.

As can be seen from the above description, the front-end code generation method provided by the embodiment of the present application can effectively improve the reliability and accuracy of the process of translating the current latest updated configuration file into the corresponding native code, and can effectively improve the efficiency of the code translation process, thereby effectively improving the reliability, accuracy and efficiency of front-end code generation.

In order to provide a specific manner of layout identification, in one embodiment of the front end code generation method provided in the present application, referring to fig. 3, step 210 of the front end code generation method specifically includes the following:

step 211: traversing the configuration file which is updated currently in a preset depth-first mode, and carrying out layout identification on the configuration file to obtain a layout container corresponding to the configuration file which is updated currently.

Step 212: and generating a corresponding layout code according to the layout container corresponding to the current updated configuration file.

From the above description, it can be seen that the method for generating the front end code provided by the embodiment of the present application can effectively improve the accuracy and the comprehensiveness of obtaining the layout container corresponding to the configuration file that is updated currently and latest, and further can effectively improve the accuracy and the comprehensiveness of generating the front end code.

In order to provide a specific manner of parameterizing component identification, in one embodiment of the front end code generation method provided in the present application, referring to fig. 4, step 220 of the front end code generation method specifically includes the following:

step 221: and respectively carrying out parameterization component identification on each layout container to obtain parameterization components corresponding to the current latest updated configuration file, and respectively carrying out parameterization component attribute identification on each layout container to obtain parameterization component attributes of each parameterization component corresponding to the current latest updated configuration file.

Step 222: and respectively generating target component codes corresponding to the parameterization components according to the parameterization components and the parameterization component attributes of the parameterization components.

From the above description, it can be seen that the front end code generating method provided by the embodiment of the present application can effectively improve the comprehensiveness and reliability of acquiring the target component codes corresponding to the parameterized components in each layout container, and further can effectively improve the comprehensiveness and reliability of front end code generation.

In order to provide a specific manner of parameterizing component identification, in one embodiment of the front end code generation method provided in the present application, referring to fig. 5, step 240 of the front end code generation method specifically includes the following:

Step 241: and the target component codes are spliced to obtain corresponding html codes, js codes and CSS codes.

Step 242: and generating corresponding native codes according to the layout codes, the target component codes, the html codes, the js codes and the CSS codes.

In particular, a layout container used by a component in a page may be identified for generating a corresponding container code, with a number of layout containers in the page, such as a row container, a column container, a form container, and the like; identifying components and attributes in the page, generating corresponding component codes and filling the corresponding attributes; respectively splicing html, js and CSS parts according to the component codes; and finally, assembling all the generated codes to generate a code file.

As can be seen from the above description, the method for generating a front end code according to the embodiment of the present application can effectively improve the effectiveness and comprehensiveness of generating a corresponding native code according to the layout code and the target component code, and further can effectively improve the effectiveness and comprehensiveness of generating the front end code.

In order to provide a specific way to generate the parameterized component in advance, in one embodiment of the front end code generating method provided in the present application, referring to fig. 6, before step 100 of the front end code generating method, the following is further specifically included:

Step 010: and respectively generating each parameterized component, and displaying the identification of each parameterized component in a preset graphical display page for selection by a user.

Specifically, firstly, parameterized components are provided for users to select in a graphic display page, and when the user adds a certain component on the page, the configuration file is automatically updated.

As can be seen from the above description, according to the front end code generation method provided by the embodiment of the application, through parameterizing the basic parameterization component in advance, a user can arrange a page layout and edit related parameterization components in a graphical operation mode, so that the efficiency and reliability of the front end code generation process can be effectively improved, and the personalized customization requirement of the user can be met.

In order to provide a specific way of classifying containers, in one embodiment of the front end code generating method provided in the present application, the layout container includes: at least one of a row container, a column container, and a form container.

As can be seen from the above description, the front end code generating method provided in the embodiments of the present application can effectively improve the efficiency and reliability of performing layout identification on the configuration file by performing differentiated classification on the layout container, and further can effectively improve the efficiency and reliability of front end code generation.

In order to solve the problem that the existing front-end code generating method cannot simultaneously meet the personalized editing requirement of the user and meet the traditional development habit of the developer, and the like, from the software aspect, the application provides an embodiment of a front-end code generating device for executing all or part of the content in the front-end code generating method, referring to fig. 7, the front-end code generating device specifically includes the following contents:

and the parameterization component editing module 10 is configured to automatically update a corresponding configuration file and output a first preview page corresponding to the updated configuration file if it is detected that a user adds a preset target parameterization component to a current graphical display page, so that after the user edits the target parameterization component from the first preview page, the configuration file is automatically updated again.

In the parameterized component editing module 10, the parameterized components may be first provided to the user in a graphical display page for selection by the user, and the configuration file may be automatically updated when the user adds a component to the page. It can be understood that the parameterized component is a parameterized component that performs parameterization processing on various components used by a preset user to write codes, so as to form respective parameterized components corresponding to the various components. And rendering the updated configuration file into a new preview page, wherein the user can adjust the ordering of page components by the page editing preview unit, delete or clone some existing components, and when the user selects a certain component in the preview page, the user can modify various properties of the current component, and the modifications are updated into the configuration file in real time.

The code translation module 20 is configured to translate the current latest updated configuration file into corresponding native code.

In the code translation module 20, when the user completes editing the page, the current configuration file is extracted and translated into the native code, and then the native code is executed in the code preview unit to generate a real-time preview.

The code editing module 30 is configured to output a second preview page corresponding to the native code, so as to obtain a corresponding target front end code after the user edits the native code from the second preview page.

In the code editing module 30, the user can modify the native code in the preset editor, the modifications can be synchronously updated to the code preview page, the user can check the code modification effect in real time, and after confirmation, the edited native code can be exported.

The embodiment of the front end code generating device provided in the present application may be specifically used to execute the processing flow of the embodiment of the front end code generating method in the above embodiment, and the functions thereof are not described herein in detail, and reference may be made to the detailed description of the above method embodiment.

As can be seen from the above description, the front-end code generating device provided in the embodiment of the present application compiles a page layout and edits related parameterized components in a graphical operation manner, provides a preview effect in a configuration file form and a parser form, translates the configuration file into a native code in a translation device after completing page editing, so that a developer can supplement service logic or perform personalized transformation, complete most of the work of the page layout in a graphical configuration manner, translate the page layout and related configuration information into a front-end native code form, and supplement service logic or perform personalized transformation for the developer, thereby effectively improving the flexibility and automation of front-end code generation, effectively reducing the professional requirement and the workload and time cost of the developer in the front-end code generation process on the basis of meeting the personalized editing requirement of the user, and making the adaptability scene wider without introducing specific parameterized components. And no extra parameterized component or dependence is required to be introduced into the project, so that the bottleneck problem of dependence of the original similar scheme is avoided, and meanwhile, the generated codes have uniform code formats, and the standardization degree of engineering codes is improved.

In order to provide a specific way of translating codes, in one embodiment of the front-end code generating device provided in the present application, the code translation module 20 of the front-end code generating device is specifically configured to perform the following:

As can be seen from the above description, the front-end code generating device provided in the embodiment of the present application can effectively improve the reliability and accuracy of the process of translating the current latest updated configuration file into the corresponding native code, and can effectively improve the efficiency of the code translation process, thereby effectively improving the reliability, accuracy and efficiency of front-end code generation.

In order to provide a specific way of layout identification, in one embodiment of the front-end code generating device provided in the present application, the code translation module 20 of the front-end code generating device is further specifically configured to perform the following:

As can be seen from the above description, the front end code generating device provided in the embodiment of the present application can effectively improve accuracy and comprehensiveness of obtaining a layout container corresponding to a configuration file that is updated currently and latest, and further can effectively improve accuracy and comprehensiveness of front end code generation.

In order to provide a specific way for parameterizing component identification, in one embodiment of the front-end code generating apparatus provided in the present application, the code translation module 20 of the front-end code generating apparatus is further specifically configured to perform the following:

As can be seen from the foregoing description, the front end code generating device provided in the embodiment of the present application can effectively improve the comprehensiveness and reliability of acquiring the target component codes corresponding to the parameterized components in each layout container, and further can effectively improve the comprehensiveness and reliability of front end code generation.

As can be seen from the above description, the front end code generating device provided in the embodiments of the present application can effectively improve the effectiveness and comprehensiveness of generating the corresponding native code according to the layout code and the target component code, and further can effectively improve the effectiveness and comprehensiveness of front end code generation.

In order to provide a specific way of generating the parameterized component in advance, in one embodiment of the front-end code generating device provided in the present application, the front-end code generating device is further specifically configured to perform the following:

As can be seen from the above description, the front end code generating device provided in the embodiment of the present application, through parameterizing the basic parameterization component in advance, can implement that a user composes a page layout and edits related parameterization components in a graphical operation mode, so as to effectively improve efficiency and reliability of the front end code generating process, and can meet personalized customization requirements of the user.

In order to provide a specific way of classifying containers, in one embodiment of the front end code generating device provided in the present application, the layout container includes: at least one of a row container, a column container, and a form container.

As can be seen from the above description, the front end code generating device provided in the embodiments of the present application can effectively improve the efficiency and reliability of performing layout identification on the configuration file by performing differentiated classification on the layout container, and further can effectively improve the efficiency and reliability of front end code generation.

In order to further explain the scheme, the application example of the application provides a system and a method for generating the front-end codes capable of being configured in a graphical way, the system and the method can complete most of the work of page layout through a graphical configuration way, and translate page layout and relevant configuration information into a front-end native code form for a developer to supplement service logic or perform personalized transformation.

The design idea of the graphically configurable front-end code generation system provided by the application example is as follows: after parameterizing the basic components, arranging the page layout in a graphical operation mode, editing related components, providing a preview effect in a configuration file form and a parser form, and translating the configuration file into a native code through a translation system after the page editing is completed.

Referring to fig. 8, the graphically configurable front-end code generation system is divided into two parts, namely a graphical editing module and a native code processing module.

The graphical editing module takes the configuration file as a core, and can be divided into a basic component set, a page editing preview unit and a component editing unit around how to construct the configuration file:

the basic component set provides parameterized components for users to select, and when a user adds a certain component on a page, the configuration file is automatically updated.

The page editing preview unit renders the updated configuration file into a preview page, the user can adjust the ordering of the page components by the page editing preview unit again, delete or clone some existing components, and when the user selects a certain component in the preview page.

The component editing unit can modify various properties of the current component, and the modifications are updated into the configuration file in real time.

After the user completes the editing of the page, the graphical editing module gives the generated configuration file to the native code processing module.

The translation unit receives the configuration file provided by the graphic editing module and translates the configuration file into a native code to be provided to the code editing unit.

The codes in the code editing unit can be executed in the code previewing unit to generate real-time previews, a user can modify the codes in an editor of the code editing unit, the modifications can be synchronously updated into the code previewing unit, the user can check the code modification effect in real time, and the edited native codes can be exported after confirmation is completed.

Referring to fig. 9, the translation unit in the native code processing module is composed of 7 units:

wherein the layout identification unit is used for identifying layout containers used by components in the page and generating corresponding container codes, and the page is provided with a plurality of layout containers, such as row containers, column containers, form containers and the like;

the component identification unit and the component attribute generation unit are used for identifying components and attributes in the page, generating corresponding component codes and filling the corresponding attributes;

the html module generating unit, the js module generating unit and the CSS module generating unit respectively splice html, js and CSS parts according to the component codes;

and finally, assembling all the generated codes by the code integration unit to generate a code file.

Referring to fig. 10, the processing flow of the translation unit to perform code transfer is as follows:

after the translation unit receives the configuration file, traversing the whole configuration file in a depth-first traversing mode, firstly identifying the layout and generating an outer layer layout code, then sequentially identifying components in the layout and generating a component code, if the components contain sub-components, executing the same steps on the sub-components, then continuously identifying whether unprocessed components are in the layout, if so, identifying the components and generating the code, after traversing the whole configuration file in a circulating mode, finally combining the codes and updating the preview unit, namely summarizing and combining the generated code fragments, and delivering the summarized code fragments to the preview unit and updating the preview view.

As can be seen from the above, the application example of the present application provides a front-end code generating system capable of being configured graphically, so that a user can quickly complete the development of the page layout originally required to be encoded in a graphical configuration manner, translate the configured page layout into the front-end native code through the system, and perform secondary development and service logic supplementation on the basis. The system saves development time and standardizes the code style of engineering.

Compared with similar visual configuration tools, (1) the problem that an analysis component needs to be additionally introduced is solved, and the analysis capability of the analysis component is prevented from becoming a development bottleneck; (2) because the output is not the configuration file but the native code, the method is more friendly to secondary development and expansion, is more close to the development habit of developers, and has wider applicability.

In order to solve the problem that the existing front-end code generation method cannot meet the personalized editing requirement of a user at the same time and meet the traditional development habit of a developer, and the like, from the hardware aspect, the application provides an embodiment of an electronic device for realizing all or part of contents in the front-end code generation method, wherein the electronic device specifically comprises the following contents:

Fig. 11 is a schematic block diagram of a system configuration of an electronic device 9600 of an embodiment of the present application. As shown in fig. 11, the electronic device 9600 may include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. Notably, this fig. 11 is exemplary; other types of structures may also be used in addition to or in place of the structures to implement telecommunications functions or other functions.

In an embodiment, the front-end code generation functionality may be integrated into the central processor. Wherein the central processor may be configured to control:

As can be seen from the above description, the electronic device provided in the embodiment of the present application compiles the page layout and edits the related parameterized components in a graphical operation manner, provides a preview effect in a configuration file form and a parser form, translates the configuration file into a native code through a translation device after completing page editing, so that a developer can supplement service logic or perform personalized reconstruction, can complete most of the work of the page layout in a graphical configuration manner, translates the page layout and related configuration information into a front-end native code form, so that the developer can supplement service logic or perform personalized reconstruction, thereby effectively improving the flexibility and automation degree of front-end code generation, effectively reducing the professional requirement and the workload and time cost of the developer in the process of generating the front-end code on the basis of meeting the personalized editing requirement of a user, and making the adaptability scene wider and not introducing a specific parameterized component. And no extra parameterized component or dependence is required to be introduced into the project, so that the bottleneck problem of dependence of the original similar scheme is avoided, and meanwhile, the generated codes have uniform code formats, and the standardization degree of engineering codes is improved.

In another embodiment, the front-end code generating device may be configured separately from the central processor 9100, for example, the front-end code generating device may be configured as a chip connected to the central processor 9100, and the front-end code generating function is implemented by control of the central processor.

As shown in fig. 11, the electronic device 9600 may further include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is noted that the electronic device 9600 need not include all of the components shown in fig. 11; in addition, the electronic device 9600 may further include components not shown in fig. 11, and reference may be made to the related art.

As shown in fig. 11, the central processor 9100, sometimes referred to as a controller or operational control, may include a microprocessor or other processor device and/or logic device, which central processor 9100 receives inputs and controls the operation of the various components of the electronic device 9600.

The memory 9140 may be, for example, one or more of a buffer, a flash memory, a hard drive, a removable media, a volatile memory, a non-volatile memory, or other suitable device. The information about failure may be stored, and a program for executing the information may be stored. And the central processor 9100 can execute the program stored in the memory 9140 to realize information storage or processing, and the like.

The input unit 9120 provides input to the central processor 9100. The input unit 9120 is, for example, a key or a touch input device. The power supply 9170 is used to provide power to the electronic device 9600. The display 9160 is used for displaying display objects such as images and characters. The display may be, for example, but not limited to, an LCD display.

The memory 9140 may be a solid state memory such as Read Only Memory (ROM), random Access Memory (RAM), SIM card, etc. But also a memory which holds information even when powered down, can be selectively erased and provided with further data, an example of which is sometimes referred to as EPROM or the like. The memory 9140 may also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application/function storage portion 9142, the application/function storage portion 9142 storing application programs and function programs or a flow for executing operations of the electronic device 9600 by the central processor 9100.

The memory 9140 may also include a data store 9143, the data store 9143 for storing data, such as contacts, digital data, pictures, sounds, and/or any other data used by an electronic device. The driver storage portion 9144 of the memory 9140 may include various drivers of the electronic device for communication functions and/or for performing other functions of the electronic device (e.g., messaging applications, address book applications, etc.).

The communication module 9110 is a transmitter/receiver 9110 that transmits and receives signals via an antenna 9111. A communication module (transmitter/receiver) 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, as in the case of conventional mobile communication terminals.

Based on different communication technologies, a plurality of communication modules 9110, such as a cellular network module, a bluetooth module, and/or a wireless local area network module, etc., may be provided in the same electronic device. The communication module (transmitter/receiver) 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide audio output via the speaker 9131 and to receive audio input from the microphone 9132 to implement usual telecommunications functions. The audio processor 9130 can include any suitable buffers, decoders, amplifiers and so forth. In addition, the audio processor 9130 is also coupled to the central processor 9100 so that sound can be recorded locally through the microphone 9132 and sound stored locally can be played through the speaker 9131.

The embodiments of the present application also provide a computer-readable storage medium capable of implementing all the steps in the front-end code generation method in the above embodiments, where the computer-readable storage medium stores a computer program that, when executed by a processor, implements all the steps in the front-end code generation method in the above embodiments in which the execution subject is a server or a client, for example, the processor implements the following steps when executing the computer program:

As can be seen from the above description, the computer readable storage medium provided in the embodiments of the present application compiles a page layout and edits related parameterized components in a graphical operation manner, provides a preview effect in a configuration file form and a parser form, translates the configuration file into a native code through a translation device after the page editing is completed, so that a developer can supplement service logic or perform personalized transformation, can complete most of the work of the page layout in a graphical configuration manner, translates the page layout and related configuration information into a front-end native code form, and can supplement service logic or perform personalized transformation for the developer, thereby effectively improving the flexibility and automation degree of front-end code generation, effectively reducing the professional requirement and the workload and time cost of the developer in the front-end code generation process on the basis of meeting the personalized editing requirement of the user, and enabling the adaptability scene to be wider without introducing specific parameterized components. And no extra parameterized component or dependence is required to be introduced into the project, so that the bottleneck problem of dependence of the original similar scheme is avoided, and meanwhile, the generated codes have uniform code formats, and the standardization degree of engineering codes is improved.

It will be apparent to those skilled in the art that embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein. The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (devices), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks. These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

The principles and embodiments of the present invention have been described in detail with reference to specific examples, which are provided to facilitate understanding of the method and core ideas of the present invention; meanwhile, as those skilled in the art will have variations in the specific embodiments and application scope in accordance with the ideas of the present invention, the present description should not be construed as limiting the present invention in view of the above.

Claims

1. A front-end code generation method, comprising:

outputting a second preview page corresponding to the original code, so as to obtain a corresponding target front-end code after the user edits the original code from the second preview page;

the translating the current updated configuration file into the corresponding native code includes:

2. The method for generating a front-end code according to claim 1, wherein the obtaining the layout container and the corresponding layout code corresponding to the configuration file that is currently updated comprises:

3. The method for generating a front-end code according to claim 1, wherein the obtaining the object component code corresponding to the parameterized component in each layout container includes:

4. The front-end code generation method according to claim 1, wherein the generating the corresponding native code from the layout code and the object component code includes:

5. The front-end code generation method according to claim 1, further comprising, before the automatically updating the corresponding configuration file and outputting the first preview page corresponding to the updated configuration file:

6. The front-end code generation method according to any one of claims 2 to 4, wherein the layout container includes: at least one of a row container, a column container, and a form container.

7. A front-end code generating apparatus, comprising:

the code editing module is used for outputting a second preview page corresponding to the original code so as to obtain a corresponding target front-end code after the user edits the original code from the second preview page;

the code translation module is specifically configured to:

8. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the front-end code generation method of any of claims 1 to 6 when executing the computer program.

9. A computer-readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the front-end code generation method of any one of claims 1 to 6.