CN114035859A - Front-end component generation method and system - Google Patents
Front-end component generation method and system Download PDFInfo
- Publication number
- CN114035859A CN114035859A CN202111284144.0A CN202111284144A CN114035859A CN 114035859 A CN114035859 A CN 114035859A CN 202111284144 A CN202111284144 A CN 202111284144A CN 114035859 A CN114035859 A CN 114035859A
- Authority
- CN
- China
- Prior art keywords
- component
- target
- module
- file
- template
- 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
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Abstract
The invention relates to a front-end component generation method and a system, belonging to the technical field of front-end components, wherein the method comprises the steps of receiving configuration information, determining a target universal service component template according to the configuration information, configuring configuration parameters of the target universal service component template according to the configuration information, and generating a target template file; receiving a component creation instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate the target component. The target assembly is automatically generated conveniently and quickly, the pasting error rate is reduced, and the development efficiency is improved.
Description
Technical Field
The invention belongs to the technical field of front-end components, and particularly relates to a front-end component generation method and system.
Background
With the continuous development of internet technology, the demand of internet services is increasing, and the development efficiency and accuracy are also of great importance.
In the front-end development process, for some components with similar functions and different service functions, when repeatedly writing and developing, a developer may need to modify the components in a copy and paste manner so as to meet service requirements. However, this copy-paste method not only easily results in some missing functions, but also deletes or modifies the functions of the components when modifying, so that the development efficiency is very low.
Therefore, how to automatically generate the functionally similar components becomes a technical problem to be solved urgently in the prior art.
Disclosure of Invention
The invention provides a front-end component generation method and a front-end component generation system, which are used for solving the technical problems that in the prior art, a copying and pasting mode not only easily causes some functions to be omitted, but also the functions of components are deleted or modified in a wrong way during modification, so that the development efficiency is very low.
The technical scheme provided by the invention is as follows:
in one aspect, a front-end component generation method includes:
receiving configuration information, determining a target universal service component template according to the configuration information, configuring configuration parameters of the target universal service component template according to the configuration information, and generating a target template file;
receiving a component creation instruction;
judging whether a file corresponding to the component creating instruction exists or not;
if the file does not exist, judging whether the configuration parameters are complete;
and if the configuration parameters are complete, reading the target template file to generate a target assembly.
Optionally, the method further includes:
and if the configuration parameters are incomplete, prompting that the configuration file is wrong.
Optionally, the method further includes:
and compiling a universal service component template based on the code formatting module and the preset component module.
Optionally, the compiling a general service component template based on the code formatting module and the preset component module includes:
writing ejs component templates through an ejs engine; or writing a jade component template through a jade engine.
In yet another aspect, a front-end component generation system includes: a configuration module and a processing module; the configuration module is used for receiving configuration information, determining a target universal service component template according to the configuration information, configuring configuration parameters of the target universal service component template according to the configuration information and generating a target template file;
the processing module is used for receiving a component creating instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate a target assembly.
Optionally, the processing module includes: the system comprises a code formatting module, a preset component module and a Nodejs module;
the code formatting module comprises a preter tool;
the preset component module comprises: ejs component module or jade component template;
and the Nodejs module is used for generating a target component.
The invention has the beneficial effects that:
the front-end component generation method and system provided by the embodiment of the invention receive the configuration information, determine the target universal service component template according to the configuration information, configure the configuration parameters of the target universal service component template according to the configuration information, and generate a target template file; receiving a component creation instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate the target component. The target assembly is automatically generated conveniently and quickly, the pasting error rate is reduced, and the development efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic flow chart illustrating a front-end component generation method according to an embodiment of the present invention;
fig. 2 is a schematic structural diagram of a front-end component generation system according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without any inventive step, are within the scope of the present invention.
The current front-end development technology has split the service from the original page level development into the current component level development. The development force is further reduced, the coupling of the page is reduced, the aggregation inside the component is improved, the reusability is further improved, and the development efficiency is further improved. Although the existing front-end framework development is all provided with the CLI, the CLI is internally provided with a page creation method, for a framework level creation scheme, the CLI only can help people to quickly create an empty component and introduce a file required by the component, and technical personnel are required for developing the compiling of business functions.
For modern front-end development technology, the use of components has been generalized and normalized, technicians pay more attention to the development of business components, and for the case of a large amount of business, some components need to be written repeatedly, such as functions of adding, deleting, checking, modifying and the like which are common in the front-end development process. However, this copy-paste method not only easily results in some missing functions, but also deletes or modifies the functions of the components when modifying, so that the development efficiency is very low.
Accordingly, the embodiment of the invention provides a front-end component generation method and system.
The first embodiment is as follows:
the embodiment of the invention provides a front-end component generation method.
Fig. 1 is a schematic flow chart of a front-end component generation method according to an embodiment of the present invention, and referring to fig. 1, the method according to the embodiment of the present invention may include the following steps:
and S11, receiving the configuration information, determining the target universal service component template according to the configuration information, configuring the configuration parameters of the target universal service component template according to the configuration information, and generating a target template file.
And S12, receiving a component creating instruction.
S13, judging whether the file corresponding to the component creating command exists.
And when the file exists, prompting that the file exists and terminating the generation component.
And S14, if the file does not exist, judging whether the configuration parameters are complete.
In this embodiment, the configuration parameters may be checked, and if the configuration parameters are not complete, the generation of the component is terminated. And outputting error information to guide the correction configuration, and entering the next step if the configuration information is complete and the verification is successful.
And S15, if the configuration parameters are complete, reading the target template file to generate the target assembly.
In the embodiment, the template file is read, and the variable replacement of the template file is completed; in this embodiment, the target component may be generated under the current directory.
Optionally, the method further includes: and if the configuration parameters are not complete, prompting that the configuration file is wrong.
Optionally, the method further includes: and compiling a universal service component template based on the code formatting module and the preset component module.
Optionally, compiling a universal service component template based on the code formatting module and the preset component module includes: writing ejs component templates through an ejs engine; or writing a jade component template through a jade engine.
Ejs is a simple set of template language, and can generate HTML page by using common JavaScript code. prettier is the name of a popular code formatting tool, which can parse codes, and use the rules set by your own to re-print out codes with a standard format, so that the codes can be output according to the required format.
In an embodiment of the invention, an ejs engine is used to write ejs component templates, leaving page dynamic placeholder variables. And compiling a configuration config.js file according to ejs template variable rules, wherein the configuration file comprises variables and required methods required by a page, such as explanatory words, binding values, placeholder default values, pull-down options, a form submission method and the like of a form. The parameters of the configuration file are read through nodjs and the required parameters are templated by format ejs. The Api provided by the template engine is called ejs and the formatted configuration is passed to generate an HTML file. The formatted code is output using the preter tool. And finally generating the required component file through a filesystems module of Nodejs.
The front-end component generation method provided by the embodiment of the invention receives the configuration information, determines the target universal service component template according to the configuration information, and configures the configuration parameters of the target universal service component template according to the configuration information to generate a target template file; receiving a component creation instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate the target component. The target assembly is automatically generated conveniently and quickly, the pasting error rate is reduced, and the development efficiency is improved.
Example two:
based on one general inventive concept, the embodiments of the present invention also provide a front-end component generation system.
Fig. 2 is a schematic structural diagram of a front-end component generation system according to an embodiment of the present invention, and referring to fig. 2, the front-end component generation system according to the embodiment of the present invention includes: a configuration module 21 and a processing module 22; the configuration module 21 is configured to receive the configuration information, determine a target universal service component template according to the configuration information, configure configuration parameters of the target universal service component template according to the configuration information, and generate a target template file.
A processing module 22 for receiving a component creation instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate the target component.
Optionally, the processing module 22 includes: the system comprises a code formatting module, a preset component module and a Nodejs module;
the code formatting module comprises a preter tool;
a preset assembly module comprising: ejs component module or jade component template;
and the Nodejs module is used for generating a target component.
With regard to the system in the above embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
The front-end component generation system provided by the embodiment of the invention generates a target template file by receiving the configuration information, determining a target universal service component template according to the configuration information, and configuring the configuration parameters of the target universal service component template according to the configuration information; receiving a component creation instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate the target component. The target assembly is automatically generated conveniently and quickly, the pasting error rate is reduced, and the development efficiency is improved.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.
It is understood that the same or similar parts in the above embodiments may be mutually referred to, and the same or similar parts in other embodiments may be referred to for the content which is not described in detail in some embodiments.
It should be noted that the terms "first," "second," and the like in the description of the present invention are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. Further, in the description of the present invention, the meaning of "a plurality" means at least two unless otherwise specified.
Any process or method descriptions in flow charts or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and alternate implementations are included within the scope of the preferred embodiment of the present invention in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the present invention.
It should be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, the various steps or methods may be implemented in software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like.
It will be understood by those skilled in the art that all or part of the steps carried by the method for implementing the above embodiments may be implemented by hardware related to instructions of a program, which may be stored in a computer readable storage medium, and when the program is executed, the program includes one or a combination of the steps of the method embodiments.
In addition, functional units in the embodiments of the present invention may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a stand-alone product, may also be stored in a computer readable storage medium.
The storage medium mentioned above may be a read-only memory, a magnetic or optical disk, etc.
In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above do not necessarily refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.
Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention, and that variations, modifications, substitutions and alterations can be made to the above embodiments by those of ordinary skill in the art within the scope of the present invention.
Claims (6)
1. A front-end component generation method, comprising:
receiving configuration information, determining a target universal service component template according to the configuration information, configuring configuration parameters of the target universal service component template according to the configuration information, and generating a target template file;
receiving a component creation instruction;
judging whether a file corresponding to the component creating instruction exists or not;
if the file does not exist, judging whether the configuration parameters are complete;
and if the configuration parameters are complete, reading the target template file to generate a target assembly.
2. The method of claim 1, further comprising:
and if the configuration parameters are incomplete, prompting that the configuration file is wrong.
3. The method of claim 1, further comprising:
and compiling a universal service component template based on the code formatting module and the preset component module.
4. The method of claim 3, wherein writing a generic business component template based on the code formatting module and the pre-defined component module comprises:
writing ejs component templates through an ejs engine; or writing a jade component template through a jade engine.
5. A front-end component generation system, comprising: a configuration module and a processing module; the configuration module is used for receiving configuration information, determining a target universal service component template according to the configuration information, configuring configuration parameters of the target universal service component template according to the configuration information and generating a target template file;
the processing module is used for receiving a component creating instruction; judging whether a file corresponding to the component creating instruction exists or not; if the file does not exist, judging whether the configuration parameters are complete; and if the configuration parameters are complete, reading the target template file to generate a target assembly.
6. The system of claim 5, wherein the processing module comprises: the system comprises a code formatting module, a preset component module and a Nodejs module;
the code formatting module comprises a preter tool;
the preset component module comprises: ejs component module or jade component template;
and the Nodejs module is used for generating a target component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111284144.0A CN114035859A (en) | 2021-11-01 | 2021-11-01 | Front-end component generation method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111284144.0A CN114035859A (en) | 2021-11-01 | 2021-11-01 | Front-end component generation method and system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114035859A true CN114035859A (en) | 2022-02-11 |
Family
ID=80135860
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111284144.0A Pending CN114035859A (en) | 2021-11-01 | 2021-11-01 | Front-end component generation method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114035859A (en) |
-
2021
- 2021-11-01 CN CN202111284144.0A patent/CN114035859A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2019233293A1 (en) | Method and apparatus for developing application program | |
| US20030110472A1 (en) | Method and system for generating program source code of a computer application from an information model | |
| KR101770292B1 (en) | Computer-executable model reverse engineering method and apparatus performing the same | |
| WO2020231525A1 (en) | User interface and smart contract interaction model for generating user interface representations | |
| US20170371631A1 (en) | Globalization template manager for automated globalization enablement on development operations | |
| CN113672204A (en) | Interface document generation method, system, electronic equipment and storage medium | |
| CN104049974A (en) | Dynamic control assembly method and system | |
| CN112989433A (en) | Verification method based on Java Bean verification rule and related equipment | |
| CN111124380A (en) | Front-end code generation method | |
| CN114048415A (en) | Form generation method and device, electronic equipment and computer readable storage medium | |
| CN114035859A (en) | Front-end component generation method and system | |
| CN117370242A (en) | Adapter and method for generating multilingual SDK client by parsing interface document | |
| WO2021022702A1 (en) | Log insertion method and apparatus, computer apparatus and storage medium | |
| CN115686589A (en) | Entity class file updating system and method, corresponding computer equipment and storage medium | |
| US7716653B2 (en) | Configurable importers and resource writers for converting data into another format | |
| CN114385507A (en) | Software test case generation method | |
| CN113987400A (en) | Design and code generation method of front-end webpage template | |
| CN111309290B (en) | Flexible and extensible business rule matrix system | |
| CN113901025A (en) | Database management method, device, equipment and storage medium | |
| CN112698826A (en) | Low code page creation system, method and equipment | |
| CN111596872A (en) | Data printing method and data printing device | |
| CN112380142A (en) | Interface document management method and device and test equipment | |
| US7917893B2 (en) | Using a system of annotations to generate views and adapters | |
| WO2024078472A1 (en) | Method and apparatus for debugging cloud service application program interface (api) and related device | |
| WO2023162260A1 (en) | Environment construction assistance device, system, and method, and computer-readable 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 |