CN112416363A - Method and device for generating front-end and back-end CRUD codes - Google Patents

Method and device for generating front-end and back-end CRUD codes Download PDF

Info

Publication number
CN112416363A
CN112416363A CN202011446446.9A CN202011446446A CN112416363A CN 112416363 A CN112416363 A CN 112416363A CN 202011446446 A CN202011446446 A CN 202011446446A CN 112416363 A CN112416363 A CN 112416363A
Authority
CN
China
Prior art keywords
text
control
code
generating
static
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.)
Granted
Application number
CN202011446446.9A
Other languages
Chinese (zh)
Other versions
CN112416363B (en
Inventor
张嗜军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ruijie Networks Co Ltd
Original Assignee
Ruijie Networks Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Ruijie Networks Co Ltd filed Critical Ruijie Networks Co Ltd
Priority to CN202011446446.9A priority Critical patent/CN112416363B/en
Publication of CN112416363A publication Critical patent/CN112416363A/en
Application granted granted Critical
Publication of CN112416363B publication Critical patent/CN112416363B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/44Encoding
    • G06F8/447Target code generation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25Integrating or interfacing systems involving database management systems
    • G06F16/252Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/80Information retrieval; Database structures therefor; File system structures therefor of semi-structured data, e.g. markup language structured data such as SGML, XML or HTML
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06VIMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00Arrangements for image or video recognition or understanding
    • G06V10/20Image preprocessing
    • G06V10/22Image preprocessing by selection of a specific region containing or referencing a pattern; Locating or processing of specific regions to guide the detection or recognition
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06VIMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V30/00Character recognition; Recognising digital ink; Document-oriented image-based pattern recognition
    • G06V30/10Character recognition
    • G06V30/14Image acquisition
    • G06V30/148Segmentation of character regions
    • G06V30/153Segmentation of character regions using recognition of characters or words

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Multimedia (AREA)
  • Data Mining & Analysis (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The utility model relates to the technical field of information processing, in particular to a method and a device for generating a front-end CRUD code, which solve the problems that the generation of the front-end CRUD code depends on manual coding, the research and development cost is high and the programming efficiency is low, and the method comprises the following steps: identifying UI control information and text information included in a design picture, generating corresponding static front-end page codes, determining the content of which the association degree with each text in database dictionary information reaches a set threshold value as a database table associated with the static front-end page codes, analyzing operation configuration files associated with the UI controls respectively, and generating the front-end codes and the rear-end codes in response to the determined operation of the user. Therefore, the corresponding front-end and back-end CRUD codes are automatically generated by means of the software interface design pictures, compared with the development mode in the prior art, the development time is greatly saved, the development efficiency is greatly improved, and the research and development cost is reduced.

Description

Method and device for generating front-end and back-end CRUD codes
Technical Field
The present disclosure relates to the field of information processing technologies, and in particular, to a method and an apparatus for generating a front-end CRUD code.
Background
With the gradual increase of the demand for software products, in order to realize the rapid generation of software system codes at present, one implementation manner is that when the front end of a software system is developed, a User Interface (UI) component which is packaged in advance is directly called to realize the assembly of the front end of the software system; another implementation manner is to generate Create/Retrieve/Update/Delete (CRUD) code at the back end of the software system by using an Object Relational Mapping (ORM) middleware reverse generation technology.
However, in the first implementation, since the UI component library is high in construction cost, the generation of the software system code depends on manual coding, and the programming efficiency cannot be effectively improved, and at the same time, the complete front-end and back-end CRUD codes cannot be generated, while in the second implementation, although the generation efficiency of the back-end codes is effectively improved, the generated codes cannot be directly docked with the front end, and therefore, adaptive adjustment needs to be performed according to the configuration of the front end, and extra labor cost needs to be invested for completing the docking of the front end and the back end.
Disclosure of Invention
The embodiment of the disclosure provides a method and a device for generating a front-end CRUD code, which are used for solving the problems that the generation of the front-end CRUD code depends on manual coding, the research and development cost is high and the programming efficiency is low in the prior art.
The specific technical scheme provided by the embodiment of the disclosure is as follows:
in a first aspect, a method for generating a front-end and back-end add, delete, modify and check CRUD code is provided, which includes:
responding to an input design picture of a front-end page, and identifying each piece of user interface UI control information and each piece of text information which are included in the design picture, wherein the UI control information is used for identifying a UI control in the design picture, and the text information is used for identifying a text in the design picture;
generating corresponding static front-end page codes based on the identified UI controls and texts, and determining the contents, in the stored database dictionary information, of which the association degrees with the UI controls and the texts reach a set threshold value as a database table associated with the static front-end page codes;
analyzing to obtain operation configuration files associated with the UI controls respectively according to the static front-end page codes and the database table, and presenting the operation configuration files and the static front-end pages corresponding to the static front-end page codes;
and responding to the determined operation aiming at the static front-end page and each operation configuration file, combining the interaction script referenced by each operation configuration file with the static front-end page code to generate a front-end code, and generating a back-end code corresponding to the front-end code based on the interaction script referenced by each operation configuration file and the database table.
Optionally, the identifying information of each UI control and each text information included in the design picture includes:
identifying the design picture by adopting a trained UI control detection model, and outputting information of each UI control included in the design picture, wherein the UI control detection model is built based on a single-step multi-frame detection SSD architecture, and the information of the UI controls at least comprises the type of the UI controls and the control position information of the UI controls;
recognizing the design picture by adopting a trained text detection model, and outputting each text message included in the design picture, wherein the text detection model is built based on an optical character recognition model Tesseract-OCR framework, and the text message at least comprises the text content and the text position information of the text.
Optionally, the generating a corresponding static front-end page code based on each UI control and each text in the design picture includes:
determining control position information of each UI control in the design picture according to the UI control information, and determining text position information of each text in the design picture according to the text information;
determining a text associated with each UI control, and generating a special domain language DSL file according to the association relationship between the UI controls and the text, wherein the position overlapping degree between the control position information of the UI controls and the text position information of the associated text reaches a set value;
and analyzing the DSL file by adopting a layout algorithm to generate a layout structure tree, acquiring a cascading sample table (CSS) file referenced by a UI control, generating a hypertext markup language html file according to the layout structure tree and the CSS file, and taking the html file as a static front-end page code.
Optionally, after presenting each operation configuration file and the static front-end page corresponding to the static front-end page code, the method further includes:
and responding to the editing operation of the static front-end page and the operation configuration file, identifying each UI control and each text included in the edited static front-end page, and returning to execute the step of generating corresponding static front-end page codes based on each identified UI control and each text.
Optionally, the generating a back-end code corresponding to the front-end code based on the interaction script referenced by each operation configuration file and the database table includes:
and acquiring a transliteration script language (JS) file referenced by the operation configuration file according to the operation configuration file associated with each UI control, determining a corresponding interactive interface according to the database table, and generating a back-end code corresponding to the front-end code based on the interactive interface and the JS file.
In a second aspect, a device for generating a front-end, back-end, add, delete, modify and check CRUD code is provided, which includes:
the identification unit is used for responding to an input design picture of a front-end page and identifying each user interface UI control information and each text information which are included in the design picture, wherein the UI control information is used for identifying a UI control in the design picture, and the text information is used for identifying a text in the design picture;
the determining unit is used for determining the content, in the stored database dictionary information, of which the association degree with each identified UI control and each text reaches a set threshold value as a database table associated with the static front-end page code;
the presentation unit is used for analyzing and obtaining operation configuration files associated with the UI controls according to the static front-end page codes and the database table, and presenting the operation configuration files and the static front-end pages corresponding to the static front-end page codes;
and the generating unit is used for generating corresponding static front-end page codes based on the identified UI controls and texts, combining the interaction scripts referenced by the operation configuration files with the static front-end page codes to generate front-end codes in response to the determined operations aiming at the static front-end pages and the operation configuration files, and generating back-end codes corresponding to the front-end codes based on the interaction scripts referenced by the operation configuration files and the database table.
Optionally, when identifying each piece of UI control information and each piece of text information included in the design picture, the identifying unit is specifically configured to:
identifying the design picture by adopting a trained UI control detection model, and outputting information of each UI control included in the design picture, wherein the UI control detection model is built based on a single-step multi-frame detection SSD architecture, and the information of the UI controls at least comprises the type of the UI controls and the control position information of the UI controls;
recognizing the design picture by adopting a trained text detection model, and outputting each text message included in the design picture, wherein the text detection model is built based on an optical character recognition model Tesseract-OCR framework, and the text message at least comprises the text content and the text position information of the text.
Optionally, when generating the corresponding static front-end page code based on each UI control and each text in the design picture, the determining unit is specifically configured to:
determining control position information of each UI control in the design picture according to the UI control information, and determining text position information of each text in the design picture according to the text information;
determining a text associated with each UI control, and generating a special domain language DSL file according to the association relationship between the UI controls and the text, wherein the position overlapping degree between the control position information of the UI controls and the text position information of the associated text reaches a set value;
and analyzing the DSL file by adopting a layout algorithm to generate a layout structure tree, acquiring a cascading sample table (CSS) file referenced by a UI control, generating a hypertext markup language html file according to the layout structure tree and the CSS file, and taking the html file as a static front-end page code.
Optionally, after presenting the static front-end page corresponding to each operation configuration file and the static front-end page code, the presenting unit is further configured to:
and responding to the editing operation of the static front-end page and the operation configuration file, identifying each UI control and each text included in the edited static front-end page, and triggering the generation unit to execute the generation operation of the codes.
Optionally, when the back-end code corresponding to the front-end code is generated based on the interaction script referenced by each operation configuration file and the database table, the generating unit is further configured to:
and acquiring a transliteration script language (JS) file referenced by the operation configuration file according to the operation configuration file associated with each UI control, determining a corresponding interactive interface according to the database table, and generating a back-end code corresponding to the front-end code based on the interactive interface and the JS file.
In a third aspect, an electronic device is provided, including:
a memory for storing executable instructions;
a processor, configured to read and execute executable instructions stored in the memory, so as to implement the method for generating a front-end CRUD code according to any one of the above first aspects.
In a fourth aspect, a computer-readable storage medium is provided, wherein instructions of the storage medium, when executed by an electronic device, enable the electronic device to perform the method for generating the front-end CRUD code according to any one of the first aspect.
The beneficial effects of this disclosure are as follows:
in the embodiment of the disclosure, in response to an input design picture of a front-end page, identifying each piece of UI control information and each piece of text information included in the design picture, where the UI control information is used to identify a UI control in the design picture, and the text information is used to identify a text in the design picture, then generating a corresponding static front-end page code based on each identified UI control and each text, determining a content in stored database dictionary information, whose association with each text reaches a set threshold, as a database table associated with the static front-end page code, then analyzing an operation configuration file associated with each UI control according to the static front-end page code and the database table, and presenting each operation configuration file and a static front-end page corresponding to the static front-end page code, and then responding to the determined operation aiming at the static front-end page and each operation configuration file, combining the interactive script quoted by each operation configuration file and the static front-end page code to generate a front-end code, and generating a back-end code corresponding to the front-end code based on the interactive script quoted by each operation configuration file and the database table. Therefore, the corresponding front-end and back-end CRUD codes are automatically generated by means of the software interface design pictures, compared with the development mode in the prior art, the development time is greatly saved, the development efficiency is greatly improved, the dependence on processing of a large number of manual codes is avoided, and the research and development cost is reduced.
Drawings
FIG. 1 is a schematic flow chart of front-end and back-end CRUD code generation in an embodiment of the present disclosure;
fig. 2 is a schematic flow chart illustrating parsing of a DSL file in an embodiment of the present disclosure;
FIG. 3 is a schematic diagram illustrating functional component division within a processing device according to an embodiment of the present disclosure;
FIG. 4 is a schematic diagram illustrating interaction between components within a processing device according to an embodiment of the present disclosure;
FIG. 5 is a schematic diagram of a logical structure of front-end and back-end CRUD code generation in an embodiment of the present disclosure;
fig. 6 is an entity structure diagram of front-end CRUD code generation in the embodiment of the present disclosure.
Detailed Description
In order to make the purpose, technical solution and beneficial effects of the present disclosure more clearly understood, the present disclosure is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the disclosure and are not intended to limit the disclosure.
As will be appreciated by one skilled in the art, embodiments of the present disclosure may be embodied as a system, apparatus, device, method, or computer program product. Accordingly, the present disclosure may be embodied in the form of: entirely hardware, entirely software (including firmware, resident software, micro-code, etc.), or a combination of hardware and software.
In order to solve the problems that generation of front-end and back-end CRUD codes depends on manual coding, development cost is high and programming efficiency is low in the prior art, the method and the device for generating the front-end and back-end CRUD codes have the advantages that in response to a design picture of an input front-end page, control information and text information of each User Interface (UI) included in the design picture are identified, the control information is used for identifying a UI control in the design picture, the text information is used for identifying a text in the design picture, then a corresponding static front-end page code is generated based on each identified UI control and each text, in stored database dictionary information, the content of which the association degree with each text reaches a set threshold value is determined as a database table associated with the static front-end page code, and then operation configuration files associated with each UI control are analyzed according to the static front-end page code and the database table, and presenting each operation configuration file and a static front-end page corresponding to the static front-end page code, then responding to the determined operation aiming at the static front-end page and each operation configuration file, combining the interactive script quoted by each operation configuration file and the static front-end page code to generate a front-end code, and generating a back-end code corresponding to the front-end code based on the interactive script quoted by each operation configuration file and the database table.
Therefore, by means of the design picture of the software interface, the corresponding front-end and back-end CRUD codes are automatically generated, compared with the development mode in the prior art, the development time is greatly saved, and the development efficiency is greatly improved.
In the embodiment of the present disclosure, the processing device for executing front-end CRUD code generation may be a server, or may be a processing platform composed of several servers and/or electronic devices, and the present disclosure does not specifically limit the type of device for executing front-end CRUD code generation. CRUD is a general term in the field of web page development, and is embodied as user operations which can be provided by a software interface, such as adding, deleting, modifying and searching.
Preferred embodiments of the present disclosure are described in detail below with reference to the accompanying drawings:
referring to fig. 1, it is a schematic flow chart of front-end and back-end CRUD code generation in the embodiment of the present disclosure:
step 101: and responding to the input design picture of the front-end page, and identifying each piece of UI control information and each piece of text information included in the design picture.
Specifically, the processing device receives a design picture of a front-end page, where the design picture exists in a form including, but not limited to, any one of:
a. low fidelity design pictures.
The low fidelity design picture is specifically a wire frame diagram designed according to actual needs, and is used for illustrating a rough framework of a design interface.
b. And designing pictures with high fidelity.
The high-fidelity design picture specifically refers to a picture of an interface designed according to actual needs, and the content in the picture comprises details of the design interface and contents of each part added with color matching, for example.
c. And (5) screenshot of the low-fidelity design interface.
Specifically, the screenshot of the low-fidelity design interface is obtained by screenshot of the designed interface after the interface is schematically designed in a wire frame form.
d. And (5) carrying out high-fidelity design interface screenshot.
The high-fidelity design interface screenshot is obtained by screenshot of the designed interface after the high-fidelity design interface is designed.
After the processing device obtains a design picture of a front-end page, identifying information of each UI control and information of each text included in the design picture, wherein the information of the UI control is used for identifying the UI control in the design picture, the information of the text is used for identifying the text in the design picture, and the UI control can be a check box, a switch, a button, a pull-down menu, a text box, a table and the like.
When the processing device identifies each piece of UI control information and each piece of text information included in the design picture, for the detection of the UI control, the processing device can identify the design picture by adopting a trained UI control detection model, and output each piece of UI control information included in the design picture, wherein the UI control detection model is built based on a single-step multi-frame detection SSD architecture, and the UI control information at least comprises the type of the UI control and the control position information of the UI control.
Specifically, the processing device acquires pictures in the same form as a training sample according to the recognized picture form of the design picture, and trains the UI control detection model by using the acquired training sample, so that the trained UI control detection model can recognize each UI control included in the design picture and control position information of each UI control, where the control position information of the UI control may be a coordinate position of the UI control on a two-dimensional coordinate system after the two-dimensional coordinate system is established based on the design picture.
It should be noted that, considering that a UI control is generally indicated by a part of an area in a design picture, when representing control position information of a certain UI control, a coverage area corresponding to the UI control is also generally included.
Similarly, when the processing device identifies the text in the design picture, the trained text detection model is adopted to identify the design picture and output each text message included in the design picture, wherein the text detection model is built based on an optical character recognition model Tesseract-OCR architecture, and the text message at least includes the text content and the text position information of the text.
Specifically, the processing device acquires pictures in the same form according to the recognized picture form of the design picture to generate a sample picture, and trains the text detection model according to the acquired sample picture, so that the trained text detection model can recognize each text included in the design picture and the text position information of the text.
Therefore, by means of the UI control detection model and the text detection model, all UI controls and all texts in the design picture can be identified, effective analysis of the design picture is guaranteed, and meanwhile accuracy and effectiveness of subsequently generated front-end and back-end CRUD codes are guaranteed.
Step 102: and generating corresponding static front-end page codes based on the identified UI controls and texts, and determining the contents, of the stored database dictionary information, of which the association degrees with the UI controls and the texts reach a set threshold value as a database table associated with the static front-end page codes.
When the processing equipment generates a corresponding static front-end page according to the identified UI control information and the text information, the processing equipment determines the control position information of each UI control in the design picture according to the UI control information, determines the text position information of each text in the design picture according to the text information, determines the text associated with each UI control, and generates a special domain language DSL file according to the association relationship between the UI controls and the text, wherein the position overlapping degree between the control position information of the UI control and the text position information of the associated text reaches a set value, then, the DSL file is analyzed by adopting a layout algorithm to generate a layout structure tree, a CSS file of a cascading sample table quoted by the UI control is obtained, and a html file of a hypertext markup language is generated according to the layout structure tree and the CSS file, and taking the html file as static front-end page codes.
Specifically, after the processing device acquires the information of each UI control and the text information identified from the design picture, determining each UI control and control position information of the UI control included in the design picture according to the information of each UI control, and after determining the text included in the design picture and the text position information of the text according to each text information, the text associated with each UI control is determined, and in particular, the text associated with the UI control is determined by the processing device using a matrix overlap algorithm, for each UI control, calculating the position overlapping degree between the UI control and each text according to the UI control information of the UI control and the text information of each text, and screening the position overlapping degree reaching the set threshold value, acquiring a target text corresponding to the screened position overlapping degree, and taking the acquired target text as the text associated with the UI control.
Further, after determining the text associated with each UI control, the processing device outputs a private domain language (DSL) file according to the association relationship between the UI control and the text, and then analyzes the DSL file by using a layout algorithm to generate a layout structure tree.
Referring to fig. 2, which is a schematic flow chart of parsing a DSL file in the embodiment of the present disclosure, a specific implementation logic of parsing a DSL file by using a layout algorithm is as follows:
step 201: and reading the DSL file, and analyzing all container components in the DSL file.
It should be noted that after the node is set in the DSL file by a user, the UI control and text separated by the node are used as a container. The container component is responsible for organizing all UI controls and text within the container.
Step 202: a container assembly is acquired.
Step 203: the left and top margins of the child containers contained in the container component relative to the parent container are calculated.
Step 204: analyzing all row components in the container components, traversing all row components in the container components, determining the absolute coordinate relationship between each row component and the container components, and calculating the upper margin and the left margin of each row component relative to the parent container.
It should be noted that the line component is a UI control and text in the same line in the front page.
Step 205: acquiring a row component, analyzing all components in the row component, and calculating the left margin of each component relative to the left component and the upper margin relative to the row component.
Step 206: and judging whether all the row components are completely acquired, if so, executing the step 207, otherwise, returning to the step 205.
Step 207: and judging whether all the container components are acquired, if so, executing the step 208, and otherwise, returning to execute the step 202.
Step 208: and generating a layout structure tree.
Furthermore, the processing device creates a UI control library in advance, the UI control library is composed of standard element UI control codes, the processing device analyzes the generated layout structure tree, determines various UI controls related in the layout structure tree, acquires corresponding UI control codes from the UI control library to generate corresponding HTML codes, and meanwhile, the processing device introduces corresponding cascading sample table CSS files according to the UI controls included in the layout structure tree and generates static front-end page codes according to the HTML codes and the CSS files.
In the embodiment of the present disclosure, after the static front-end page code is generated, the content in the stored database dictionary information, in which the association degree with each UI control and each text reaches the set threshold, is determined as the database table associated with the static page code. That is to say, according to each UI control and each text included in the static page, the contents in the database dictionary corresponding to each UI control and each text are respectively determined, the data content to be accessed is determined, and then the database table associated with the static front-end page code is obtained.
Step 103: and analyzing the operation configuration files associated with the UI controls respectively according to the static front-end page codes and the database table, and presenting the operation configuration files and the static front-end pages corresponding to the static front-end page codes.
The method comprises the steps that after a static front-end page code corresponding to a design picture is generated by processing equipment, and a database table associated with the static front-end page code is determined, operation configuration files associated with UI controls in the corresponding static front-end page are analyzed according to the static front-end page code and the database table, and the operation configuration files specifically limit dynamic operations which can be executed by the UI controls.
Furthermore, the processing device presents each operation configuration file and the static front-end page corresponding to the static front-end page code, so that the presentation effect of the page and the executable operation of each UI control can be previewed, and a basis is provided for subsequent editing and modifying operation of the page.
Step 104: and responding to the determined operation aiming at the static front-end page and each operation configuration file, combining the interaction script referenced by each operation configuration file with the static front-end page code to generate a front-end code, and generating a back-end code corresponding to the front-end code based on the interaction script referenced by each operation configuration file and the database table.
After determining that the presented static front-end page is not edited, in response to a determination operation for the static front-end page and each operation configuration file, the processing device combines an interaction script referenced by each operation configuration file with the static front-end page code to generate a front-end code, wherein the front-end page code corresponds to a front-end page capable of dynamic operation.
Further, based on the interaction script referred by each operation configuration file and the obtained associated database table, a back-end code corresponding to the front-end page is generated. And the processing equipment acquires the transliteration script language JS file quoted by the operation configuration file according to the operation configuration file associated with each UI control, determines a corresponding interactive interface according to the database table, and generates a back-end code corresponding to the front-end code based on the interactive interface and the JS file.
Specifically, the processing device firstly constructs a UI control library and an operation code library, wherein the UI control library includes codes corresponding to each UI control, the operation code library includes implementation codes corresponding to various dynamic operations, further acquires corresponding operation codes in the operation code library according to each operation configuration file, determines a corresponding interaction interface according to a database table, and further generates a back-end code corresponding to a front-end page code according to the codes corresponding to the UI controls on the front-end page in the UI control library, the operation codes corresponding to each operation configuration file, and the interaction interface.
It should be noted that, in this disclosure example, after the static front-end page and each operation configuration file are presented, when it is determined that the static front-end page and/or each operation configuration file is modified, in response to the editing operation on the static front-end page and each operation configuration file, each UI control and each text included in the edited static front-end page are identified, and the step 102 of generating a corresponding static front-end page code based on each identified UI control and each text is returned to, and the operations defined in the step 103 and 104 are sequentially executed.
The process of generating the front-end code and the back-end code according to the UI controls and the texts included in the page has been described in detail in the above description, and the details of the present disclosure are not repeated herein.
Further, after the processing device generates the front-end code and the back-end code according to the design picture, the processing device can respond to actual operation needs and support downloading of the front-end code and the back-end code.
Reference is made to fig. 3, which is a schematic diagram illustrating division of functional components inside a processing device in the embodiment of the present disclosure. Specifically, the method comprises a UI control detection component, a UI text recognition component, a page association operation analysis component, a page association database table analysis component, a CRUD code generation component, a static page generation component and a visual editing component, wherein,
and the UI control detection component is used for detecting the input picture and outputting UI control information included in the picture, wherein the UI control information includes a UI control and position information of the UI control.
And the UI text recognition component is used for recognizing the text in the input picture and outputting the text information included in the picture, wherein the text information includes the text and the text position information of the text.
And the page association database table analysis component is used for determining the content of the pre-configured database dictionary information, the similarity of which to the text reaches a set threshold value, as a database table associated with the text in a text similarity analysis mode according to the recognized text.
And the page association operation analysis component determines the operation associated with each UI control and specific fields in the database table of the operation by adopting a natural language processing technology according to the identified UI control, text and the associated database table.
And the CRUD code generating component generates a static front-end page code according to the obtained picture by means of the UI control detecting component, the UI text identifying component, the page association database table analyzing component and the page association operation analyzing component, and correspondingly generates a front-end and back-end CRUD codes after obtaining the determined operation on the static front-end page and the operation configuration file.
And the static page generating component is used for generating a corresponding static front-end page according to the UI control information and the text information identified from the picture.
The visual editing assembly realizes visual presentation and editing of a software page, and supports the examination and editing of a presented front-end page and an operation configuration file in a visual dragging and visual configuration mode, and the presentation of configuration item information of each operation corresponding to the operation configuration file, so that a user can conveniently view the configuration item information.
Reference is now made to FIG. 4, which is a block diagram illustrating the interaction between various components within a processing device according to an embodiment of the disclosure.
Step 401: and the visual editing component receives the design picture uploaded by the user.
Step 402: the visual editing component sends the design picture to the CRUD code generation component.
Step 403: and the visual editing component requests to call the function of the static page generation component and requests to generate a static front-end page.
Step 404: and the static page generation component calls the UI control detection component to request for identifying the UI control information in the picture.
In step 405, the UI control detection component identifies UI control information of each UI control included in the picture.
Step 406: and the UI control detection component sends the identified UI control information to the static page generation component.
Step 407: and the static page generation component calls the UI text recognition component to request to recognize the text information in the picture.
Step 408: the UI text recognition component recognizes text information of each text included in the picture.
Step 409: the UI text recognition component sends the recognized text information to the static page generation component.
Step 410: and the static page generating component generates a static front-end page according to the UI control information and the text information.
Step 411: and the static page generation component feeds back the information of the static front-end page to the CRUD code generation component.
Step 412: and the CRUD code generation component calls the page association database table analysis component to request for analyzing the database table associated with the static front-end page.
Step 413: and the page association data analysis component analyzes the database table corresponding to the text information.
Step 414: and the page association data analysis component sends the database table obtained by analysis to the CRUD code generation component.
Step 415: and the CRUD code generation component calls the page association operation analysis component to request for analysis to obtain the operation configuration files of the UI controls.
Step 416: and the page association operation analysis component analyzes the operation configuration file associated with each UI control.
Step 417: and the page association operation analysis component sends the obtained operation configuration file to the CRUD code generation component.
Step 418: and the CRUD code generation component returns the obtained operation configuration file and the static front-end page to the visual editing component.
Step 419: and the visual editing component presents the static front-end page and the operation configuration file, and submits the revised static front-end page and the chaining operation configuration file to the CRUD code generation component after confirming that the confirmation operation is received.
Step 420: the CRUD code generation component generates corresponding front-end and back-end CRUD codes based on the static front-end page, the operation configuration file and the database table.
Step 421: the CRUD code generation component returns the generated front-end CRUD code to the visual editing component.
Step 422: the visual editing component presents the resulting front-end CRUD code.
Based on the same inventive concept, referring to fig. 5, it is a schematic diagram of a logical structure generated by the front-end CRUD code in the embodiment of the present disclosure, including: an identification unit 501, a determination unit 502, a presentation unit 503, a generation unit 504, wherein,
the identifying unit 501 is configured to identify, in response to an input design picture of a front-end page, UI control information and text information of each user interface included in the design picture, where the UI control information is used to identify a UI control in the design picture, and the text information is used to identify a text in the design picture;
a determining unit 502, configured to determine, as a database table associated with the static front-end page code, content in the stored database dictionary information, where the association degree between the identified UI control and each text reaches a set threshold;
a presentation unit 503, configured to obtain, by parsing according to the static front-end page code and the database table, an operation configuration file associated with each UI control, and present each operation configuration file and a static front-end page corresponding to the static front-end page code;
a generating unit 504, configured to generate corresponding static front-end page codes based on the identified UI controls and texts, and in response to a determination operation for the static front-end page and the operation profiles, combine the interaction scripts referenced by the operation profiles with the static front-end page codes to generate front-end codes, and generate back-end codes corresponding to the front-end codes based on the interaction scripts referenced by the operation profiles and the database table.
Optionally, when identifying each piece of UI control information and each piece of text information included in the design picture, the identifying unit 501 is specifically configured to:
identifying the design picture by adopting a trained UI control detection model, and outputting information of each UI control included in the design picture, wherein the UI control detection model is built based on a single-step multi-frame detection SSD architecture, and the information of the UI controls at least comprises the type of the UI controls and the control position information of the UI controls;
recognizing the design picture by adopting a trained text detection model, and outputting each text message included in the design picture, wherein the text detection model is built based on an optical character recognition model Tesseract-OCR framework, and the text message at least comprises the text content and the text position information of the text.
Optionally, when generating a corresponding static front-end page code based on each UI control and each text in the design picture, the determining unit 502 is specifically configured to:
determining control position information of each UI control in the design picture according to the UI control information, and determining text position information of each text in the design picture according to the text information;
determining a text associated with each UI control, and generating a special domain language DSL file according to the association relationship between the UI controls and the text, wherein the position overlapping degree between the control position information of the UI controls and the text position information of the associated text reaches a set value;
and analyzing the DSL file by adopting a layout algorithm to generate a layout structure tree, acquiring a cascading sample table (CSS) file referenced by a UI control, generating a hypertext markup language html file according to the layout structure tree and the CSS file, and taking the html file as a static front-end page code.
Optionally, after presenting the static front-end page corresponding to each operation configuration file and the static front-end page code, the presenting unit 503 is further configured to:
in response to the editing operation on the static front-end page and the operation configuration file, identifying each UI control and each text included in the edited static front-end page, and triggering the generating unit 504 to execute a code generating operation.
Optionally, when the back-end code corresponding to the front-end code is generated based on the interaction script referenced by each operation configuration file and the database table, the generating unit 504 is further configured to:
and acquiring a transliteration script language (JS) file referenced by the operation configuration file according to the operation configuration file associated with each UI control, determining a corresponding interactive interface according to the database table, and generating a back-end code corresponding to the front-end code based on the interactive interface and the JS file.
Based on the same inventive concept, refer to fig. 6, which is a schematic diagram of an entity structure generated by a front-end CRUD code in the embodiment of the present disclosure. The apparatus 600 includes a processing component 622 that further includes one or more processors, and memory resources, represented by memory 632, for storing instructions, such as application programs, that are executable by the processing component 622. The application programs stored in memory 632 may include one or more modules that each correspond to a set of instructions. Further, the processing component 622 is configured to execute instructions to perform the above-described development device-side methods.
The apparatus 600 may also include a power component 626 configured to perform power management of the apparatus 600, a wired or wireless network interface 650 configured to connect the apparatus 600 to a network, and an input/output (I/O) interface 658. The apparatus 600 may operate based on an operating system stored in the memory 632.
Based on the same inventive concept, an embodiment based on front-end CRUD code generation in the embodiments of the present disclosure provides a computer-readable storage medium, and when instructions in the storage medium are executed by an electronic device, the electronic device is enabled to execute the method of front-end CRUD code generation.
In summary, in the embodiment of the present disclosure, in response to an input design picture of a front end page, identifying UI control information and text information of each user interface included in the design picture, where the UI control information is used to identify a UI control in the design picture, and the text information is used to identify a text in the design picture, then generating a corresponding static front end page code based on each identified UI control and each text, determining a content in stored database dictionary information, whose association with each text reaches a set threshold, as a database table associated with the static front end page code, then analyzing an operation configuration file associated with each UI control according to the static front end page code and the database table, and presenting each operation configuration file and the static front end page corresponding to the static front end page code, and then responding to the determined operation aiming at the static front-end page and each operation configuration file, combining the interactive script quoted by each operation configuration file and the static front-end page code to generate a front-end code, and generating a back-end code corresponding to the front-end code based on the interactive script quoted by each operation configuration file and the database table. Therefore, the corresponding front-end and back-end CRUD codes are automatically generated by means of the software interface design pictures, compared with the development mode in the prior art, the development time is greatly saved, the development efficiency is greatly improved, the dependence on processing of a large number of manual codes is avoided, and the research and development cost is reduced.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, 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 (systems), 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.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the invention.
It will be apparent to those skilled in the art that various modifications and variations can be made in the embodiments of the present invention without departing from the spirit or scope of the embodiments of the invention. Thus, if such modifications and variations of the embodiments of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to encompass such modifications and variations.

Claims (10)

1. A method for generating CRUD codes for front-end and back-end addition, deletion, modification and check is characterized by comprising the following steps:
responding to an input design picture of a front-end page, and identifying each piece of user interface UI control information and each piece of text information which are included in the design picture, wherein the UI control information is used for identifying a UI control in the design picture, and the text information is used for identifying a text in the design picture;
generating corresponding static front-end page codes based on the identified UI controls and texts, and determining the contents, in the stored database dictionary information, of which the association degrees with the UI controls and the texts reach a set threshold value as a database table associated with the static front-end page codes;
analyzing to obtain operation configuration files associated with the UI controls respectively according to the static front-end page codes and the database table, and presenting the operation configuration files and the static front-end pages corresponding to the static front-end page codes;
and responding to the determined operation aiming at the static front-end page and each operation configuration file, combining the interaction script referenced by each operation configuration file with the static front-end page code to generate a front-end code, and generating a back-end code corresponding to the front-end code based on the interaction script referenced by each operation configuration file and the database table.
2. The method of claim 1, wherein the identifying respective User Interface (UI) control information and respective text information included in the design picture comprises:
identifying the design picture by adopting a trained UI control detection model, and outputting information of each UI control included in the design picture, wherein the UI control detection model is built based on a single-step multi-frame detection SSD architecture, and the information of the UI controls at least comprises the type of the UI controls and the control position information of the UI controls;
recognizing the design picture by adopting a trained text detection model, and outputting each text message included in the design picture, wherein the text detection model is built based on an optical character recognition model Tesseract-OCR framework, and the text message at least comprises the text content and the text position information of the text.
3. The method of claim 1, wherein generating corresponding static front end page code based on respective UI controls and respective text in the design picture comprises:
determining control position information of each UI control in the design picture according to the UI control information, and determining text position information of each text in the design picture according to the text information;
determining a text associated with each UI control, and generating a special domain language DSL file according to the association relationship between the UI controls and the text, wherein the position overlapping degree between the control position information of the UI controls and the text position information of the associated text reaches a set value;
and analyzing the DSL file by adopting a layout algorithm to generate a layout structure tree, acquiring a cascading sample table (CSS) file referenced by a UI control, generating a hypertext markup language html file according to the layout structure tree and the CSS file, and taking the html file as a static front-end page code.
4. The method of any of claims 1-3, wherein after presenting the static front-end page corresponding to each operational configuration file and the static front-end page code, further comprising:
and responding to the editing operation of the static front-end page and the operation configuration file, identifying each UI control and each text included in the edited static front-end page, and returning to execute the step of generating corresponding static front-end page codes based on each identified UI control and each text.
5. The method of any one of claims 1-3, wherein generating the back-end code corresponding to the front-end code based on the interaction script referenced by the respective operational configuration file and the database table comprises:
and acquiring a transliteration script language (JS) file referenced by the operation configuration file according to the operation configuration file associated with each UI control, determining a corresponding interactive interface according to the database table, and generating a back-end code corresponding to the front-end code based on the interactive interface and the JS file.
6. A device for generating CRUD code for front-end and back-end addition, deletion, modification and check, comprising:
the identification unit is used for responding to an input design picture of a front-end page and identifying each user interface UI control information and each text information which are included in the design picture, wherein the UI control information is used for identifying a UI control in the design picture, and the text information is used for identifying a text in the design picture;
the determining unit is used for determining the content, in the stored database dictionary information, of which the association degree with each identified UI control and each text reaches a set threshold value as a database table associated with the static front-end page code;
the presentation unit is used for analyzing and obtaining operation configuration files associated with the UI controls according to the static front-end page codes and the database table, and presenting the operation configuration files and the static front-end pages corresponding to the static front-end page codes;
and the generating unit is used for generating corresponding static front-end page codes based on the identified UI controls and texts, combining the interaction scripts referenced by the operation configuration files with the static front-end page codes to generate front-end codes in response to the determined operations aiming at the static front-end pages and the operation configuration files, and generating back-end codes corresponding to the front-end codes based on the interaction scripts referenced by the operation configuration files and the database table.
7. The apparatus of claim 6, wherein after the presenting the static front-end page corresponding to the static front-end page code and the respective operational configuration file, the presenting unit is further to:
and responding to the editing operation of the static front-end page and the operation configuration file, identifying each UI control and each text included in the edited static front-end page, and triggering the generation unit to execute the generation operation of the codes.
8. The apparatus of claim 6, wherein when generating the back-end code corresponding to the front-end code based on the interaction script referenced by the respective operation configuration file and the database table, the generating unit is further to:
and acquiring a transliteration script language (JS) file referenced by the operation configuration file according to the operation configuration file associated with each UI control, determining a corresponding interactive interface according to the database table, and generating a back-end code corresponding to the front-end code based on the interactive interface and the JS file.
9. An electronic device, comprising:
a memory for storing executable instructions;
a processor for reading and executing executable instructions stored in the memory to implement the method of generating front-end CRUD code as claimed in any one of claims 1 to 5.
10. A computer-readable storage medium, wherein instructions in the storage medium, when executed by an electronic device, enable the electronic device to perform a method of generating front-end CRUD code according to any one of claims 1 to 5.
CN202011446446.9A 2020-12-09 2020-12-09 Method and device for generating front-end and back-end CRUD codes Active CN112416363B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011446446.9A CN112416363B (en) 2020-12-09 2020-12-09 Method and device for generating front-end and back-end CRUD codes

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011446446.9A CN112416363B (en) 2020-12-09 2020-12-09 Method and device for generating front-end and back-end CRUD codes

Publications (2)

Publication Number Publication Date
CN112416363A true CN112416363A (en) 2021-02-26
CN112416363B CN112416363B (en) 2024-03-19

Family

ID=74776070

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011446446.9A Active CN112416363B (en) 2020-12-09 2020-12-09 Method and device for generating front-end and back-end CRUD codes

Country Status (1)

Country Link
CN (1) CN112416363B (en)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113157310A (en) * 2021-04-01 2021-07-23 北京三快在线科技有限公司 Configuration information acquisition method, device, equipment and computer readable storage medium
CN113326045A (en) * 2021-08-03 2021-08-31 成都中科合迅科技有限公司 Interface code generation method based on design file
CN113377365A (en) * 2021-07-09 2021-09-10 北京字跳网络技术有限公司 Code display method, device, equipment, computer readable storage medium and product
CN113485706A (en) * 2021-07-05 2021-10-08 中国工商银行股份有限公司 DSL-based multi-technology stack front-end code generation method and device
CN113656028A (en) * 2021-08-11 2021-11-16 广州虎牙科技有限公司 UI component code generation method, CRUD page generation method, device and equipment
CN113805871A (en) * 2021-09-26 2021-12-17 平安国际智慧城市科技股份有限公司 Front-end code generation method and device and computer equipment
CN117971190A (en) * 2024-03-28 2024-05-03 易方信息科技股份有限公司 Page automation operation generation method and related device based on large language model

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103383645A (en) * 2013-07-29 2013-11-06 北京邮电大学 Code generation method and system
CN105404509A (en) * 2015-11-11 2016-03-16 神州数码国信信息技术(苏州)有限公司 ExtJS UI based visual code generation method
CN109543690A (en) * 2018-11-27 2019-03-29 北京百度网讯科技有限公司 Method and apparatus for extracting information
US20190250891A1 (en) * 2018-02-12 2019-08-15 Oracle International Corporation Automated code generation
CN110990010A (en) * 2019-12-03 2020-04-10 锐捷网络股份有限公司 Software interface code generation method and device
CN111414165A (en) * 2019-01-06 2020-07-14 阿里巴巴集团控股有限公司 Interface code generation method and equipment

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103383645A (en) * 2013-07-29 2013-11-06 北京邮电大学 Code generation method and system
CN105404509A (en) * 2015-11-11 2016-03-16 神州数码国信信息技术(苏州)有限公司 ExtJS UI based visual code generation method
US20190250891A1 (en) * 2018-02-12 2019-08-15 Oracle International Corporation Automated code generation
CN109543690A (en) * 2018-11-27 2019-03-29 北京百度网讯科技有限公司 Method and apparatus for extracting information
CN111414165A (en) * 2019-01-06 2020-07-14 阿里巴巴集团控股有限公司 Interface code generation method and equipment
CN110990010A (en) * 2019-12-03 2020-04-10 锐捷网络股份有限公司 Software interface code generation method and device

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113157310A (en) * 2021-04-01 2021-07-23 北京三快在线科技有限公司 Configuration information acquisition method, device, equipment and computer readable storage medium
CN113485706A (en) * 2021-07-05 2021-10-08 中国工商银行股份有限公司 DSL-based multi-technology stack front-end code generation method and device
CN113377365A (en) * 2021-07-09 2021-09-10 北京字跳网络技术有限公司 Code display method, device, equipment, computer readable storage medium and product
CN113326045A (en) * 2021-08-03 2021-08-31 成都中科合迅科技有限公司 Interface code generation method based on design file
CN113656028A (en) * 2021-08-11 2021-11-16 广州虎牙科技有限公司 UI component code generation method, CRUD page generation method, device and equipment
CN113656028B (en) * 2021-08-11 2023-11-14 广州虎牙科技有限公司 UI component code generation method, device and equipment, and CRUD page generation method, device and equipment
CN113805871A (en) * 2021-09-26 2021-12-17 平安国际智慧城市科技股份有限公司 Front-end code generation method and device and computer equipment
CN113805871B (en) * 2021-09-26 2023-08-15 平安国际智慧城市科技股份有限公司 Front-end code generation method and device and computer equipment
CN117971190A (en) * 2024-03-28 2024-05-03 易方信息科技股份有限公司 Page automation operation generation method and related device based on large language model

Also Published As

Publication number Publication date
CN112416363B (en) 2024-03-19

Similar Documents

Publication Publication Date Title
CN112416363B (en) Method and device for generating front-end and back-end CRUD codes
US11481540B2 (en) Discrepancy resolution processor and methods for implementing the same
US9355081B2 (en) Transforming HTML forms into mobile native forms
US11100917B2 (en) Generating ground truth annotations corresponding to digital image editing dialogues for training state tracking models
US20110231784A1 (en) System and method for desktop application migration
CN115617327A (en) Low code page building system, method and computer readable storage medium
US20210232591A1 (en) Transformation rule generation and validation
CN110941427B (en) Code generation method and code generator
CN106933887B (en) Data visualization method and device
CN109684584B (en) Intelligent switching method and device for browser kernel, terminal and storage medium
KR101950126B1 (en) Mathematical formula processing method, device, apparatus and computer storage medium
US9141344B2 (en) Hover help support for application source code
Vyshnavi et al. Efficient way of web development using python and flask
CN107015903B (en) Interface test program generation method and device and electronic equipment
US10248392B2 (en) Replicating a web technology
CN114138244A (en) Method and device for automatically generating model files, storage medium and electronic equipment
CN115562656A (en) Page generation method and device, storage medium and computer equipment
CN110647322A (en) List rendering method and device, electronic equipment and computer readable medium
US9772986B2 (en) Transforming HTML forms into mobile native forms
US20220083907A1 (en) Data generation and annotation for machine learning
CN111158648A (en) Interactive help system development method based on live-action semantic understanding and platform thereof
US9594737B2 (en) Natural language-aided hypertext document authoring
CN112000416B (en) Card view generation method, device and computer readable storage medium
US20200159805A1 (en) System and method for producing transferable, modular web pages
CN114201215A (en) Interface document generation method and device, electronic equipment and storage medium

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
GR01 Patent grant
GR01 Patent grant