[發(fā)明專利]一種通用WEB頁面布局生成裝置及方法

在審

• 申請?zhí)枺?/td>: 202010034493.6
• 申請日: 2020-01-14
• 公開（公告）號: CN111259286A
• 公開（公告）日: 2020-06-09
• 發(fā)明（設(shè)計）人: 唐延鑫;杜洪亮;陳勇銓;周華
• 申請（專利權(quán)）人: 上海英方軟件股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 上海國智知識產(chǎn)權(quán)代理事務(wù)所(普通合伙) 31274
• 代理人: 潘建玲

本發(fā)明公開了一種通用WEB頁面布局生成裝置及方法，所述裝置包括：前端處理模塊，用于設(shè)計所要生成的頁面所使用到的基礎(chǔ)組件，根據(jù)前后端預(yù)先定義的數(shù)據(jù)格式實現(xiàn)對應(yīng)的方案樹解析器，于接收到頁面訪問請求時，從后端處理模塊獲取由所述頁面的布局方案及其各個組件內(nèi)容構(gòu)成的方案樹，利用所述方案解析器解析所述方案樹，將所述方案樹中對應(yīng)的組件解析為HTML，插入DOM樹中，并根據(jù)解析結(jié)果將各組件渲染生成所述頁面；后端處理模塊，用于設(shè)計包括所述頁面的布局方案以及各個組件內(nèi)容的方案樹，并于接收到前端處理模塊發(fā)送的方案樹獲取請求時，將所述方案樹傳送至所述前端處理模塊。

技術(shù)領(lǐng)域

本發(fā)明涉及WEB頁面生成技術(shù)領(lǐng)域，特別是涉及一種通用WEB頁面布局生成裝置及方法。

背景技術(shù)

目前，Web前端頁面主要有如下兩種生成方式：1、與后端混合使用模板引擎進行服務(wù)端渲染；2、與后端分離使用JavaScript瀏覽器渲染，而第二種方式的前后端分離作為近年來的新興技術(shù)，以效率高、性能好、速度快著稱。

雖然對于一些企業(yè)門戶網(wǎng)站以及文章系統(tǒng)，大部分頁面排版都類似，并且可以通過組合基礎(chǔ)元素的方式來完成大部分頁面的開發(fā)工作，但是，目前前后端分離的技術(shù)還是避免不了在前端層面去完成組合工作，從而仍存在前后端邏輯分離的情況，而這種前后端邏輯分離的情況往往造成頁面的開發(fā)效率較低。

發(fā)明內(nèi)容

為克服上述現(xiàn)有技術(shù)存在的不足，本發(fā)明之目的在于提供一種通用WEB頁面布局生成裝置及方法，以將前端的控制邏輯轉(zhuǎn)移到后端，解決前后端邏輯分離的痛點，提高WEB頁面的開發(fā)效率以及組件的復(fù)用性。

為達上述目的，本發(fā)明提供一種通用WEB頁面布局生成裝置，包括：

前端處理模塊，用于設(shè)計所要生成的頁面所使用到的基礎(chǔ)組件，根據(jù)前后端預(yù)先定義的數(shù)據(jù)格式實現(xiàn)對應(yīng)的方案樹解析器，于接收到頁面訪問請求時，從后端處理模塊獲取由所述頁面的布局方案及其各個組件內(nèi)容構(gòu)成的方案樹，并利用所述方案解析器解析所述方案樹，將所述方案樹中對應(yīng)的組件解析為HTML，插入DOM樹中，并根據(jù)解析結(jié)果將各組件渲染生成所述頁面；

后端處理模塊，用于設(shè)計包括所述頁面的布局方案以及各個組件內(nèi)容的方案樹，并于接收到前端處理模塊發(fā)送的方案樹獲取請求時，將所述方案樹傳送至所述前端處理模塊。

優(yōu)選地，所述前端處理模塊包括：

基礎(chǔ)組件設(shè)計單元，用于設(shè)計所要生成的WEB頁面所使用到的基礎(chǔ)組件；

方案解析器設(shè)計單元，用于根據(jù)前后端預(yù)先定義的數(shù)據(jù)格式實現(xiàn)相應(yīng)的方案樹解析器；

方案樹獲取單元，用于根據(jù)接收到的頁面訪問請求完成前端路由事件注冊，并于監(jiān)聽到路由變化時，向所述后端處理模塊發(fā)送方案樹獲取請求以獲取該路由對應(yīng)的方案樹；

方案樹解析處理單元，用于利用所述方案樹解析器解析所述方案樹，將所述方案樹中對應(yīng)的組件解析為HTML，插入DOM樹中，并根據(jù)解析結(jié)果將各組件渲染生成所述WEB頁面。

優(yōu)選地，所述基礎(chǔ)組件設(shè)計單元通過將所述WEB頁面設(shè)計圖中的公共元素由簡單到復(fù)雜進行拆分，隔離成獨立的基礎(chǔ)組件并進行組合，獲得所述WEB頁面所使用到的所有組件。

優(yōu)選地，所述基礎(chǔ)組件包括但不限于布局容器、導(dǎo)航條、表單、按鈕。

優(yōu)選地，所述基礎(chǔ)組件間的關(guān)系可以有組合以及繼承。

優(yōu)選地，所述方案樹獲取單元首先根據(jù)該頁面訪問請求得到一個骨架屏和初始的加載代碼，通過所述初始加載代碼完成前端路由事件的注冊，所述方案樹獲取單元監(jiān)聽前端路由變化，當監(jiān)聽到路由變化時，請求所述后端處理模塊以獲取該路由對應(yīng)的方案樹。