一種可視化頁面制作方法和裝置的制造方法
【技術領域】
[0001]本發(fā)明涉及可視化頁面制作方法和裝置。
【背景技術】
[0002]可視化頁面制作就是指通過拖拽方式快速制作網(wǎng)頁頁面，所見即所得?；与娨晳庙撁嬷谱魇峭ㄟ^編寫HTML、CSS、Javascript代碼來定制開發(fā)，這就需要配備專業(yè)的設計和程序開發(fā)人員。程序開發(fā)時間周期長、成本高。
[0003]互動電視應用可視化頁面制作，讓一線編輯能夠跨越技術障礙，隨心隨意，隨時隨地，自己就能夠制作出專業(yè)的網(wǎng)頁頁面。我們把頁面中的所有模塊抽象成一個個的組件，頁面中需要什么功能，直接把組件拖放到頁面區(qū)域內(nèi)即可。需要導航菜單，拖放一個導航菜單組件；需要一個幻燈片，拖放一個幻燈片，上傳圖片或者填寫圖片鏈接即可。整個過程都是可視化的，普通編輯即可完成，無需設計和技術參與。
[0004]目前，HTML結構一般都是固定好，改變HTML中的結構就需要修改代碼，或者是通過制定大量的模板來對應不同的結構，造成效率不高，成本高的現(xiàn)象，特別是在整體框架相同而其中的細節(jié)需求不同時，通過人工修改就會使得效率低下，不能實現(xiàn)很好的個性化定制。

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

[0005]為了克服現(xiàn)有技術的不足，本發(fā)明的目的在于提供一種可視化頁面制作方法和裝置，解決現(xiàn)有技術對可視化頁面制作中的個性化定制不足，無法方便地對同一類型頁面定制不同的外觀和交互行為的缺點。
[0006]為解決上述問題，本發(fā)明所采用的技術方案如下:
[0007]方案一:
[0008]一種可視化頁面制作方法，包括以下步驟:
[0009]S1:根據(jù)主模板預定義的模板合并標識發(fā)起合并子模板的請求；
[0010]S2:根據(jù)子模板預定義的匹配標識向數(shù)據(jù)源中發(fā)起匹配相應數(shù)據(jù)的請求；
[0011]S3:匹配相應數(shù)據(jù)后結合子模板中的HTML格式生成正常數(shù)據(jù)子模板，并將正常數(shù)據(jù)子模板合并至主模板中，結合主模板中的HTML格式生成完整頁面。
[0012]優(yōu)選的，在步驟S2中還包括:若匹配相應數(shù)據(jù)成功，則執(zhí)行步驟S3，若數(shù)據(jù)源中沒有相應數(shù)據(jù)，則執(zhí)行步驟S4;
[0013]S4:調用預設的空數(shù)據(jù)子模板合并至主模板中，結合主模板中的HTML格式生成完整頁面。
[0014]優(yōu)選的，在步驟SI中還包括:若合并子模板的請求出錯，則執(zhí)行步驟S5 ;在步驟S2中還包括:若匹配相應數(shù)據(jù)的請求出錯，則執(zhí)行步驟S5 ;
[0015]S5:調用預設的異常子模板合并至主模板，結合主模板中的HTML格式生成完整頁面。
[0016]優(yōu)選的，在步驟S2中，數(shù)據(jù)源為JSON字符串。
[0017]方案二:
[0018]—種可視化頁面制作裝置，包括以下模塊:
[0019]模板合并請求模塊:用于根據(jù)主模板預定義的模板合并標識發(fā)起合并子模板的請求；
[0020]數(shù)據(jù)匹配請求模塊:用于根據(jù)子模板預定義的匹配標識向數(shù)據(jù)源中發(fā)起匹配相應數(shù)據(jù)的請求；
[0021]第一合并模塊:用于匹配相應數(shù)據(jù)后結合子模板中的HTML格式生成正常數(shù)據(jù)子模板，并將正常數(shù)據(jù)子模板合并至主模板中，結合主模板中的HTML格式生成完整頁面。
[0022]優(yōu)選的，在數(shù)據(jù)匹配請求模塊中還包括:若匹配相應數(shù)據(jù)成功，則執(zhí)行第一合并模塊，若數(shù)據(jù)源中沒有相應數(shù)據(jù)，則執(zhí)行第二合并模塊；
[0023]第二合并模塊:用于調用預設的空數(shù)據(jù)子模板合并至主模板中，結合主模板中的HTML格式生成完整頁面。
[0024]優(yōu)選的，在模板合并請求模塊中還包括:若合并子模板的請求出錯，則執(zhí)行第三合并模塊；在數(shù)據(jù)匹配請求模塊中還包括:若匹配相應數(shù)據(jù)的請求出錯，則執(zhí)行第三合并模塊；
[0025]第三合并模塊:用于調用預設的異常子模板合并至主模板，結合主模板中的HTML格式生成完整頁面。
[0026]優(yōu)選的，在數(shù)據(jù)匹配請求模塊中，數(shù)據(jù)源為JSON字符串。
[0027]相比現(xiàn)有技術，本發(fā)明的有益效果在于:解決現(xiàn)有技術對可視化頁面制作中的個性化定制不足，無法方便地對同一類型頁面定制不同的外觀和交互行為的缺點。并且，在無匹配數(shù)據(jù)或者出現(xiàn)請求異常時還能調用相應的子模板與主模板合并，實現(xiàn)無數(shù)據(jù)和異常情況的HTML頁面定制。
【附圖說明】
[0028]圖1為本發(fā)明的可視化頁面制作方法的流程圖。
【具體實施方式】
[0029]下面，結合附圖以及【具體實施方式】，對本發(fā)明做進一步描述:
[0030]參考圖1為本發(fā)明的一種可視化頁面制作方法，包括以下步驟:
[0031]S1:根據(jù)主模板預定義的模板合并標識發(fā)起合并子模板的請求，若合并子模板的請求出錯，則執(zhí)行步驟S5。
[0032]S2:根據(jù)子模板預定義的匹配標識向數(shù)據(jù)源中發(fā)起匹配相應數(shù)據(jù)的請求，若匹配相應數(shù)據(jù)成功，則執(zhí)行步驟S3，若數(shù)據(jù)源中沒有相應數(shù)據(jù)，則執(zhí)行步驟S4，若匹配相應數(shù)據(jù)的請求出錯，則執(zhí)行步驟S5。
[0033]S3:匹配相應數(shù)據(jù)后結合子模板中的HTML格式生成正常數(shù)據(jù)子模板，并將正常數(shù)據(jù)子模板合并至主模板中，結合主模板中的HTML格式生成完整頁面。
[0034]S4:調用預設的空數(shù)據(jù)子模板合并至主模板中，結合主模板中的HTML格式生成完整頁面。
[0035]S5:調用預設的異常子模板合并至主模板，結合主模板中的HTML格式生成完整頁面。
[0036]針對上述步驟進行進一步解釋，在本發(fā)明中，一個組件的HTML模板由主模板和子模板組成，子模板又包括正常數(shù)據(jù)子模板、空數(shù)據(jù)子模板和異常子模板，每個模板均可單獨進行配置，互不影響。主模板就是一個HTML頁面的容器，將子模板合并至主模板后就生成了完整的HTML頁面，其中，正常數(shù)據(jù)模板是通過匹配數(shù)據(jù)源中的數(shù)據(jù)后生成的，在數(shù)據(jù)源中匹配數(shù)據(jù)的方式是通過正則表達式遍歷數(shù)據(jù)源中的數(shù)據(jù)，從而獲取目標數(shù)據(jù)。因為數(shù)據(jù)源中的數(shù)據(jù)可能不斷在變化，匹配數(shù)據(jù)的目的是為了根據(jù)數(shù)據(jù)源中變化的數(shù)據(jù)在頁面中展示不同的內(nèi)容，數(shù)據(jù)源優(yōu)選為JSON字符串或者是JSON數(shù)據(jù)格式的文件。
[0037]為了更好地說明本發(fā)明的方案，下面通過具體例子進行說明:
[0038]組件I的模板配置為:
[0039]主模版:〈div>{$items} </div>
[0040]正常數(shù)據(jù)子模版:〈imgsrc = “$src} ”/>
[0041]空數(shù)據(jù)子模版:〈imgsrc = “empty.jpg”/>
[0042]異常子模版:〈imgsrc = “error.jpg”/>
[0043]組件2的模板配置為:
[0044]主模版:〈div>{$items} </div>
[0045]正常數(shù)據(jù)子模版:〈imgsrc = “ {$src} ’，/><span> 平凡的世界〈/span〉
[0046]空數(shù)據(jù)子模版:〈imgsrc = “empty.jpg”/>
[0047]異常子模版:〈imgsrc = “error.jpg”/>
[0048]根據(jù)組件I和組件2中的主模板，可以認為該HTML頁面的整體框架是相同的，但是在細節(jié)需求上有所差異，具體在正常數(shù)據(jù)子模板中體現(xiàn)，組件I中的正常數(shù)據(jù)子模板沒