(19)中华人民共和国国家知识产权局
(12)发明专利申请
前端页面模板(10)申请公布号 (43)申请公布日 (21)申请号 201811075291.5
(22)申请日 2018.09.14
(71)申请人 深圳易嘉恩科技有限公司
地址 518057 广东省深圳市南山区粤海街
道高新区南区科技南12路长虹科技大
厦23楼01单元
(72)发明人 胡皓　
(74)专利代理机构 成都虹桥专利事务所(普通
合伙) 51124
代理人 李凌峰
(51)Int.Cl.
G06F  8/38(2018.01)
(54)发明名称Web应用系统前端模块化开发方法(57)摘要本发明涉及Web应用系统开发技术，解决了现有Web应用系统前端开发中模块间耦合性高的技术问题。技术方案概括为：在项目模板中将Web 应用系统前端划分为一个门户模块和多个子模块，然后为每个模块建立独立的代码仓库，分别在本地服务
器开发各模块的代码，并将个模块部署到服务器；启动系统后检测运行环境，若是子模块的开发环境，则该子模块的入口地址为开发该子模块代码的本地服务器地址，剩余子模块的入口地址为子模块所部署的相应服务器地址，门户模块再将每个子模块对应的用户界面元素与入口地址进行一一对应。有益效果是，本发明中各个模块间耦合性低，各个模块的调试、编译和部署都互不影响。特别适用于Web应用系统前端
开发。权利要求书1页  说明书4页CN 109240691 A 2019.01.18
C N  109240691
A
1.Web应用系统前端模块化开发方法，其特征在于：包括代码开发部分和模块调用部分；
所述代码开发部分包括以下步骤：
步骤一、创建Web应用系统前端项目模板，将Web应用系统前端分为一个门户模块和多个子模块；
步骤二、利用版本控制工具为门户模块和每个子模块建立独立的代码仓库，分别对门户模块和每个子模块进行版本管理；
步骤三、分别在本地服务器开发并调试门户模块和各个子模块的代码，并将门户模块和各个子模块的代码提交到对应的代码仓库，每个代码仓库自动编译接收到的代码，并将代码对应的门户模块或子模块部署到服务器中；
步骤四、将门户模块和各个子模块的代码进行合并，统一发布；
所述模块调用部分包括以下步骤：
步骤A、启动Web应用系统前端后，首先加载门户模块并获取Web应用系统前端当前运行环境；
步骤B、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，若Web应用系统前端当前运行环境是任意一个或多个子模块的开发环境，则相应的一个子模块或多个子模块的入口地址为开发该子模块代码的本地服务器地址，Web应用系统中剩余子模块的入口地址为子模块所部署的相应服务器地址，若Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
步骤C、门户模块将每个子模块对应的用户界面元素与入口地址进行一一对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。
2.如权利要求1所述的Web应用系统前端模块化开发方法，其特征在于：所述门户模块和各个子模块分
别部署在不同的服务器中。
3.如权利要求1所述的Web应用系统前端模块化开发方法，其特征在于：所述门户模块和各个子模块部署在同一服务器的不同端口。
4.如权利要求1所述的Web应用系统前端模块化开发方法，其特征在于：所述步骤二中版本控制工具采用同一代码仓库的不同分支分别对门户模块和每个子模块进行版本管理，所述步骤三中将门户模块和各个子模块的代码提交到代码仓库对应的分支中。
权　利　要　求　书1/1页CN 109240691 A
Web应用系统前端模块化开发方法
技术领域
[0001]本发明涉及Web应用系统开发技术，特别涉及Web应用系统前端的模块化开发技术。
背景技术
[0002]随着互联网的发展，承载在Web页面上的业务日益复杂，使得前端开发规模变得越来越大，开
发团队的规模也变得越来越大。目前流行的开发模式是使用版本控制工具，进行敏捷开发，持续集成和持续交付。但上述方法中Web应用系统前端的各个模块之间耦合性较高，使得一个业务或者bug可能涉及到不同的模块，需要不同的开发人员协同开发，有时候只更新了一个文件，提交后也要全部文件重新编译、部署，影响其他开发人员工作，并且不同的开发人员开发完成后各自提交代码到代码仓库，有可能造成其他模块的编译错误等问题。此外，现有Web应用系统前端的各个模块都部署在同一服务器，如果某个模块出现问题，可能导致所有模块都无法正常使用，进行修复和重新部署都需要大量的时间，系统稳定性和可靠性不高。
发明内容
[0003]本发明为解决现有Web应用系统前端开发中模块间耦合性高的技术问题，提出一种Web应用系统前端模块化开发方法。
[0004]为解决上述技术问题，本发明采用的技术方案是：Web应用系统前端模块化开发方法，包括代码开发部分和模块调用部分；
[0005]所述代码开发部分包括以下步骤：
[0006]步骤一、创建Web应用系统前端项目模板，将Web应用系统前端分为一个门户模块和多个子模块；
[0007]步骤二、利用版本控制工具为门户模块和每个子模块建立独立的代码仓库，分别对门户模块和每个子模块进行版本管理；
[0008]步骤三、分别在本地服务器开发并调试门户模块和各个子模块的代码，并将门户模块和各个子模块的代码提交到对应的代码仓库，每个代码仓库自动编译接收到的代码，并将代码对应的门户模块或子模块部署到服务器中；
[0009]步骤四、将门户模块和各个子模块的代码进行合并，统一发布；
[0010]所述模块调用部分包括以下步骤：
[0011]步骤A、启动Web应用系统前端后，首先加载门户模块并获取Web应用系统前端当前运行环境；
[0012]步骤B、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，若Web应用系统前端当前运行环境是任意一个或多个子模块的开发环境，则相应的一个子模块或多个子模块的入口地址为开发该子模块代码的本地服务器地址，Web应用系统中剩余子模块的入口地址为子模块所部署的相应服务器
地址，若Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
[0013]步骤C、门户模块将每个子模块对应的用户界面元素与入口地址进行一一对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。
[0014]作为进一步优化，所述门户模块和各个子模块分别部署在不同的服务器中。将各个模块分别部署在不同的服务器中，即使某个模块或某个服务器出现问题，也不会影响其他模块的使用，系统的稳定性和可靠性得到提高。
[0015]作为进一步优化，所述门户模块和各个子模块部署在同一服务器的不同端口。将各个模块部署在同一服务器中，有利于集中管理和节约成本，同时各模块是部署在不同的端口，也能达到模块间相互分离的效果，使某个模块出现问题时不至于影响其他模块的使用。
[0016]作为进一步优化，所述步骤二中版本控制工具采用同一代码仓库的不同分支分别对门户模块和每个子模块进行版本管理，所述步骤三中将门户模块和各个子模块的代码提交到代码仓库对应的分支中。采用同一代码仓库有利于对所有代码的集中管理，同时各模块代码又位于该代码仓库的不同分支，也能使各模块代码相互分离。
[0017]有益效果是：本发明在Web应用系统前端开发过程中，分离出系统中的各个模块，并为每个模块配置单独的代码仓库，让每个模块的开发独立进行，各模块间不会相互影响，所有模块开发完成后再合并代码统一发布，并且通过门户模块调用各个子模块时，先检测系统前端运行环境，根据运行环
境判断当前用户是开发人员还是普通用户，开发人员通过点击门户模块的用户界面元素进入相应子模块，就能对自己负责的子模块再进行开发调试，本发明实现了系统中的各个模块独立开发，各个模块的调试、编译和部署都互不影响，模块间耦合性低。本发明特别适用于Web应用系统前端开发。
具体实施方式
[0018]下面结合实施例，进一步说明本发明的技术方案。
[0019]本发明的技术方案是：Web应用系统前端模块化开发方法，包括代码开发部分和模块调用部分；
[0020]所述代码开发部分包括以下步骤：
[0021]步骤一、创建Web应用系统前端项目模板，将Web应用系统前端分为一个门户模块和多个子模块；
[0022]步骤二、利用版本控制工具为门户模块和每个子模块建立独立的代码仓库，分别对门户模块和每个子模块进行版本管理；
[0023]步骤三、分别在本地服务器开发并调试门户模块和各个子模块的代码，并将门户模块和各个子
模块的代码提交到对应的代码仓库，每个代码仓库自动编译接收到的代码，并将代码对应的门户模块或子模块部署到服务器中；
[0024]步骤四、将门户模块和各个子模块的代码进行合并，统一发布；
[0025]所述模块调用部分包括以下步骤：
[0026]步骤A、启动Web应用系统前端后，首先加载门户模块并获取Web应用系统前端当前运行环境；
[0027]步骤B、门户模块根据Web应用系统前端当前运行环境，通过后台调用各个子模块的接口来获取各个子模块的入口地址，若Web应用系统前端当前运行环境是任意一个或多个子模块的开发环境，则相应的一个子模块或多个子模块的入口地址为开发该子模块代码的本地服务器地址，Web应用系统中剩余子模块的入口地址为子模块所部署的相应服务器地址，若Web应用系统前端当前运行环境是生产环境，则Web应用系统中所有子模块的入口地址为子模块所部署的相应服务器地址；
[0028]步骤C、门户模块将每个子模块对应的用户界面元素与入口地址进行一一对应，通过点击门户模块中不同的用户界面元素跳转到对应的子模块。
[0029]本发明在创建项目时将Web应用系统前端划分成一个门户模块和多个子模块，并为每个模块配置独立的代码仓库，这样开发人员就能对各个模块独立进行开发调试，待各个模块都开发完成后再将
代码合并发布；在启动Web应用系统前端后，需根据系统当前运行环境判断当前用户是开发人员还是普通用户，如果是开发人员，则相应子模块的入口地址就为对应的本地服务器，那么开发人员点击用户界面元素进入该子模块后就能进行更新、修复bug等开发操作。
[0030]对上述方法的各个步骤进行优化，具体可以是：门户模块和各个子模块可以分别部署在不同的服务器中。将各个模块分别部署在不同的服务器中，即使某个模块或某个服务器出现问题，也不会影响其他模块的使用，系统的稳定性和可靠性得到提高。门户模块和各个子模块也可以部署在同一服务器的不同端口。将各个模块部署在同一服务器中，有利于集中管理和节约成本，同时各模块是部署在不同的端口，也能达到模块间相互分离的效果，使某个模块出现问题时不至于影响其他模块的使用。步骤二中版本控制工具可以采用同一代码仓库的不同分支分别对门户模块和每个子模块进行版本管理，所述步骤三中将门户模块和各个子模块的代码提交到代码仓库对应的分支中。采用同一代码仓库有利于对所有代码的集中管理，同时各模块代码又位于该代码仓库的不同分支，也能使各模块代码相互分离。
[0031]实施例
[0032]下面采用React开发语言，GitLab版本控制工具举例具体说明。
[0033]步骤S1、使用React脚手架工具create-react-app创建Web应用系统前端项目模板，将Web应用
系统前端分为子模块一、子模块二、子模块三和门户模块。
[0034]步骤S2、在GitLab上为子模块一、子模块二、子模块三和门户模块分别建立独立的代码仓库为代码仓库一、代码仓库二、代码仓库三和代码仓库四，对子模块一、子模块二、子模块三和门户模块分别进行版本管理，其中，子模块一对应代码仓库一，子模块二对应代码仓库二，子模块三对应代码仓库三，门户模块对应代码仓库四。
[0035]步骤S3、开发人员分别在不同的本地服务器搭建子模块一、子模块二、子模块三和门户模块的开发环境，并分别在不同的本地服务器开发调试子模块一、子模块二、子模块三和门户模块的代码，完成后将子模块一的代码提交到代码仓库一，子模块二的代码提交到代码仓库二，子模块三的代码提交到代码仓库三，门户模块的代码提交到代码仓库四；代码仓库一、代码仓库二、代码仓库三和代码仓库四自动编译接收到的代码，并将代码对应的子模块一、子模块二、子模块三和门户模块部署到不同的服务器中。
[0036]步骤S4、需要正式发布时，将子模块一、子模块二、子模块三和门户模块的代码进

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。