[發明專利]基于json數據構建雙向綁定的web頁面前端展示方法和系統

在審

• 申請號: 202110336589.2
• 申請日: 2021-03-29
• 公開（公告）號: CN113051507A
• 公開（公告）日: 2021-06-29
• 發明（設計）人: 郝建亮;王雪峰;駱飛;李青龍
• 申請（專利權）人: 北京智慧星光信息技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 北京智宇正信知識產權代理事務所(普通合伙) 11876
• 代理人: 李明卓

1.一種基于json數據構建雙向綁定的web頁面前端展示方法，其特征在于，包括：

獲取web頁面各個業務模塊的json數據；

將每一個業務模塊的json數據處理為鍵/值形式的數據；

根據業務需求確定鍵/值形式的數據所對應的鍵的getter和setter方法；

根據預設字段類型的屬性信息確定所要渲染的鍵的類型；

對json數據進行遍歷，根據所要渲染的鍵的類型確定所要渲染的DOM節點；

將所要渲染的DOM節點進行渲染，組成DOM樹；

根據DOM樹組成web頁面；

獲取web頁面上DOM節點的點擊事件；

通過所述點擊事件所對應的json鍵觸發對應的setter方法，改變點擊事件所對應的json數據，得到更新的json數據；

根據更新的json數據對web頁面進行更新。

2.根據權利要求1所述的基于json數據構建雙向綁定的web頁面前端展示方法，其特征在于，獲取web頁面各個業務模塊的json數據的步驟中，包括：

獲取業務需求；

根據業務需求將web頁面劃分為不同的業務模塊；

根據每一個業務模塊得到每一個業務模塊所對應的json數據。

3.根據權利要求1所述的基于json數據構建雙向綁定的web頁面前端展示方法，其特征在于，將每一個業務模塊的json數據處理為鍵/值形式的數據的步驟中，包括：

根據業務場景復雜度確定循環次數；

根據循環次數對每一個業務模塊的json數據進行循環處理得到每一個json數據所對應的鍵/值。

4.根據權利要求1所述的基于json數據構建雙向綁定的web頁面前端展示方法，其特征在于，根據業務需求確定鍵/值形式的數據所對應的鍵的getter和setter方法的步驟中，包括：

根據業務需求確定鍵/值形式的數據中對象的屬性；

若所述對象的屬性為可讀可寫屬性，則將對象所對應的鍵進行getter方法和setter方法的定義；

若所述對象的屬性為可讀不可寫屬性，則將對象所對應的鍵進行getter方法的定義。

5.根據權利要求1-4中任一所述的基于json數據構建雙向綁定的web頁面前端展示方法，其特征在于，根據更新的json數據對web頁面進行更新的步驟之后，還包括：

將更新的json數據進行存儲。

6.根據權利要求5所述的基于json數據構建雙向綁定的web頁面前端展示方法，其特征在于，將更新的json數據進行存儲的步驟中，包括：

根據更新的json數據確定更新的json數據所對應的業務模塊；

根據更新的json數據所對應的業務模塊確定更新的json數據所對應的來源標識；

將更新的json數據按照來源標識存儲至后臺數據庫中。

7.一種基于json數據構建雙向綁定的web頁面前端展示系統，其特征在于，包括：

第一獲取模塊，用于獲取web頁面各個業務模塊的json數據；

第一處理模塊，用于將每一個業務模塊的json數據處理為鍵/值形式的數據：

第二處理模塊，用于根據業務需求確定鍵/值形式的數據所對應的鍵的getter和setter方法；

第三處理模塊，用于根據預設字段類型的屬性信息確定所要渲染的鍵的類型；

第四處理模塊，用于對json數據進行遍歷，根據所要渲染的鍵的類型確定所要渲染的DOM節點；

第五處理模塊，用于將所要渲染的DOM節點進行渲染，組成DOM樹；

第六處理模塊，用于根據DOM樹組成web頁面；

第二獲取模塊，用于獲取web頁面上DOM節點的點擊事件；

第七處理模塊，用于通過所述點擊事件所對應的json鍵觸發對應的setter方法，改變點擊事件所對應的json數據，得到更新的json數據；

第八處理模塊，用于根據更新的json數據對web頁面進行更新。