多系统集成部署并保持界面统一的前端部署系统及方法

摘要

本发明是一种多系统集成部署并保持界面统一的前端部署系统及方法，属于计算机前端应用领域；为了解决子系统缺少统一的技术底盘，缺少统一的基础组件，在集成部署时，无法做到快速的切换主题样式，无法保证交互体验一致的问题；包括底层前端框架和开源库模块、产品公共组件模块，定制化页面模块，产品系统模块，系统管理模块、主题模块和交付项目模块；利用底层前端框架进行前端部署的主体变量定义，定制化页面模块进行编译样式，接入系统管理的同时确定各个界面的数据状态，完成集成部署并保持界面统一的前端部署过程；本发明支持独立开发，独立运行，独立部署，允许有定制化开发的功能，在不需要任何改变的前提下，支持界面主题风格的切换。

说明书

技术领域

本发明一种多系统集成部署并保持界面统一的前端部署系统及方法，尤其涉及多各界面的风格统一并完成前端部署，属于计算机前端应用领域。

背景技术

web初期，网页主要提供的是文档的功能，人们只是把很多的知识和文档都搬到网上去，因此网页主要是提供浏览和阅读的功能，网站系统复杂度比较简单。

进入web2.0时期，随着网站的技术持续发展，尤其是JavaScript、CSS的发展和ajax技术的进步，网站的功能越来越丰富了，网站不止提供浏览的功能，还提供了非常多的交互，给用户带来了更好的访问体验，但同时也大大的增加了网页开发的复杂度。

一个复杂的网站系统动辄几万甚至几十万行页面代码，通常由非常多的网页模块组成，开发的团队通常会有多个，团队包含多个开发人员。因此提供一种能够：把不同的业务拆分为不同的子系统，由不同团队独立开发，同时又遵循一套开发和界面规范，最后进行融合部署，还可以根据客户需求快速变化主题样式的网站架构就非常有必要了。

智能交通的软件项目，往往就是由多个独立的子系统组成，系统之间界面和逻辑等是独立分开的。在产品开发阶段，不同的子系统由不同的业务团队开发。子系统可以独立交付，也可以多个子系统和定制化功能一起作为大项目交付。

现有iframe嵌入方案：产品系统一样是独立开发、运行和部署，但是集成交付的形式使用的iframe方式嵌入。该方案优点是：产品系统之间完全分隔，彼此互不影响，集成部署非常简单；缺点是：交互、界面、体验难以做到一致，切换系统时存在空白间隙。

基于single-spa开源库的微前端方案：single-spa是一种允许多种前端技术开发的系统集成部署的方案。该方案优点是：子系统的开发技术无关，子系统可以独立开发、运行和部署；缺点是：没有提供统一的界面底盘架构，难以做到子系统的体验交互一致。

由上介绍可知，现有的技术虽能够达到各个子系统独立开发部署，也能够集成部署，但是集成部署的主题样式、交互体验等无法做到一致，在部署不同的项目时，主题样式也无法变化，原因如下：

子系统缺少统一的技术底盘，缺少统一的基础组件，缺少统一的主题样式规范，在集成部署时，无法做到快速的切换主题样式，无法保证交互体验等一致。

发明内容

为了解决子系统缺少统一的技术底盘，缺少统一的基础组件，缺少统一的主题样式规范，在集成部署时，无法做到快速的切换主题样式，无法保证交互体验一致的问题，本发明提出一种多系统集成部署并保持界面统一的前端部署系统及方法，方案如下：

方案一：该系统包括底层前端框架和开源库模块、产品公共组件模块，定制化页面模块，产品系统模块，系统管理模块、主题模块和交付项目模块；

其中所述的底层前端框架模块和开源库模块构成前端部署的基础结构；

所述的产品公共组件模块包括若干产品公共组件；

所述的定制页面模块包括若干项目页面，通过定制页面模块规范出若干所述的产品系统模块；

所述的系统管理模块负责用户的登录及相关功能；

所述的主题模块负责定义样式变量以及定制样式；

交付项目模块负责最终实现多系统集成部署并保持界面统一的前端部署。

进一步地，所述的底层前段框架模块以前端框架vue为核心，包括板卡路由管理、数据状态管理、ui框架构建、图表生成、二维地图建立和三维地图建立功能；

所述的底层前端框架和开源库模块进行二次开发封装得到统一ui规范、统一交互规范、公共函数库和基础组件。

进一步地，所述的交付项目模块为所述的定制化页面模块，产品系统模块，系统管理模块和主题模块提供最终整合，并使用户在操作系统过程中随时查看模块呈现内容。

进一步地，所述的产品系统模块包括数据状态管理，路由页面判断和构建参数定制化功能。

进一步地，所述的系统管理模块的相关功能包括提示用户信息，菜单、按钮、数据权限控制，以及用户、角色、菜单和日志管理。

进一步地，所述的主题模块包括样式变量less和js变量定义、ui框架主题定义、地图样式定义以及项目定制样式定义功能。

方案二：一种多系统集成部署并保持界面统一的前端部署方法，是根据上述的系统为基础实现的，具体的方法步骤如下：

步骤一，利用所述的底层前端框架和开源库模块、所述的产品公共组件模块进行前端部署的主体变量定义；

步骤二，将步骤一得到的主题变量通过所述的定制化页面模块进行编译样式；

步骤三，激活所述的系统管理模块，用户同时接入系统管理；

步骤四，通过所述的产品系统模块确定各个界面的数据状态，实施产品系统集成部署；

步骤五，利用所述的主题模块进行界面的最终确认，并完成集成部署并保持界面统一的前端部署过程。

进一步地，在步骤三中，所述的用户接入系统管理过程细化为：

步骤三一，执行系统管理引入，将系统管理放在单独的代码仓库中；

步骤三二，执行系统管理路由注册，将系统管理相关路由通过路由配置注册；

步骤三三，针对用户将系统管理状态注册。

进一步地，在步骤四中，所述的产品系统模块确定各个界面的数据状态及部署过程细化为：

步骤四一，进入系统配置产品系统信息；

步骤四二，根据路由前缀判断是否进入产品系统；

步骤四三，判断targetApp函数若不为空，则表示属于产品系统，执行加载产品的脚本挂载产品路由和注册产品状态数据；反之则加载产品项目脚本挂载产品路由和注册状态数据，完成并提示进入系统成功。

本发明与现有技术相比带来的有益效果为：

本发明实现了多个独立的子系统无缝集成部署基于产品项目独立开发独立部署，同时也可以集成部署并支持界面主题风格的切换的为目标。该方法有以下几个优点：

(1)产品系统支持独立开发，独立运行，独立部署；

(2)产品系统可以打包一起集成部署，集成交付；

(3)集成交付的项目，允许有定制化开发的功能；

(4)集成交付的项目在产品系统不需要任何改变的前提下，支持界面主题风格的切换。

附图说明

图1多系统集成部署并保持界面统一的前端部署系统结构图；

图2系统页面生成product目录流程图；

图3多系统集成部署并保持界面统一的前端部署系统加载过程示意图；

图4多系统集成部署并保持界面统一的前端部署方法流程图；

图5多系统集成部署并保持界面统一的前端部署系统界面示例图。

具体实施方式

以下结合附图对本发明具体实施方式进行说明：

具体实施方式一：一种多系统集成部署并保持界面统一的前端部署系统,包括底层前端框架和开源库模块、产品公共组件模块，定制化页面模块，产品系统模块，系统管理模块、主题模块和交付项目模块；首先，利用底层前端框架模块和开源库模块构成前端部署的基础结构；然后通过产品公共组件模块包括若干产品公共组件，定制页面模块包括若干项目页面，定制页面模块规范出若干所述的产品系统模块；

另外通过系统管理模块负责用户的登录及相关功能，最后，利用主题模块负责定义样式变量以及定制样式，由交付项目模块负责最终实现多系统集成部署并保持界面统一的前端部署，模块构成如附图1所示。

具体实施方式二：一种多系统集成部署并保持界面统一的前端部署方法具体实现方式如下：

1.技术实现方式

1.1主题变量定义：

在src/global/style/theme/var.less中，使用less语言定义主题变量，执行核心代码如下：

@color-primary:#21a7ed；

@small-font-size:12px；

@color-text-default:#fff；

@color-success:#67C23A；

@color-warning:#ffc600；

@color-danger:#F56C6C；

@color-info:#909399；

1.2主题变量编译样式：

(1)在src/global/style下面新建文件extends-skin.less，内容如下：

(2)在webpack配置中，定义less-loader的paths，增加src/global/style，从而可以webpack编译时找到extends-skin.less文件，业务样式代码使用如下形式编写：

从而实现主题样式的编译

1.3系统管理接入：

a.系统管理引入，系统管理放在单独的git代码仓库中，使用npm引入git的形式安装到依赖中，具体操作是在package.json文件中的dependencies字段增加：

”system-manager”:

"git+http://git.xxx.cc:/system-manager/system-manager.git#master"

b.系统管理路由注册，把系统管理相关路由通过路由配置注册进来：

import SystemManager from"system-manager"；

let routeConfig＝[SystemManager.getRouterConfig()]；

export defaulr routeConfig；

c.系统管理状态注册：

1.4产品系统集成部署：首先执行产品独立工程；然后建立项目.env文件并配置样式路径；其次执行：yarn build–mode system；最后输出到系统页面的product目录；

1.5产品系统加载流程：

S1.进入系统；

S2.判断挡墙路由前缀是否为产品项目若是执行S3，若否直接完成并提示进入系统成功；

S3.加载产品项目脚本；

S4.挂在路由和注册状态数据，完成并提示进入系统成功；

该过程的核心代码如下：

A.配置产品系统信息：

let applicationConfig＝[{

path:'/product/',

umdName:'__PRODUCT__',

storeNamespace:product,

manifest:isDev？`http://127.0.0.1:4000/manifest.json`:

'./product/manifest.json',

}]

B.根据路由判断是否进入产品系统

let targetApp＝applicationConfig.find(item＝>{

return currentRoutePath.indexOf(item.path)！＝-1；

})；

如果targetApp不为空，则表示属于产品系统，需要加载产品的脚本挂载产品路由和注册产品状态数据：

具体实施方式三：

2.构建集成部署并保持界面统一的前端部署具体过程：

2.1底层前端框架和工程架构统一：

底层框架以热门的前端框架vue为核心，路由管理vue-router，数据状态管理vuex，ui框架element-ui，图表echarts，二维地图leaflet，三维地图mapbox-gl。各个版块的开发都必须基于以上的底层框架。项目开发的源代码工程也必须遵循统一的工程架构。

2.2制定交互、样式规范，开发通用基础组件并制定组件规范：

规范至少包括：样式规范，交互规范，组件使用规范。样式使用less框架开发，样式规范在工程上体现为一系列定义好的less变量，并且每个less变量都有详细的使用场景说明。交互规范主要指对一些常见交互行为的具体表现的说明。开发通用基础组件，并详细说明每种组件的使用场景，对一些类似的场景，必须约定使用统一的组件。

2.3集成项目的框架搭建：

集成项目是一个标准的vue工程，但是增加了用于加载子系统的机制，该机制详细过程如下：

(1)用户进入系统页面；

(2)判断页面是否属于子系统，若是执行(3)，若否直接执行(5)完成并提示进入系统页面成功；

(3)判断是否已经加载子系统，若是直接执行(5)，若否执行(4)；

(4)加载子系统的路由和数据状态管理脚本；

(5)完成并提示进入系统页面成功。

2.4通用系统管理集成：

系统管理模块属于业务逻辑独立的模块，由专门团队负责开发和维护，可以在各个交付项目中集成，它也需要遵循以上定义的一系列规范。功能通常包括：用户管理、角色管理、菜单管理、权限管理、日志管理等。

2.5产品系统开发和集成：

产品系统使用特殊的工程架构开发。特殊的点主要是：

基于webpack的output定制，使用libraryTarget:“window”，把产品系统的功能暴露到window对象中，项目工程通过该对象可以获取到子工程的路由和数据状态管理对象，从而集成到项目的工程中；

为做到无缝集成，提供一些源代码开发的约束，包括：部分全局变量的约定、样式编译的目录约定、路由路径和状态模块名称的约定、公共库的使用约定等。

按照该工程架构开发的子系统，就可以无缝集成到项目工程中。

2.6定制化页面开发：

作为交付项目，通常会至少包含首页，登录页等定制化页面。定制化页面放在交付项目的工程中，它属于该工程的特有页面，不具有通用性，因此只需要遵循交互规范即可。它可以有自己独特的样式。

2.7界面主题风格定制：

基于上面所定义的样式less变量，通过定制这些变量的值，在对项目进行编译和集成后，可以修改整体的界面风格。同时针对交付项目编写一套全局的特殊样式，通过覆盖掉一些标准样式，从而达到定制化风格的目的，达到更好的交付效果。

本领域的技术人员应当理解，上述实施方式仅仅是为了清楚地说明本发明，而不是对本发明的适用范围做限定。对于相关技术人员可根据本发明公布步骤根据需求自由组合变化或变型，但这些变化或变型仍然处于本发明的范围内。