CN111880859A - Plug-in for automatically generating routing file and method thereof - Google Patents
Plug-in for automatically generating routing file and method thereof Download PDFInfo
- Publication number
- CN111880859A CN111880859A CN202010723223.6A CN202010723223A CN111880859A CN 111880859 A CN111880859 A CN 111880859A CN 202010723223 A CN202010723223 A CN 202010723223A CN 111880859 A CN111880859 A CN 111880859A
- Authority
- CN
- China
- Prior art keywords
- file
- webpack
- plug
- routing
- automatically generating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 35
- 238000012856 packing Methods 0.000 claims abstract description 15
- 238000004806 packaging method and process Methods 0.000 claims abstract description 8
- 238000012545 processing Methods 0.000 claims description 12
- 238000005192 partition Methods 0.000 claims description 4
- 230000007547 defect Effects 0.000 abstract description 4
- 230000006870 function Effects 0.000 description 7
- 238000004590 computer program Methods 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 241001417516 Haemulidae Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000013508 migration Methods 0.000 description 1
- 230000005012 migration Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/10—File systems; File servers
- G06F16/16—File or folder operations, e.g. details of user interfaces specifically adapted to file systems
- G06F16/164—File meta data generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
A plug-in for automatically generating a routing file and a method thereof comprise the following steps: step 1: the webpack is operated to pack, and a defined webpack plug-in is loaded in the webpack packing process; step 2: the webpack plugin generates a required routing file according to the self-defined plugin configuration item; and step 3: therefore, when the webpack packaging is finished, the routing information can be normally used for page jump. The method effectively overcomes the defects that in the prior art, when a page is newly built in a web project, a route needs to be manually configured once, the operation is complicated and the efficiency is low.
Description
Technical Field
The invention relates to the technical field of generating routing files, belongs to the technical field of plug-ins, and particularly relates to a plug-in for automatically generating routing files and a method thereof.
Background
Although the adopted technologies are different and the scales are different, the Web project is composed of components for executing the same function, of course, according to the difference of the scales, the functions to be realized are different, in the Web project, the information exchange between the two software is actually realized, the exchange between the browser software in the client machine and the Web server software in the server-side machine is realized, for example, in the online learning, the information exchange is realized between the browser of the client and the tomcat of the server-side.
With the continuous expansion of the scale of the web project, a route needs to be manually configured every time a page is newly built, so that the operation is complicated and the efficiency is low.
Disclosure of Invention
In order to solve the problems, the invention provides a plug-in for automatically generating a routing file and a method thereof, which effectively avoid the defects that in the prior art, each new page of a web project needs to be manually configured with one routing, the operation is complicated and the efficiency is low.
In order to overcome the defects in the prior art, the invention provides a solution for automatically generating a plug-in of a routing file and a method thereof, which comprises the following steps:
a method for automatically generating a plug-in of a routing file comprises the following steps:
step 1: the webpack is operated to pack, and a webpack plug-in defined by setting is loaded in the webpack packing process;
step 2: the webpack plug-in generates a routing file required by a user according to the self-defined plug-in configuration item;
and step 3: thus, when the webpack packing is finished, the routing information can be normally used for page jump.
Further, when initializing the webpack plugin, the following configuration is performed to obtain a customized plugin configuration item.
Further, the naming method of the directory folder of the page includes:
step 1-1: the webpack plug-in traverses the directory of the page pages to acquire the file paths of all files under the directory;
step 1-2: processing the file path, and acquiring the parameter type and name according to the-and $ number;
step 1-3: generating the configuration required by the user according to the official configuration of the realrouter or vueruuter
And setting a file, wherein the symbol represents a partition parameter, and the symbol represents that the parameter is optional.
Further, the method for generating the required routing file includes:
step 2-1: according to the acquired file path, acquiring basic information of the file, including a file name,
The parameter name,
The path of the file;
step 2-2: transferring the basic information of the file as parameter to the generator in the set route template generating function
Routing files of the official routing standards.
A plug-in for automatically generating a routing file, comprising: the webpack packaging module, the execution module, the processing module and the generation module run on the processing terminal;
the execution module is used for operating the webpack for packing, and loading a webpack plug-in defined by setting in the webpack packing process;
the processing module is used for generating a routing file required by a user by applying the webpack plug-in according to the self-defined plug-in configuration item;
the generation module is used for normally using the routing information to carry out page jump when the webpack packing is finished.
The invention has the beneficial effects that:
the invention develops a plug-in based on webpack, can automatically generate the matched routing information according to the page file, and can take effect without restarting the web project. The defects that in the prior art, each newly-built page of a web project needs to be manually configured with one-time routing, and the operation is complex and the efficiency is low are effectively overcome.
Drawings
FIG. 1 is a flow chart of a method of automatically generating a plug-in for a routing file of the present invention;
FIG. 2 is a flow chart of the manner in which the directory folders of a page are named according to the present invention;
Detailed Description
With the continuous expansion of the scale of the web project, a route needs to be manually configured every time a page is newly built, so that the operation is complicated and the efficiency is low. In order to automate the process and improve the development efficiency, a plug-in is developed based on webpack, can automatically generate the matching routing information according to the page file, and can take effect without restarting the web project.
The invention will be further described with reference to the following figures and examples.
As shown in fig. 1-2, the method for automatically generating the plug-in of the routing file includes the following steps:
step 1: the webpack is operated to pack, and a webpack plug-in defined by setting is loaded in the webpack packing process;
step 2: the webpack plug-in generates a routing file required by a user according to the self-defined plug-in configuration item;
and step 3: thus, when the webpack packing is finished, the routing information can be normally used for page jump. webpack is a code compilation tool with entries, exits, loaders, and plug-ins. The method is used for dividing and modularizing codes, and treeshaft is added into webpack2.0 and used for extracting public codes and removing dead codes. The webpack writes script droplets in commonJS mode, but the AMD/CMD is supported comprehensively, and the code migration of old items is facilitated. It supports the invocation of many module loaders, allowing flexible customization of module loaders, such as a babel-loader, which enables an operator to write code using the syntax of ES 6; a less-loader, which can compile less into cs files; the development is convenient, and the work of partial grunt/gulp can be replaced, such as packaging, compression confusion, picture transfer to base64 and the like. The cache function of the browser can be effectively utilized to improve the performance by configuring and packaging the files into a plurality of files.
Here, take the item generated by vue-cli as an example:
npminstall--save-devroute-auto-generate
constpath＝require("path")；
the npminshall-save-devroute-auto-generate command is used to install this route auto-generation plug-in the web page project. Here, Vue-cli is a very excellent tool for quickly building Vue-based Web applications. Unlike tools such as the create-exact-app, developers need only be concerned with the code of project logic, not with webpack packaging, launching Node services, and the like. Vue-cli is a development tool based on templet, which is equal to moving the project structure of others, all the configurations are exposed, and the specific automatic plug-in generation comprises:
generally, the method is introduced into a webpack configuration file, and if the generated item is vue-cli, the item is introduced into vue.config.js;
the following code section is for the purpose of introducing plug-ins:
constRouteAutoGenerateWebpackPlugin＝require("route-auto-generate" )；
module.exports＝{
configureWebpack:{resolve:{
alias:{
the following code is for configuring page file directory aliases:
"@":path.resolve(dirname,"src/")
}
},
plugins:[
the following piece of code is for implementing the initialization plug-in configuration:
newRouteAutoGenerateWebpackPlugin({
the following code section is for implementing the project routing file address:
routerPath:path.resolve(dirname,"./src/router.js"),
the following code section is for implementing the routing page directory:
pagesPath:path.resolve(dirname,"./src/views"),
the following code section is for directory aliasing:
pagesAlias:"@/views/"
})
]
}
}；
upon initializing the webpack plugin, the following configuration is performed to obtain the custom plugin configuration items shown in table 1:
TABLE 1
The naming mode of the directory folder of the page comprises the following steps:
step 1-1: the webpack plug-in traverses the directory of the page pages to acquire the file paths of all files under the directory;
step 1-2: processing the file path, and acquiring the parameter type and name according to the-and $ number;
step 1-3: generating the configuration required by the user according to the official configuration of the realrouter or vueruuter
And setting a file, wherein the symbol represents a partition parameter, and the symbol represents that the parameter is optional.
Examples are as follows:
here, -symbol indicates a partition parameter, $ symbol indicates that the parameter is optional;
the following code section is for implementing the page directory structure:
pages/
--|tag-id/
-----|index.vue
--|category-id$/
-----|index.vue
--|home.vue
--|index.vue
the following piece of code is for implementing the generated routing file:
routes:[
{
the following code section is for implementing routing paths:
path:"/cateory/:id？"
,
the following code section is for the purpose of implementing route names:
name:"cateory",
the following code section is for implementing the file path:
the method for generating the routing file required by the user comprises the following steps:
step 2-1: according to the acquired file path, acquiring basic information of the file, including a file name,
The parameter name,
The path of the file;
step 2-2: transferring the basic information of the file as parameter to the generator in the set route template generating function
Routing files of the official routing standards.
The following code is a routing file template of an React frame, which is mainly configured according to act-router, wherein the React frame is developed on the basis of an HTML front-end interface and becomes more and more complex, the essential problems of the process can be basically attributed to the condition of how to efficiently reflect dynamic data input from a server end or a user on a complex user interface, and the React frame from Facebook is a solution completely facing the problem, and is described according to an official website, and the starting point is as follows: for developing large applications with changing data (Building large applications with data changes over time). Compared with the traditional front-end development, React opens up a quite other way to realize:
the following code is a route file template of the Vue framework, configured primarily according to vue-router:
the template file of the user can be written according to the actual requirement of the user, and then the template is configured when the plug-in is initialized.
In some cases, the automatically generated route sequence may be unsatisfactory to users and needs to be adjusted, and then the coverRoutes configuration item may be used to define the routes to be covered, i.e. put them to the front, where name, path, and component are necessary items to define the route name, route path, and location of the route file.
Examples are as follows:
the following piece of code is the routing plug-in configuration:
newRouteAutoGenerateWebpackPlugin({
the following code implements the project routing file path:
routerPath:path.resolve(dirname,"./src/router.js"),
the following code is the directory where the project routing page is implemented:
pagesPath:path.resolve(dirname,"./src/views"),
the following code is to implement a directory alias:
pagesAlias:"@/views/",
the following code is the routing information that needs to be covered:
coverRoutes:[
{
the following code is the implementation route name:
name:'index',
the following code implements the routing path:
path:'/',
the following code implements the file path:
a plug-in for automatically generating a routing file, comprising: the webpack packaging module, the execution module, the processing module and the generation module run on the processing terminal;
the execution module is used for operating the webpack for packing, and loading a webpack plug-in defined by setting in the webpack packing process;
the processing module is used for generating a routing file required by a user by applying the webpack plug-in according to the self-defined plug-in configuration item;
the generation module is used for normally using the routing information to carry out page jump when the webpack packing is finished.
All relevant contents of each step related to the method of the above embodiment may be referred to the functional description of the corresponding functional module, and are not described herein again.
Based on the same technical concept, embodiments of the present application further provide a computer-readable storage medium storing a computer program, where the computer program includes at least one code, and the at least one code is executable by a terminal to control the terminal to implement the method of the foregoing embodiments.
Based on the same technical concept, the embodiment of the present application further provides a computer program, which is used to implement the method of the foregoing embodiment when the computer program is executed by the terminal.
The program may be stored in whole or in part on a storage medium packaged with the processor, or in part or in whole on a memory not packaged with the processor.
Based on the same technical concept, the embodiment of the present application further provides a processor, and the processor is configured to implement the method of the foregoing embodiment. The processor may be a chip.
The steps of a method or algorithm described in connection with the disclosure of the embodiments of the application may be embodied in hardware or in software instructions executed by a processor. The software instructions may be comprised of corresponding software modules that may be stored in Random Access Memory (RAM), flash memory, Read Only Memory (ROM), Erasable Programmable Read Only Memory (EPROM), Electrically Erasable Programmable Read Only Memory (EEPROM), registers, a hard disk, a removable hard disk, a compact disc read only memory (CD-ROM), or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. Of course, the storage medium may also be integral to the processor. The processor and the storage medium may reside in an ASIC. Additionally, the ASIC may reside in a network device. Of course, the processor and the storage medium may reside as discrete components in a network device.
Those skilled in the art will recognize that, in one or more of the examples described above, the functions described in the embodiments of the present application may be implemented in hardware, software, firmware, or any combination thereof. When implemented in software, the functions may be stored on or transmitted over as one or more instructions or code on a computer-readable medium. Computer-readable media includes both computer storage media and communication media including any medium that facilitates transfer of a computer program from one place to another. A storage media may be any available media that can be accessed by a general purpose or special purpose computer.
While the present embodiments have been described with reference to the accompanying drawings, it is to be understood that the invention is not limited to the precise embodiments described above, which are meant to be illustrative and not restrictive, and that various changes may be made therein by those skilled in the art without departing from the spirit and scope of the invention as defined by the appended claims.
In addition, the present invention has been described above in terms of procedures illustrated by embodiments, and it should be understood by those skilled in the art that the present disclosure is not limited to the above-described embodiments, and that various changes, modifications and substitutions can be made without departing from the scope of the present invention.
Claims (5)
1. A method for automatically generating a plug-in of a routing file is characterized by comprising the following steps:
step 1: the webpack is operated to pack, and a defined webpack plug-in is loaded in the webpack packing process;
step 2: the webpack plugin generates a required routing file according to the self-defined plugin configuration item;
and step 3: therefore, when the webpack packaging is finished, the routing information can be normally used for page jump.
2. The method of automatically generating a plug-in for a routing file of claim 1, wherein when initializing the webpack plug-in, the following configuration is performed to obtain a customized plug-in configuration item.
3. The method of automatically generating an add-in for a routing file of claim 1, wherein the naming of the directory folder of the page comprises:
step 1-1: the webpack plug-in traverses the directory of the page pages to acquire the file paths of all files under the directory;
step 1-2: processing the file path, and acquiring the parameter type and name according to the-and $ number;
step 1-3: generating a configuration file required by a user according to the official configuration of the realrouter or the vueruuter,
wherein, symbol represents the partition parameter, symbol represents the optional parameter.
4. The method for automatically generating a plug-in for a routing file of claim 1, wherein the generating the plug-in generates the routing file
A method of routing a file in need thereof, comprising:
step 2-1: acquiring basic information of the file according to the acquired file path, wherein the basic information comprises a file name, a parameter name and a path where the file is located;
step 2-2: and transmitting the basic information of the file as the parameter to a set routing template generating function to generate a routing file meeting the official routing standard.
5. A plug-in for automatically generating a routing file, comprising: the webpack module is operated on the processing terminal and comprises a webpack packaging component, an execution module, a processing module and a generation module;
the execution module is used for operating the webpack for packing, and loading the defined webpack plug-in the webpack packing process;
the processing module is used for generating a required routing file by applying the webpack plug-in according to the self-defined plug-in configuration item;
the generation module is used for carrying out page jump by normally using the routing information when the webpack packing is finished.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010723223.6A CN111880859A (en) | 2020-07-24 | 2020-07-24 | Plug-in for automatically generating routing file and method thereof |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010723223.6A CN111880859A (en) | 2020-07-24 | 2020-07-24 | Plug-in for automatically generating routing file and method thereof |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111880859A true CN111880859A (en) | 2020-11-03 |
Family
ID=73200471
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010723223.6A Pending CN111880859A (en) | 2020-07-24 | 2020-07-24 | Plug-in for automatically generating routing file and method thereof |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111880859A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113010224A (en) * | 2021-03-03 | 2021-06-22 | 南方电网数字电网研究院有限公司 | Front-end micro-service method, device, computer equipment and storage medium |
| CN114816407A (en) * | 2022-05-24 | 2022-07-29 | 新奥数能科技有限公司 | Component packaging method and device, electronic equipment and storage medium |
| CN116595285A (en) * | 2023-07-19 | 2023-08-15 | 深圳复临科技有限公司 | Route generation method, device, computer equipment and storage medium |
| CN117112021A (en) * | 2023-10-24 | 2023-11-24 | 腾讯科技（深圳）有限公司 | Route configuration generation method, device, equipment and computer readable storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110125834A1 (en) * | 2009-11-25 | 2011-05-26 | Macken Luke J | Architecture, system and method for providing a plug-in architecture in a real-time web application framework |
| CN108390773A (en) * | 2018-02-02 | 2018-08-10 | 上海汉得信息技术股份有限公司 | A kind of method and apparatus of dynamic routing for scaffold |
| CN111273898A (en) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | Web front-end code automatic construction method, system and storage medium |
-
2020
- 2020-07-24 CN CN202010723223.6A patent/CN111880859A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110125834A1 (en) * | 2009-11-25 | 2011-05-26 | Macken Luke J | Architecture, system and method for providing a plug-in architecture in a real-time web application framework |
| CN108390773A (en) * | 2018-02-02 | 2018-08-10 | 上海汉得信息技术股份有限公司 | A kind of method and apparatus of dynamic routing for scaffold |
| CN111273898A (en) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | Web front-end code automatic construction method, system and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| KYBETTER: "使用 webpack 插件自动生成vue路由文件的方法", pages 1 - 4, Retrieved from the Internet <URL:https://www.jb51.net/article/167959.htm> * |
| ZZZCODER: "Vue Router自动化路由", pages 1 - 10, Retrieved from the Internet <URL:https://www.jianshu.com/p/0c1face911c7> * |
| 广告位招租: "自己动手封装一个vuecli3自动生成路由插件", pages 1 - 10, Retrieved from the Internet <URL:https://www.jianshu.com/p/e8a79e8c18de> * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113010224A (en) * | 2021-03-03 | 2021-06-22 | 南方电网数字电网研究院有限公司 | Front-end micro-service method, device, computer equipment and storage medium |
| CN113010224B (en) * | 2021-03-03 | 2024-01-30 | 南方电网数字平台科技(广东)有限公司 | Front-end micro-servitization method, front-end micro-servitization device, computer equipment and storage medium |
| CN114816407A (en) * | 2022-05-24 | 2022-07-29 | 新奥数能科技有限公司 | Component packaging method and device, electronic equipment and storage medium |
| CN116595285A (en) * | 2023-07-19 | 2023-08-15 | 深圳复临科技有限公司 | Route generation method, device, computer equipment and storage medium |
| CN117112021A (en) * | 2023-10-24 | 2023-11-24 | 腾讯科技（深圳）有限公司 | Route configuration generation method, device, equipment and computer readable storage medium |
| CN117112021B (en) * | 2023-10-24 | 2024-01-26 | 腾讯科技（深圳）有限公司 | Route configuration generation method, device, equipment and computer readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111880859A (en) | Plug-in for automatically generating routing file and method thereof | |
| CN109976761B (en) | Software development kit generation method and device and terminal equipment | |
| CN111680253B (en) | Page application data packet generation method and device, computer equipment and storage medium | |
| EP1380946A2 (en) | Program code conversion with reduced translation | |
| CN111399840B (en) | Module development method and device | |
| US8756407B2 (en) | Configuration rule prototyping tool | |
| US10809985B2 (en) | Instrumenting program code | |
| CN111611441B (en) | Heterogeneous data processing method and device and computer equipment | |
| CN103294598A (en) | Method and device for source code inspection | |
| CN110362792B (en) | Method and device for converting RN file into applet file and conversion equipment | |
| CN107368420A (en) | API method of testings, device and electronic equipment | |
| CN112769706B (en) | Componentized routing method and system | |
| CN108694049B (en) | Method and equipment for updating software | |
| CN107092474B (en) | Program development method, ETL processing method and device | |
| CN111367512B (en) | Method and device for creating Android library module dependency relationship in application development | |
| CN117008920A (en) | Engine system, request processing method and device, computer equipment and storage medium | |
| CN109547394A (en) | A kind of bootstrap source code generation method and business board | |
| CN116521181A (en) | Script data processing method, device, equipment and medium based on game system | |
| CN109992293B (en) | Method and device for assembling Android system component version information | |
| CN107643892B (en) | Interface processing method, device, storage medium and processor | |
| CN112596734B (en) | Static library generation method and device | |
| CN108089852B (en) | Method, medium, apparatus and computing device for establishing attribute access | |
| CN111443906A (en) | Application access method and device | |
| CN116483597B (en) | Data sharing method, device, equipment and storage medium | |
| JP2019179383A (en) | Api processing method, terminal, and api processing program |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201103 |