F1V3.0-6 平台V3.0 UI体系架构

1 介绍

F1平台微服务版本和平台之前的版本最大的区别是加强了模块化的划分和静态化处理的过程，并增加了脚本文件和样式文件的加密、HttpRequest请求的Cache优化等多项功能。并且针对平台基础组件、三方扩展组件能进行了模块化处理，细化组件的依赖关系并且优化了代码结构和处理等过程。如下图，我们可以看到在V3.0基础开发平台下UI架构图。

本图主要分为七个部分：

• 平台应用：使用平台框架结合业务服务开发的基础应用。这些应用为开发平台提供了基础业务支撑的功能
• 业务应用：搭载平台框架和平台基础应用开发和拓展的高级业务应用和系统
• 业务组件：针对平台基础应用抽取出公共业务组件，组件可以自由拔插到业务模块中去
• 三方组件：提供UI框架的基础三方组件，包含UI框架库、图表库等
• 平台组件：提供了布局、表格、表单等基础UI开发组件
• 页面服务：替代了原有Tomcat等Web容器框架，引入了Nginx等静态代理服务器，支持HTML静态化访问和集群机制
• 后台服务：包含Zuul网关服务器用于进行微服务的路由；MockServer为测试服务器主要用于前后端开发分离模式

2 系统授权

平台微服务授权采用OAuth2.0，实现的单点登录功能，以下为授权流程图：

• 业务模块经过Request请求Nginx集群服务器
• Nginx集群服务器判断是否服务请求是否静态资源
• 如果本次请求携带Token令牌，则直接携带令牌调用微服务即可
• 如果未携带Token令牌则访问授权服务器进行登录
• 授权服务器登录后返回的Token令牌进行本地化存储，Scope级别为Session级别，关闭浏览器需要重新授权登录，下次请求则直接从Cookie中获取令牌

3 前后端分离

F1平台的模块在研发过程中，经常会出现前后端服务和模块的开发者进度不同步的问题，导致开发人员出现两边互等问题，影响系统研发的进度等。且在研发过程中经常出现业务接口的变动导致开发不能协调到位，出现前后端衔接出错等问题。针对以上出现的问题，在V3.0平台的研发过程中，引入了MockJs前端模拟框架，如下图所示：

采用MockJs服务进行数据模拟操作，有点体现一下几个方面：

• 通过Nginx配置可以灵活的切换生产和测试环境。而无需进行代码修改。
• MockJs支持全站连接HttpRequest请求，可以无缝进行集成
• MockJs支持数组、基础类型、流类型等多种数据格式的模拟
• 前后端开发可以实现约定优先的开发方式，可以进行同步开发分开测试

4 平台组件包模块化

F1平台组件包主要包含平台基础组件，并通过WebPack的方式进行模块化改造和构建，支持脚本的压缩合并、支持Window作用域下公共方法的暴露和发布，新增和移除比较方便只需要重新进行构建即可，基础组件模块和业务模块支持增加标签的cache缓存和替换的功能，可以保证页面组件在浏览器杜绝出现脚本编译之后，浏览器缓存刷新无效的问题。脚本内部修改require的方式进行CMD方式加载，可以防止出现异步加载顺序混乱的问题。