[發明專利]一種基于VUE與可視化圖形操作的頁面生成方法及裝置

在審

• 申請號: 202010723577.0
• 申請日: 2020-07-24
• 公開（公告）號: CN111966336A
• 公開（公告）日: 2020-11-20
• 發明（設計）人: 崔守佳;譚博;賈少龍
• 申請（專利權）人: 蘇州浪潮智能科技有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/34;G06F8/38
• 代理公司: 濟南誠智商標專利事務所有限公司 37105
• 代理人: 李修杰

本發明為了現有技術中存在的問題，創新提出了一種基于VUE與可視化圖形操作的頁面生成方法，改變了前端開發的傳統編碼方式，而是讓用戶(即前端研發人員)通過界面上的圖形化操作，直接拼裝VUE組件，并以表單形式為VUE組件及其內部的各HTML元素配置屬性、樣式、事件等參數，根據組件關系樹自上而下逐層獲取各個VUE組件的VUE組件代碼，合并優化生成VUE項目代碼，本發明還提出了一種基于VUE與可視化圖形操作的頁面生成裝置，有效解決由于現有技術中工具不能應用于VUE項目前端開發、組件開發等的問題，有效的提高了前端開發的效率。

技術領域

本發明涉及頁面生成領域，尤其是涉及一種基于VUE與可視化圖形操作的頁面生成方法及裝置。

背景技術

近幾年，隨著VUE(一套用于構建用戶界面的漸進式JAVASCRIPT框架)、HTML5(一種用來開發頁面的超文本標記語言)、CSS3(一種用來表現HTML等文件樣式的計算機語言)等前端技術的快速發展，各公司爭相提升產品的美觀程度、用戶體驗以及功能的豐富程度，對前端開發人才的關注度不斷升溫。雖有不少人調整技術方向投入到前端行業，但前端技術迭代較快，且涉及知識面相對寬泛，導致學習成本較高，也造成目前前端市場優質研發人才稀缺的現象，嚴重影響了團隊的前端開發效率。隨著前后端分離開發模式的提出與盛行，對前端開發效率的提升更加迫切。如何降低前端開發的門檻，進而讓每個開發人員都能輕易參與前端開發任務，并準確實現前端需求。

現有的平臺解決案例中，如Dreamweaver(集網頁制作和管理網站于一身的網頁代碼編輯器軟件)，僅能通過一些現有HTML元素進行組合拼裝出一個靜態的HTML頁面Demo(示例)，以及為其配置簡單樣式和JAVASCRIPT(一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言)腳本。

但是現有Dreamweaver并不能用于VUE項目的前端開發、組件開發、以及高效的內部數據交互，開發效率也不高。

發明內容

本發明為了解決現有技術中存在的問題，創新提出了一種基于VUE與可視化圖形操作的頁面生成方法及裝置，有效解決由于現有技術中工具不能應用于VUE項目前端開發、組件開發等的問題，有效的提高了前端開發的效率。

本發明第一方面提供了一種基于VUE與可視化圖形操作的頁面生成方法，包括：

在可視化操作頁面進行圖形化操作，拼裝VUE組件，并進行VUE組件和VUE組件中的頁面元素的配置，將配置參數信息傳遞給組件解析模塊；

接收傳遞的配置參數信息，并根據配置參數信息，解析生成對應的VUE組件代碼；

根據配置參數信息生成組件關系樹，所述組件關系樹用于記錄多個VUE組件之間應用關系；

根據組件關系樹自上而下逐層獲取各個VUE組件的VUE組件代碼，合并優化生成VUE項目代碼。

可選地，所述配置信息包括VUE組件配置信息以及頁面元素配置信息，所述VUE組件配置信息包括：VUE組件名、VUE組件ID、變量名、函數名、生命周期、數據操作，所述頁面元素配置信息包括頁面元素節點屬性、節點CSS樣式、與VUE界面綁定的事件。

可選地，根據配置參數信息生成組件關系樹，所述組件關系樹用于記錄多個VUE組件之間應用關系包括：

接收并存儲生成的VUE組件代碼；

將傳遞的配置參數信息轉換為可視化數據源，并進行存儲；

根據可視化數據源生成組件關系樹。

進一步地，根據可視化數據源生成組件關系樹具體是：根據可視化數據源中的VUE組件的ID生成組件關系樹。

進一步地，所述組件關系樹中僅有一個根組件，剩余VUE組件為子組件，根組件支持引用子組件，子組件之間支持相互引用。