[發明專利]一種網頁動態菜單生成方法及裝置

有效

• 申請號: 201611139723.5
• 申請日: 2016-12-12
• 公開（公告）號: CN106598591B
• 公開（公告）日: 2020-08-11
• 發明（設計）人: 羅星星
• 申請（專利權）人: 深圳竹信科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/958
• 代理公司: 北京品源專利代理有限公司 11332
• 代理人: 鄧猛烈;潘登

本發明實施例公開了一種網頁動態菜單生成方法及裝置。所述方法包括：根據預設的菜單數據生成菜單樹模型；將所述菜單樹模型中的菜單項加載到路由服務中；根據所述菜單樹模型中的菜單項以及所述路由服務生成網頁動態菜單。通過本發明的技術方案，能夠減少路由文件的配置，簡化動態菜單的后期開發和維護操作，提高開發效率。

技術領域

本發明實施例涉及網頁前端技術，尤其涉及一種網頁動態菜單生成方法及裝置。

背景技術

在Web前端系統的開發中，開發者們總需要將變化的數據實時反應到用戶界面上，這時就需要對DOM(Document Object Model，文檔對象模型)進行操作，而復雜或頻繁的DOM操作通常是性能瓶頸產生的原因，ReactJS作為當前最流行的前端框架之一，其改變了傳統意義上直接操作DOM的方式，引入了虛擬DOM的機制，當數據發生變化時，React會重新構建DOM，并與上一個DOM比對出差異部分，通過render方式刷新到頁面，提高了軟件性能。

動態菜單是前端開發中必不可少的一部分，目前基于React技術的網頁動態菜單生成方法是，直接在路由中對每個菜單相應的路由服務進行配置，再通過URL(UniformResource Locator，統一資源定位符)匹配路由，最后由相應的Menu菜單組件對頁面進行處理，從而實現動態菜單在網頁中的展示。

現有的技術方案中，隨著菜單項目的增加，將使得在開發過程中會重復編寫例如網頁標簽等內容，從而使路由配置文件變得越來越臃腫，同時也不便于對動態菜單進行后期的開發和維護操作。

發明內容

本發明實施例提供一種網頁動態菜單生成方法及裝置，以實現減少路由文件的配置，簡化動態菜單的后期開發和維護操作，提高開發效率。

第一方面，本發明實施例提供了一種網頁動態菜單生成方法，該方法包括：

根據預設的菜單數據生成菜單樹模型；

將所述菜單樹模型中的菜單項加載到路由服務中；

根據所述菜單樹模型中的菜單項以及所述路由服務生成網頁動態菜單。

進一步的，所述根據預設的菜單數據生成菜單樹模型，包括：

從目標數據庫中獲取預設的菜單數據，其中，所述菜單數據包括數據類型以及與數據類型對應的數據值；

根據預設的樹形結構中包括的待填充數據值的數據類型，將所述預設的菜單數據封裝在所述樹形結構中，生成菜單樹模型。

進一步的，所述菜單數據的數據類型包括：

菜單標識碼、菜單名稱、父節點、是否子節點以及統一資源定位符URL路徑。

進一步的，所述將所述菜單樹模型中的菜單項加載到路由服務中，包括：

讀取所述菜單樹模型中的一個根菜單的根菜單URL路徑；

將所述根菜單URL路徑加載至路由服務中；

獲取所述菜單樹模型中位于所述根菜單下的全部子菜單的URL路徑，并將所述全部子菜單的URL路徑加載至路由服務中；

返回執行讀取所述菜單樹模型中的一個根菜單的根菜單URL路徑的操作，直至完成對所述菜單樹模型中的全部菜單項的處理。

進一步的，其特征在于，所述根據所述菜單樹模型中的菜單項以及所述路由服務生成網頁動態菜單，包括：

將所述菜單樹模型中的菜單項添加到菜單顯示組件中；

將所述菜單顯示組件中的菜單項與所述路由服務加載的與菜單項對應的URL路徑進行關聯，以生成所述網頁動態菜單。