Detailed Description
Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings in conjunction with the embodiments.
It should be noted that the terms "first," "second," and the like in the description and claims of the present invention and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
The method embodiments provided in the embodiments of the present application may be executed in a mobile terminal, a computer terminal, a server, or a similar computing device. Taking the example of running on a server, fig. 1 is a hardware structure block diagram of the server of the method for generating a front-end page according to the embodiment of the present invention. As shown in fig. 1, the server may include one or more (only one shown in fig. 1) processors 102 (the processors 102 may include, but are not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA), and amemory 104 for storing data, wherein the server may further include atransmission device 106 for communication functions and an input-output device 108. It will be understood by those skilled in the art that the structure shown in fig. 1 is only an illustration, and is not intended to limit the structure of the server. For example, the server may also include more or fewer components than shown in FIG. 1, or have a different configuration than shown in FIG. 1.
Thememory 104 may be used to store a computer program, for example, a software program and a module of application software, such as a computer program corresponding to the front-end page generation method in the embodiment of the present invention, and the processor 102 executes various functional applications and data processing by running the computer program stored in thememory 104, so as to implement the method described above. Thememory 104 may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, thememory 104 may further include memory located remotely from the processor 102, which may be connected to a server over a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
Thetransmission device 106 is used for receiving or transmitting data via a network. Specific examples of the network described above may include a wireless network or a wired network provided by a communication provider of the server.
Optionally, in this embodiment, the server or the computing device may be a device configured with a target client, and may include, but is not limited to, at least one of the following: mobile phones (such as Android phones, iOS phones, etc.), notebook computers, tablet computers, palm computers, MID (Mobile Internet Devices), PAD, desktop computers, smart televisions, etc. Such networks may include, but are not limited to: a wired network, a wireless network, wherein the wired network comprises: a local area network, a metropolitan area network, and a wide area network, the wireless network comprising: bluetooth, WIFI, and other networks that enable wireless communication. The server may be a single server, a server cluster composed of a plurality of servers, or a cloud server. The above is merely an example, and this is not limited in this embodiment.
In this embodiment, a method for generating a front-end page running on the server or the computing device is provided, and fig. 2 is a flowchart of a method for generating a front-end page according to an embodiment of the present invention, as shown in fig. 2, the flowchart includes the following steps:
step S202, obtaining a design drawing of a user interface;
step S204, identifying the name of the component included in the design drawing;
step S206, acquiring a code text corresponding to the component according to the name of the component;
and step S208, generating a front page of the user interface according to the code text of each component.
Through the steps, the design drawing of the user interface is obtained; identifying a name of a component included in the plan; acquiring a code text corresponding to the component according to the name of the component; the front-end page of the user interface is generated according to the code text of each component, namely, the components in the design drawing are directly identified, and then the codes of the components are acquired to generate the front-end page, so that the problem of low generation efficiency of the front-end page can be solved, and the technical effect of quickly generating the front-end page is achieved.
It should be noted that the "name" of a component in this embodiment can be broadly understood, that is, a label that can identify a component can be regarded as the "name" of the component, and may be an actual name of the component or an identification of the component.
In an exemplary embodiment, the method further comprises: identifying location information for components included in the plan; and determining the sequence of the code text of each component in the front page according to the position information of the component.
In an exemplary embodiment, the order of the code text of each of the components in the front page is consistent with the position of the component in the corresponding blueprint.
It should be noted that, this embodiment does not limit the sequence of the process of identifying the component name and the location information of the component in the design drawing, and does not affect the implementation of the embodiment of the present invention.
In an exemplary embodiment, identifying the names of the components included in the blueprint includes: identifying graphic elements and/or text in the design drawing; the names of the components included in the plan are determined according to the recognized graphic elements and/or words. It should be noted that, since different components may have different names or different graphic features, the graphic features or characters can be identified to determine which components are in the design drawing.
In an exemplary embodiment, obtaining the code text corresponding to the component according to the name of the component includes: and inquiring the code text of the component in a preset component code library according to the name of the component. It should be noted that the group code library may be provided with a corresponding relationship between the component name and the component code, and the code of the component may be found according to the corresponding relationship.
In an exemplary embodiment, the method further comprises: the generated front page is tested. A test may be performed to determine if the code in the page is correct.
It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present invention is not limited by the order of acts, as some steps may occur in other orders or concurrently in accordance with the invention. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required by the invention.
In this embodiment, a device for generating a front-end page is further provided, where the device is used to implement the foregoing embodiment and preferred embodiments, and details are not repeated for what has been described. As used below, the term "module" may be a combination of software and/or hardware that implements a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware, or a combination of software and hardware is also possible and contemplated.
Fig. 3 is a block diagram of a front page generation apparatus according to an embodiment of the present invention, and as shown in fig. 3, the apparatus includes:
a first obtainingmodule 31, configured to obtain a design drawing of a user interface;
anidentification module 33 for identifying the names of the components included in the plan;
the second obtainingmodule 35 is configured to obtain a code text corresponding to the component according to the name of the component;
and agenerating module 37, configured to generate a front page of the user interface according to the code text of each component.
Through the module, the design drawing of the user interface is obtained; identifying a name of a component included in the plan; acquiring a code text corresponding to the component according to the name of the component; the front-end page of the user interface is generated according to the code text of each component, namely, the components in the design drawing are directly identified, and then the codes of the components are acquired to generate the front-end page, so that the problem of low generation efficiency of the front-end page can be solved, and the technical effect of quickly generating the front-end page is achieved.
In an exemplary embodiment, the identification module is further configured to identify location information of the component included in the plan; the device also includes: and the determining module is used for determining the sequence of the code text of each component in the front-end page according to the position information of the component.
In an exemplary embodiment, the order of the code text of each of the components in the front page is consistent with the position of the component in the corresponding blueprint.
In an exemplary embodiment, therecognition module 33 is further configured to recognize the graphic elements and/or the text in the design drawing; the names of the components included in the plan are determined according to the recognized graphic elements and/or words.
In an exemplary embodiment, the second obtainingmodule 35 is configured to query a preset component code library for a code text of the component according to the name of the component.
In an exemplary embodiment, the apparatus of this embodiment further includes: and the testing module is used for testing the generated front-end page.
It should be noted that, the above modules may be implemented by software or hardware, and for the latter, the following may be implemented, but not limited to: the modules are all positioned in the same processor; alternatively, the modules are respectively located in different processors in any combination.
Example embodiments
The technical solution provided by the present invention is further explained with reference to specific scenarios.
The embodiment can realize image recognition aiming at the interface elements by utilizing image recognition, deep learning and artificial intelligence algorithm technologies, namely, the image recognition technology and the specific algorithm technology are applied, the technologies such as image text reading and the like are combined, the UI design drawing is scanned, and each component in the UI design drawing is automatically recognized. For example, common components of Carousel (Carousel), navigation menu (NavMenu), Button (Button), table (Tabel), and Form (Form) pages in UI design drawings are identified, where Form controls may include contents such as an Input box (Input), a selection box (Select), a Radio Button (Radio), and a check box (Checkbox).
In an exemplary embodiment, the method for generating a front page provided by this embodiment may include: the method comprises the steps of receiving or acquiring a design drawing input into a user interface, such as a UI design drawing or a UE design drawing of an application interface, identifying a component included in the design drawing by means of image identification or character identification or combination of image and character identification, and outputting an identification result of the interface component in the design drawing, such as a component name and a component position, wherein the position information can be a data set of a coordinate range where the component is located. And according to the identification result, further calling the components in the corresponding UI component library for the corresponding components to finish the process of automatically converting the UI or UE design drawing into the Web front-end code. It should be noted that, the order of the codes in the generated front-end page may be determined according to the location information of the component.
In an exemplary embodiment, the process of identifying components may be scanning the blueprint to identify image elements and/or text (or text) in the blueprint, and since different components typically have different image elements or different names (corresponding to text or text), which components are in the blueprint may be determined based on the identified text and/or image elements in the blueprint.
In an exemplary embodiment, codes of different components are stored in the component library, and the code corresponding to the component can be found in the component library by the name of the component (or the identifier of the component).
Fig. 4 is a flowchart of a method for generating a front page according to an exemplary embodiment of the present invention, as shown in fig. 4, including the following processes:
image scanning and element identification: and (3) scanning, identifying and analyzing the input UI or UE design drawing by applying an image scanning technology and combining an image text identification algorithm and an image element identification algorithm, and outputting the name and the position information of each component in the drawing. Sometimes, the UI or the UE design drawing has a character marking explanation, and the text recognition technology can recognize the characters and provide assistance for the recognition component according to the character information;
the component calls and generates code: and according to the identified component data, finding a corresponding component in a UI component library preset in the engineering by a front-end engineer, and generating a code by using the corresponding component.
The front-end development engineer can preset test logic or scripts to automatically test the generated component codes.
For example, the UI design drawing of the Web page includes a plurality of components, for example, one or more components including header, carousel, table presentation, form submission, button, footer, etc., and the design drawing may be scanned to identify the components in the design drawing by using an image or text recognition technology, for example, to identify the text in the design drawing, which results in: the page header, the carousel picture, the form display, the form submission, the button and the footer are used for respectively knowing that the design picture comprises corresponding components according to the characters; and then calling a corresponding component in a preset UI component library to automatically generate a code. For example, the front page may be generated by calling the code of the component from the code library according to the component name or the identification of the component, and then arranging the code according to the position of the component. For example, the order of the codes in the generated front page may be determined according to the order or position of the components; for example, the components are located top, then the order of the corresponding code in the page is also top.
According to the solution for generating the Web front-end page code in the embodiment of the invention, the Web front-end page code can be generated in a rapid, automatic and intelligent manner according to the UI interface or the UE interaction, so that the front-end page development efficiency is improved; the front-end development engineer is liberated from the development of the basic page components, and can concentrate on the development of application business logic; the Web front-end development is developed towards intellectualization and automation.
Embodiments of the present invention also provide a computer-readable storage medium having a computer program stored thereon, wherein the computer program is arranged to perform, when executed:
s1, acquiring a design drawing of the user interface;
s2, identifying names of components included in the plan;
s3, acquiring a code text corresponding to the component according to the name of the component;
and S4, generating a front page of the user interface according to the code text of each component.
Through the steps, the design drawing of the user interface is obtained; identifying a name of a component included in the plan; acquiring a code text corresponding to the component according to the name of the component; the front-end page of the user interface is generated according to the code text of each component, namely, the components in the design drawing are directly identified, and then the codes of the components are acquired to generate the front-end page, so that the problem of low generation efficiency of the front-end page can be solved, and the technical effect of quickly generating the front-end page is achieved.
The computer program is further arranged to perform the steps of any of the above method embodiments when executed. For specific examples in this embodiment, reference may be made to the examples described in the above embodiments and exemplary embodiments, and details of this embodiment are not repeated herein.
In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to: various media capable of storing computer programs, such as a usb disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic disk, or an optical disk.
Embodiments of the present invention also provide an electronic device, including a memory in which a computer program is stored and a processor configured to execute the computer program to perform:
s1, acquiring a design drawing of the user interface;
s2, identifying names of components included in the plan;
s3, acquiring a code text corresponding to the component according to the name of the component;
and S4, generating a front page of the user interface according to the code text of each component.
Through the steps, the design drawing of the user interface is obtained; identifying a name of a component included in the plan; acquiring a code text corresponding to the component according to the name of the component; the front-end page of the user interface is generated according to the code text of each component, namely, the components in the design drawing are directly identified, and then the codes of the components are acquired to generate the front-end page, so that the problem of low generation efficiency of the front-end page can be solved, and the technical effect of quickly generating the front-end page is achieved.
The processor is further configured to run the computer program to perform the steps of any of the above method embodiments, which are not described herein again.
In an exemplary embodiment, the electronic apparatus may further include a transmission device and an input/output device, wherein the transmission device is connected to the processor, and the input/output device is connected to the processor.
For specific examples in this embodiment, reference may be made to the examples described in the above embodiments and exemplary embodiments, and details of this embodiment are not repeated herein.
Through the above description of the embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but the former is a better implementation mode in many cases. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The integrated unit in the above embodiments, if implemented in the form of a software functional unit and sold or used as a separate product, may be stored in the above computer-readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for causing one or more computer devices (which may be personal computers, servers, network devices, etc.) to execute all or part of the steps of the method according to the embodiments of the present invention.
In the above embodiments of the present invention, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
In the several embodiments provided in the present application, it should be understood that the disclosed client may be implemented in other manners. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one type of division of logical functions, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, units or modules, and may be in an electrical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
It will be apparent to those skilled in the art that the various modules or steps of the invention described above may be implemented using a general purpose computing device, they may be centralized on a single computing device or distributed across a network of computing devices, and they may be implemented using program code executable by the computing devices, such that they may be stored in a memory device and executed by the computing device, and in some cases, the steps shown or described may be performed in an order different than that described herein, or they may be separately fabricated into various integrated circuit modules, or multiple ones of them may be fabricated into a single integrated circuit module. Thus, the present invention is not limited to any specific combination of hardware and software.
The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the principle of the present invention should be included in the protection scope of the present invention.