CN112965701A

CN112965701A - Front-end code generation method and device

Info

Publication number: CN112965701A
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: 2021-06-15
Anticipated expiration: 2041-02-08
Also published as: CN112965701B

Abstract

The embodiment of the application provides a front-end code generation method and a 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 the situation that a preset target parameterized component is added into a current graphical display page by a user is detected, so that the configuration file is automatically updated again after the user edits the target parameterized 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 native code, so as to obtain a corresponding target front-end code after the user edits the native code from the second preview page. According to the method and the device, on the basis of meeting the personalized editing requirements of the user, the professional requirements, the workload and the time cost of developers in the front-end code generation process can be effectively reduced, and the flexibility, the intelligent degree and the automation degree 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 the field of financial technologies, and in particular, to a front-end code generation method and apparatus.

Background

In the current front-end development process, the workload of the page layout is about half, and although some tools capable of generating pages can be configured at present, the idea is to analyze configuration information by using a specific parameterization component, so that the application range is commonly seen in scenes such as forms. Because the analysis work of the tools is completed by the introduced specific parameterized components, the analysis capability of the parameterized components often becomes the bottleneck of scene applicability, and meanwhile, the professional requirement, workload and time cost of developers are increased; and if the analyzed code is only used as the final front-end code, although the requirement of automatic development is met, the requirement of the developer on the personalized customization of the front-end code cannot be met. That is, the existing front-end code generation method cannot simultaneously meet the personalized editing requirements of users and conform to the traditional development habits of developers.

Disclosure of Invention

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

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

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

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

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

and outputting 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.

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

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

acquiring object component codes corresponding to parameterized components in the layout container, wherein the object component codes comprise parameterized component attributes;

detecting whether each parameterized component of the obtained component codes contains other parameterized components, if so, returning to execute the layout identification step until target component codes corresponding to all parameterized components are obtained;

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

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

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

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

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

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

and respectively generating target component codes corresponding to the parameterized components according to the parameterized components and the parameterized component attributes of the parameterized 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 be assembled 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 identifier of each parameterized component in a preset graphical display page for a user to select.

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 parameter 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 condition that a preset target parameter component is added into the current graphical display page by a user is detected, so that the configuration file is automatically updated again after the user edits the target parameter component from the first preview page;

the code translation module is used for translating the current latest updated configuration file into corresponding native codes;

and the code editing module is used for outputting 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 a third aspect, the present application provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the front-end code generating 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, if the fact that the preset target parameterized component is added into the current graphical display page by the user is detected, the corresponding configuration file is automatically updated, a first preview page corresponding to the updated configuration file is output, and the configuration file is automatically updated again after the target parameterized component is edited in the first preview page by the user; 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 in the second preview page by a user to obtain a corresponding target front-end code, editing the page layout and editing a related parameterized component in a graphical operation mode, providing a preview effect in a configuration file form and an analyzer form, translating the configuration file into the native code through a translation device after completing the page editing, supplementing business logic or performing personalized transformation for developers, completing most of work of the page layout by means of graphical configuration, translating the page layout and related configuration information into a front-end native code form for the developers to supplement the business logic or perform personalized transformation, and further effectively improving the flexibility and automation degree of the front-end code generation, on the basis of meeting the personalized editing requirements of users, the professional requirements, workload and time cost of developers in the front-end code generation process can be effectively reduced, the adaptability scene can be wider, a specific parameterization component does not need to be introduced, and finally obtained target front-end codes are basically consistent with products manually coded by the developers, so that the method is more friendly to the developers, the page rapid generation scheme more conforming to the traditional development habits of the developers is better, and the user experience of the developers can be effectively improved. And no additional parameterized component or dependence is required to be introduced into the project, so that the problem of dependence bottleneck of the original similar scheme is avoided, and meanwhile, the generated codes have a uniform code format, so that the specification degree of the 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 needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.

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

Fig. 2 is a schematic flowchart of a second method for generating a front-end code in the embodiment of the present application.

Fig. 3 is a third flowchart illustrating a front-end code generation method in the embodiment of the present application.

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

Fig. 5 is a fifth flowchart in the front-end code generation method in the embodiment of the present application.

Fig. 6 is a sixth flowchart in the front-end code generation method in the embodiment of the present application.

Fig. 7 is a schematic structural diagram of a front-end code generation apparatus in the embodiment of the present application.

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

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

FIG. 10 is a flowchart illustrating a code transfer process performed by the translation unit in an exemplary application of the present application.

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

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, 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 obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

It should be noted that the front-end code generation method and apparatus disclosed in the present application may be used in the field of financial technology, and may also be used in any field other than the field of financial technology.

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 a front-end code generation method, a front-end code generation device, electronic equipment and a computer readable storage medium, if it is detected that a preset target parameterized component is added into a current graphical display page by a user, a corresponding configuration file is automatically updated, a first preview page corresponding to the updated configuration file is output, and the configuration file is automatically updated again after the target parameterized component is edited from the first preview page by the user; 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 in the second preview page by a user to obtain a corresponding target front-end code, editing the page layout and editing a related parameterized component in a graphical operation mode, providing a preview effect in a configuration file form and an analyzer form, translating the configuration file into the native code through a translation device after completing the page editing, supplementing business logic or performing personalized transformation for developers, completing most of work of the page layout by means of graphical configuration, translating the page layout and related configuration information into a front-end native code form for the developers to supplement the business logic or perform personalized transformation, and further effectively improving the flexibility and automation degree of the front-end code generation, on the basis of meeting the personalized editing requirements of users, the professional requirements, workload and time cost of developers in the front-end code generation process can be effectively reduced, the adaptability scene can be wider, a specific parameterization component does not need to be introduced, and finally obtained target front-end codes are basically consistent with products manually coded by the developers, so that the method is more friendly to the developers, the page rapid generation scheme more conforming to the traditional development habits of the developers is better, and the user experience of the developers can be effectively improved. And no additional parameterized component or dependence is required to be introduced into the project, so that the problem of dependence bottleneck of the original similar scheme is avoided, and meanwhile, the generated codes have a uniform code format, so that the specification degree of the engineering codes is improved.

Based on the above content, 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 preset target parameterized component added in a current graphical display page by a user sent by the client device, 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 in 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 native code, so that after the user edits the native code from the second preview page, a corresponding target front-end code is obtained and packaged and sent to the client device.

In a practical application scenario, the front-end code generation apparatus may be implemented by a server; the server may be communicatively coupled to at least one client device.

It is understood that the client devices may include smart phones, tablet electronic devices, network set-top boxes, portable computers, desktop computers, Personal Digital Assistants (PDAs), in-vehicle devices, smart wearable devices, and the like. Wherein, intelligence wearing equipment can include intelligent glasses, intelligent wrist-watch, intelligent bracelet etc..

In another practical application scenario, the front-end code generation part of the front-end code generation apparatus may be executed in the server as described above, or all operations may be completed in the client device. The selection may be specifically performed according to the processing capability of the client device, the limitation of the user usage scenario, and the like. This is not a limitation of the present application. If all the operations are completed in the client device, the client device may further include a processor for performing specific processing of front-end code generation.

The client device may have a communication module (i.e., a communication unit), and may be communicatively connected to a remote server to implement data transmission with the server. The server may include a server on the task scheduling center side, and in other implementation scenarios, the server may also include a server on an intermediate platform, for example, a server on a third-party server platform that is communicatively linked to the task scheduling center server. The server may include a single computer device, or may include a server cluster formed by a plurality of servers, or a server structure of a distributed apparatus.

The server and the client device may communicate using any suitable network protocol, including network protocols not yet developed at the filing date of this application. The network protocol may include, for example, a TCP/IP protocol, a UDP/IP protocol, an HTTP protocol, an HTTPS protocol, or the like. Of course, the network Protocol may also include, for example, an RPC Protocol (Remote Procedure Call Protocol), a REST Protocol (Representational State Transfer Protocol), and the like used above the above Protocol.

The following embodiments and application examples are specifically and individually described in detail.

In order to solve the problems that the existing front-end code generation method cannot simultaneously meet the personalized editing requirements of users and meet the traditional development habits of developers, the application provides an embodiment of a front-end code generation method, and referring to fig. 1, the front-end code generation method executed by applying a front-end code generation device specifically includes the following contents:

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

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

In step 100, parameterized components may be first provided to the user in a graphical display page for selection by the user, and the configuration file is automatically updated when the user adds a component to the page. It is understood that the parameterized components are parameterized components used for writing preset code by a user to form parameterized components corresponding to the various components respectively. And then rendering the updated configuration file into a new preview page, wherein the user can adjust the sequencing of the page components by the page editing and previewing unit and delete or clone some existing components, and when the user selects a certain component in the preview page, the user can modify various attributes of the current component, and the modifications can be 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, when the user finishes editing the page, the current configuration file is extracted and translated into 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 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 step 300, a user may modify the native code in a preset editor, and the modifications may be synchronously updated into the code preview page, so that the user may view the code modification effect in real time and export the edited native code after confirming completion.

As can be seen from the above description, the front-end code generation method provided in this embodiment of the present application arranges a page layout in a graphical operation manner and edits a related parameterized component, provides a preview effect in a form of a configuration file and a form of a parser, and translates the configuration file into a native code through a translation device after completing page editing, so as to provide a developer with a service logic or personalized modification manner, and can complete most of the work of the page layout by means of graphical configuration, and translate the page layout and related configuration information into a form of a front-end native code, so as to provide the developer with a service logic or personalized modification, thereby effectively improving the flexibility and automation degree of front-end code generation, and effectively reducing the professional requirement on the developer in the front-end code generation process on the basis of satisfying the personalized editing requirement of the user, The method has the advantages that workload and time cost are realized, the adaptability scene is wider, a specific parameterized component is not required to be introduced, and the finally obtained target front-end code is basically consistent with a product manually coded by a developer, so that the method is more friendly to the developer, and a page rapid generation scheme more conforming to the traditional development habit of the developer is realized, and further the user experience of the developer can be effectively improved. And no additional parameterized component or dependence is required to be introduced into the project, so that the problem of dependence bottleneck of the original similar scheme is avoided, and meanwhile, the generated codes have a uniform code format, so that the specification degree of the engineering codes is improved.

In order to provide a specific way of translating codes, in an embodiment of the front-end code generating method provided in the present application, referring to fig. 2, the steps 200 of the front-end code generating method specifically include the following:

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

step 220: and acquiring object component codes corresponding to the parameterized components in the layout container, wherein the object component codes comprise parameterized component attributes.

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

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

Specifically, after the configuration file is obtained, the whole configuration file is traversed in a depth-first traversal mode, layout recognition is firstly carried out to generate outer-layer layout codes, then components in the layout are sequentially recognized to generate component codes, if the components comprise the sub-components, the same steps are carried out on the sub-components, after the whole configuration file is traversed in a circulating mode, finally generated code segments are gathered and combined, and the code segments are handed to a preview unit to update a preview view.

As can be seen from the above description, the front-end code generation method 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 identifying a layout, in an embodiment of the front-end code generation method provided by the present application, referring to fig. 3, step 210 of the front-end code generation method specifically includes the following steps:

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

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

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

In order to provide a specific way of parameterized component identification, in an 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 steps:

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

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

As can be seen from the above description, the front-end code generation method provided in the embodiment of the present application can effectively improve the comprehensiveness and reliability of obtaining the target component code corresponding to the parameterized component in each layout container, and further can effectively improve the comprehensiveness and reliability of front-end code generation.

In order to provide a specific way of parameterized component identification, in an 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 steps:

step 241: and applying the target component codes to assemble 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.

Specifically, a layout container used by a component in a page can be identified for generating a corresponding container code, and the page has a plurality of layout containers, 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 assembling 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 front-end code generation method provided in the embodiment 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 generating the front-end code.

In order to provide a specific way to generate parameterized components in advance, in an embodiment of the front-end code generation method provided in this application, referring to fig. 6, step 100 of the front-end code generation method further includes the following steps:

step 010: and respectively generating each parameterized component, and displaying the identifier of each parameterized component in a preset graphical display page for a user to select.

Specifically, parameterized components are first provided to the user in a graphical display page for selection by the user, and the configuration file is automatically updated when the user adds a component to the page.

As can be seen from the above description, the front-end code generation method provided in the embodiment of the present application, through pre-parameterizing the basic parameterization components, can implement that a user arranges the page layout and edits the related parameterization components through a graphical operation manner, and further can effectively improve the efficiency and reliability of the front-end code generation process, and can meet the personalized customization requirements of the user.

In order to provide a concrete way of classifying containers, in an embodiment of the front-end code generation method provided by 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 generation method provided in the embodiment of the present application can effectively improve the efficiency and reliability of identifying the layout of the configuration file by performing differentiated classification on the layout containers, and thus can effectively improve the efficiency and reliability of generating the front-end code.

In terms of software, in order to solve the problems that the existing front-end code generating method cannot simultaneously meet the personalized editing requirements of users and meet the traditional development habits of developers, and the like, the present application provides an embodiment of a front-end code generating apparatus for executing all or part of the contents in the front-end code generating method, and referring to fig. 7, the front-end code generating apparatus specifically includes the following contents:

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

In the parameterized component editing module 10, parameterized components may be first provided to the user in a graphical display page for selection by the user, and the configuration file is automatically updated when the user adds a component to the page. It is understood that the parameterized components are parameterized components used for writing preset code by a user to form parameterized components corresponding to the various components respectively. And then rendering the updated configuration file into a new preview page, wherein the user can adjust the sequencing of the page components by the page editing and previewing unit and delete or clone some existing components, and when the user selects a certain component in the preview page, the user can modify various attributes of the current component, and the modifications can be updated into the configuration file in real time.

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

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

And the code editing module 30 is configured to output a second preview page corresponding to the native code, so that after the user edits the native code from the second preview page, a corresponding target front-end code is obtained.

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

The embodiment of the front-end code generating apparatus provided in the present application may be specifically configured to execute the processing procedure of the embodiment of the front-end code generating method in the foregoing embodiment, and the functions of the embodiment are not described herein again, and refer to the detailed description of the embodiment of the method.

As can be seen from the above description, the front-end code generating device provided in this embodiment of the present application arranges a page layout and edits related parameterized components in a graphical operation manner, provides a preview effect in a form of a configuration file and a form of a parser, and translates the configuration file into a native code through a translation device after completing page editing, so as to provide a developer with a service logic or a personalized modification manner, and can complete most of the work of the page layout by means of graphical configuration, and translate the page layout and related configuration information into a form of a front-end native code, so as to provide the developer with a service logic or a personalized modification, thereby effectively improving the flexibility and the automation degree of front-end code generation, and effectively reducing the professional requirement on the developer in the front-end code generating process on the basis of satisfying the personalized editing requirement of the user, The method has the advantages that workload and time cost are realized, the adaptability scene is wider, a specific parameterized component is not required to be introduced, and the finally obtained target front-end code is basically consistent with a product manually coded by a developer, so that the method is more friendly to the developer, and a page rapid generation scheme more conforming to the traditional development habit of the developer is realized, and further the user experience of the developer can be effectively improved. And no additional parameterized component or dependence is required to be introduced into the project, so that the problem of dependence bottleneck of the original similar scheme is avoided, and meanwhile, the generated codes have a uniform code format, so that the specification degree of the engineering codes is improved.

In order to provide a specific way of translating codes, in an 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 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 identifying the layout, in an 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 above description, the front-end code generating device provided in the embodiment of the present application can effectively improve the accuracy and comprehensiveness of obtaining the layout container corresponding to the current latest updated configuration file, and further can effectively improve the accuracy and comprehensiveness of generating the front-end code.

In order to provide a concrete way of parameterized component identification, in an embodiment of the front-end code generation apparatus provided in the present application, the code translation module 20 of the front-end code generation apparatus is further specifically configured to perform the following:

As can be seen from the above description, the front-end code generating apparatus provided in the embodiment of the present application can effectively improve the comprehensiveness and reliability of obtaining the target component code corresponding to the parameterized component in each layout container, and further can effectively improve the comprehensiveness and reliability of generating the front-end code.

As can be seen from the above description, the front-end code generating apparatus provided in the embodiment 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 generating the front-end code.

In order to provide a specific way to generate parameterized components in advance, in an embodiment of the front-end code generating apparatus provided in the present application, the front-end code generating apparatus 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 pre-parameterizing the basic parameterization components, can implement that a user arranges a page layout and edits related parameterization components through a graphical operation mode, so as to effectively improve the efficiency and reliability of the front-end code generating process, and meet the personalized customization requirements of the user.

In order to provide a concrete way of classifying the container, in an embodiment of the front-end code generating apparatus provided by 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 apparatus provided in the embodiment of the present application can effectively improve the efficiency and reliability of identifying the layout of the configuration file by performing differentiated classification on the layout containers, and thus can effectively improve the efficiency and reliability of generating the front-end code.

In order to further explain the scheme, the application example of the application provides a front-end code generating system and a method capable of being configured graphically, the system and the method can complete most of work of page layout by means of graphical configuration, and the page layout and related configuration information are translated into a front-end native code form for developers to supplement business logic or perform personalized reconstruction.

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

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 a configuration file as a core, and how to construct the configuration file can be divided into three parts, namely a basic component set, a page editing preview unit and a component editing unit:

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

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

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

And after the user finishes editing the page, the graphical editing module can deliver the generated configuration file to the native code processing module.

The translation unit receives the configuration file provided by the graphical editing module and translates the configuration file into the native code which is provided to the code editing unit.

The code in the code editing unit can be executed in the code previewing unit to generate real-time previewing, a user can modify the code 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 code can be exported after the completion of confirmation.

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

the layout identification unit is used for identifying layout containers used by components in a page and generating corresponding container codes, and the page is provided with a plurality of layout containers, such as a row container, a column container, a form container 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 corresponding attributes;

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

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

Referring to fig. 10, the process flow of the translation unit performing code translation is as follows:

and after the translation unit takes the configuration file, traversing the whole configuration file in a depth-first traversal mode, performing layout recognition to generate outer layer layout codes, sequentially recognizing components in the layout and generating component codes, if the components comprise the sub-components, executing the same step on the sub-components, continuously recognizing whether unprocessed components exist in the layout, if yes, recognizing the components and generating the codes, and after the complete configuration file is traversed in a circulating mode, finally combining the codes and updating the preview unit, namely summarizing and combining the generated code segments, handing the code segments to the preview unit and updating the preview view.

According to the content, the application example of the application provides a front-end code generation system capable of being configured graphically, a user can quickly complete page layout development which needs to be coded originally in a graphical configuration mode, the configured page layout can be translated into a front-end native code through the system, and secondary development and service logic supplement can be performed on the basis. The system saves development time and standardizes the code style of engineering.

Compared with the similar visual configuration tool, 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; secondly, as the generated code is not a configuration file but a primary code, the method is more friendly to secondary development and expansion, is closer to the development habit of developers and has wider applicability.

In order to solve the problems that the existing front-end code generation method cannot simultaneously meet the personalized editing requirements of users and meet the traditional development habits of developers, and the like, the application provides an embodiment of electronic equipment for realizing all or part of contents in the front-end code generation method, and the electronic equipment specifically comprises the following contents:

fig. 11 is a schematic block diagram of a system configuration of an electronic device 9600 according to an embodiment of the present application. As shown in fig. 11, the electronic device 9600 can 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 structure to implement telecommunications or other functions.

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

As can be seen from the above description, in the electronic device provided in the embodiment of the present application, the page layout is arranged and the related parameterized components are edited in a graphical operation manner, a preview effect is provided in the form of the configuration file and the form of the parser, the configuration file is translated into the native code by the translation device after the page editing is completed, so that the developer supplements the business logic or performs the personalized transformation, most of the work of the page layout can be completed by the graphical configuration, the page layout and the related configuration information are translated into the form of the front-end native code, so that the developer supplements the business logic or performs the personalized transformation, and further, the flexibility and the automation degree of the front-end code generation can be effectively improved, and the requirement on the professional degree of the developer in the front-end code generation process can be effectively reduced on the basis of meeting the personalized editing requirement of the user, The method has the advantages that workload and time cost are realized, the adaptability scene is wider, a specific parameterized component is not required to be introduced, and the finally obtained target front-end code is basically consistent with a product manually coded by a developer, so that the method is more friendly to the developer, and a page rapid generation scheme more conforming to the traditional development habit of the developer is realized, and further the user experience of the developer can be effectively improved. And no additional parameterized component or dependence is required to be introduced into the project, so that the problem of dependence bottleneck of the original similar scheme is avoided, and meanwhile, the generated codes have a uniform code format, so that the specification degree of the engineering codes is improved.

In another embodiment, the front-end code generating apparatus may be configured separately from the central processor 9100, for example, the front-end code generating apparatus may be configured as a chip connected to the central processor 9100, and the front-end code generating function is realized by the 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 also does not necessarily include all of the components shown in fig. 11; in addition, the electronic device 9600 may further include components not shown in fig. 11, which may be referred to in the prior art.

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

The memory 9140 can 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 relating to the failure may be stored, and a program for executing the information may be stored. And the central processing unit 9100 can execute the program stored in the memory 9140 to realize information storage or processing, or 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. Power supply 9170 is used to provide power to electronic device 9600. The display 9160 is used for displaying display objects such as images and characters. The display may be, for example, an LCD display, but is not limited thereto.

The memory 9140 can be a solid state memory, e.g., Read Only Memory (ROM), Random Access Memory (RAM), a SIM card, or the like. There may also be a memory that holds information even when power is off, can be selectively erased, and is provided with more data, an example of which is sometimes called an EPROM or the like. The memory 9140 could also be some other type of device. 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 being used for storing application programs and function programs or for executing a flow of operations of the electronic device 9600 by the central processor 9100.

The memory 9140 can also include a data store 9143, the data store 9143 being used to store 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 for the electronic device for communication functions and/or for performing other functions of the electronic device (e.g., messaging applications, contact book applications, etc.).

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

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, 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 receive audio input from the microphone 9132, thereby implementing ordinary telecommunications functions. The audio processor 9130 may include any suitable buffers, decoders, amplifiers and so forth. In addition, the audio processor 9130 is also coupled to the central processor 9100, thereby enabling recording locally through the microphone 9132 and enabling locally stored sounds to be played through the speaker 9131.

Embodiments of the present application further provide a computer-readable storage medium capable of implementing all the steps in the front-end code generation method in the foregoing embodiments, where the computer-readable storage medium stores thereon a computer program, and when the computer program is executed by a processor, the computer program implements all the steps of the front-end code generation method in which an execution subject in the foregoing embodiments is a server or a client, for example, when the processor executes the computer program, the processor implements the following steps:

As can be seen from the above description, the computer-readable storage medium provided in this embodiment of the present application arranges a page layout and edits related parameterized components in a graphical operation manner, provides a preview effect in a form of a configuration file and a form of a parser, and translates the configuration file into a native code through a translation device after completing page editing, so as to provide a developer with a service logic or a personalized modification manner, and can complete most of the work of the page layout by means of graphical configuration, and translate the page layout and related configuration information into a form of a front-end native code, so as to provide the developer with a service logic or a personalized modification, thereby effectively improving the flexibility and the automation degree of front-end code generation, and effectively reducing the professional requirement on the developer in the front-end code generation process on the basis of satisfying the personalized editing requirement of a user, The method has the advantages that workload and time cost are realized, the adaptability scene is wider, a specific parameterized component is not required to be introduced, and the finally obtained target front-end code is basically consistent with a product manually coded by a developer, so that the method is more friendly to the developer, and a page rapid generation scheme more conforming to the traditional development habit of the developer is realized, and further the user experience of the developer can be effectively improved. And no additional parameterized component or dependence is required to be introduced into the project, so that the problem of dependence bottleneck of the original similar scheme is avoided, and meanwhile, the generated codes have a uniform code format, so that the specification degree of the engineering codes is improved.

As will be appreciated by one skilled in the art, 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 flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams 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 principle and the implementation mode of the invention are explained by applying specific embodiments in the invention, and the description of the embodiments is only used for helping to understand the method and the core idea of the invention; meanwhile, for a person skilled in the art, according to the idea of the present invention, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present invention.

Claims

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

2. The front-end code generation method according to claim 1, wherein translating the current latest updated configuration file into the corresponding native code comprises:

3. The front-end code generating method according to claim 2, wherein the obtaining of the layout container and the corresponding layout code corresponding to the currently updated configuration file comprises:

4. The front-end code generation method according to claim 2, wherein the obtaining of the object component code corresponding to the parameterized component in each layout container comprises:

5. The front-end code generation method of claim 2, wherein generating corresponding native code from the layout code and target component code comprises:

6. The front-end code generating 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:

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

8. A front-end code generation apparatus, comprising:

9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the front-end code generation method of any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the front-end code generation method of any one of claims 1 to 7.