CN113448559A - Development system and method of global wide area network front end aiming at multiple development projects - Google Patents
Development system and method of global wide area network front end aiming at multiple development projects Download PDFInfo
- Publication number
- CN113448559A CN113448559A CN202110790944.3A CN202110790944A CN113448559A CN 113448559 A CN113448559 A CN 113448559A CN 202110790944 A CN202110790944 A CN 202110790944A CN 113448559 A CN113448559 A CN 113448559A
- Authority
- CN
- China
- Prior art keywords
- development
- module
- creating
- projects
- 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
- 238000011161 development Methods 0.000 title claims abstract description 155
- 238000000034 method Methods 0.000 title claims abstract description 18
- 238000010367 cloning Methods 0.000 claims abstract description 5
- 238000004806 packaging method and process Methods 0.000 claims description 13
- 230000006870 function Effects 0.000 claims description 12
- 238000004519 manufacturing process Methods 0.000 claims description 6
- 230000004931 aggregating effect Effects 0.000 claims description 4
- 238000012545 processing Methods 0.000 claims description 3
- 238000013515 script Methods 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 241000282326 Felis catus Species 0.000 description 1
- 238000009825 accumulation Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 239000002699 waste material Substances 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Abstract
The invention provides a development system and a method of a global wide area network front end aiming at multiple development projects.A common module manages a tool pack commonly used by the development projects of the global wide area network front end, and the commonly used tool pack is uniformly compressed into a file for storage; the storage module stores a pre-established front-end development template, and the front-end development template is suitable for a plurality of development projects; the creating module is respectively connected with the public module and the storage module and used for calling the tool kit managed by the public module, cloning the front-end development template and creating a new development project. The system has the advantages that the structure is clear, the system is simple and easy to use, the tool kit is uniformly managed by the public module, so that the node _ modules are uniformly accessed, the occupied space of a hard disk is greatly reduced, the development project creation module is created and generated by the uniform template, the convenience and the flexibility are realized, the mutual independence is realized, and the reusability is strong.
Description
Technical Field
The invention relates to the technical field of web front ends, in particular to a development system and a development method of a global wide area network front end aiming at multiple development projects.
Background
The front-end development is a process of creating a front-end interface such as a Web page or app and the like and presenting the front-end interface to a user, and user interface interaction of an internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions. It evolved from web page production and has a very obvious epoch feature in name. In the evolution process of the internet, the webpage making is a product of the Web1.0 era, the main content of the early website is static, pictures and characters are taken as the main content, and the behavior of a user using the website is also taken as the main content of browsing. With the development of internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, the interaction effect is obvious, and the functions are more powerful.
As the information contained in the web page becomes richer, a front-end script (JavaScript) program for constructing the web page becomes more complex. At present, in order to improve the development efficiency of the front-end JavaScript program, a modular development manner is generally adopted to reduce the complexity of editing, for example, the front-end JavaScript program is edited based on node. The defects of the existing web front-end development project are as follows: (1) each development project generates a large number of node _ modules, and hard disk space is occupied by accumulation; (2) the development project templates are not uniform, and the reusability is poor; (3) lack of a uniform tool library, high maintenance cost and waste of request resources.
Disclosure of Invention
Based on the technical problems in the prior art, the invention provides a development system and a development method for a global wide area network front end aiming at multiple development projects, and aims to solve the technical problems of large occupied hard disk space and the like in the prior art.
A development system for a global wide area network front end for multiple development projects, comprising:
the public module is used for managing tool packages commonly used for development and development projects at the front end of the global wide area network, aggregating the commonly used and dispersed unified files of the tool packages into a file and compressing the file;
the storage module stores a pre-established front-end development template, and the front-end development template is suitable for a plurality of development and development projects;
and the creating module is respectively connected with the public module and the storage module and used for calling the tool kit managed by the public module, cloning the front-end development template and creating a new development project.
Furthermore, the development system also comprises a starting module and a connection creating module, wherein the starting module is used for running the newly created development project and performing cross-domain and hot update processing on the newly created development project by using a third-party packaging tool.
Furthermore, the development system also comprises a packaging module which is connected with the starting module and used for carrying out production environment configuration on the newly created development project and carrying out packaging after redundant codes in the newly created development project are deleted.
Furthermore, the development system also comprises an upgrading module which is connected with the common module and used for uniformly upgrading the common tool kit.
Further, common tools include a date function and a request function.
Further, the creating module includes:
the information configuration unit is used for configuring development project information in the process of creating a new development project;
and the directory creating unit is used for creating a main directory and creating sub-directories in the process of creating a new development project.
Further, the creation module clones a front-end development template based on the Linux instruction.
Further, step S1, storing a pre-established front-end development template in a storage module, where the front-end development template is applicable to a plurality of development projects;
step S2, the common module manages the tool packs commonly used by the development and development projects at the front end of the global wide area network, and the commonly used tool packs are uniformly compressed into a file to be stored;
and step S3, the creating module calls the tool kit managed by the common module, clones the front-end development template and creates a new development project.
The beneficial technical effects of the invention are as follows: the invention provides a development system and a development method of a global wide area network front end aiming at multiple development projects, which have clear architecture, are simple and easy to use, and can uniformly manage a toolkit by a common module, so that node _ modules can be uniformly accessed, the occupied space of a hard disk is greatly reduced, and a development project creation module is created and generated by a uniform template, thereby being convenient and flexible, mutually independent and strong in reusability.
Drawings
FIG. 1 is a block diagram of a development system for a WWAN front end for multiple development projects;
FIG. 2 is a block diagram of a development system for a WWAN front end for multiple development projects;
FIG. 3 is a flowchart illustrating steps of a method for WWAN front end development for multiple development projects.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. 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.
It should be noted that the embodiments and features of the embodiments may be combined with each other without conflict.
The invention is further described with reference to the following drawings and specific examples, which are not intended to be limiting.
Referring to fig. 1-2, the present invention provides a development system of a global wide area network front end for multiple development projects, which is characterized in that:
the public module (1) is used for managing common tool packages of development and development projects at the front end of the global wide area network, and uniformly compressing the common tool packages into a file for storage; specifically, aggregating the commonly used and scattered unified files of the toolkit into one file and compressing the file;
the storage module (2) stores a pre-established front-end development template, and the front-end development template is suitable for a plurality of development and development projects;
and the creating module (3) is respectively connected with the public module (1) and the storage module (2) and is used for calling the tool kit managed by the public module (1), cloning the front-end development template and creating a new development project.
Specifically, the common module (1) centrally manages js tool packages common in web development projects, such as a date function, a tool package of a request function, and compresses the tool package into a js file.
Specifically, the public module (1) is configured by self according to requirements, a linux script language is adopted for design, dispersed files are aggregated into a file by using instructions such as touch, cat and the like, and a compression function is completed by using an uglyfyjs instruction.
Specifically, the creating module (2) is a module for generating a new development project by initialization, and is mainly used for quickly cloning a front-end development template to generate the new development project.
Specifically, the creating module (2) is designed by adopting Linux script language and Nodejs programming language, Nodejs global variable process. argv [3] obtains that the name variable of the development project is $ { a }, creates $ { a } catalog, and a Linux script execSync instruction triggers the clone file flow to $ { a }, so that the one-key clone front-end development template is realized, and the purpose of quickly creating the development project is achieved.
Further, the development system further comprises a starting module (4) and a connection creating module (3) which are used for running the newly created development project and performing cross-domain and hot update processing on the newly created development project by using a third-party packaging tool.
Specifically, the start module (4) manages the development of the local environment.
Specifically, the starting module (4) mainly adopts the related technology of a third-party packing tool webpack, configures webpack proxy middleware to solve the cross-domain problem caused by the inconsistency of domain names of a server and a client, configures a webpack devServer object hot attribute value, starts local development hot update, and solves the trouble of manually refreshing a browser in development.
Furthermore, the development system also comprises a packaging module (5) which is connected with the starting module (5) and used for carrying out production environment configuration on the newly created development project and carrying out packaging after redundant codes in the newly created development project are deleted.
Specifically, the packaging module (5) manages the production environment configuration, realizes the purposes of individually compiling production environment codes and deleting redundant codes,
specifically, the packaging module (5) mainly adopts the related technology of a Linux scripting language and a third-party packaging tool webpack, configures related attributes of a public path and an externals inside the webpack to realize the personalized functions of cdn resource loading, three-party resource package calling and the like, and after the webpack command is finished, realizes the function of deleting redundant codes in a development project by using a Linux language sed instruction.
Furthermore, the development system also comprises an upgrading module (6) which is connected with the common module (1) and is used for uniformly upgrading the common tool kit.
Further, common tools include a date function and a request function.
Further, the creation module (3) comprises:
the information configuration unit (31) is used for configuring development project information in the process of creating a new development project;
and the directory creating unit (32) is used for creating a main directory and creating sub directories in the process of creating a new development project.
Further, the subdirectories include a create development project subdirectory, a preview development project subdirectory, a package development project subdirectory, and an export file subdirectory.
Further, the common module (1) is used for aggregating scattered tool kit files into one file based on the Linux instruction and compressing the file.
Further, the creating module (3) clones a front-end development template based on the Linux instruction.
Further, step S1, storing a pre-established front-end development template in the storage module (2), wherein the front-end development template is applicable to a plurality of development projects;
step S2, the common module manages the tool packs commonly used by the development and development projects at the front end of the global wide area network, and the commonly used tool packs are uniformly compressed into a file to be stored;
and step S3, the creating module (3) calls the toolkit managed by the common module (1), clones the front-end development template and creates a new development project.
Specifically, the development system of the present invention further includes a command configuration module, configured to perform command (instruction) configuration, so that a developer can enter a relevant instruction in a command line to operate a corresponding module.
The configuration is simple, and the content is written in the package json file under the following path
"scripts":{
"create" $ node $ { create module entry File } ".
"serve": node $ { boot module entry file } ",
"build": node $ { package module entry file } ",
in the creation module (2), a) creates the home directory using vue-cli or exact-cli (optional). b) Creating a webapc subdirectory, and respectively configuring: js (export file), build.js (package development project), check.js (preview development project), create.js (build development project), webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js. c) Configure vue.
Json script command, "start": node webpack/serve "is configured; b) "service": vue-cli-service "; "build": vue-cli-service build "; "line": vue-cli-service line "; e) "create" means "node webpack/create".
The development system and the development method of the global wide area network front end aiming at multiple development projects are used for carrying out centralized management on common toolkits, so that the space of a local server and a server is saved, the framework is simple and easy to use, and each link of the creation, operation and packaging of the development projects can be realized by only one command. The module services are independent and do not influence each other.
While the invention has been described with reference to a preferred embodiment, it will be understood by those skilled in the art that various changes in form and detail may be made therein without departing from the spirit and scope of the invention.
Claims (8)
1. A development system for a global wide area network front end for multiple development projects, comprising:
the system comprises a public module (1) and a client, wherein the public module is used for managing tool packages commonly used by development projects at the front end of the global wide area network, aggregating the commonly used and dispersed unified files of the tool packages into a file and compressing the file;
the system comprises a storage module (2) for storing a pre-established front-end development template, wherein the front-end development template is suitable for a plurality of development projects;
and the creating module (3) is respectively connected with the public module (1) and the storage module (2) and is used for calling the toolkit managed by the public module (1), cloning the front-end development template and creating a new development project.
2. The development system of a ww an front end for multiple development projects as recited in claim 1, wherein:
the development system also comprises a starting module (4) which is connected with the creating module (3) and used for running the newly created development project and performing cross-domain and hot update processing on the newly created development project by using a third party packaging tool.
3. The development system of a ww an front end for multiple development projects as recited in claim 1, wherein:
the development system also comprises a packaging module (5) which is connected with the starting module (5) and is used for carrying out production environment configuration on the newly created development project and carrying out packaging after redundant codes in the newly created development project are deleted.
4. The development system of a ww an front end for multiple development projects as recited in claim 1, wherein:
the development system also comprises an upgrading module (6) which is connected with the public module (1) and is used for uniformly upgrading the common tool kit.
5. The development system of a ww an front end for multiple development projects as recited in claim 1, wherein:
commonly used such tools include date functions and request functions.
6. The development system of a ww an front end for multiple development projects as recited in claim 1, wherein:
the creation module (3) comprises:
the information configuration unit (31) is used for configuring development project information in the process of creating a new development project;
and the directory creating unit (32) is used for creating a main directory and creating sub directories in the process of creating a new development project.
7. The development system for a WWAN front end for multiple development projects of claim 1,
and the creating module (3) clones the front-end development template based on a Linux instruction.
8. The method of claim 1, wherein the development tool comprises a first tool for performing the development of the WWAN front end,
step S1, storing a pre-established front-end development template in a storage module (2), wherein the front-end development template is suitable for a plurality of development and development projects;
step S2, the common module manages the tool packs commonly used by the development and development projects at the front end of the global wide area network, and the commonly used tool packs are uniformly compressed into a file to be stored;
and step S3, the creating module (3) calls the toolkit managed by the public module (1), clones the front-end development template and creates a new development project.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110790944.3A CN113448559A (en) | 2021-07-13 | 2021-07-13 | Development system and method of global wide area network front end aiming at multiple development projects |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110790944.3A CN113448559A (en) | 2021-07-13 | 2021-07-13 | Development system and method of global wide area network front end aiming at multiple development projects |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113448559A true CN113448559A (en) | 2021-09-28 |
Family
ID=77816026
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110790944.3A Pending CN113448559A (en) | 2021-07-13 | 2021-07-13 | Development system and method of global wide area network front end aiming at multiple development projects |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113448559A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115237386A (en) * | 2022-09-19 | 2022-10-25 | 杭州实在智能科技有限公司 | Method and system for developing large-scale complex Windows native desktop |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120254722A1 (en) * | 2011-03-31 | 2012-10-04 | Cloudera, Inc. | Interactive user interface implementation and development environment therefor |
| CN106843869A (en) * | 2017-01-16 | 2017-06-13 | 百融（北京）金融信息服务股份有限公司 | A kind of front end Development Engineering system and method |
| CN110580152A (en) * | 2018-06-07 | 2019-12-17 | 北京怡合春天科技有限公司 | Automatic scaffold frame of front end |
| CN111273898A (en) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | Web front-end code automatic construction method, system and storage medium |
| CN111857810A (en) * | 2020-07-30 | 2020-10-30 | 上海妙一生物科技有限公司 | Front-end development file creating method and device and electronic equipment |
| CN111949262A (en) * | 2020-08-14 | 2020-11-17 | 曙光信息产业(北京)有限公司 | Front-end project construction method and device, computer equipment and storage medium |
| CN112685035A (en) * | 2020-12-25 | 2021-04-20 | 京东数字科技控股股份有限公司 | Project development method and device, computer-readable storage medium and electronic device |
| CN112860231A (en) * | 2021-03-11 | 2021-05-28 | 中国银行股份有限公司 | Front-end framework conversion method and device |
-
2021
- 2021-07-13 CN CN202110790944.3A patent/CN113448559A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120254722A1 (en) * | 2011-03-31 | 2012-10-04 | Cloudera, Inc. | Interactive user interface implementation and development environment therefor |
| CN106843869A (en) * | 2017-01-16 | 2017-06-13 | 百融（北京）金融信息服务股份有限公司 | A kind of front end Development Engineering system and method |
| CN110580152A (en) * | 2018-06-07 | 2019-12-17 | 北京怡合春天科技有限公司 | Automatic scaffold frame of front end |
| CN111273898A (en) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | Web front-end code automatic construction method, system and storage medium |
| CN111857810A (en) * | 2020-07-30 | 2020-10-30 | 上海妙一生物科技有限公司 | Front-end development file creating method and device and electronic equipment |
| CN111949262A (en) * | 2020-08-14 | 2020-11-17 | 曙光信息产业(北京)有限公司 | Front-end project construction method and device, computer equipment and storage medium |
| CN112685035A (en) * | 2020-12-25 | 2021-04-20 | 京东数字科技控股股份有限公司 | Project development method and device, computer-readable storage medium and electronic device |
| CN112860231A (en) * | 2021-03-11 | 2021-05-28 | 中国银行股份有限公司 | Front-end framework conversion method and device |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115237386A (en) * | 2022-09-19 | 2022-10-25 | 杭州实在智能科技有限公司 | Method and system for developing large-scale complex Windows native desktop |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108279932B (en) | Method and device for dynamically configuring user interface of mobile terminal | |
| CN107797767B (en) | One kind is based on container technique deployment distributed memory system and its storage method | |
| CN111290753B (en) | Method, device, equipment and storage medium for building front-end development environment | |
| WO2018126964A1 (en) | Task execution method and apparatus and server | |
| CN110580174B (en) | Application component generation method, server and terminal | |
| CN110704031B (en) | Software application project creating method and device and electronic equipment | |
| CN111722873A (en) | Code reconstruction method, device, equipment and medium | |
| CN110865843A (en) | Page backtracking, information backup and problem solving method, system and equipment | |
| CN111651219A (en) | Method and equipment for managing multi-module project configuration file | |
| CN113094028A (en) | Windows desktop program development framework, method and related components | |
| CN113448559A (en) | Development system and method of global wide area network front end aiming at multiple development projects | |
| US20120311522A1 (en) | Repository based development using project development tools in enterprise management environment | |
| CN111723314B (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| CN114912897A (en) | Workflow execution method, workflow arrangement method and electronic equipment | |
| CN112214250A (en) | Application program assembly loading method and device | |
| CN116301951B (en) | Micro-service application installation upgrading method and device based on kubernetes | |
| CN101876998A (en) | Method and system for editing data | |
| CN112463251A (en) | Method and device for configuring hot publishing by uliweb framework | |
| CN112068879A (en) | Method and device for constructing client application development framework based on configuration | |
| CN112235132A (en) | Method, device, medium and server for dynamically configuring service | |
| CN110673835A (en) | Dynamic assembly type development system, method, computer and computer program | |
| CN113485746B (en) | Method and device for generating application program interface document | |
| US11843679B2 (en) | Automated dependency management based on page components | |
| US20180181382A1 (en) | Consuming persistent library bundles | |
| CN110442331B (en) | Method and system for automatically building code frame |
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 |