CN113391805A - Automatic generation method of front-end code - Google Patents
Automatic generation method of front-end code Download PDFInfo
- Publication number
- CN113391805A CN113391805A CN202110706223.XA CN202110706223A CN113391805A CN 113391805 A CN113391805 A CN 113391805A CN 202110706223 A CN202110706223 A CN 202110706223A CN 113391805 A CN113391805 A CN 113391805A
- Authority
- CN
- China
- Prior art keywords
- code generation
- code
- end code
- template parameters
- generation request
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 238000013461 design Methods 0.000 claims abstract description 45
- 230000004048 modification Effects 0.000 claims description 5
- 238000012986 modification Methods 0.000 claims description 5
- 238000011161 development Methods 0.000 abstract description 7
- 230000008569 process Effects 0.000 description 5
- 230000006870 function Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention relates to a front-end code automatic generation method, which is applied to a front-end code generation platform and comprises the following steps: acquiring a front-end design style picture; sending a code generation request to a server; the code generation request includes a front-end design style picture; and receiving the front-end code fed back by the server. According to the method and the device, the corresponding front-end codes can be automatically acquired according to the front-end design pattern picture, the development time of developers is reduced, the writing speed and the debugging speed of the front-end codes are accelerated, the workload of the developers is reduced, and the development efficiency of the front-end codes is improved.
Description
Technical Field
The invention relates to the technical field of front-end code generation, in particular to a front-end code automatic generation method.
Background
Currently, when a front-end developer writes front-end code, frames such as HyperText Markup Language (HTML) and Vue6 xstream (vue) are mainly used. When writing, manual writing of one line and one line is needed. However, when the front-end development task is more, the related art has the problems of long writing time of the front-end code and low writing efficiency.
Disclosure of Invention
In view of this, a method for automatically generating front-end codes is provided to solve the problem of slow writing efficiency of front-end codes in the related art.
The invention adopts the following technical scheme:
in a first aspect, the present invention provides an automatic front-end code generation method, applied to a front-end code generation platform, including:
acquiring a front-end design style picture;
sending a code generation request to a server; the code generation request includes the front-end design style picture;
and receiving the front-end code fed back by the server.
Preferably, after the front-end design style picture is acquired, the method further includes:
selecting template parameters according to selection operation of a user; the code generation request also includes the template parameters.
Preferably, after receiving the front-end code fed back by the server, the method further includes:
and displaying the front-end code.
Preferably, after displaying the front-end code, the method further includes:
and modifying the front-end code according to the modification operation of the user.
Preferably, the front-end design pattern picture includes a front-end pattern sketch drawn by a user.
In a second aspect, the present invention further provides a method for automatically generating a front-end code, which is applied to a server, and includes:
receiving a code generation request sent by a front-end code generation platform; the code generation request includes a front-end design style picture;
judging whether the code generation request contains template parameters or not;
if the code generation request does not contain the template parameters, defining preset template parameters as target template parameters;
if the code generation request contains template parameters, defining the template parameters in the code generation request as target template parameters;
generating the front-end code according to the target template parameters and the front-end design style picture;
and feeding back the front-end code to the front-end code generation platform.
Preferably, the generating the front-end code according to the target template parameter and the front-end design style picture includes:
calling a target code generation service according to the target template parameters;
and generating the front-end code according to the target code generation service and the front-end design style picture.
By adopting the technical scheme, the invention discloses an automatic front-end code generation method which is applied to a front-end code generation platform and comprises the following steps: acquiring a front-end design style picture; sending a code generation request to a server; the code generation request includes a front-end design style picture; and receiving the front-end code fed back by the server. Based on the method and the device, the corresponding front-end code can be automatically acquired according to the front-end design pattern picture, development time of developers is reduced, writing speed and debugging speed of the front-end code are accelerated, workload of the developers is reduced, and development efficiency of the front-end code is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic flowchart of a method for automatically generating a front-end code according to an embodiment of the present invention.
Fig. 2 is a schematic flow chart of a method for automatically generating front-end codes according to a second embodiment of the present invention.
Fig. 3 is a schematic flowchart of a method for automatically generating a front-end code according to a third embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without any inventive step, are within the scope of the present invention.
Example one
Fig. 1 is a schematic flowchart of a method for automatically generating a front-end code according to an embodiment of the present invention. This embodiment exemplifies the execution process of the front-end code generation platform. As shown in fig. 1, the method for automatically generating a front-end code of this embodiment includes:
and S101, acquiring a front-end design style picture.
Specifically, the front-end design style picture may be a picture generated according to a front-end style sketch drawn by a user by hand, or may be another picture including a front-end style. In a specific example, the user manually draws the front-end style on the drawing software, and then saves the front-end style as a picture in a jpg format or a png format, which is a front-end design style picture.
S102, sending a code generation request to a server; the code generation request includes the front-end design style picture.
In detail, after the front-end code generation platform acquires the front-end design style picture, a code generation request is generated according to the front-end design style picture, and the code generation request comprises the front-end design style picture. And then, the front-end code generation platform generates a code generation request to the server so that the server generates a front-end code corresponding to the front-end design style picture according to the code generation request.
And S103, receiving the front-end code fed back by the server.
By adopting the technical scheme, the embodiment provides an automatic front-end code generation method applied to a front-end code generation platform, which comprises the following steps: acquiring a front-end design style picture; sending a code generation request to a server; the code generation request includes a front-end design style picture; and receiving the front-end code fed back by the server. Based on the method and the device, the corresponding front-end code can be automatically acquired according to the front-end design pattern picture, development time of developers is reduced, writing speed and debugging speed of the front-end code are accelerated, workload of the developers is reduced, and development efficiency of the front-end code is improved.
Preferably, in this embodiment, after acquiring the front-end design style picture, the method further includes:
selecting template parameters according to selection operation of a user; the code generation request also includes template parameters.
In detail, in order to meet the requirement of a user for generating a front-end code of a specific template, the front-end code generation platform further selects template parameters according to the selection operation of the user after acquiring a front-end design style picture. Template parameters that a user may select include, but are not limited to, HyperText Markup Language (HTML), Angela, Vue6 xStream (VUE), and Bootstrap.
Preferably, in this embodiment, after receiving the front-end code fed back by the server, the method further includes:
the front end code is displayed.
Specifically, after the front-end code generation platform receives the front-end code fed back by the server, the front-end code is displayed, so that a user can conveniently check the front-end code.
Preferably, in this embodiment, after displaying the front-end code, the method further includes:
and modifying the front-end code according to the modification operation of the user.
In detail, the front-end code generation platform displays the front-end code for the user to check, the user may need to modify the front-end code after checking, and in order to meet the user's requirement, the front-end code generation platform may also modify the front-end code according to the user's modification operation.
Example two
Fig. 2 is a schematic flow chart of a method for automatically generating front-end codes according to a second embodiment of the present invention. This embodiment takes the server-implemented process as an example. As shown in fig. 2, the method for automatically generating a front-end code of this embodiment includes:
s201, receiving a code generation request sent by a front-end code generation platform; the code generation request includes a front-end design style picture and a front-end code generation platform identification.
S202, judging whether the code generation request contains the template parameters, if so, executing the step S204, otherwise, executing the step S203.
Specifically, when the user sends a code generation request to the server through the front-end code generation platform, the user may or may not select the template parameters of the code template to be generated, and therefore the code generation request may or may not include the template parameters.
And S203, defining the preset template parameters as target template parameters.
Specifically, the preset template parameters can be set by those skilled in the art according to actual needs. For example, the preset template parameter may be HTML.
And S204, defining the template parameters in the code generation request as target template parameters.
And S205, generating a front-end code according to the target template parameters and the front-end design style picture.
Specifically, the server is trained with a code generation model in advance, and the code generation model includes a plurality of code blocks including a button code block, a table code block, and the like. And the server analyzes the front-end design pattern picture to obtain picture modules corresponding to the code blocks, and then generates a front-end code corresponding to the front-end design pattern picture according to the code blocks respectively corresponding to the picture modules.
It should be noted that the board arrangement format of the front-end code may be a preset format, and after the server returns the front-end code to the front-end code generation platform, a technician may modify the front-end code according to actual needs.
And S206, feeding back the front-end code to the front-end code generation platform.
In detail, the server feeds back the front-end code to the front-end code generation platform according to the front-end code generation platform identifier.
Preferably, generating the front-end code according to the target template parameter and the front-end design style picture includes:
calling a target code generation service according to the target template parameters; then, a front-end code is generated according to the object code generation service and the front-end design style picture.
Specifically, the code generation model includes a plurality of code generation services including, but not limited to, HTML, Angela, VUE, and boottrap. And the server calls the corresponding code generation service according to the template parameters. For example, when the template parameter is VUE, the server invokes the VUE code generation service.
It should be noted that the present embodiment and the first embodiment are based on a general inventive concept, and have the same or corresponding beneficial effects, and are not described herein again.
EXAMPLE III
Fig. 3 is a schematic flowchart of a method for automatically generating a front-end code according to a third embodiment of the present invention. The embodiment is implemented as an example by the interaction of a front-end code generation platform and a server. As shown in fig. 3, the method for automatically generating a front-end code of this embodiment includes:
s301, the front-end code generation platform acquires a front-end design style picture.
S302, the front-end code generation platform sends a code generation request to a server; the code generation request includes a front-end design style picture.
S303, the server receives a code generation request sent by the front-end code generation platform; the code generation request includes a front-end design style picture.
S304, the server judges whether the code generation request contains template parameters; if so, defining the template parameter in the code generation request as a target template parameter; otherwise, the preset template parameter is defined as the target template parameter.
S305, the server generates a front-end code according to the target template parameter and the front-end design style picture.
S306, the server feeds the front-end code back to the front-end code generation platform.
S307, the front-end code generation platform receives the front-end code fed back by the server.
It should be noted that, the present embodiment is based on the first embodiment and the second embodiment, and has corresponding execution processes and beneficial effects, which are not described herein again.
It is understood that the same or similar parts in the above embodiments may be mutually referred to, and the same or similar parts in other embodiments may be referred to for the content which is not described in detail in some embodiments.
It should be noted that the terms "first," "second," and the like in the description of the present invention are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. Further, in the description of the present invention, the meaning of "a plurality" means at least two unless otherwise specified.
Any process or method descriptions in flow diagrams or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and the scope of the preferred embodiments of the present invention includes additional implementations in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the embodiments of the present invention.
It should be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, the various steps or methods may be implemented in software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like.
It will be understood by those skilled in the art that all or part of the steps carried by the method for implementing the above embodiments may be implemented by hardware related to instructions of a program, which may be stored in a computer readable storage medium, and when the program is executed, the program includes one or a combination of the steps of the method embodiments.
In addition, functional units in the embodiments of the present invention may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a stand-alone product, may also be stored in a computer readable storage medium.
The storage medium mentioned above may be a read-only memory, a magnetic or optical disk, etc.
In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above do not necessarily refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.
Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention, and that variations, modifications, substitutions and alterations can be made to the above embodiments by those of ordinary skill in the art within the scope of the present invention.
Claims (7)
1. A front-end code automatic generation method is applied to a front-end code generation platform and is characterized by comprising the following steps:
acquiring a front-end design style picture;
sending a code generation request to a server; the code generation request includes the front-end design style picture;
and receiving the front-end code fed back by the server.
2. The method for automatically generating front-end code according to claim 1, wherein after acquiring the front-end design style picture, the method further comprises:
selecting template parameters according to selection operation of a user; the code generation request also includes the template parameters.
3. The method for automatically generating front-end codes according to claim 1, wherein after receiving the front-end codes fed back by the server, the method further comprises:
and displaying the front-end code.
4. The method according to claim 3, wherein after displaying the front-end code, the method further comprises:
and modifying the front-end code according to the modification operation of the user.
5. The method for automatically generating front-end codes according to claim 1, wherein the front-end design style picture comprises a front-end style sketch drawn by a user.
6. A method for automatically generating a front-end code is applied to a server and is characterized by comprising the following steps:
receiving a code generation request sent by a front-end code generation platform; the code generation request includes a front-end design style picture;
judging whether the code generation request contains template parameters or not;
if the code generation request does not contain the template parameters, defining preset template parameters as target template parameters;
if the code generation request contains template parameters, defining the template parameters in the code generation request as target template parameters;
generating the front-end code according to the target template parameters and the front-end design style picture;
and feeding back the front-end code to the front-end code generation platform.
7. The method for automatically generating a front-end code according to claim 6, wherein the generating the front-end code according to the target template parameters and the front-end design style picture comprises:
calling a target code generation service according to the target template parameters;
and generating the front-end code according to the target code generation service and the front-end design style picture.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110706223.XA CN113391805A (en) | 2021-06-24 | 2021-06-24 | Automatic generation method of front-end code |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110706223.XA CN113391805A (en) | 2021-06-24 | 2021-06-24 | Automatic generation method of front-end code |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113391805A true CN113391805A (en) | 2021-09-14 |
Family
ID=77623836
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110706223.XA Pending CN113391805A (en) | 2021-06-24 | 2021-06-24 | Automatic generation method of front-end code |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113391805A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180349004A1 (en) * | 2017-06-01 | 2018-12-06 | Usablenet Inc. | Methods for extracting and adapting information to generate custom widgets and devices thereof |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
| CN110333862A (en) * | 2019-06-17 | 2019-10-15 | 深圳壹账通智能科技有限公司 | UI page code generation method, device and server |
| CN110442333A (en) * | 2019-07-11 | 2019-11-12 | 北京磨刀刻石科技有限公司 | Method and apparatus based on design drawing automatically generating program code |
| CN111124380A (en) * | 2019-11-26 | 2020-05-08 | 江苏艾佳家居用品有限公司 | Front-end code generation method |
-
2021
- 2021-06-24 CN CN202110706223.XA patent/CN113391805A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180349004A1 (en) * | 2017-06-01 | 2018-12-06 | Usablenet Inc. | Methods for extracting and adapting information to generate custom widgets and devices thereof |
| CN109783094A (en) * | 2018-12-15 | 2019-05-21 | 深圳壹账通智能科技有限公司 | Front end page generation method, device, computer equipment and storage medium |
| CN110333862A (en) * | 2019-06-17 | 2019-10-15 | 深圳壹账通智能科技有限公司 | UI page code generation method, device and server |
| CN110442333A (en) * | 2019-07-11 | 2019-11-12 | 北京磨刀刻石科技有限公司 | Method and apparatus based on design drawing automatically generating program code |
| CN111124380A (en) * | 2019-11-26 | 2020-05-08 | 江苏艾佳家居用品有限公司 | Front-end code generation method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108228188B (en) | View component processing method, electronic device and readable storage medium | |
| CN108108162B (en) | Application programming interface generation method and device | |
| CN109101228B (en) | Application program execution method and device | |
| CN106933887B (en) | Data visualization method and device | |
| CN107704282B (en) | Loading method and device applied to embedded system | |
| CN111190825A (en) | Automatic test method, system and robot | |
| CN101667171A (en) | Method for generating report and report generating device | |
| CN113672405A (en) | Data interaction system and page display method based on data interaction system | |
| CN112783494A (en) | Automatic skeleton screen generation method and device and application page updating method and device | |
| CN110727429A (en) | Front-end page generation method, device and equipment | |
| CN104615432B (en) | Splash screen information processing method and client | |
| CN110633220A (en) | Debugging information display method and device, storage medium and electronic equipment | |
| CN112685040B (en) | Method, device, equipment and storage medium for generating interface file in android system | |
| CN113391805A (en) | Automatic generation method of front-end code | |
| CN111240678A (en) | Setting method and device of pop-up window, electronic equipment and storage medium | |
| CN115599880A (en) | Map legend configuration management method and terminal | |
| CN114092590B (en) | Electronic device and evaluation method and medium for image rendering performance of electronic device | |
| CN112579066A (en) | Chart display method and device, storage medium and equipment | |
| CN115858282A (en) | Front-end performance visual monitoring method and system | |
| CN115169294A (en) | Data conversion method, device and medium | |
| CN112035094B (en) | Shuttle frame implementation method and device based on Vuetify frame | |
| CN113885996A (en) | User interface generation method and device | |
| CN113126850A (en) | Method, device and equipment for preventing advertisement from being shielded by plug-in | |
| CN113590297A (en) | Method and equipment for transmitting process parameters back and forth | |
| CN113407563A (en) | Query form generation method, device and equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |