CN111221524A - Method and system for generating front-end module by one key - Google Patents
Method and system for generating front-end module by one key Download PDFInfo
- Publication number
- CN111221524A CN111221524A CN201911386815.7A CN201911386815A CN111221524A CN 111221524 A CN111221524 A CN 111221524A CN 201911386815 A CN201911386815 A CN 201911386815A CN 111221524 A CN111221524 A CN 111221524A
- Authority
- CN
- China
- Prior art keywords
- module
- template
- component
- library
- standard
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 19
- 239000000463 material Substances 0.000 claims abstract description 25
- 238000007670 refining Methods 0.000 claims abstract description 15
- 230000000712 assembly Effects 0.000 claims abstract description 10
- 238000000429 assembly Methods 0.000 claims abstract description 10
- 239000002131 composite material Substances 0.000 claims description 3
- 238000004891 communication Methods 0.000 description 8
- 230000008859 change Effects 0.000 description 6
- 238000011161 development Methods 0.000 description 5
- 230000018109 developmental process Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 239000003292 glue Substances 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000033772 system development Effects 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/35—Creation or generation of source code model driven
-
- 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/36—Software reuse
Abstract
The invention provides a method for generating a front-end module by one key, which comprises the following steps: the receiving module generates a request, after at least one module material is obtained, the element components for refining the module material are split, and the refined element components are stored in a component library. And writing a node instruction for the single element component in the component library. And integrating the single element assemblies in the assembly library to form a standard template module or combining the single element assemblies in the assembly library to form a combined assembly module. And compiling a node instruction for the standard template module. And selecting a template instruction or a combined component instruction generation module according to needs. The front-end system comprises a request receiving module, an acquisition module, a refinement module, a component library module, an integrated combination module, a selection module and a sending module, wherein the request receiving module is used for receiving a module generation request sent by a user.
Description
Technical Field
The invention relates to computer technology/front-end development/Angular, in particular to a method and a system for generating a front-end module by one key.
Background
With the popularization of the front-end three-large framework, the front-end framework Angular suitable for cooperation of a plurality of teams is used by more and more companies. Most projects of the cloud account use Angular. The components and visual styles provided by the conventional Angular-based UI framework hardly meet the standards of companies, and there are a large number of components which need to be developed or redeveloped by developers.
The following technical problems often occur in the existing system development process: (1) each module of the same system can generate different code structures, so that the system is not easy to maintain; (2) modules developed by different personnel in the same system can generate different visual effects, and the module layout is not standard; (3) repeated functional module repeated development, for example, when developing different modules of the same system, each module has the same or similar place in the aspects of function realization, style layout, etc., but each module still needs to be written one by one during manufacturing, a large amount of repeated operation needs to be performed, and the efficiency is low.
Disclosure of Invention
The invention aims to solve the defects in the prior art, and provides a method for generating a front-end module by one key and a front-end system, which can be used for rapidly generating a standard specification module, solving the problem of rapidly constructing the module by the front-end system, improving the development efficiency and optimizing the single responsibility of a developer.
In order to achieve the purpose, the invention adopts the following technical scheme: a method of generating a front-end module from a key, comprising: an operator sends a generation request, a module is received to generate the request, at least one module material is obtained from a template material library, the element components for refining the module material are split, and the refined element components are stored in a component library. And writing a node instruction for the single element component in the component library. And integrating the single element assemblies in the assembly library to form a standard template module or combining the single element assemblies in the assembly library to form a combined assembly module. And compiling a node instruction for the standard template module. And selecting a template instruction or a combined component instruction generation module according to needs.
Preferably, the module materials are UI high-fidelity materials.
Preferably, the composite component module comprises one or more of the single element components.
And (3) splitting element components for refining the module materials, wherein the splitting process follows the principle of breaking the whole into parts from top to bottom. And analyzing the relation among the page elements, and combining the elements in the relative concentration together to form a component. Moderate principles are also followed during the dismantling process: the components cannot be too large, and the oversized components can be gradually disassembled in iterative development; components are also undesirably small, trivial or overly deep structures are not conducive to code reading and understanding, and can increase the cost of future maintenance.
The communication among the components adopts different communication modes according to the component relation.
For the parent-child components, a direct communication mode is used. The parent component holds and uses the view of the sub-component, so that the parent component knows the type of the sub-component, and can directly transmit the message to the sub-component through the constructor, the setting attribute or the calling method of the sub-component. Although the sub-component does not know the specific type of the parent component, the sub-component can forward the message inside the sub-component to the parent component using the sub-component in a block or delete mode.
For a parent component, a mode of cross-layer communication of 'parent component = > sub-component = >. = > sub-component' is adopted, and if the communication mode of the parent component and the sub-component is passed layer by layer, the communication mode is complicated, and glue codes are more. However, if the communication limit is released to allow mesh communication between any of the components, the engineering complexity can grow explosively as the number of components increases. Thus, we provide a one-way, state synchronization mechanism with explicit data types. A node in the component tree is used as a Provider (Provider) of the state, the components in the sub-tree can be used as consumers (Consumers) to register and monitor the change of the state of the Provider, and when the state changes, the consumers can receive the messages. The overview shows that the Provider provides a shared state and is responsible for updating the state, and the Provider monitors the change of the Provider state and only reads the shared state.
With the protocol statement, how to establish the monitoring of the state change, in terms of specific implementation, a mode of kvo is adopted, that is, while constructing a component tree, runtime judges whether the component is a Provider or a Consumer of a certain Context. If the determination is successful, a corresponding kvo snoop is established. Thus, when the Provider component modifies a certain state of itself, the Provider monitoring it can receive the message of state change.
For more complex, the need for inter-component linkage to accomplish a certain function, such as clicking a button, brings about a change in the UI of several components at different levels within the page. A state can be designed through a Context Provider mode, when a button of a sub-component is clicked, a message is sent to the Provider, the Provider changes the state, then all providers receive the message of state change, and the changes of the providers are processed by the providers.
The invention also provides a front-end system of the one-key generation front-end module, which comprises a request receiving module, wherein the request receiving module is used for receiving the module generation request sent by the user.
And the acquisition module is used for acquiring corresponding module materials according to the module generation request sent by the client.
And the refining module is in data connection with the acquisition module and is used for splitting and refining the element components in the material of the acquisition module.
And the component library module is in data connection with the refining module and is used for storing the refined element components.
The integrated combination module comprises an integrated template module and a combination component module, the integrated combination module is connected with the component library module in a data mode, the integrated template module is used for integrating single element components in the component library to form a standard module template, and the combination component module is used for combining the single components in the component library to form a combination component template.
And the selection module is used for selecting the corresponding standard module template or combined component template according to the requirement.
And the sending module is in data connection with the selecting module, and sends the standard module template or the combined component template selected by the selecting module to a server so that the server generates a module corresponding to the module generating request.
Preferably, the system comprises a template library module, wherein the template library module is connected with the integrated combination module data and is used for storing a standard module template and a combination module template generated by the integrated combination module.
Preferably, the template library module is in data connection with the selection module, and the selection module selects the standard module template or the combined component template from the template library module.
Preferably, the element components in the component library module are independent element components.
Preferably, the standard module template and the combined component template in the template library module are independent templates.
Compared with the prior art, the invention has the beneficial effects that: the invention provides a method for generating a front-end module by one key, which comprises the steps of firstly receiving a user module generation request, obtaining at least one module material, splitting element components for refining the module material, and storing the refined element components into a component library. And writing a node instruction for the single element component in the component library. And integrating the single element assemblies in the assembly library to form a standard template module or combining the single element assemblies in the assembly library to form a combined assembly module. And compiling a node instruction for the standard template module, and selecting a template instruction or a combined component instruction generation module according to the requirement. (1) According to the invention, firstly, a standard template module is integrated, a template instruction is selected for use, standard module application can be rapidly generated, and the problem of rapidly constructing a module by a system is solved; (2) when different modules of the same system are used, the modules have the same or similar places in the aspects of function realization, style layout and the like, the technology does not need to write each webpage one by one, does a large amount of repeated operation, only needs to split and refine each element component of the obtained corresponding webpage material, integrates the standard template module, stores the standard template module in the template library, and can directly match the corresponding modules by using a template selecting instruction, thereby improving the development efficiency and optimizing the single responsibility of developers. (3) The module generation system is provided with the combined component module, the combined component module is used for combining a single component in the component library to form a combined component template and storing the combined component template in the template library module, the selection module selects the corresponding combined component template according to the requirement, and the combined component template can be composed of a single element component or a plurality of element components, so that the range of the generated module is enlarged, the flexibility of the generated module is enhanced, and the generated module is not limited to a standard template.
Drawings
Fig. 1 is a schematic flowchart of a method for generating a front-end module by one key according to embodiment 1 of the present invention;
fig. 2 is a schematic flowchart of a method for generating a front-end module by one key according to embodiment 1 of the present invention;
fig. 3 is a schematic structural diagram of a front-end system of a one-key generation front-end module according to embodiment 2 of the present invention.
Detailed Description
In order to further understand the objects, structures, features and functions of the present invention, the following embodiments are described in detail.
Example 1: as shown in fig. 1, a method for generating a front-end module by one key includes: the receiving module generates a request, after at least one module material is obtained, the element components for refining the module material are split, and the refined element components are stored in a component library. And writing a node instruction for the single element component in the component library. And integrating the single element assemblies in the assembly library to form a standard template module or combining the single element assemblies in the assembly library to form a combined assembly module. And compiling a node instruction for the standard template module. And selecting a template instruction or a combined component instruction generation module according to needs.
As shown in FIG. 2, the module material is UI high fidelity material.
The composite component module includes one or more of the single element components.
Example 2: as shown in fig. 3, the present invention further provides a front-end system of a one-key generation front-end module, which includes a request receiving module 210, where the request receiving module 210 is configured to receive a module generation request sent by a user.
The obtaining module 220 is configured to obtain corresponding module materials according to the module generation request sent by the client.
A refining module 230, wherein the refining module 230 is in data connection with the obtaining module 220, and is configured to split and refine the element components in the obtaining module material.
A component library module 240, wherein the component library module 240 is in data connection with the refining module 230 and is used for storing the refined element components.
And the integrated combination module 250 comprises an integrated template module 251 and a combination component module 252, the integrated combination module 250 is connected with the component library module data 240, the integrated template module 251 is used for integrating single element components in the component library to form a standard module template, and the combination component module 252 is used for combining single components in the component library to form a combination component template.
And a selecting module 270, configured to select the corresponding standard module template or combined component template as needed.
A sending module 280, wherein the sending module 280 is in data connection with the selecting module 270, and sends the standard module template or the combined component template selected by the selecting module 270 to a server, so that the server generates a module corresponding to the module generation request.
As shown in fig. 3, the system comprises a template library module 260, wherein the template library module 260 is connected to the integrated combination module 250 for storing the standard module template and the combination module template generated by the integrated combination module.
As shown in fig. 3, the template library module 260 is in data connection with the selection module 270, and the selection module 270 selects the standard module template or the combined component template from the template library module 260.
Preferably, the element components in the component library module 240 are independent element components.
Preferably, the standard module template and the combined component template in the template library module 260 are independent templates.
The present invention has been described in relation to the above embodiments, which are only exemplary of the implementation of the present invention. It should be noted that the disclosed embodiments do not limit the scope of the invention. Rather, it is intended that all such modifications and variations be included within the spirit and scope of this invention.
Claims (9)
1. A method for generating a front-end module by one key, comprising: the method comprises the following steps:
the method comprises the steps that a receiving module generates a request, after at least one module material is obtained, element components for refining the module material are split, and the refined element components are stored in a component library;
writing a node instruction for a single element component in the component library;
integrating the single element assemblies in the assembly library to form a standard template module or combining the single element assemblies in the assembly library to form a combined assembly module;
compiling a node instruction for the standard template module;
and selecting a template instruction or a combined component instruction generation module according to needs.
2. A method for generating a front-end module by one key as recited in claim 1, wherein: the module materials are UI high-fidelity materials.
3. A method for generating a front-end module by one key as recited in claim 1, wherein: the composite component module includes one or more of the single element components.
4. A front-end system of a one-key generation front-end module, comprising: the system comprises a request receiving module, a module generation module and a module generation module, wherein the request receiving module is used for receiving a module generation request sent by a user;
the acquisition module is used for acquiring corresponding module materials according to the module generation request sent by the client;
the refining module is in data connection with the acquisition module and is used for splitting and refining element components in the acquisition module material;
and the component library module is in data connection with the refining module and is used for storing the refined element components.
5. The integrated combination module comprises an integrated template module and a combination component module, the integrated combination module is in data connection with the component library module, the integrated template module is used for integrating single element components in the component library to form a standard module template, and the combination component module is used for combining single components in the component library to form a combination component template;
the selection module is used for selecting the corresponding standard module template or combined component template as required;
and the sending module is in data connection with the selecting module, and sends the standard module template or the combined component template selected by the selecting module to a server so that the server generates a module corresponding to the module generating request.
6. A front-end system of a one-key generation front-end module according to claim 4, wherein: the template library module is connected with the integrated combination module data and used for storing standard module templates and combination component templates generated by the integrated combination module.
7. A front-end system of a one-key generation front-end module according to claim 5, wherein: the template library module is in data connection with the selection module, and the selection module selects the standard module template or the combined component template from the template library module.
8. A front-end system of a one-key generation front-end module according to claim 4, wherein: the element components in the component library module are independent element components.
9. A front-end system of a one-key generation front-end module according to claim 5, wherein: and the standard module template and the combined component template in the template library module are independent templates.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911386815.7A CN111221524B (en) | 2019-12-29 | 2019-12-29 | Method and system for generating front-end module by one key |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911386815.7A CN111221524B (en) | 2019-12-29 | 2019-12-29 | Method and system for generating front-end module by one key |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111221524A true CN111221524A (en) | 2020-06-02 |
| CN111221524B CN111221524B (en) | 2024-02-09 |
Family
ID=70828015
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911386815.7A Active CN111221524B (en) | 2019-12-29 | 2019-12-29 | Method and system for generating front-end module by one key |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111221524B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105786522A (en) * | 2016-03-17 | 2016-07-20 | 无锡威泰迅电力科技有限公司 | WEB (World Wide Web) front-end universal component unit based on Node. js platform |
| CN106648630A (en) * | 2016-12-01 | 2017-05-10 | 北京趣拿软件科技有限公司 | Page obtaining method and device |
| CN108153520A (en) * | 2018-03-20 | 2018-06-12 | 上海屹通信息科技发展有限公司 | Software development methodology and device |
| CN109298883A (en) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | A kind of automatically generate component file method and electronic equipment under teaching platform |
| CN109901838A (en) * | 2019-01-17 | 2019-06-18 | 平安证券股份有限公司 | Front end development approach, device, equipment and storage medium based on modularization |
-
2019
- 2019-12-29 CN CN201911386815.7A patent/CN111221524B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105786522A (en) * | 2016-03-17 | 2016-07-20 | 无锡威泰迅电力科技有限公司 | WEB (World Wide Web) front-end universal component unit based on Node. js platform |
| CN106648630A (en) * | 2016-12-01 | 2017-05-10 | 北京趣拿软件科技有限公司 | Page obtaining method and device |
| CN108153520A (en) * | 2018-03-20 | 2018-06-12 | 上海屹通信息科技发展有限公司 | Software development methodology and device |
| CN109298883A (en) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | A kind of automatically generate component file method and electronic equipment under teaching platform |
| CN109901838A (en) * | 2019-01-17 | 2019-06-18 | 平安证券股份有限公司 | Front end development approach, device, equipment and storage medium based on modularization |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111221524B (en) | 2024-02-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107291523B (en) | Web front-end message bus system | |
| CN103294475B (en) | The business automatic creation system of graphic based business scenario and domain template and method | |
| CN101127655B (en) | Method and system for integrating existing www systems | |
| CA2674659C (en) | Synchronous to asynchronous web page conversion | |
| US7617459B2 (en) | Apparatus, system, and method for automatically generating a web interface for an MFS-based IMS application | |
| US9015651B2 (en) | Gateway data distribution engine | |
| US20060015839A1 (en) | Development of software systems | |
| CN104484216A (en) | Method and device for generating service interface document and on-line test tool | |
| CN106775744B (en) | Method and device for generating static library | |
| CN102184184B (en) | Method for acquiring webpage dynamic information | |
| CN110865843B (en) | Page backtracking, information backup and problem solving method, system and equipment | |
| US20030122867A1 (en) | Method and apparatus for assembling enterprise javabeans components | |
| CN104199647A (en) | Visualization system and implementation method based on IBM host | |
| CN109445771A (en) | A kind of off line network layers block code Auto-Generation Tool of CS framework and method | |
| US20210117313A1 (en) | Language agnostic automation scripting tool | |
| CN104750472A (en) | Resource bundle management method and device of terminal application | |
| CN114968192A (en) | Project creation method and device, computer equipment and storage medium | |
| CN102521008A (en) | Program compiling device and method for compiling program | |
| CN115113850A (en) | Cross-platform application construction and operation method, server, terminal and system | |
| Fujima | Building a meme media platform with a JavaScript MVC framework and HTML5 | |
| CN103677854A (en) | Design method and design system of OSGI (Open Service Gateway Initiative)-WEB framework applicable to cloud computing environment | |
| CN111221524A (en) | Method and system for generating front-end module by one key | |
| CN109933308A (en) | The customed general-purpose system of remote sensing satellite data prediction flow path visual based on MPI+CUDA | |
| Sneed et al. | Reusing existing object-oriented code as web services in a SOA | |
| CN115964042A (en) | Menu generation method and device, storage medium and electronic equipment |
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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 210000 10 / F, building D-1, Greenland window, Yuhuatai District, Nanjing City, Jiangsu Province Applicant after: Cloud accounting room network technology Co.,Ltd. Address before: 210000 10 / F, building D-1, Greenland window, Yuhuatai District, Nanjing City, Jiangsu Province Applicant before: NANJING YUNZHANGFANG NETWORK TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |