CN114089999A - Front-end page generation method and system - Google Patents
Front-end page generation method and system Download PDFInfo
- Publication number
- CN114089999A CN114089999A CN202111275584.XA CN202111275584A CN114089999A CN 114089999 A CN114089999 A CN 114089999A CN 202111275584 A CN202111275584 A CN 202111275584A CN 114089999 A CN114089999 A CN 114089999A
- Authority
- CN
- China
- Prior art keywords
- end page
- sample
- layout
- page
- parameters
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 69
- 238000012549 training Methods 0.000 claims abstract description 82
- 238000013528 artificial neural network Methods 0.000 claims abstract description 60
- 230000008859 change Effects 0.000 claims abstract description 46
- 238000004590 computer program Methods 0.000 claims description 10
- 238000011161 development Methods 0.000 abstract description 16
- 238000010586 diagram Methods 0.000 description 9
- 238000007429 general method Methods 0.000 description 8
- 230000006870 function Effects 0.000 description 7
- 238000004891 communication Methods 0.000 description 6
- 230000008569 process Effects 0.000 description 6
- 238000010276 construction Methods 0.000 description 4
- 238000004458 analytical method Methods 0.000 description 3
- 238000004806 packaging method and process Methods 0.000 description 3
- 239000013589 supplement Substances 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 210000001503 joint Anatomy 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000013473 artificial intelligence Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 239000000047 product Substances 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
- G06N3/00—Computing arrangements based on biological models
- G06N3/02—Neural networks
- G06N3/04—Architecture, e.g. interconnection topology
- G06N3/045—Combinations of networks
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
- G06N3/00—Computing arrangements based on biological models
- G06N3/02—Neural networks
- G06N3/08—Learning methods
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- General Health & Medical Sciences (AREA)
- Evolutionary Computation (AREA)
- Computational Linguistics (AREA)
- Molecular Biology (AREA)
- Computing Systems (AREA)
- Biophysics (AREA)
- Biomedical Technology (AREA)
- Mathematical Physics (AREA)
- Artificial Intelligence (AREA)
- Life Sciences & Earth Sciences (AREA)
- Health & Medical Sciences (AREA)
- Human Computer Interaction (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention provides a front-end page generation method and a system, wherein the method comprises the following steps: acquiring layout parameters of a front-end page to be designed according to the layout requirements of the front-end page to be designed; and inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters. According to the method, the model is generated by the front-end page obtained through the neural network training, and the trained logic method of the hidden layer in the model is called only by inputting a series of layout parameters in the front-end input layer of the model, so that the automatically generated front-end page is output, the code of the front-end page is not required to be re-developed when developers change business requirements, and the efficiency of front-end development is improved.
Description
Technical Field
The invention relates to the technical field of artificial intelligence, in particular to a front-end page generation method and a front-end page generation system.
Background
The front-end technology refers to a general term from a browser to a computer at a user end, and is stored at a server end and is generally called as back-end technology. The main role of front-end development is to better present the interface of the website to the user.
As Web services become increasingly complex and diversified, front-end engineering has grown in maturity in the use of front-end architectures. When the service requirement changes, the first one to be updated is often the front end, and many service requirement changes are irrelevant to the back end, which is simply the change of the front end page. In the existing method for encapsulating the public control, when the front-end page is added or deleted with the control, the front-end code needs to be continuously modified, and when the control layout of the front-end page is modified, the front-end code also needs to be continuously modified, for example, a user requires to newly add an input box, the layout needs to be adjusted in front-end development, and the front-end code is changed again, so that the efficiency of the front-end development is low, and the requirement of rapid change cannot be met.
Therefore, a method and a system for generating a front page are needed to solve the above problems.
Disclosure of Invention
Aiming at the problems in the prior art, the invention provides a front-end page generation method and a front-end page generation system.
The invention provides a front-end page generation method, which comprises the following steps:
acquiring layout parameters of a front-end page to be designed according to the layout requirements of the front-end page to be designed;
and inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
According to the front-end page generation method provided by the invention, the front-end page generation model is obtained through the following steps:
analyzing a sample front-end page to obtain sample control parameters and sample control logic parameters of the sample front-end page;
obtaining a sample layout parameter according to the sample control parameter and the sample control logic parameter, and constructing a training sample set according to the sample layout parameter and the sample front-end page;
and inputting the training sample set into a neural network for training to obtain a front-end page generation model.
According to the front-end page generation method provided by the invention, the method for constructing and obtaining the training sample set according to the sample layout parameters and the sample front-end page comprises the following steps:
obtaining the style type of the sample front-end page and marking a label to obtain a target sample front-end page;
and constructing a training sample set according to the sample layout parameters and the front end page of the target sample.
According to the front-end page generation method provided by the invention, the step of inputting the training sample set into a neural network for training to obtain a front-end page generation model comprises the following steps:
inputting the training sample set into the neural network through an input layer of the neural network to carry out layer-by-layer training, and obtaining a sample front end generation page and a pre-trained neural network;
and reversely calling the control logic and the page logic which are obtained by training in the hidden layer of the pre-trained neural network through the output layer of the pre-trained neural network, updating the sample front-end generated page according to the control logic and the page logic, and obtaining a front-end page generation model if the preset training times are met.
According to the front-end page generation method provided by the present invention, after the layout parameters are input to the front-end page generation model to obtain the target front-end page, the method further comprises:
acquiring a layout change requirement of the target front-end page, wherein the layout change requirement comprises front-end page control change parameters and front-end page control logic change parameters;
and inputting the layout change requirement into the front-end page generation model, and updating the target front-end page to obtain an updated target front-end page.
According to the front-end page generation method provided by the invention, the acquiring of the layout change requirement of the target front-end page comprises the following steps:
and acquiring the layout change requirement of the target front-end page through a rear-end interface, wherein the rear-end interface is connected with the output layer of the trained front-end page generation model.
According to the front-end page generation method provided by the invention, the neural network is a non-fully-connected neural network.
The present invention also provides a front-end page generating system, including:
the front-end page layout parameter acquisition module is used for acquiring the layout parameters of the front-end page to be designed according to the layout requirements of the front-end page to be designed;
and the front-end page generation module is used for inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
The invention also provides an electronic device, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor executes the program to realize the steps of any one of the front-end page generation methods.
The present invention also provides a non-transitory computer readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the front-end page generation method as any one of the above.
According to the front-end page generation method and system provided by the invention, the front-end page generation model obtained through neural network training is generated, only a series of layout parameters need to be input into the front-end input layer of the model, and the trained logic method of the hidden layer in the model is called, so that the automatically generated front-end page is output, and a developer does not need to re-develop the code of the front-end page when changing business requirements, so that the front-end development efficiency is improved.
Drawings
In order to more clearly illustrate the technical solutions of the present invention or the prior art, the drawings needed for the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and those skilled in the art can also obtain other drawings according to the drawings without creative efforts.
FIG. 1 is a schematic flow chart of a front-end page generation method provided by the present invention;
FIG. 2 is a schematic diagram of a control execution logic implemented based on a neural network according to the present invention;
FIG. 3 is a schematic structural diagram of a non-fully connected neural network provided by the present invention;
FIG. 4 is a schematic overall flowchart of front-end page generation provided by the present invention;
FIG. 5 is a schematic structural diagram of a front-end page generation system provided by the present invention;
fig. 6 is a schematic structural diagram of an electronic device provided in the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings, and it is obvious that the described embodiments are some, but not all embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The current front-end development method is to encapsulate a common component and develop a front-end page by referring to the common component, however, the common component does not adapt to the dynamically adjusted page change, so that the front-end code needs to be changed continuously each time a new service requirement is received. In addition, in the existing front-end development process, especially with attention to the unification of page layout and style, a front-end project with complex business is often required to master the specification of the page layout and style by a new front-end developer when the front-end developer is added, and the front-end developer is familiar with the code writing method of the front-end development project so that the made page can adapt to the overall style, which results in large workload of front-end development and low development efficiency.
The invention trains the neural network through the front end page of the sample and the layout parameters of the sample, takes the trained model as a black box, and the front end developer only needs to input the related layout parameters of the front end page to be designed into the black box, thereby automatically generating the front end page corresponding to the layout parameters.
Fig. 1 is a schematic flow diagram of a front-end page generation method provided by the present invention, and as shown in fig. 1, the present invention provides a front-end page generation method, which includes:
In the invention, firstly, according to business requirements, determining layout requirements of a front-end page to be designed at this time, wherein the layout requirements comprise control parameters and control logic parameters, the control parameters mainly comprise required control types (such as a text input box, a pull-down selection box, a date control and the like) and the layout of the control (such as the position, the size, the color and the like of the control in the page), and the control logic parameters mainly comprise general logic of the control (such as whether a password box can display a password or not, and character information in a plain text button can be copied by long-time mouse pressing). In addition, the style and the general logic of the front-end page can be determined according to the layout requirement, so that the front-end page meeting the style of the preset style can be obtained when the target front-end page is generated in the subsequent process.
And 102, inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
According to each business requirement, the neural network is trained through the sample front-end page with similar page style and layout, so that the front-end page generation model obtained through training can be programmed according to the front-end page with one or more specific style styles, and the target front-end page is generated. Because the front-end page generation model is used as the black box, the generated front-end page layout and style are unified, and the problem of general style conflict does not exist. Meanwhile, the newly added front-end developer only needs to input the input items (namely layout parameters) of the front-end page to be designed into the model, and the model can output the front-end page and the corresponding general logic, so that the front-end developer only needs to develop the specific logic of the page in the personalized interface of the front end. Preferably, in an embodiment, when a control needs to be added or reduced in an existing front page, the general logic of the page does not need to be changed, and only one item needs to be added or reduced in the input items.
According to the front-end page generation method provided by the invention, the front-end page generation model obtained through neural network training is generated, and only a series of layout parameters are input into the front-end input layer of the model, and the trained logic method of the hidden layer in the model is called, so that the automatically generated front-end page is output, and the code of the front-end page is not required to be re-developed when a developer changes the business requirements, so that the front-end development efficiency is improved.
On the basis of the above embodiment, the front-end page generation model is obtained by the following steps:
analyzing a sample front-end page to obtain sample control parameters and sample control logic parameters of the sample front-end page;
obtaining a sample layout parameter according to the sample control parameter and the sample control logic parameter, and constructing a training sample set according to the sample layout parameter and the sample front-end page;
and inputting the training sample set into a neural network for training to obtain a front-end page generation model.
In the invention, the logic of the neural network comprises three parts, namely an input layer, a hidden layer and an output layer. Firstly, analyzing a sample front-end page to obtain a sample control parameter and a sample logic parameter of each sample front-end page; then, the sample control parameters and the sample logic parameters are used as sample layout parameters, and the sample front-end page corresponding to the sample layout parameters is input into an input layer, wherein the input layer comprises all controls (such as a text box control, a password box control, a tab control and the like), general control parameters (such as control positions, control sizes and the like) and general page logic parameters (such as control attributes, control functions and the like); then, the hidden layer executes the compiling of the general control parameter according to the sample layout parameter output by the input layer and based on the control layout, the control typesetting and the page logic of the sample front-end page, and outputs the control logic and the page logic, so as to generate a corresponding front-end page according to the control logic and the page logic, wherein the control logic is mainly used for generating a corresponding control logic function for the front-end page (for example, the control function of the front-end page is constructed through the control logic according to the input layout parameter), and the page logic is mainly used for generating a corresponding common style for the front-end page (for example, a page style is generated for the front-end page through the page logic according to the input layout parameter); and finally, the output layer outputs the generated target front-end page and outputs control self-defined logic corresponding to the target front-end page, so that front-end developers can interface background interfaces and supplement some self-defined control logic.
On the basis of the above embodiment, the inputting the training sample set into a neural network for training to obtain a trained front-end page generation model includes:
inputting the training sample set into the neural network through an input layer of the neural network to carry out layer-by-layer training, and obtaining a sample front end generation page and a pre-trained neural network;
and reversely calling the control logic and the page logic which are obtained by training in the hidden layer of the pre-trained neural network through the output layer of the pre-trained neural network, updating the sample front-end generated page according to the control logic and the page logic, and obtaining a front-end page generation model if the preset training times are met.
Fig. 2 is a schematic diagram of a control execution logic implemented based on a neural network according to the present invention, which can be referred to in fig. 2, and in the present invention, when a model is trained, a sample control parameter is used as a data element, and a sample logic parameter is used as a logic element, and is input to an input layer of the neural network; then, the hidden layer is used as a main part of the black box, training is carried out according to the data elements and the logic elements, and after the preset training times are reached, control logic and page style logic are obtained (according to the layout requirement of the front-end page, some preprocessing functions can be added during model training, for example, compressed images corresponding to the front-end page of the sample are added into the sample, so that the front-end page after image compression can be generated in the practical application of the model); and finally, the output layer outputs control self-defined logic for a front-end developer to butt a background interface and supplement some self-defined control logics, meanwhile, the output layer can reversely call a general method in the hidden layer, namely model parameters obtained by training the hidden layer correspond to the control logics and the page logics, so that in actual application, a front-end page is generated based on input data, and the output layer also receives data provided by the back end and refreshes the page parameter display.
On the basis of the above embodiment, the constructing a training sample set according to the sample layout parameters and the sample front-end page includes:
obtaining the style type of the sample front-end page and marking a label to obtain a target sample front-end page;
and constructing a training sample set according to the sample layout parameters and the front end page of the target sample.
In the invention, style type labels are marked on each sample front end page, and the hidden layer is trained based on the sample front end pages with different style types in the training process, so that after the training is finished, in the programming process of the actual front end page, the layout parameters of the front end page to be designed are input into the trained model, and the front end page with the layout parameters corresponding to the style types is automatically generated.
On the basis of the above embodiment, after the layout parameters are input to the front-end page generation model to obtain the target front-end page, the method further includes:
acquiring a layout change requirement of the target front-end page, wherein the layout change requirement comprises front-end page control change parameters and front-end page control logic change parameters;
and inputting the layout change requirement into the front-end page generation model, and updating the target front-end page to obtain an updated target front-end page.
On the basis of the foregoing embodiment, the acquiring a layout change requirement of the target front-end page includes:
and acquiring the layout change requirement of the target front-end page through a rear-end interface, wherein the rear-end interface is connected with the output layer of the trained front-end page generation model.
According to the method, corresponding data elements (front-end page control change parameters) and logic parameters (front-end page control logic change parameters) are input into a model according to the layout change requirements of a front-end page, then page logic methods and public styles obtained by training in the early stage in a hidden layer are called according to the parameters, corresponding controls are displayed, and the control parameters are packaged into an output layer; the output layer can execute the logic of the personalized control element and reversely call the general method of the hidden layer, so that the page is refreshed, and the updated target front-end page is obtained. In the invention, the output layer is mainly used for butting interface data at the back end and binding and refreshing control data.
The invention inputs the control parameters and the execution logic parameters required by the page change, calls the general logic method and the page style of the front-end page according to the parameters, presents the page display, provides the packaged parameters for butting the back-end interface by the output layer through executing the general method of the hidden layer, and then calls the general method of the hidden layer to refresh the current front-end page by the back-end interface returning data, thereby realizing the update of the front-end page. In the invention, all page logics are configured on the input layer, the front-end development only interfaces the background interface data at the logic interface of the black box model output layer, and the page design is not required to be changed. Meanwhile, the data elements of the input layer can be provided by a back-end interface, a front-end developer of the universal method of the hidden layer only needs to call the universal method, logic does not need to be developed, and the logic of the output layer can be developed by the front-end developer to be in butt joint with the data of the back-end interface.
On the basis of the above embodiment, the neural network is a non-fully connected neural network.
Fig. 3 is a schematic structural diagram of a non-fully-connected neural network provided by the present invention, and reference may be made to fig. 3, in the present invention, not all nodes are linked between nodes on an upper layer and nodes on a lower layer of the non-fully-connected neural network. Specifically, each page input layer contains a plurality of data elements, so that a plurality of controls (namely a stack of styles, control types, control logic parameters and the like) required by the page are input in the input layer; the hidden layer is a common style and a common method of the page, and performs a plurality of logical methods and page style rendering. After the data elements are input, the general method and the public style in the hidden layer are automatically called according to the parameters configured by the data elements, and the front-end page is displayed. The output layer interface is in butt joint with the data of the back-end interface, provides page packaging data and transmits the page packaging data to the back-end interface for use; meanwhile, the output layer can call a general method in the hidden layer to refresh page data by receiving the layout change data sent by the back end, and can also call a public method of the hidden layer to change the page by receiving the parameters of the back end through the input layer.
Compared with the fully-connected neural network, the non-fully-connected neural network adopted by the invention improves the model training speed and greatly reduces the calculated amount during training.
Fig. 4 is a schematic view of an overall process of front-end page generation according to the present invention, and as shown in fig. 4, page display, control binding, page refresh, and change related operations are all executed in an output layer interface, and general methods such as page layout, initializing a control, a control style, a page style, refreshing page data, and the like are all included in a hidden layer (obtained by early-stage model training). The main responsibility of the front-end developer is to interface the back-end interface to refresh the page data, or return data according to the back-end interface, call the universal corresponding universal interface to refresh the page, because all the universal public methods of the front-end are encapsulated, the code reuse rate is improved, so that the development amount of the front-end page development is reduced, and meanwhile, the page development is assembled by inputting parameters through the input layer, thereby ensuring the consistency of the page style and being more convenient for the front-end page to refresh the style in a unified way. In one embodiment, the personalization logic of all output layers is implemented by a common method of hiding layers.
The front-end page generation system provided by the present invention is described below, and the front-end page generation system described below and the front-end page generation method described above may be referred to in correspondence with each other.
Fig. 5 is a schematic structural diagram of a front-end page generating system provided by the present invention, and as shown in fig. 5, the present invention provides a front-end page generating system, which includes a front-end page layout parameter obtaining module 501 and a front-end page generating module 502, where the front-end page layout parameter obtaining module 501 is configured to obtain layout parameters of a front-end page to be designed according to layout requirements of the front-end page to be designed; the front-end page generating module 502 is configured to input the layout parameters into a front-end page generating model to obtain a target front-end page, where the front-end page generating model is obtained by training a neural network according to sample layout parameters and sample front-end pages corresponding to the sample layout parameters.
In the present invention, the front-end page layout parameter obtaining module 501 first determines the layout requirements of the front-end page to be designed at this time according to the business requirements, including control parameters and control logic parameters, where the control parameters are mainly the types of the required controls (e.g., text input box, pull-down box, date control, etc.) and the layouts of the controls (e.g., the positions, sizes, colors, etc. of the controls in the page), and the control logic parameters are mainly the general logics of the controls (e.g., whether the password box can display the password, and the text information in the plain text button can be copied by long-press of the mouse). In addition, the front-end page layout parameter obtaining module 501 may also determine the style and the general logic of the front-end page according to the layout requirement, so as to obtain the front-end page meeting the style of the preset style when the target front-end page is subsequently generated.
Further, according to each business requirement, the front-end page of a specific style or styles can be programmed through the front-end page generation model in the front-end page generation module 502, so as to generate a target front-end page. Because the front-end page generation model is used as the black box, the generated front-end page layout and style are unified, and the problem of general style conflict does not exist. Meanwhile, the newly added front-end developer only needs to input the input items (namely layout parameters) of the front-end page to be designed into the model, and the model can output the front-end page and the corresponding general logic, so that the front-end developer only needs to develop the specific logic of the page in the personalized interface of the front end. Preferably, in an embodiment, when a control needs to be added or reduced in an existing front page, the general logic of the page does not need to be changed, and only one item needs to be added or reduced in the input items.
According to the front-end page generation system provided by the invention, the front-end page generation model obtained through neural network training is only required to be input into the front-end input layer of the model through a series of layout parameters and call the trained logic method of the hidden layer in the model, so that the automatically generated front-end page is output, and a developer does not need to re-develop the codes of the front-end page when changing the business requirements, so that the front-end development efficiency is improved.
On the basis of the embodiment, the system further comprises a sample analysis module, a sample set construction module and a training module, wherein the sample analysis module is used for analyzing the sample front-end page to obtain the sample control parameters and the sample control logic parameters of the sample front-end page; the sample set construction module is used for obtaining sample layout parameters according to the sample control parameters and the sample control logic parameters, and constructing a training sample set according to the sample layout parameters and the sample front-end page; and the training module is used for inputting the training sample set into a neural network for training to obtain a front-end page generation model.
In the invention, the logic of the neural network comprises three parts, namely an input layer, a hidden layer and an output layer. Firstly, a sample analysis module analyzes a sample front-end page to obtain a sample control parameter and a sample logic parameter of each sample front-end page; then, the sample set construction module takes the sample control parameters and the sample logic parameters as sample layout parameters, constructs a sample front-end page corresponding to the sample layout parameters as a training sample set, and inputs the training sample set into an input layer, wherein the input layer comprises all controls (such as a textbox control, a password box control, a tab control and the like), general control parameters (such as control positions, control sizes and the like) and general page logic parameters (such as control attributes, control functions and the like).
Further, the neural network is trained through a training module, specifically, the hidden layer executes the compiling of the general control parameters based on the control layout, the control typesetting and the page logic of the sample front-end page according to the sample layout parameters output by the input layer, and outputs the control logic and the page logic, so as to generate a corresponding front-end page according to the control logic and the page logic, wherein the control logic is mainly used for generating a corresponding control logic function for the front-end page (for example, the control function of the front-end page is constructed through the control logic according to the input layout parameters), and the page logic is mainly used for generating a corresponding common style for the front-end page (for example, a page style is generated for the front-end page through the page logic according to the input layout parameters); and finally, the output layer outputs the generated target front-end page and outputs control self-defined logic corresponding to the target front-end page, so that front-end developers can interface background interfaces and supplement some self-defined control logic. And after the preset training times are reached, stopping training by the training module, thereby obtaining a trained front-end page generation model.
On the basis of the embodiment, the sample set construction module comprises a label marking unit and a training sample set generation unit, wherein the label marking unit is used for acquiring the style type of the sample front-end page and marking a label to obtain a target sample front-end page; and the training sample set generating unit is used for constructing and obtaining a training sample set according to the sample layout parameters and the front end page of the target sample.
On the basis of the above embodiment, the training module includes a first training unit and a second training unit, where the first training unit is configured to input the training sample set into the neural network through an input layer of the neural network to perform layer-by-layer training, so as to obtain a sample front end generation page and a pre-trained neural network; the second training unit is used for reversely calling the control logic and the page logic which are obtained by training in the hidden layer of the pre-trained neural network through the output layer of the pre-trained neural network, updating the sample front-end generated page according to the control logic and the page logic, and obtaining a front-end page generation model if the preset training times are met.
On the basis of the embodiment, the system further comprises a front-end page layout change parameter obtaining module and a front-end page updating module, wherein the front-end page layout change parameter obtaining module is used for obtaining the layout change requirement of the target front-end page, and the layout change requirement comprises a front-end page control change parameter and a front-end page control logic change parameter; and the front-end page updating module is used for inputting the layout change requirement into the front-end page generation model, updating the target front-end page and obtaining the updated target front-end page.
On the basis of the above embodiment, the front-end page layout change parameter obtaining module includes: and the change parameter receiving unit is used for acquiring the layout change requirement of the target front-end page through a rear-end interface, and the rear-end interface is connected with the output layer of the front-end page generation model.
In the invention, the change parameter receiving unit can acquire the layout change requirement of the front-end page through the back-end interface, and then input the corresponding data element (front-end page control change parameter) and the logic parameter (front-end page control logic change parameter) into the model. Calling a page logic method and a public style obtained by training in the early stage in the hidden layer by the model according to the input parameters, displaying a corresponding control, and packaging the control parameters to the output layer; the output layer can execute the logic of the personalized control element and reversely call the general method of the hidden layer, so that the page is refreshed, and the updated target front-end page is obtained.
The system provided by the present invention is used for executing the above method embodiments, and for the specific processes and details, reference is made to the above embodiments, which are not described herein again.
Fig. 6 is a schematic structural diagram of an electronic device provided in the present invention, and as shown in fig. 6, the electronic device may include: a processor (processor)601, a communication interface (communication interface)602, a memory (memory)603 and a communication bus 604, wherein the processor 601, the communication interface 602 and the memory 603 complete communication with each other through the communication bus 604. The processor 601 may call logic instructions in the memory 603 to perform a front-end page generation method comprising: acquiring layout parameters of a front-end page to be designed according to the layout requirements of the front-end page to be designed; and inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
In addition, the logic instructions in the memory 603 may be implemented in the form of software functional units and stored in a computer readable storage medium when the logic instructions are sold or used as independent products. 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 instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-only memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
In another aspect, the present invention also provides a computer program product comprising a computer program stored on a non-transitory computer-readable storage medium, the computer program comprising program instructions which, when executed by a computer, enable the computer to perform the front-end page generation method provided by the above methods, the method comprising: acquiring layout parameters of a front-end page to be designed according to the layout requirements of the front-end page to be designed; and inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
In yet another aspect, the present invention further provides a non-transitory computer-readable storage medium, on which a computer program is stored, the computer program being implemented by a processor to perform the front-end page generation method provided in the foregoing embodiments, the method including: acquiring layout parameters of a front-end page to be designed according to the layout requirements of the front-end page to be designed; and inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
The above-described embodiments of the apparatus are merely illustrative, and 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 modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware. With this understanding in mind, the above-described technical solutions may be embodied in the form of a software product, which can be stored in a computer-readable storage medium such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in the embodiments or some parts of the embodiments.
Finally, it should be noted that: the above examples are only intended to illustrate the technical solution of the present invention, but not to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.
Claims (10)
1. A front-end page generation method is characterized by comprising the following steps:
acquiring layout parameters of a front-end page to be designed according to the layout requirements of the front-end page to be designed;
and inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
2. The front-end page generation method of claim 1, wherein the front-end page generation model is obtained by:
analyzing a sample front-end page to obtain sample control parameters and sample control logic parameters of the sample front-end page;
obtaining a sample layout parameter according to the sample control parameter and the sample control logic parameter, and constructing a training sample set according to the sample layout parameter and the sample front-end page;
and inputting the training sample set into a neural network for training to obtain a front-end page generation model.
3. The front-end page generating method of claim 2, wherein the constructing a training sample set according to the sample layout parameters and the sample front-end page comprises:
obtaining the style type of the sample front-end page and marking a label to obtain a target sample front-end page;
and constructing a training sample set according to the sample layout parameters and the front end page of the target sample.
4. The method according to claim 2, wherein the inputting the training sample set into a neural network for training to obtain a front-end page generation model comprises:
inputting the training sample set into the neural network through an input layer of the neural network to carry out layer-by-layer training, and obtaining a sample front end generation page and a pre-trained neural network;
and reversely calling the control logic and the page logic which are obtained by training in the hidden layer of the pre-trained neural network through the output layer of the pre-trained neural network, updating the sample front-end generated page according to the control logic and the page logic, and obtaining a front-end page generation model if the preset training times are met.
5. The front-end page generating method of claim 1, wherein after inputting the layout parameters into a front-end page generating model to obtain a target front-end page, the method further comprises:
acquiring a layout change requirement of the target front-end page, wherein the layout change requirement comprises front-end page control change parameters and front-end page control logic change parameters;
and inputting the layout change requirement into the front-end page generation model, and updating the target front-end page to obtain an updated target front-end page.
6. The front-end page generating method of claim 5, wherein the obtaining of the layout change requirement of the target front-end page comprises:
and acquiring the layout change requirement of the target front-end page through a rear-end interface, wherein the rear-end interface is connected with the output layer of the trained front-end page generation model.
7. The front-end page generation method of claim 2, wherein the neural network is a non-fully-connected neural network.
8. A front end page generation system, comprising:
the front-end page layout parameter acquisition module is used for acquiring the layout parameters of the front-end page to be designed according to the layout requirements of the front-end page to be designed;
and the front-end page generation module is used for inputting the layout parameters into a front-end page generation model to obtain a target front-end page, wherein the front-end page generation model is obtained by training a neural network according to the sample layout parameters and the sample front-end page corresponding to the sample layout parameters.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the front-end page generation method according to any one of claims 1 to 7 when executing the computer program.
10. A non-transitory computer readable storage medium having stored thereon a computer program, which when executed by a processor implements the steps of the front-end page generation method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111275584.XA CN114089999A (en) | 2021-10-29 | 2021-10-29 | Front-end page generation method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111275584.XA CN114089999A (en) | 2021-10-29 | 2021-10-29 | Front-end page generation method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114089999A true CN114089999A (en) | 2022-02-25 |
Family
ID=80298391
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111275584.XA Pending CN114089999A (en) | 2021-10-29 | 2021-10-29 | Front-end page generation method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114089999A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116204184A (en) * | 2023-04-28 | 2023-06-02 | 深圳华龙讯达信息技术股份有限公司 | UI editing method, system and storage medium for improving page style adaptation |
-
2021
- 2021-10-29 CN CN202111275584.XA patent/CN114089999A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116204184A (en) * | 2023-04-28 | 2023-06-02 | 深圳华龙讯达信息技术股份有限公司 | UI editing method, system and storage medium for improving page style adaptation |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20200218519A1 (en) | Methods and systems for creating applications using scene trees | |
| CN105511873B (en) | User interface control display method and device | |
| Szekely | Retrospective and challenges for model-based interface development | |
| Boduch | React and react native | |
| US10191721B1 (en) | Systems and methods for generating functional application designs | |
| CN110825362A (en) | Low-code application software development system and method | |
| US11816459B2 (en) | Graphical user interface programming system | |
| Dabit | React Native in action | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| US11113578B1 (en) | Learned model-based image rendering | |
| US20130080879A1 (en) | Methods and apparatus providing document elements formatting | |
| CN111936966A (en) | Design system for creating graphical content | |
| CN112685025A (en) | Method and system for quickly building front-end page | |
| CN114089999A (en) | Front-end page generation method and system | |
| CN112799670B (en) | Method and system for unified multi-terminal logic development | |
| CN117234513A (en) | Page data file generation method and device, electronic equipment, medium and product | |
| Dürschmid et al. | Towards architectural styles for Android app software product lines | |
| de Lange et al. | Collaborative wireframing for model-driven web engineering | |
| CN112486378B (en) | Graph generation method, device, terminal and storage medium | |
| CN114489619A (en) | Interface view display method, terminal equipment and computer readable storage medium | |
| CN114090002A (en) | Front-end interface construction method and device, electronic equipment and storage medium | |
| CN112700555A (en) | High configurable configuration 3D data visualization implementation method, electronic device and storage medium | |
| CN110312990A (en) | Configuration method and system | |
| Gordon | Isomorphic Web Applications: Universal Development with React | |
| CN111722844B (en) | Design method and device of dynamic rich text component based on Web |
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 |