[發明專利]可視化網頁編輯方法、系統、設備及存儲介質

在審

• 申請號: 201811103074.2
• 申請日: 2018-09-20
• 公開（公告）號: CN109299422A
• 公開（公告）日: 2019-02-01
• 發明（設計）人: 王坤明;魏明圓;潘阿茹
• 申請（專利權）人: 江蘇滿運軟件科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F8/34;G06F8/38
• 代理公司: 上海隆天律師事務所 31282
• 代理人: 臧云霄;鐘宗

本發明提供了可視化網頁編輯方法、系統、設備及存儲介質，其中，方法包括以下步驟：當接收到網頁編輯的請求，創建空頁面和空頁面的數據結構，空頁面包括預覽界面以及操作界面，操作界面設有多個可供拖移到預覽界面的候選組件；當自操作界面的候選組件向預覽界面添加組件，通過組件配置模塊構建預覽界面的組件樹；當修改組件的位置、大小并配置組件參數，同步組件參數到組件；當添加腳本的請求，通過腳本模塊綁定腳本代碼和數據到組件；當接收到保存的請求，保存組件樹結構到服務器；以及當獲取網頁鏈接進行展示傳播，獲取組件樹數據，通過渲染器模塊渲染頁面。本發明能夠具備高度可擴展性，可以輕松制作出富交互的網頁。

技術領域

本發明涉及網頁編輯領域，具體地說，涉及可視化網頁編輯方法、系統、設備及存儲介質。

背景技術

傳統網頁制作過程需要專業前端開發者介入，開發測試發布流程冗長。而市面上非傳統開發流程的網頁制作工具主要以可視化操作為亮點，但在組件擴展性上能力嚴重不足，不能或很難勝任復雜邏輯場景。在此背景下，亟待一個兼具易用性與高度可擴展性的網頁編輯系統，本系統即為此而開發。

因此，本發明提供了一種可視化網頁編輯方法、系統、設備及存儲介質。

發明內容

針對現有技術中的問題，本發明的目的在于提供可視化網頁編輯方法、系統、設備及存儲介質，能夠具備高度可擴展性，可以輕松制作出富交互的網頁，尤其適用于廣告營銷場景，使得該類網頁的制作過程省時省力。

本發明的實施例提供一種可視化網頁編輯方法，包括以下步驟：

當接收到網頁編輯的請求，創建空頁面和所述空頁面的數據結構，所述空頁面包括預覽界面以及操作界面，所述操作界面設有多個可供拖移到所述預覽界面的候選組件；

當自所述操作界面的候選組件向所述預覽界面添加組件，通過組件配置模塊構建所述預覽界面的組件樹；

當修改所述組件的位置、大小并配置組件參數，同步所述組件參數到組件；

當添加腳本的請求，通過腳本模塊綁定腳本代碼和數據到組件；

當接收到保存的請求，保存組件樹結構到服務器；以及

當獲取網頁鏈接進行展示傳播，獲取組件樹數據，通過渲染器模塊渲染頁面。

優選地，所述組件樹由多個組件按照倒置樹狀結構來組織，形成組件樹。

優選地，所述操作界面的所述候選組件可添加。

優選地，所述組件都開放有相應參數，修改所述組件的位置、大小并配置組件參數，同步所述組件參數到組件。

優選地，所述組件配置模塊配置組件參數并同步到組件樹數據中。

優選地，所述腳本模塊包括功能擴展腳本和自定義腳本。

優選地，所述渲染器將組件樹數據生成為網頁，先通過頁面的id獲取組件樹數據，然后遞歸生成所有組件，并為組件傳入參數、混入腳本，最終生成網頁，并提供對應于頁面id的網頁地址，供展示傳播。

優選地，所述渲染器還工作于可視化編輯過程，實時呈現預覽效果。

本發明的實施例還提供一種可視化網頁編輯系統，用于實現上述的可視化網頁編輯方法，所述可視化網頁編輯系統包括：

候選組件模塊，當接收到網頁編輯的請求，創建空頁面和所述空頁面的數據結構，所述空頁面包括預覽界面以及操作界面，所述操作界面設有多個可供拖移到所述預覽界面的候選組件；

組件樹模塊，當自所述操作界面的候選組件向所述預覽界面添加組件，構建所述預覽界面的組件樹；

組件配置模塊，當修改所述組件的位置、大小并配置組件參數，同步所述組件參數到組件；