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/forum/thread-51478-1-1.html

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

瞭解更多華為智慧園區開發者資訊，歡迎訪問：

https://bbs.huaweicloud.com/forum/forum-1013-1.html