20 分鐘能幹嗎？帶你玩轉智慧園區應用框架 MainPortal

導讀：攻城獅們如今基於平臺開發時，已不須要寫不少原生代碼了，取而代之的是在項目中使用各種平臺框架，如：智慧園區應用框架MainPortal，基於它可以快速的將園區中各個子應用/子系統進行菜單集成，並在統一入口進行設置和展現，如智慧設施、資產管理…

文末福利：新用戶專享園區開發者賬號免費試用

場景概述

在智慧園區的業務場景中有多個模塊，例如智慧設施等。各個模塊都有對應的管理頁面和大屏頁面，統一門戶能夠根據業務須要，在多個大屏界面或管理頁面中進行切換，以提高操做體驗。在智慧園區的業務場景中，也須要一個統一的門戶來呈現智慧園區各模塊的業務功能。

統一門戶可用於整合現有業務系統的訪問控制，經過統一入口登陸實現對各業務的集中訪問，登陸用戶能夠經過統一的門戶在桌面上進行各項業務的處理，減小系統的使用複雜度。

統一門戶實現的功能包括統一入口登陸、個性化導航配置、系統導航、用戶信息管理等功能，從而下降用戶進入系統和獲取各模塊信息的難度，使用和獲取信息更直接、方便。MainPortal即爲實現統一門戶功能的應用框架。

功能解讀

統一門戶的功能很是豐富，以「顯示用戶菜單」爲例，部分功能以下：

除了菜單配置等功能外，統一門戶還提供了我的桌面設置的能力，在這裏能夠設置導航欄的展現風格，我的主頁面等信息，下面幾張圖爲統一門戶的實際效果圖：

我的桌面設置預覽

導航欄展現風格設置

我的首頁設置

組件解讀

MainPortal基於AppCube的高級頁面開發，由smartcampus_mainframe_widget組件構成，組件支持在線編輯，也能夠下載後，在本地離線編輯。組件構成以下：

其中：

audio：音頻文件的存放目錄

image：組件內圖標的存放目錄

messages-en.json：當語言切換爲英文時，組件英文展現信息

messages-zh.json：當語言切換爲中文時，組件中文展現信息

packageinfo.json：該組件的名稱，描述，依賴等基本信息

smartcampus_mainframe_widget.css：組件的樣式代碼

smartcampus_mainframe_widget.editor.js：組件的配置信息文件

smartcampus_mainframe_widget.ftl：組件的DOM文件

smartcampus_mainframe_widget.js：組件的JavaScript文件

smartcampus_mainframe_widget.png：組件的展現圖標

代碼解讀

（一）讓咱們從顯示用戶菜單的邏輯流程圖開始

（二）菜單展現的DOM結構代碼解讀

經過查看Smartcampus_mainframe_widget.ftl文件，能夠看到菜單的展現綁定在Menulist上，其中DOM是經過VUE-ELEMENT實現的：

（三）菜單的查詢邏輯代碼解讀：

經過查看Smartcampus_mainframe_widget.js文件，首先能夠看到組件的js代碼結構樹：

• Init：組件初始化
• Render：組件實例化渲染

其中，能夠在render函數中，new一個Vue實例，掛載在DOM元素上: unified-portal。Vue實例的整個生命週期函數，能夠在此實現。

而後，從created函數，找到菜單初始化的入口函數start()：

Start函數的邏輯：

• 先校驗當前用戶是否已登陸
• 若是已登陸，判斷是否跳轉到第三方應用中
• 經過getParams函數獲取統一門戶展現須要的參數信息和用戶菜單

GetParams函數的邏輯：

• 查詢統一門戶展現須要的系統參數，例如：運營臺圖標等信息
• 再調用renderPage函數查詢當前用戶的我的桌面菜單信息，例如：菜單信息，快捷方式，信息欄展現等

RenderPage函數的邏輯：

• 判斷當前的頁面是否爲預覽模式
• 經過queryPortalProfile查詢用戶的我的桌面信息
• 再調用getPortalProfile函數，將我的桌面信息展現在統一門戶上
• 異步調用getCurrentOperatorMenuList查詢用戶能查詢最新菜單信息
• 比對2,4的菜單信息，若是不一致則調用compareMenu函數，刷新我的桌面

getPortalProfile函數的邏輯：

• 將我的桌面的dockProfile賦值給MenuList，用於門戶菜單導航的展現
• 展現我的主頁面，若是找不到則查詢菜單樹的第一個菜單

CompareMenu函數的邏輯：

• 查詢當前用戶對應角色能查看的菜單列表：this.sysMenuList
• 查詢用戶當前能查看的菜單列表的：this.portalProfile.originDockProfile
• 比對1和2的菜單列表信息，若是不一致，則調用函數，更新我的桌面設置信息：setPortalProfile

至此，咱們已經瞭解了「顯示用戶菜單」的基本代碼結構。

在實際的園區智慧化項目中，只須要搭載此份應用框架MainPortal就可完成各個子應用/子系統的菜單集成，大幅提高開發效率。怎麼樣？快來試試吧。

新用戶專享園區開發者賬號免費試用，請戳：https://bbs.huaweicloud.com/f...

做爲華爲ICT基礎設施業務面向全球開發者的年度盛會，華爲開發者大會2021（Cloud）將於2021年4月24日-26日在深圳舉行。本屆大會以#每個開發者都了不得#爲主題，將匯聚業界大咖、華爲科學家、頂級技術專家、天才少年和衆多開發者，共同探討和分享雲、計算、人工智能等最新ICT技術在行業的深度創新和應用。智能時代，每個開發者都在創造勇往直前的奔騰時代。世界有你，了不得！

瞭解更多華爲智慧園區開發者資訊，歡迎訪問：https://bbs.huaweicloud.com/f...