[發明專利]一種自動化網頁前端頁面生成系統及方法

在審

• 申請號: 202010230771.5
• 申請日: 2020-03-27
• 公開（公告）號: CN113448575A
• 公開（公告）日: 2021-09-28
• 發明（設計）人: 王鑫炎;張光輝;鄒朝輝
• 申請（專利權）人: 四川娛尚互娛科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/958
• 代理公司: 上海宏京知識產權代理事務所(普通合伙) 31297
• 代理人: 鄧文武

1.一種自動化網頁前端頁面生成系統，其特征在于，所述系統包括：網頁設計單元，用于根據設計圖，進行網頁設計，生成產品設計文檔；獲取單元，用于獲取產品設計文檔，所述產品設計文檔包含：N個功能頁面的設計，所述N為大于0的自然數；第一轉換單元，用于根據預設的頁面設計配置模板對所述N個功能頁面的設計進行轉換，得到頁面設計配置信息；第二轉換單元，用于將所述頁面設計配置信息轉換為頁面前端配置信息；生成單元，用于根據所述頁面前端配置信息生成網頁頁面。

2.如權利要求1所述的系統，其特征在于，所述網頁設計單元包括：設計圖加載子單元、設計圖透明度處理子單元和設計圖元素屬性設定子單元，設計圖加載子單元用于在瀏覽器插件中加載當前網頁對應的設計圖；設計圖透明度處理子單元對設計圖進行透明度處理；設計圖元素屬性設定子單元用于根據所述設計圖上元素的屬性調整當前網頁對應元素的屬性。

3.如權利要求2所述的系統，其特征在于，所述設計圖加載子單元包括尺寸獲取子單元、計算子單元和設計圖定位子單元，尺寸獲取子單元用于獲取設計圖的尺寸和瀏覽器可視窗口的尺寸；計算子單元用于根據從尺寸獲取子單元獲取的數據，計算設計圖在瀏覽器可視窗口中的位置坐標；設計圖定位子單元用于根據計算子單元計算的設計圖在瀏覽器可視窗口中的位置坐標，將設計圖定位在瀏覽器可視窗口中。

4.一種基于權利要求1至3之一所述自動化網頁前端頁面生成系統的方法，其特征在于，所述方法執行以下步驟：

步驟1：根據設計圖，進行網頁設計，生成產品設計文檔；

步驟2：獲取產品設計文檔，所述產品設計文檔包含：N個功能頁面的設計，所述N為大于0的自然數；

步驟3：根據預設的頁面設計配置模板對所述N個功能頁面的設計進行轉換，得到頁面設計配置信息；

步驟4：將所述頁面設計配置信息轉換為頁面前端配置信息；

步驟5：根據所述頁面前端配置信息生成網頁頁面。

5.如權利要求4所述的方法，其特征在于，所述功能頁面包括：預設關鍵詞；所述根據預設的頁面設計配置模板對所述N個功能頁面的設計進行轉換，得到頁面設計配置信息，具體包括：根據所述預設關鍵詞將所述產品設計文檔進行分割，得到所述N個功能頁面的設計；根據預設的頁面設計配置模板，將所述功能頁面的設計轉換為對應的頁面設計配置信息，得到N個頁面設計配置信息；所述將所述頁面設計配置信息轉換為頁面前端配置信息，具體為：將所述N個頁面設計配置信息轉換為頁面前端配置信息。

6.如權利要求5所述的方法，其特征在于，所述功能頁面的設計包括：功能點；所述頁面設計配置模板包括：功能項；所述功能項與所述功能點對應；所述根據預設的頁面設計配置模板，將所述功能頁面的設計轉換為對應的頁面設計配置信息，具體包括：在所述功能頁面的設計中搜索所述功能點的相關字段，并將所述功能點的相關字段填寫到對應所述功能點的功能項。

7.如權利要求6所述的方法，其特征在于，所述功能頁面的設計還包括：業務屬性以及與所述業務屬性對應的屬性定義；所述根據所述頁面設計配置模板，將所述功能頁面的設計轉換為對應的頁面設計配置信息，還包括：在所述功能頁面的設計中搜索所述業務屬性以及與所述業務屬性對應的屬性定義；在將所述功能點的相關字段填寫到對應所述功能點的功能項后，遍歷已填寫功能點相關字段后的頁面設計配置模板；若在頁面設計配置模板中查找到與所述功能頁面中的業務屬性相同的業務屬性，則將所述相同的所述業務屬性的屬性定義補充到所述頁面設計配置模板中。