優維低程式碼:Storyboard 整體結構與路由配置

語言: CN / TW / HK

優維低程式碼技術專欄,是一個全新的、技術為主的專欄,由優維技術委員會成員執筆,基於優維7年低程式碼技術研發及運維成果,主要介紹低程式碼相關的技術原理及架構邏輯,目的是給廣大運維人提供一個技術交流與學習的平臺。

在開始入門中,我們學習到了如何建立一個微應用,下來我們將詳細講解 storyboard 的配置,及該如何使用構件及構件間事件傳遞。

為了更好的理解 storyboard 的常用配置及相關細節,這裡以一個 CRUD 的頁面案例來講解,初學者請將如下程式碼複製到開始入門示例的storyboard.json,並開啟構建檢視效果:

yarn serve --auto-remote --server YOUR-EASYOPS-SERVER-IP。

下來我們將該 storyboard 拆解分塊講解

# Storyboard 整體結構

我們先來說下 storybard 的整體結構,如上所示:

  • $schema:描述該 json 的結構,用於校驗 json 格式,建議使用 IDE(如 VScode)開啟此專案,這樣才能利用上該 schema 來校驗。
  • imports:宣告引用的 npm 包,用於打包構建時判斷依賴是否完整,在開發階段並不影響,但在打包時候注意新增完整,不然打包會報錯,見[micro-apps 打包報依賴錯誤](/next-docs/docs/customization/package-and-deploy#micro-apps 打包報依賴錯誤)。
  • app:此微應用的一些配置,包括:
    name:微應用名稱。
    id:微應用 ID,需要在 EasyOps 平臺全域性唯一。
    homepage:微應用的字首路徑,可使用${APP.homepage}變數引用他。
  • routes:路由配置,微應用整體頁面是由路由驅動的。

# 路由配置

我們複製第 1 個路由的相關配置進行講解:

  • path:頁面的地址,為了統一單個微應用的字首路徑,可以使用${APP.homepath}變數來做佔位符指定,此示例這裡表示/demo
  • exact:是否精確匹配,在storyboard 的整體結構可以看到routes是一個有順序的陣列,頁面的路由匹配是從上往下的,如果exact=true表示頁面路由精確匹配,比如這裡只能匹配/demo,而不能再匹配/demo/xxx;而如果exact=false的話,則以/demo開頭的頁面地址都會路由到此配置上。
  • menu:該頁面的左側選單欄配置,因為此選單比較簡單,我們抽取第 2 個路由的選單來做詳解,具體內容見選單配置。
  • bricks:該頁面使用到的構件列表,具體內容我們下節來講。
  • providers:預定義使用的providers,這個是最近新增的 key,有了這個配置能力後,可以在一個入口出統一去管理宣告providers,這樣便於管理。

通過以上分享,相信你已經瞭解了 storyboard 的整體架構和路由配置了。

有疑問加站長微信聯絡(非本文作者)