CN109240691A - Web应用系统前端模块化开发方法 - Google Patents
Web应用系统前端模块化开发方法 Download PDFInfo
- Publication number
- CN109240691A CN109240691A CN201811075291.5A CN201811075291A CN109240691A CN 109240691 A CN109240691 A CN 109240691A CN 201811075291 A CN201811075291 A CN 201811075291A CN 109240691 A CN109240691 A CN 109240691A
- Authority
- CN
- China
- Prior art keywords
- submodule
- module
- web application
- application system
- code
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及Web应用系统开发技术，解决了现有Web应用系统前端开发中模块间耦合性高的技术问题。技术方案概括为：在项目模板中将Web应用系统前端划分为一个门户模块和多个子模块，然后为每个模块建立独立的代码仓库，分别在本地服务器开发各模块的代码，并将个模块部署到服务器；启动系统后检测运行环境，若是子模块的开发环境，则该子模块的入口地址为开发该子模块代码的本地服务器地址，剩余子模块的入口地址为子模块所部署的相应服务器地址，门户模块再将每个子模块对应的用户界面元素与入口地址进行一一对应。有益效果是，本发明中各个模块间耦合性低，各个模块的调试、编译和部署都互不影响。特别适用于Web应用系统前端开发。
Description
技术领域
本发明涉及Web应用系统开发技术，特别涉及Web应用系统前端的模块化开发技术。
背景技术
随着互联网的发展，承载在Web页面上的业务日益复杂，使得前端开发规模变得越来越大，开发团队的规模也变得越来越大。目前流行的开发模式是使用版本控制工具，进行敏捷开发，持续集成和持续交付。但上述方法中Web应用系统前端的各个模块之间耦合性较高，使得一个业务或者bug可能涉及到不同的模块，需要不同的开发人员协同开发，有时候只更新了一个文件，提交后也要全部文件重新编译、部署，影响其他开发人员工作，并且不同的开发人员开发完成后各自提交代码到代码仓库，有可能造成其他模块的编译错误等问题。此外，现有Web应用系统前端的各个模块都部署在同一服务器，如果某个模块出现问题，可能导致所有模块都无法正常使用，进行修复和重新部署都需要大量的时间，系统稳定性和可靠性不高。
发明内容
本发明为解决现有Web应用系统前端开发中模块间耦合性高的技术问题，提出一种Web应用系统前端模块化开发方法。
为解决上述技术问题，本发明采用的技术方案是：Web应用系统前端模块化开发方法，包括代码开发部分和模块调用部分；
所述代码开发部分包括以下步骤：
步骤一、创建Web应用系统前端项目模板，将Web应用系统前端分为一个门户模块和多个子模块；
步骤二、利用版本控制工具为门户模块和每个子模块建立独立的代码仓库，分别对门户模块和每个子模块进行版本管理；
步骤三、分别在本地服务器开发并调试门户模块和各个子模块的代码，并将门户模块和各个子模块的代码提交到对应的代码仓库，每个代码仓库自动编译接收到的代码，并将代码对应的门户模块或子模块部署到服务器中；
步骤四、将门户模块和各个子模块的代码进行合并，统一发布；
所述模块调用部分包括以下步骤：
步骤A、启动Web应用系统前端后，首先加载门户模块并获取Web应用系统前端当前运行环境；
步骤B、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，若Web应用系统前端当前运行环境是任意一个或多个子模块的开发环境，则相应的一个子模块或多个子模块的入口地址为开发该子模块代码的本地服务器地址，Web应用系统中剩余子模块的入口地址为子模块所部署的相应服务器地址，若Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
步骤C、门户模块将每个子模块对应的用户界面元素与入口地址进行一一对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。
作为进一步优化，所述门户模块和各个子模块分别部署在不同的服务器中。将各个模块分别部署在不同的服务器中，即使某个模块或某个服务器出现问题，也不会影响其他模块的使用，系统的稳定性和可靠性得到提高。
作为进一步优化，所述门户模块和各个子模块部署在同一服务器的不同端口。将各个模块部署在同一服务器中，有利于集中管理和节约成本，同时各模块是部署在不同的端口，也能达到模块间相互分离的效果，使某个模块出现问题时不至于影响其他模块的使用。
作为进一步优化，所述步骤二中版本控制工具采用同一代码仓库的不同分支分别对门户模块和每个子模块进行版本管理，所述步骤三中将门户模块和各个子模块的代码提交到代码仓库对应的分支中。采用同一代码仓库有利于对所有代码的集中管理，同时各模块代码又位于该代码仓库的不同分支，也能使各模块代码相互分离。
有益效果是：本发明在Web应用系统前端开发过程中，分离出系统中的各个模块，并为每个模块配置单独的代码仓库，让每个模块的开发独立进行，各模块间不会相互影响，所有模块开发完成后再合并代码统一发布，并且通过门户模块调用各个子模块时，先检测系统前端运行环境，根据运行环境判断当前用户是开发人员还是普通用户，开发人员通过点击门户模块的用户界面元素进入相应子模块，就能对自己负责的子模块再进行开发调试，本发明实现了系统中的各个模块独立开发，各个模块的调试、编译和部署都互不影响，模块间耦合性低。本发明特别适用于Web应用系统前端开发。
具体实施方式
下面结合实施例，进一步说明本发明的技术方案。
本发明的技术方案是：Web应用系统前端模块化开发方法，包括代码开发部分和模块调用部分；
所述代码开发部分包括以下步骤：
步骤一、创建Web应用系统前端项目模板，将Web应用系统前端分为一个门户模块和多个子模块；
步骤二、利用版本控制工具为门户模块和每个子模块建立独立的代码仓库，分别对门户模块和每个子模块进行版本管理；
步骤三、分别在本地服务器开发并调试门户模块和各个子模块的代码，并将门户模块和各个子模块的代码提交到对应的代码仓库，每个代码仓库自动编译接收到的代码，并将代码对应的门户模块或子模块部署到服务器中；
步骤四、将门户模块和各个子模块的代码进行合并，统一发布；
所述模块调用部分包括以下步骤：
步骤A、启动Web应用系统前端后，首先加载门户模块并获取Web应用系统前端当前运行环境；
步骤B、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，若Web应用系统前端当前运行环境是任意一个或多个子模块的开发环境，则相应的一个子模块或多个子模块的入口地址为开发该子模块代码的本地服务器地址，Web应用系统中剩余子模块的入口地址为子模块所部署的相应服务器地址，若Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
步骤C、门户模块将每个子模块对应的用户界面元素与入口地址进行一一对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。
本发明在创建项目时将Web应用系统前端划分成一个门户模块和多个子模块，并为每个模块配置独立的代码仓库，这样开发人员就能对各个模块独立进行开发调试，待各个模块都开发完成后再将代码合并发布；在启动Web应用系统前端后，需根据系统当前运行环境判断当前用户是开发人员还是普通用户，如果是开发人员，则相应子模块的入口地址就为对应的本地服务器，那么开发人员点击用户界面元素进入该子模块后就能进行更新、修复bug等开发操作。
对上述方法的各个步骤进行优化，具体可以是：门户模块和各个子模块可以分别部署在不同的服务器中。将各个模块分别部署在不同的服务器中，即使某个模块或某个服务器出现问题，也不会影响其他模块的使用，系统的稳定性和可靠性得到提高。门户模块和各个子模块也可以部署在同一服务器的不同端口。将各个模块部署在同一服务器中，有利于集中管理和节约成本，同时各模块是部署在不同的端口，也能达到模块间相互分离的效果，使某个模块出现问题时不至于影响其他模块的使用。步骤二中版本控制工具可以采用同一代码仓库的不同分支分别对门户模块和每个子模块进行版本管理，所述步骤三中将门户模块和各个子模块的代码提交到代码仓库对应的分支中。采用同一代码仓库有利于对所有代码的集中管理，同时各模块代码又位于该代码仓库的不同分支，也能使各模块代码相互分离。
实施例
下面采用React开发语言，GitLab版本控制工具举例具体说明。
步骤S1、使用React脚手架工具create-react-app创建Web应用系统前端项目模板，将Web应用系统前端分为子模块一、子模块二、子模块三和门户模块。
步骤S2、在GitLab上为子模块一、子模块二、子模块三和门户模块分别建立独立的代码仓库为代码仓库一、代码仓库二、代码仓库三和代码仓库四，对子模块一、子模块二、子模块三和门户模块分别进行版本管理，其中，子模块一对应代码仓库一，子模块二对应代码仓库二，子模块三对应代码仓库三，门户模块对应代码仓库四。
步骤S3、开发人员分别在不同的本地服务器搭建子模块一、子模块二、子模块三和门户模块的开发环境，并分别在不同的本地服务器开发调试子模块一、子模块二、子模块三和门户模块的代码，完成后将子模块一的代码提交到代码仓库一，子模块二的代码提交到代码仓库二，子模块三的代码提交到代码仓库三，门户模块的代码提交到代码仓库四；代码仓库一、代码仓库二、代码仓库三和代码仓库四自动编译接收到的代码，并将代码对应的子模块一、子模块二、子模块三和门户模块部署到不同的服务器中。
步骤S4、需要正式发布时，将子模块一、子模块二、子模块三和门户模块的代码进行合并，统一发布。
步骤S5、普通用户或开发人员在本地启动Web应用系统前端后，系统首先加载门户模块并获取Web应用系统前端当前运行环境。
步骤S6、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，当检测到Web应用系统前端当前运行环境是子模块一的开发环境时，表示子模块一的开发人员在运行系统，则将子模块一的入口地址设置为开发子模块一代码的本地服务器地址，子模块二的入口地址设置为子模块二所部署的服务器地址，子模块三的入口地址设置为子模块三所部署的服务器地址；若检测到Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
步骤S7、门户模块将子模块一的用户界面元素与子模块一的入口地址进行对应，将子模块二的用户界面元素与子模块二的入口地址进行对应，将子模块三的用户界面元素与子模块三的入口地址进行对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。如果是普通用户进行的点击，就能连接到相应子模块所部署的服务器正常使用；如果是开发人员进行的点击，就能连接到开发相应子模块的本地服务器，开发人员就能对该子模块进行更新、修复bug等开发操作。
Claims (4)
1.Web应用系统前端模块化开发方法，其特征在于：包括代码开发部分和模块调用部分；
所述代码开发部分包括以下步骤：
步骤一、创建Web应用系统前端项目模板，将Web应用系统前端分为一个门户模块和多个子模块；
步骤二、利用版本控制工具为门户模块和每个子模块建立独立的代码仓库，分别对门户模块和每个子模块进行版本管理；
步骤三、分别在本地服务器开发并调试门户模块和各个子模块的代码，并将门户模块和各个子模块的代码提交到对应的代码仓库，每个代码仓库自动编译接收到的代码，并将代码对应的门户模块或子模块部署到服务器中；
步骤四、将门户模块和各个子模块的代码进行合并，统一发布；
所述模块调用部分包括以下步骤：
步骤A、启动Web应用系统前端后，首先加载门户模块并获取Web应用系统前端当前运行环境；
步骤B、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，若Web应用系统前端当前运行环境是任意一个或多个子模块的开发环境，则相应的一个子模块或多个子模块的入口地址为开发该子模块代码的本地服务器地址，Web应用系统中剩余子模块的入口地址为子模块所部署的相应服务器地址，若Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
步骤C、门户模块将每个子模块对应的用户界面元素与入口地址进行一一对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。
2.如权利要求1所述的Web应用系统前端模块化开发方法，其特征在于：所述门户模块和各个子模块分别部署在不同的服务器中。
3.如权利要求1所述的Web应用系统前端模块化开发方法，其特征在于：所述门户模块和各个子模块部署在同一服务器的不同端口。
4.如权利要求1所述的Web应用系统前端模块化开发方法，其特征在于：所述步骤二中版本控制工具采用同一代码仓库的不同分支分别对门户模块和每个子模块进行版本管理，所述步骤三中将门户模块和各个子模块的代码提交到代码仓库对应的分支中。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811075291.5A CN109240691A (zh) | 2018-09-14 | 2018-09-14 | Web应用系统前端模块化开发方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811075291.5A CN109240691A (zh) | 2018-09-14 | 2018-09-14 | Web应用系统前端模块化开发方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109240691A true CN109240691A (zh) | 2019-01-18 |
Family
ID=65058461
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811075291.5A Pending CN109240691A (zh) | 2018-09-14 | 2018-09-14 | Web应用系统前端模块化开发方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109240691A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569035A (zh) * | 2019-08-08 | 2019-12-13 | 数字广东网络建设有限公司 | 软件开发项目的代码编译方法、装置、设备和存储介质 |
| CN111459503A (zh) * | 2020-03-30 | 2020-07-28 | 北京顺达同行科技有限公司 | web前端项目部署方法、装置、服务器及存储介质 |
| CN112035160A (zh) * | 2020-08-31 | 2020-12-04 | 广州鲁邦通物联网科技有限公司 | 代码管理系统及其控制方法 |
| CN112748925A (zh) * | 2019-10-30 | 2021-05-04 | 北京国双科技有限公司 | 利用标签解析前端代码的方法、装置和设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102968298A (zh) * | 2012-10-31 | 2013-03-13 | 山东浪潮齐鲁软件产业股份有限公司 | 一种软件产品构建方法 |
| CN106126204A (zh) * | 2016-06-15 | 2016-11-16 | 中邮建技术有限公司 | 一种基于模块化设计的信息系统迭代式扩展开发方法 |
| CN107450929A (zh) * | 2017-08-10 | 2017-12-08 | 武汉斗鱼网络科技有限公司 | 页面开发方法及装置 |
-
2018
- 2018-09-14 CN CN201811075291.5A patent/CN109240691A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102968298A (zh) * | 2012-10-31 | 2013-03-13 | 山东浪潮齐鲁软件产业股份有限公司 | 一种软件产品构建方法 |
| CN106126204A (zh) * | 2016-06-15 | 2016-11-16 | 中邮建技术有限公司 | 一种基于模块化设计的信息系统迭代式扩展开发方法 |
| CN107450929A (zh) * | 2017-08-10 | 2017-12-08 | 武汉斗鱼网络科技有限公司 | 页面开发方法及装置 |
Non-Patent Citations (2)
| Title |
|---|
| _木木_: "一个管理客户端模块化开发的Git分支模型", 《HTTPS://WWW.JIANSHU.COM/P/E95741CBC39C》 * |
| 何宗宜: "《测绘综合能力 考点剖析与试题解析》", 30 June 2017, 武汉大学出版社 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569035A (zh) * | 2019-08-08 | 2019-12-13 | 数字广东网络建设有限公司 | 软件开发项目的代码编译方法、装置、设备和存储介质 |
| CN112748925A (zh) * | 2019-10-30 | 2021-05-04 | 北京国双科技有限公司 | 利用标签解析前端代码的方法、装置和设备 |
| CN111459503A (zh) * | 2020-03-30 | 2020-07-28 | 北京顺达同行科技有限公司 | web前端项目部署方法、装置、服务器及存储介质 |
| CN111459503B (zh) * | 2020-03-30 | 2023-09-29 | 北京顺达同行科技有限公司 | web前端项目部署方法、装置、服务器及存储介质 |
| CN112035160A (zh) * | 2020-08-31 | 2020-12-04 | 广州鲁邦通物联网科技有限公司 | 代码管理系统及其控制方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109240691A (zh) | Web应用系统前端模块化开发方法 | |
| AU2018203054B2 (en) | System of distributed software quality improvement | |
| CN106502907B (zh) | 一种基于执行轨迹追踪的分布式软件异常诊断方法 | |
| Zhao | Slicing aspect-oriented software | |
| CN101727316B (zh) | 适于集群系统的并行程序集成开发系统及其应用实现方法 | |
| US8271416B2 (en) | Method for dynamically determining a predetermined previous condition of a rule-based system | |
| Zhao | Applying program dependence analysis to Java software | |
| CN109936479B (zh) | 基于差分检测的控制平面故障诊断系统及其实现方法 | |
| CN102035892A (zh) | 操作系统版本自动发布和软件包自动更新的系统及方法 | |
| CN103778061A (zh) | 数组越界错误的自动检测和校正方法 | |
| CA2651012A1 (en) | Comprehensive system for product management | |
| CN103077111A (zh) | 一种持续集成失败用例的定位方法及系统 | |
| CN105487859A (zh) | 一种基于模板的大数据组件web部署方法 | |
| CN103257852A (zh) | 一种分布式应用系统的开发环境搭建的方法和装置 | |
| CN115878207A (zh) | 一种微服务治理方法、装置及系统 | |
| CN103455417A (zh) | 一种基于马尔可夫模型的软件错误定位系统及错误定位方法 | |
| Mao et al. | FAUSTA: scaling dynamic analysis with traffic generation at whatsapp | |
| Schrettner et al. | Impact analysis using static execute after in webkit | |
| David et al. | A multi-stage approach for reliable dynamic reconfigurations of component-based systems | |
| Kapur et al. | Optimal reliability allocation problem for a modular software system | |
| TWI618024B (zh) | Automatic detection and setting method for automatically detecting PON network heterogeneous optical terminal equipment | |
| US20230350747A1 (en) | Cross-System Configuration Checks | |
| CN104731692A (zh) | 监控持续集成状态的方法及装置 | |
| Neves | Towards Fuzzing Target Lines | |
| CN115826944A (zh) | 一种基于容器的持续集成方法和系统 |
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 |
Application publication date: 20190118 |
|
| RJ01 | Rejection of invention patent application after publication |