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方式加載,可以防止出現異步加載順序混亂的問題。


這裏寫圖片描述

發佈了69 篇原創文章 · 獲贊 25 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章