CN114546381A - Front-end page code file generation method and device, electronic equipment and storage medium - Google Patents
Front-end page code file generation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN114546381A CN114546381A CN202210114443.8A CN202210114443A CN114546381A CN 114546381 A CN114546381 A CN 114546381A CN 202210114443 A CN202210114443 A CN 202210114443A CN 114546381 A CN114546381 A CN 114546381A
- Authority
- CN
- China
- Prior art keywords
- end page
- page code
- file
- interface
- code file
- 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
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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention provides a front-end page code file generation method, a device, electronic equipment and a storage medium, wherein the front-end page code file generation method comprises the following steps: acquiring a target interface document, and acquiring interface parameters based on the target interface document; and obtaining a front end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components. The front-end page code file generation method, the front-end page code file generation device, the electronic equipment and the storage medium provided by the invention can overcome the defects that the front-end page code compiling efficiency is low, mistakes are easy to make and development resources are wasted in the prior art, improve the compiling efficiency of the front-end page code and save the development resources.
Description
Technical Field
The invention relates to the technical field of internet, in particular to a front-end page code file generation method and device, electronic equipment and a storage medium.
Background
At present, most pages in a background management system are composed of forms and forms, the business logic is basically similar, the forms and the forms need to be written manually every time a new page needs to be online, and the efficiency is low. Some forms and forms have their own style and data requirements, so when developers write forms and forms, spelling errors of the forms or the forms are easily caused by negligence, and then time and energy are needed to check the errors, thereby seriously wasting development resources. Therefore, the existing method for writing the front-end page code has the problems of low writing efficiency of the front-end page code, easy error and waste of development resources.
Disclosure of Invention
The invention provides a front-end page code file generation method and device, electronic equipment and a storage medium, which are used for solving the defects of low front-end page code compiling efficiency, high error probability and development resource waste in the prior art, improving the front-end page code compiling efficiency and saving the development resource.
The invention provides a front-end page code file generation method, which comprises the following steps:
acquiring a target interface document, and acquiring interface parameters based on the target interface document;
and obtaining a front end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
According to the method for generating the front end page code file provided by the invention, the method for obtaining the front end page code file based on the interface parameters and the preset multiple form components and/or multiple form components comprises the following steps:
obtaining a front-end page code template based on a data structure corresponding to the interface parameters and the plurality of form components and/or the plurality of form components;
and obtaining the front-end page code file based on the interface parameters and the front-end page code template.
According to the method for generating the front-end page code file provided by the invention, the obtaining of the front-end page code file based on the interface parameters and the front-end page code template comprises the following steps:
injecting the interface parameters into the front-end page code template;
obtaining an vue file and a JS file based on the front-end page code template injected with the interface parameters; wherein the front end page code file includes the vue file and the JS file.
According to the method for generating a front-end page code file provided by the present invention, the obtaining of the front-end page code file based on the interface parameter and the front-end page code template further includes:
creating a front-end page code file directory;
obtaining a routing file based on the vue file, the JS file and the front end page code file directory; wherein the front end page code file further comprises the routing file.
According to the method for generating the front-end page code file provided by the invention, the obtaining of the interface parameters based on the target interface document comprises the following steps:
crawling original interface parameters in the target interface document based on a crawler framework;
and converting the original interface parameters into interface parameters in a target format.
According to the method for generating the front-end page code file provided by the invention, the crawling of the original interface parameters in the target interface document based on the crawler frame comprises the following steps:
creating a browser object based on the crawler frame;
jumping to the target interface document based on the browser object;
and analyzing the target interface document to obtain the original interface parameters.
According to the method for generating the front-end page code file provided by the invention, the acquiring of the target interface document comprises the following steps:
and receiving input front-end data interface address information and front-end page file information, and generating the target interface document.
The invention also provides a front end page code file generating device, which comprises:
the interface acquisition module is used for acquiring a target interface document and acquiring interface parameters based on the target interface document;
and the code file generating module is used for obtaining a front-end page code file based on the interface parameters and a plurality of preset table components and/or a plurality of preset form components.
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 code file 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, implements the steps of the front end page code file generation method as described in any of the above.
The invention also provides a computer program product comprising a computer program which, when executed by a processor, carries out the steps of the method for generating a front-end page code file as described in any of the above.
According to the front-end page code file generation method and device, the electronic equipment and the storage medium, the interface parameters are automatically acquired through the target interface document, the preset multiple form assemblies and/or multiple form assemblies are combined, the front-end page code file is automatically acquired, encoding personnel do not need to manually write the front-end page codes in the whole process, the process of developing the front-end page codes by the encoding personnel is omitted, and the development efficiency of the front-end page is improved.
In addition, the iterative update of the front-end page can be realized by changing the target interface document, and the method is convenient and quick. Moreover, the processes of automatically generating the front-end page are unified, so that the code normalization is improved, and the development efficiency of encoding personnel is improved.
In the method for generating the front-end page code file, the front-end page is automatically generated according to the data structures of different interface parameters, and the front-end page can comprise a series of functions such as interface request, form verification, form editing, form viewing and the like.
Based on the interface parameters, selecting a specific target form component and/or target form component from a plurality of preset form components and/or form components, matching corresponding components and rules according to different data structures of the interface parameters, and automatically performing compatible processing on functions of the form components and/or the form components.
And the interface parameters in the target interface document comprise access parameters, access parameters or interface addresses, the front-end page can realize the access of the back-end server through the interface parameters, and encoding personnel do not need to perform joint debugging on the interfaces of the front-end page and the back-end server. The encoding personnel do not need to manually write the front-end page code, and do not need to carry out interface joint debugging on the front-end page code and the rear-end server code, so that the generation of code faults is reduced.
Therefore, the method for generating the front-end page code file provided by the invention can overcome the defects of low compiling efficiency of the front-end page code, easy error and development resource waste in the prior art, improve the compiling efficiency of the front-end page code and save the development resource.
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 diagram of a front-end page code file generation method provided by the present invention;
FIG. 2 is a schematic structural diagram of a front-end page code file generation apparatus provided in the present invention;
fig. 3 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 front end page code file generating method, apparatus, electronic device and storage medium of the present invention are described below with reference to fig. 1 to 3.
As shown in fig. 1, the method for generating a front-end page code file provided by the present invention includes:
and step 110, acquiring a target interface document, and acquiring interface parameters based on the target interface document.
It can be understood that the target interface document includes an interface for data interaction between the front-end page and the back-end server. The interface parameter refers to the access parameter or the exit parameter corresponding to the interface for data interaction between the front-end page and the back-end server. The target format is also a data format of the preset interface parameters.
And after the target interface document is obtained, performing data analysis on the target interface document based on a preset document analysis rule to obtain interface parameters in a target format.
And step 120, obtaining a front-end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
It can be understood that, based on the interface parameters, a target form component and/or a target form component matching the interface parameters is selected from a plurality of preset form components and/or a plurality of preset form components, and then the interface parameters are injected into the target form component and/or the target form component, so as to obtain the front-end page code file.
The table component may be a native table, a jquery-enabled table, an angular-enabled table, a exact-enabled table, or an vue-enabled table. In this embodiment, the form component may preferably support vue forms. Wherein vue is also vue.js, which is a progressive framework for constructing a data-driven Web (World Wide Web) interface.
The front end page code files may include an vue file, a JS file, and a routing file. The JS file is also JavaScript, and is a lightweight, interpreted, or just-in-time programming language with function priority.
vue the core of the file is the view layer in MVC mode, and at the same time, vue file can also conveniently obtain data update and realize the interaction of view and model through specific method inside the component. vue file can better implement code reuse and reduce workload.
In the MVC mode, M (i.e., Model) refers to a service Model, V (i.e., View) refers to a user interface, and C (i.e., Controller) refers to a Controller, and the purpose of using the MVC Model is to separate the implementation codes of M and V, so that different expressions can be used by the same program.
In some embodiments, obtaining the front-end page code file based on the interface parameters and a preset plurality of table components and/or a plurality of form components comprises:
obtaining a front-end page code template based on a data structure corresponding to the interface parameters and a plurality of form components and/or a plurality of form components;
and obtaining a front-end page code file based on the interface parameters and the front-end page code template.
It can be understood that the data interface corresponding to the interface parameter may be a corresponding data type in the interface parameter, the number of the interface parameters, the distribution of the interface parameters, and the like.
And selecting a target form component and/or a target form component from a plurality of preset form components and/or a plurality of preset form components based on the data structure corresponding to the interface parameters, and obtaining a front-end page code template based on the target form component and/or the target form component.
It should be noted that the front-end page code template defines the business logic of the front-end page code and the required data, and the front-end page code template can be run by injecting the corresponding data.
In some embodiments, obtaining the front-end page code file based on the interface parameters and the front-end page code template includes:
injecting interface parameters into a front-end page code template;
obtaining vue files and JS files based on the front-end page code template injected with the interface parameters; the front end page code file includes, among others, an vue file and a JS file.
It can be understood that the front-end page code template includes vue code template and a JS code template, a vue file can be obtained after injecting the interface parameters into the vue code template file, and a JS file can be obtained after injecting the interface parameters into the JS template file.
In some embodiments, obtaining the front-end page code file based on the interface parameters and the front-end page code template further includes:
creating a front-end page code file directory;
obtaining a routing file based on the vue file, the JS file and the front end page code file directory; wherein the front end page code file further comprises a routing file.
It is to be understood that the front end page code file directory, that is, the file directory of the vue file and the file directory of the JS file, can be accessed based on the front end page code file directory after the front end page code file directory is acquired. Further, based on the routing file, vue file and the JS file can be accessed.
In some embodiments, deriving the interface parameters based on the target interface document comprises:
crawling original interface parameters in a target interface document based on a crawler framework;
converting the original interface parameters into interface parameters in a target format; wherein the target format is json format.
It is understood that the crawler framework in this embodiment is a framework written based on Python language.
In some embodiments, crawling raw interface parameters in a target interface document based on a crawler framework includes:
creating a browser object (i.e., browser object) based on the crawler frame;
skipping to a target interface document based on the browser object;
and analyzing the target interface document to obtain the original interface parameters.
It can be understood that the crawler frame can be a puppeteer frame, the input parameter or the output parameter of the interface in the target interface document is obtained, according to the input parameter or the output parameter crawled by the puppeteer frame, the code template, namely the vue code template and the JS code template, is combined to generate an increase/deletion check file (namely fs. write file), the function of increase/deletion check is achieved, the codes are basically not needed to be manually written, and form operations such as check and the like are supported.
Js tool engine, which provides an advanced application program interface (i.e., API) to control browsers such as a Chrome browser or Chrome browser via the DevTools protocol.
The puppeteer framework can generate a page PDF (Portable Document Format), capture single-page application, generate pre-rendering content (namely server-side rendering), automatically submit a form, perform UI (namely interface design) test, input a keyboard and the like, and create an automatic test environment which is updated from time to time. And directly executing a test in the Chrome browser of the latest version by using the latest JavaScript and browser functions, capturing a timeline trace of a website to help analyzing a performance problem, and testing the browser extension.
The browser objects include a window object, a navigator object, a location object, a history object, and a screen object.
The window object represents a window opened in the browser; navigator objects contain information about the browser; the location object contains information about the current URL (uniform resource locator); the history object represents a history record object and is mainly used for forward and backward operations among pages; the screen object contains information about the client display screen.
In some embodiments, parsing the target interface document to obtain the original interface parameters includes:
the Document Object Model (DOM) structure of the target interface Document is parsed, the original interface parameters.
It will be appreciated that the document object model is a standard programming interface for the W3C organization recommended processing extensible markup language. The document object model is a platform and programming language independent application program interface that can dynamically access programs and scripts to update its content, structure and style of web documents, where HTMl and XML documents are defined by a declarative portion. The document may be further processed and the results of the processing may be added to the current page. The document object model is a tree-based application program interface document that requires that the entire document be represented in memory during processing. Another simple application program interface is event-based SAX (i.e., simple API for XML), which can be used to process XML documents with large data volumes that are not suitable for being processed in memory in their entirety.
SAX is an alternative to XML parsing, and is both an interface and a software package. The SAX has the working principle that the document is sequentially scanned, when the document is scanned to the places of beginning and ending, beginning and ending elements, ending the document and the like, an event processing function is informed, the event processing function performs corresponding actions, and then the same scanning is continued until the document is ended; the operation of SAX resolution is relatively complex.
In some embodiments, obtaining the target interface document comprises:
and receiving input front-end data interface address information and front-end page file information to generate a target interface document.
It is understood that, in this embodiment, a tool for interacting with a user may be provided, and after the user inputs the address information of the front-end data interface and the information of the front-end page file based on the tool, the tool may automatically generate the corresponding target interface document. The front-end page file information comprises a file directory and file name information of the front-end page. Based on the tool, the user can conveniently and quickly operate the target interface document so as to operate the front-end page.
In some embodiments provided by the present invention, a specific flow of the front-end page code file generation method is as follows:
firstly, acquiring the input or output parameter of a data interface between a front-end page and a back-end server through a target interface document, and converting the input or output parameter into a specific json format. Specifically, a crawler frame is introduced firstly, a browser object is created by using a launch method of the crawler frame, then the browser object is created and jumps to a target interface document page, data analysis is carried out according to a specific document object model structure of the target interface document page, and finally data in a json format are spliced into data needed.
And secondly, according to the project requirement of the front-end page, combining the form component and the form component, and extracting a code template based on the data format corresponding to the json format data. And defining different code templates according to different data types in the data by using the json format data obtained in the first step as a basis for the data and the events of the code templates. For example, the code template may be a table with query conditions, a table with a new function/editing function, a table with uploading and checking functions, and the like, and then compatible processing of various functions is performed inside the code template, that is, a checking function is set for the table component.
And thirdly, generating vue files, JS files and routing files through the json format data and the code template obtained in the previous step. Specifically, a defined code template file is read through fs.readfile, a corresponding code template file is selected for the json format data, data is injected, and the code template file with the injected data is written into vue files and JS files through fs.writefile. The vue file and the JS file can create different file directories, and then a routing file is generated according to the created vue file, the JS file and the file directory data.
In summary, the method for generating a front-end page code file provided by the present invention includes: acquiring a target interface document, and acquiring interface parameters based on the target interface document; and obtaining a front end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
According to the front-end page code file generation method provided by the invention, the interface parameters can be automatically acquired based on the target interface document, and the front-end page code file can be automatically acquired by combining a plurality of preset table components and/or a plurality of preset form components, so that the front-end page code is not required to be manually compiled by a coder in the whole process, the process of developing the front-end page code by the coder is omitted, and the development efficiency of the front-end page is improved.
In addition, the iterative update of the front-end page can be realized by changing the target interface document, and the method is convenient and quick. Moreover, the processes of automatically generating the front-end page are unified, so that the code normalization is improved, and the development efficiency of encoding personnel is improved.
In the method for generating the front-end page code file, the front-end page is automatically generated according to the data structures of different interface parameters, and the front-end page can comprise a series of functions such as interface request, form verification, form auditing, form editing, form viewing and the like.
Based on the interface parameters, selecting a specific target form component and/or target form component from a plurality of preset form components and/or form components, matching corresponding components and rules according to different data structures of the interface parameters, and automatically performing compatible processing on functions of the form components and/or the form components.
And the interface parameters in the target interface document comprise access parameters, access parameters or interface addresses, the front-end page can realize the access of the back-end server through the interface parameters, and encoding personnel do not need to perform joint debugging on the interfaces of the front-end page and the back-end server. The encoding personnel do not need to manually write the front-end page code, and do not need to carry out interface joint debugging on the front-end page code and the rear-end server code, thereby reducing the generation of code faults.
Therefore, the method for generating the front-end page code file provided by the invention can overcome the defects of low writing efficiency of the front-end page code, easy error and development resource waste in the prior art, improve the writing efficiency of the front-end page code and save the development resource.
The front end page code file generation device provided by the present invention is described below, and the front end page code file generation device described below and the front end page code file generation method described above may be referred to in correspondence with each other.
As shown in fig. 2, the front end page code file generating apparatus 200 provided by the present invention includes: an interface acquisition module 210 and a code file generation module 220.
The interface obtaining module 210 is configured to obtain a target interface document, and obtain an interface parameter based on the target interface document.
It can be understood that the target interface document includes an interface for data interaction between the front-end page and the back-end server. The interface parameter refers to the access parameter or the exit parameter corresponding to the interface for data interaction between the front-end page and the back-end server. The target format is also a data format of the preset interface parameters.
And after the target interface document is obtained, carrying out data analysis on the target interface document based on a preset document analysis rule to obtain interface parameters.
The code file generating module 220 is configured to obtain a front-end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
It is to be understood that the form component may be a native form, a jquery-enabled form, an angular-enabled form, a exact-enabled form, or an vue-enabled form. In this embodiment, the form component may preferably support vue forms.
The front end page code files may include an vue file, a JS file, and a routing file.
vue the core of the file is the view layer in MVC mode, and at the same time, vue file can also conveniently obtain data update and realize the interaction of view and model through specific method inside the component. vue file can better implement code reuse and reduce workload.
In the MVC mode, M (i.e., Model) refers to a service Model, V (i.e., View) refers to a user interface, and C (i.e., Controller) refers to a Controller, and the purpose of using the MVC Model is to separate the implementation codes of M and V, so that different expressions can be used by the same program.
In some embodiments, the code file generation module 220 includes: the device comprises a template generating unit and a code file generating unit.
The template generating unit is used for obtaining a front-end page code template based on the data structure corresponding to the interface parameters and the plurality of form components and/or the plurality of form components.
The code file generating unit is used for obtaining a front-end page code file based on the interface parameters and the front-end page code template.
It can be understood that the data interface corresponding to the interface parameter may be a corresponding data type in the interface parameter, the number of the interface parameters, the distribution of the interface parameters, and the like.
And selecting a target form component and/or a target form component from a plurality of preset form components and/or a plurality of preset form components based on the data structure corresponding to the interface parameter, and obtaining a front-end page code template based on the target form component and/or the target form component.
It should be noted that the front-end page code template defines the business logic of the front-end page code and the required data, and the front-end page code template can be run by injecting the corresponding data.
In some embodiments, the code file generating unit includes: a parameter injection unit and a template writing unit.
The parameter injection unit is used for injecting interface parameters into the front-end page code template.
The template writing unit is used for obtaining an vue file and a JS file based on the front-end page code template injected with the interface parameters; the front end page code file includes, among others, an vue file and a JS file.
It can be understood that the front-end page code template includes vue code template and a JS code template, a vue file can be obtained after injecting the interface parameters into the vue code template file, and a JS file can be obtained after injecting the interface parameters into the JS template file.
In some embodiments, the code file generating unit further comprises: a directory creating unit and a routing file generating unit.
The directory creating unit is used for creating a front end page code file directory.
The route file generation unit is used for obtaining a route file based on the vue file, the JS file and the front end page code file directory; wherein the front end page code file further comprises a routing file.
It is to be understood that the front end page code file directory, that is, the file directory of the vue file and the file directory of the JS file, can be accessed based on the front end page code file directory after the front end page code file directory is acquired. Further, based on the route file, the vue file and the JS file can be accessed.
In some embodiments, the interface acquisition module 210 includes: a crawling unit and a format conversion unit.
The crawling unit is used for crawling original interface parameters in the target interface document based on the crawler frame.
The format conversion unit is used for converting the original interface parameters into the interface parameters of the target format; wherein the target format is json format.
It is understood that the crawler framework in this embodiment is a framework written based on Python language.
In some embodiments, the crawling unit comprises: an object creating unit, a jumping unit and a parsing unit.
The object creating unit is used for creating the browser object based on the crawler frame.
And the jumping unit is used for jumping to the target interface document based on the browser object.
The analysis unit is used for analyzing the target interface document to obtain the original interface parameters.
The crawler frame can be a puppeteer frame, the input parameter or the output parameter of the interface in the target interface document is obtained, and according to the input parameter or the output parameter crawled by the puppeteer frame, the code template, namely the vue code template and the JS code template, is combined to generate the file for increasing, deleting, modifying and checking, so that the function of increasing, deleting, modifying and checking is achieved, the code is basically not required to be manually written, and form operations such as checking and the like are supported.
Js tool engine, which provides an advanced application program interface to control browsers such as a Chrome browser or Chrome browser via the DevTools protocol.
The puppeteer framework can generate page PDFs, grab single-page applications, generate prerendered contents, automatically submit forms, perform UI tests, input keyboards and the like, and create an automatic test environment which is updated constantly. And directly executing a test in the Chrome browser of the latest version by using the latest JavaScript and browser functions, capturing a timeline trace of a website to help analyzing a performance problem, and testing the browser extension.
The browser objects include a window object, a navigator object, a location object, a history object, and a screen object.
The window object represents a window opened in the browser; navigator objects contain information about the browser; the location object contains information about the current URL; the history object represents a history record object and is mainly used for forward and backward operations among pages; the screen object contains information about the client display screen.
In some embodiments, the parsing unit is further configured to parse a document object model structure of the target interface document, the original interface parameters.
It will be appreciated that the document object model is a standard programming interface for the W3C organization recommendations to handle extensible markup language. The document object model is a platform and programming language independent application program interface that can dynamically access programs and scripts to update its content, structure and style of web documents, where HTMl and XML documents are defined by a declarative portion.
The document may be further processed and the results of the processing may be added to the current page. The document object model is a tree-based application program interface document that requires that the entire document be represented in memory during processing. Another simple application program interface is event-based SAX, which can be used to process large-data-volume XML documents that are not suitable for full processing in memory.
SAX is an alternative to XML parsing, and is both an interface and a software package. The SAX has the working principle that the document is sequentially scanned, when the document is scanned to the places of beginning and ending, beginning and ending elements, ending the document and the like, an event processing function is informed, the event processing function performs corresponding actions, and then the same scanning is continued until the document is ended; the operation of SAX resolution is relatively complex.
In some embodiments, the interface acquisition module 210 includes: an interface document generating unit.
The interface document generating unit is used for receiving the input front-end data interface address information and the front-end page file information and generating a target interface document.
It is understood that, in this embodiment, a tool for interacting with a user may be provided, and after the user inputs the address information of the front-end data interface and the information of the front-end page file based on the tool, the tool may automatically generate the corresponding target interface document. The front-end page file information comprises a file directory and file name information of the front-end page. Based on the tool, the user can conveniently and quickly operate the target interface document so as to operate the front-end page.
In summary, the apparatus for generating a front-end page code file provided by the present invention includes: an interface acquisition module 210 and a code file generation module 220. The interface obtaining module 210 is configured to obtain a target interface document, and obtain an interface parameter based on the target interface document. The code file generating module 220 is configured to obtain a front-end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
In the front-end page code file generation device provided by the invention, the interface parameters can be automatically acquired based on the target interface document, and the front-end page code file can be automatically acquired by combining a plurality of preset table components and/or a plurality of preset form components, so that the front-end page code is not required to be manually compiled by a coder in the whole process, the process of developing the front-end page code by the coder is omitted, and the development efficiency of the front-end page is improved.
In addition, the iterative update of the front-end page can be realized by changing the target interface document, and the method is convenient and quick. Moreover, the processes of automatically generating the front-end page are unified, so that the code normalization is improved, and the development efficiency of encoding personnel is improved.
In the front-end page code file generation device provided by the invention, the front-end page is automatically generated according to the data structures of different interface parameters, and the front-end page can comprise a series of functions such as interface request, form verification, form audit, form editing, form viewing and the like.
Based on the interface parameters, selecting a specific target form component and/or target form component from a plurality of preset form components and/or form components, matching corresponding components and rules according to different data structures of the interface parameters, and automatically performing compatible processing on functions of the form components and/or the form components.
And the interface parameters in the target interface document comprise access parameters, access parameters or interface addresses, the front-end page can realize the access of the back-end server through the interface parameters, and encoding personnel do not need to perform joint debugging on the interfaces of the front-end page and the back-end server. The encoding personnel do not need to manually write the front-end page code, and do not need to carry out interface joint debugging on the front-end page code and the rear-end server code, so that the generation of code faults is reduced.
Therefore, the front-end page code file generation device provided by the invention can overcome the defects of low front-end page code compiling efficiency, high error probability and development resource waste in the prior art, improve the compiling efficiency of the front-end page code and save the development resource.
The electronic device, the computer program product, and the storage medium provided by the present invention are described below, and the electronic device, the computer program product, and the storage medium described below may be referred to in correspondence with the front-end page code file generation method described above.
Fig. 3 illustrates a physical structure diagram of an electronic device, which may include, as shown in fig. 3: a processor (processor)310, a communication Interface (communication Interface)320, a memory (memory)330 and a communication bus 340, wherein the processor 310, the communication Interface 320 and the memory 330 communicate with each other via the communication bus 340. The processor 310 may call logic instructions in the memory 330 to perform a front end page code file generation method comprising:
and step 120, obtaining a front-end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
In addition, the logic instructions in the memory 330 may be implemented in the form of software functional units and stored in a computer readable storage medium when the software functional units 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: a U-disk, a portable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk, and various media capable of storing program codes.
In another aspect, the present invention also provides a computer program product, the computer program product includes a computer program, the computer program can be stored on a non-transitory computer readable storage medium, when the computer program is executed by a processor, the computer can execute the front end page code file generation method provided by the above methods, the method includes:
and step 120, obtaining a front-end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
In still another aspect, the present invention also provides a non-transitory computer-readable storage medium, on which a computer program is stored, the computer program, when being executed by a processor, is used for implementing the method for generating a front-end page code file provided by the above methods, the method including:
and step 120, obtaining a front-end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
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 (11)
1. A method for generating a front-end page code file, comprising:
acquiring a target interface document, and acquiring interface parameters based on the target interface document;
and obtaining a front end page code file based on the interface parameters and a plurality of preset form components and/or a plurality of preset form components.
2. The method for generating a front end page code file according to claim 1, wherein the obtaining a front end page code file based on the interface parameters and a plurality of preset table components and/or a plurality of preset form components comprises:
obtaining a front-end page code template based on a data structure corresponding to the interface parameters and the plurality of form components and/or the plurality of form components;
and obtaining the front-end page code file based on the interface parameters and the front-end page code template.
3. The method for generating a front-end page code file according to claim 2, wherein the obtaining the front-end page code file based on the interface parameters and the front-end page code template includes:
injecting the interface parameters into the front-end page code template;
obtaining an vue file and a JS file based on the front-end page code template injected with the interface parameters; wherein the front end page code file includes the vue file and the JS file.
4. The front-end page code file generation method according to claim 3, wherein obtaining the front-end page code file based on the interface parameter and the front-end page code template further includes:
creating a front-end page code file directory;
obtaining a routing file based on the vue file, the JS file and the front end page code file directory; wherein the front end page code file further comprises the routing file.
5. The front-end page code file generation method of any of claims 1 to 4, wherein the obtaining interface parameters based on the target interface document comprises:
crawling original interface parameters in the target interface document based on a crawler framework;
and converting the original interface parameters into interface parameters in a target format.
6. The front-end page code file generation method of claim 5, wherein the crawling of the raw interface parameters in the target interface document based on a crawler framework comprises:
creating a browser object based on the crawler frame;
jumping to the target interface document based on the browser object;
and analyzing the target interface document to obtain the original interface parameters.
7. The front-end page code file generating method of claim 1, wherein the obtaining a target interface document comprises:
and receiving input front-end data interface address information and front-end page file information, and generating the target interface document.
8. A front-end page code file generating apparatus, comprising:
the interface acquisition module is used for acquiring a target interface document and acquiring interface parameters based on the target interface document;
and the code file generating module is used for obtaining a front-end page code file based on the interface parameters and a plurality of preset table components and/or a plurality of preset form components.
9. An electronic device comprising a memory, a processor and a computer program stored on said memory and executable on said processor, characterized in that said processor when executing said program carries out the steps of the front end page code file generation method according to any of claims 1 to 7.
10. A non-transitory computer readable storage medium, having stored thereon a computer program, wherein the computer program, when being executed by a processor, implements the steps of the front end page code file generating method according to any one of claims 1 to 7.
11. A computer program product comprising a computer program, characterized in that the computer program realizes the steps of the front end page code file generation method of any one of claims 1 to 7 when executed by a processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210114443.8A CN114546381A (en) | 2022-01-30 | 2022-01-30 | Front-end page code file generation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210114443.8A CN114546381A (en) | 2022-01-30 | 2022-01-30 | Front-end page code file generation method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114546381A true CN114546381A (en) | 2022-05-27 |
Family
ID=81674096
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210114443.8A Pending CN114546381A (en) | 2022-01-30 | 2022-01-30 | Front-end page code file generation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114546381A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115114174A (en) * | 2022-08-02 | 2022-09-27 | 中航信移动科技有限公司 | Debugging method for weex page, storage medium and electronic equipment |
-
2022
- 2022-01-30 CN CN202210114443.8A patent/CN114546381A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115114174A (en) * | 2022-08-02 | 2022-09-27 | 中航信移动科技有限公司 | Debugging method for weex page, storage medium and electronic equipment |
| CN115114174B (en) * | 2022-08-02 | 2022-12-13 | 中航信移动科技有限公司 | Debugging method for weex page, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9753699B2 (en) | Live browser tooling in an integrated development environment | |
| US9009664B2 (en) | Structural search of source code | |
| US8789014B2 (en) | Managing a working set in an integrated development environment | |
| US10594769B2 (en) | Selection mapping between fetched files and source files | |
| US10447764B2 (en) | Mapping selections between a browser and the original fetched file from a web server | |
| US20190303115A1 (en) | Automated source code sample adaptation | |
| CN114138244A (en) | Method and device for automatically generating model files, storage medium and electronic equipment | |
| US11119896B1 (en) | Browser based visual debugging | |
| US9678856B2 (en) | Annotated test interfaces | |
| CN113704590A (en) | Webpage data acquisition method and device, electronic equipment and storage medium | |
| CN114546381A (en) | Front-end page code file generation method and device, electronic equipment and storage medium | |
| CN112632425B (en) | Method, device, equipment and storage medium for generating offline resource file | |
| CN113238739A (en) | Plug-in development and data acquisition method, device, electronic equipment and medium | |
| CN110162301B (en) | Form rendering method, form rendering device and storage medium | |
| CN112632333A (en) | Query statement generation method, device, equipment and computer readable storage medium | |
| CN114253537A (en) | Form generation method and device, electronic equipment and storage medium | |
| CN112307404A (en) | Document website setting method, device, equipment and medium based on source file | |
| LEHRHUBER | Pdf support for qualitative research in the cloud | |
| CN115618887B (en) | Dynamic long text internationalization method, device, equipment and storage medium | |
| CN115809089B (en) | Method for developing based on document and test driver | |
| US20220244975A1 (en) | Method and system for generating natural language content from recordings of actions performed to execute workflows in an application | |
| CN112732254B (en) | Webpage development method, webpage development device, computer equipment and storage medium | |
| US11783121B2 (en) | Whitelisting redaction systems and methods | |
| CN117075959A (en) | Method and system for splitting source codes of rich text large note web pages | |
| CN117687620A (en) | File generation method and device, terminal equipment and computer readable 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 |