[發明專利]一種前端快速架構方法及其系統

在審

• 申請號: 201710602596.6
• 申請日: 2017-07-21
• 公開（公告）號: CN107450917A
• 公開（公告）日: 2017-12-08
• 發明（設計）人: 孟憲坤;田文;唐金格
• 申請（專利權）人: 浙江華坤道威數據科技有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 北京科億知識產權代理事務所(普通合伙)11350
• 代理人: 湯東鳳

技術領域

本發明涉及前端設計技術領域，尤其涉及一種前端快速架構方法及系統。

背景技術

傳統的數據可視化采用HTML、CSS、JS等開源前端框架以及使用最新瀏覽器技術，將數據庫中的每個數據項作為單個圖元元素表示，大量的數據集成構成數據圖像，同時將數據的各個屬性值以多維數據的形式表示，令用戶可以從不同維度觀察數據，從而對數據進行更深入的觀察和分析。

特別是，在當前大數據的商業智能化后，對數據可視化展示要求由N維屬性和M個元素組成的數據集所構的多維信息空間，更多的是從點面結合的分析來理解數據的本身真實意義。

因此數據的分析具有了不同的觀察或者分析角度，每個人都可以根據自己的觀點了解數據特性。為此需要對多維數據進行切片、塊、旋轉等動作剖析，從而能多角度的多側面的觀察數據。但現有的自定義個性化展示方式中并不能很好的滿足這樣的需求。

因此，現有技術還有待發展。

發明內容

鑒于上述現有技術的不足之處，本發明的目的在于提供一種前端快速架構方法及系統，旨在解決現有技術中前端實現工期長、需求反饋慢、同緯數據查詢不關聯等而引致客戶端感知非常差的問題。

為了達到上述目的，本發明采取了以下技術方案：

一種前端快速架構方法。其中，所述方法包括：按照數據維度對數據進行維度屬性的分類；根據所述數據的分類結果自定義若干組件；所述組件之間具有對應的映射，形成與數據維度屬性相關的聯動展示；針對所述不同組件之間的獨立性設置對應的模板布局。

可選地，所述根據所述數據的分類結果，自定義若干個組件，具體包括：

通過HTML語法，制作靜態HTML頁面；所述HTML頁面為各個組件的代碼塊形成的HTML頁面；根據目標動態展示效果，使用JavaScript編寫對應的動態語法；所述動態展示效果為當觸發某個組件的事件發生時，與所述事件相關的組件對應的動態變化；在所述組件之間維護映射；所述組件具有至少兩個字段，所述字段在各個組件之間存在關聯；當存在改變組件的事件時，通過所述各個組件之間存在的關聯，確定與所述事件相關的組件的聯動。

可選地，所述針對所述不同組件之間的獨立性設置對應的模板布局，具體包括：根據目標模板的基本架構，拖動所述組件到所述目標模板的可視化區域，生成對應的DIV區域；使用父級元素控制所述組件的尺寸，生成相應的HTML代碼；將所述HTML代碼添加到父對象中，在所述父對象中構建一個均勻展現的模板布局。

可選地，在將所述HTML代碼添加到父對象中，在所述父對象中構建一個均勻展現的模板布局的步驟之后，所述方法還包括：將當前布局作為父對象；構造相應的組件HTML代碼并添加到所述模板布局中，以實現布局之間的任意嵌套。

可選地，在將所述HTML代碼添加到父對象中，在所述父對象中構建一個均勻展現的模板布局的步驟之后，所述方法還包括：獲取至少一個布局的代碼區域對象；將所述代碼區域對象從所述布局中的父對象中移除，以刪除所述布局。

一種前端快速架構系統，其中，所述系統包括：數據分類模塊，用于按照數據維度對數據進行維度屬性的分類；組件設置模塊，用于根據所述數據的分類結果自定義若干組件；所述組件之間具有對應的映射，形成與數據維度屬性相關的聯動展示；布局設置模塊，用于針對所述不同組件之間的獨立性設置對應的模板布局。

可選地，所述組件設置模塊具體用于：通過HTML語法，制作靜態HTML頁面；所述HTML頁面為各個組件的代碼塊形成的HTML頁面；根據目標動態展示效果，使用JavaScript編寫對應的動態語法；所述動態展示效果為當觸發某個組件的事件發生時，與所述事件相關的組件對應的動態變化；在所述組件之間維護映射；所述組件具有至少兩個字段，所述字段在各個組件之間存在關聯；當存在改變組件的事件時，通過所述各個組件之間存在的關聯，確定與所述事件相關的組件的聯動。

可選地，所述布局設置模塊具體用于：根據目標模板的基本架構，拖動所述組件到所述目標模板的可視化區域，生成對應的DIV區域；使用父級元素控制所述組件的尺寸，生成相應的HTML代碼；將所述HTML代碼添加到父對象中，在所述父對象中構建一個均勻展現的模板布局。

可選地，所述布局設置模塊還用于：將當前布局作為父對象；構造相應的組件HTML代碼并添加到所述模板布局中，以實現布局之間的任意嵌套。

可選地，所述布局設置模塊還用于：獲取至少一個布局的代碼區域對象；將所述代碼區域對象從所述布局中的父對象中移除，以刪除所述布局。