一種html模板動態配置的控制方法及系統的制作方法

一種html模板動態配置的控制方法及系統的制作方法
【專利摘要】本發明提供了一種HTML模板動態配置的控制方法，包括步驟一：獲取HTML代碼，使用模板標簽替換需要設置的屬性；步驟二：根據步驟一中的模板標簽使用JSON結構文件創建配置屬性；步驟三：加載步驟二中設置的配置屬性，循環讀取每個元素，進行界面繪制并綁定相關事件；步驟四：進行屬性配置選擇時，響應對應元素綁定的事件，調用相關方法；步驟五：讀取步驟一創建的模板，匹配出其中的對應的內容,依次取出并到保存的配置屬性中去替換為對應的值。應用了該方法的系統包括代碼獲取單元、JSON配置屬性單元、讀取單元、事件代理器和界面生成器。本發明添加簡單，避免了操作操作html和js，方便不熟悉編碼的用戶進行配置模板配置屬性。
【專利說明】
一種HTML模板動態配置的控制方法及系統
技術領域
[0001]本發明涉及互聯網信息技術領域，尤其涉及一種HTML模板動態配置的控制方法及系統。
【背景技術】
[0002]模板網站是用已經成形的網站為框架進行套用，可以在后臺進行設置網站的一些信息，把這個網站改變成自己需要的網站信息，最為直接的就是一些網站提供的自助建站和我們眾所周知的博客，比如谷谷互聯、中華網庫專業提供網站模板，另外還有一些公司把自己公司已經設計好的網站進行一些修改再套用如修改風格，網站名稱等信息，但大致格式及里面的代碼并未改動，此網站也可叫作模版網站。他們最大的特點就是省時，省力，操作簡單。網站模板就是已經做好的網頁框架，使用網頁編輯軟件將模板原有的圖片和文字替換成自己的內容，再發布到自己的網站。而模板網站的模板設置及創建在模板網站的運用過程中起到了作為基石的作用，并且影響到后期模板動態配置的效率。現有html模板配置技術，多半需要編碼實現，并且在添加多個配置選項時，需要創建多個html配置標簽和javascript函數。同時配置屬性多有編碼人員進行配置，用戶如需可視化配置，還需開發可視化配置界面。并且大部分模板配置流程步驟多，專業性強，效率低。
[0003]例如中國專利CN104714989A公開的一種在瀏覽器中動態存取和可視化編輯WEB頁面的方法，該方法按照以下步驟進行的:A、服務器在可編輯頁面建立有特定功能的腳本;B、客戶端觸發編輯事件;C、服務器響應編輯事件，載入頁面編輯的腳本代碼;D、載入鼠標右鍵菜單系統;載入鼠標事件和/或鍵盤事件;E、建立無模式對話框體現的菜單窗口，通過獲取窗口句柄，建立根據選中對象的類型進行菜單窗口中菜單的自動切換的體系;F、刪除用于將腳本載入本頁面的代碼，保持頁面的原貌;G、服務器將處理后的頁面送到客戶端的瀏覽器中；H、將編輯完成的頁面設置保存到網絡或保存到本地。該方法通過腳本代碼實現網頁編輯，對于不同的網頁屬性不一的情況，該方法并不能完全適用，缺乏模板的通用性。
[0004]又例如中國專利CN101968817B公開的一種網頁發布技術，具體的說是對靜態網頁所使用的模板進行數據配置的方法。一種網頁模板配置技術包括以下步驟:a通過模板導入，將網頁模板的全部信息保存到數據庫;b獲得網頁模板配置請求;c分析網頁模板，解析模板中需要配置的組件，并生成對應的組件配置界面;c保存模板的配置;e發布網頁時，根據模板的配置生成網頁結果。該方法中采用的動態模板采用編碼實現需要創建多個html配置標簽和javascript函數，對于非專業人員具有一定的難度，實現效率低。

【發明內容】

[0005]為克服現有技術中存在的HTML模板動態配置流程步驟多效率低的問題，本發明提供了一種HTML模板動態配置的控制方法及系統。
[0006]—種HTML模板動態配置的控制方法，包括如下步驟:
[0007]步驟一:根據用戶指令創建或從目標網頁拷貝一段HTML代碼，使用模板標簽替換需要設置的屬性；
[0008]步驟二:根據步驟一中的模板標簽使用JSON結構文件創建配置屬性；
[0009]步驟三:加載步驟二中設置的配置屬性，循環讀取每個元素，根據其屬性進行界面繪制并綁定相關事件；
[0010]步驟四:用戶進行屬性配置選擇時，響應對應元素綁定的事件，調用相關方法實現表單的關聯調用、賦值和驗證；
[0011]步驟五:讀取步驟一創建的模板，匹配出其中的對應的內容，依次取出并到保存的配置屬性中去替換為對應的值，完成配置操作。
[0012]進一步的，所述步驟一包括:
[0013](I)根據用戶指令創建或從目標網頁拷貝一段HTML代碼；
[0014](2)將其中需要設置的屬性使用“{{}}”符號包裹起來，所述“{{}}”包裹起來的內容為標簽名。
[0015]進一步的，所述標簽名為模板內的唯一標簽名。
[0016]進一步的，所述步驟二包括:
[0017](I)依據步驟一設定模板中的模板標簽，建立模板配置選項；
[0018](2)根據不同的配置要求依次設定屬性配置的默認值和可選值以及類型。
[0019]進一步的，所述步驟三包括:
[0020](I)根據步驟二中配置屬性的類型創建顯示界面；
[0021](2)根據步驟二中配置屬性的選項名稱設置配置項的顯示名稱；
[0022](3)根據步驟二中配置屬性的默認值設定配置項的默認值；
[0023](4)根據步驟二中配置屬性的可選值設定配置項的可選值。
[0024]進一步的，所述步驟四包括:用戶在步驟三繪制的界面中點擊配置項，并且檢測可選值是否為空，如不為空則顯示可選值選擇界面，如為空則顯示輸入界面。
[0025]進一步的，所述步驟五包括:
[0026](I)讀取步驟一設定的模板標簽，匹配出模板標簽中的標簽名；
[0027](2)依次讀取配置項，獲取其默認值，將該配置項的名稱和默認值保存；
[0028](3)讀取步驟(I)獲取的標簽名，并將讀取到的標簽名與(2)中的名稱交換。
[0029]一種應用了所述的HTML模板動態配置的控制方法的系統，包括配置文件、模板和規則引擎，所述模板分別與配置文件和規則引擎連接。
[0030]進一步的，所述模板內部設置有模板標簽生成器。
[0031]進一步的，所述規則引擎進行表單驗證、關聯檢查、自動填充和多字段運算操作。
[0032]與現有技術相比，本發明的有益效果是:
[0033](I)本發明配置模板配置屬性基于JSON數據自動創建用戶界面，可根據不同的配置要求依次設定屬性配置的默認值和可選值以及類型，添加簡單，避免了操作操作html和js，方便不熟悉編碼的用戶進行配置模板配置屬性。
[0034](2)本發明配置模板配置可實現動態關聯綁定，自動賦值、多屬性計算賦值，無需采用編碼人工賦值，使得模板配置過程更為簡便。
[0035](3)本發明的系統的模板通過內部實現的模板標簽生成器來幫助開發人員屏蔽前端知識，使他們可以通過編寫json文件來配置實現模板操作界面;開發人員只需要做表單配置即可輸出前端操作界面，也減去了前端開發工作。
[0036](4)本發明的系統的系統自帶規則引擎，可支持表單驗證、關聯檢查和自動填充、多字段運算等功能，無需編寫js代碼實現，實現過程簡單方便開發人員操作。
【附圖說明】
[0037]圖1是本發明中HTML模板動態配置的控制方法的流程示意圖。
【具體實施方式】
[0038]以下結合附圖和實施例，對本發明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅用以解釋本發明，并不用于限定本發明。
[0039]實施例1
[0040]如圖1，本【具體實施方式】披露了一種HTML模板動態配置的控制方法，該方法配置模板配置屬性基于JSON數據自動創建用戶界面，添加簡單，無需操作HTML和js。配置模板配置可實現動態關聯綁定，自動賦值、多屬性計算賦值，并且可實現自動化填充，渲染模板。如圖去所示，本實施例的方法包括:
[0041]步驟一:根據用戶指令創建或從目標網頁拷貝一段HTML代碼，使用模板標簽替換需要設置的屬性。
[0042]具體的，HTML代碼的來源可以有多種形式，例如可以是用戶粘貼板內的內容，也可是用戶導入的文本文檔，用戶手動輸入的內容等。HTML代碼及超文本標記語言(標準通用標記語言下的一個應用，外語縮寫HTML)，是迄今為止網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言C=HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部(Head )、主體(Body)兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。網站網頁的每個網頁上都有自己獨立的HTML代碼頁，用戶可以根據自己的需要選擇需要配置的網頁代碼進行復制粘貼;此外在制作網頁的同時，也可以將HTML文本導出為文本格式，在需要配置屬性時將文本文檔導入到系統中；另外也可通過系統內的文本輸入工具手動輸入HTML代碼
[0043]作為優選的，本實施例中具體描述根據用戶指令從目標網頁拷貝一段HTML代碼的情形。將用戶選擇的內容復制，系統通過查找確認HTML代碼中的可設置屬性的字符，并將HTML代碼中需要設置的屬性使用“{{}}”符號包裹起來包裹起來的內容為標簽名，形式為{{標簽名}}，其中“標簽名”是模板文件中唯一的“標簽名”。
[0044]步驟二:根據步驟一中的模板標簽使用JSON結構文件創建配置屬性。
[0045]具體的，現有html模板配置技術，多半需要編碼實現，并且在添加多個配置選項時，需要創建多個html配置標簽和javascript函數。同時配置屬性多有編碼人員進行配置，用戶如需可視化配置，還需開發可視化配置界面。從而導致模板配置流程步驟多，專業性強，效率低。因此，在本發明實施例中對創建配置屬性的過程優化，采用JSON結構文件進行配置模板配置屬性。
[0046]其中采用的JSON結構文件的結構為:
[0047][ {label:，選項名稱，,name: ’標簽名，,value:，選項默認值’ ,values: [ {text:，選項可選值名稱’ ,value: ’選項可選值’ } ] ,plugin: ’選項類型’，related: ’關聯選項’，adjective:，賦值屬性= >賦值目標標簽名，,enablenil: true,hide: true}]。
[0048]系統通過name進行屬性和配置界面元素的綁定，通過value設定屬性的默認值，通過values設置屬性的可選值范圍，通過plugin創建顯示界面，通過related實現關聯屬性的綁定操作，通過adject i ve實現動態賦值，通過enablenil檢測屬性是否可為空，通過hide決定元素是顯示還是隱藏。
[0049]作為優選的，可通過以下方法實現JSON結構文件創建配置屬性，依據上一步設定模板中的{{標簽名}}，建立模板配置選項，其中模板配置選項的名稱即是“{{標簽名}}”中的“標簽名”。繼而根據不同的配置要求依次設定屬性配置的默認值(value)和可選值(values)以及類型(plugin)等內容。具體的，如屬性具有關聯屬性需要配置related字段，其值為目標關聯的標簽名。如屬性具有動態賦值屬性需要配置adjective字段，其值為『當前屬性名= > 目標標簽名』的結構。如允許屬性可為空需配置enablenil字段的值為true，否則屬性必須有值。如元素需要隱藏，需要配置hide字段的值為true，否則元素顯示并可操作。
[0050]步驟三:加載步驟二中設置的配置屬性，循環讀取每個元素，根據其屬性進行界面繪制并綁定相關事件。
[0051]具體的，系統讀取步驟二中生成配置屬性項，每讀取一個屬性配置項，根據plugin字段創建顯示界面;根據label字段設置配置項的顯示名稱;根據value字段設定配置項的默認值;根據values字段設定配置項的可選值;設定配置項的id為name字段值。
[0052]優選的，顯示界面的生成步驟包括:a、配置文件為數組結構，渲染器每次取一項，并將指針移動到下一項位置。b、解析取到的配置項信息，檢查plugin字段的值。plugin字段為界面控件類型字段，系統依據不同的值輸出不同的界面元素。界面組件包括form原生組件(text\select等)和擴展組件(預先開發內置)。0、將plugin對應的界面組件添加到顯示視圖中。d、根據該項的其他屬性進行相關操作，如設定顯示或隱藏，默認值，事件關聯等。e、執行步驟a至所有項處理完成。
[0053]作為優選的，還需要檢測配置項的hide字段值是否為true，如為true這設定配置項的樣式屬性display為none，進行配置項隱藏。檢測配置項的related字段是否有值，如果有值則講該字段加入系統的relateds事件代理器。檢測配置項的adjective字段是否有值，如果有值則講該字段加入系統的adjectives事件代理器。重復以上過程直到所有配置屬性項初始化完成，顯示用戶配置界面。
[0054]步驟四:用戶進行屬性配置選擇時，響應對應元素綁定的事件，調用相關方法實現表單的關聯調用、賦值和驗證。用戶在步驟三創建的顯示界面進行配置操作。用戶點擊配置項時，系統檢測values字段是否為空，如不為空則顯示可選值選擇界面，如為空則顯示輸入界面。用戶輸入后，系統檢測related字段是否為空，如不為空則調用系統的relateds事件代理器執行relatedFn方法實現關聯元素操作:設定目標配置項的顯示操作。系統檢測adjectives字段是否為空，如不為空則調用系統的adjectives事件代理器執行adjectivesFn方法實現關聯元素操作:將該配置項的屬性值給定到目標配置項的value屬性值。
[0055]步驟五:讀取步驟一創建的模板，匹配出其中的對應的內容，依次取出并到保存的配置屬性中去替換為對應的值，完成配置操作。
[0056]具體的，用戶在步驟四完成配置操作后，點擊完成按鈕后系統讀取步驟一設定的模板內容，匹配出里面的{{標簽名}}項。系統依次讀取配置項，獲取其value值，并檢測其enableni I字段是否為true，如不為true，同時value為空，則顯示錯誤信息并提示用戶修正錯誤完成賦值，同時停止保存操作。如驗證通過則使用該配置項的name為key ,value為值加入到系統的result字段中。讀取獲取的{{標簽名}}，從系統的result中通過key取值，并替換{{標簽名}}。重復執行替換，直到所有{{標簽名}}替換完成。將配置后的模板保存到存儲設備中，完成操作。
[0057]此外，渲染模板的過程是在用戶配置完成后點擊保存或預覽的時候執行的，分2步執行，首先會將模板標簽和選擇的配置項在解釋引擎中進行計算和替換，轉化為最終的模板內容，接著系統調用接口將模板傳遞給處理系統，并接受返回回來的html內容，將結果渲染給用戶查看。
[0058]實施例2
[0059]本【具體實施方式】披露了一種應用了實施例1中的HTML模板動態配置的控制方法的系統。
[0060]具體的，系統包括配置文件、模板和規則引擎，模板分別與配置文件和規則引擎連接，模板內部設置有模板標簽生成器。
[0061 ]本具體實施例中的系統是一套模板創建和生成工具，主要是通過配置文件來創建和生成模板文件，并發布為html內容。系統的模板通過內部實現的模板標簽生成器來幫助開發人員屏蔽前端知識，使他們可以通過編寫json文件來配置實現模板操作界面;開發人員只需要做表單配置即可輸出前端操作界面，也減去了前端開發工作。系統自帶規則引擎，可支持表單驗證、關聯檢查和自動填充、多字段運算等功能，無需編寫js代碼實現。
[0062]上述說明示出并描述了本發明的優選實施例，如前所述，應當理解本發明并非局限于本文所披露的形式，不應看作是對其他實施例的排除，而可用于各種其他組合、修改和環境，并能夠在本文所述發明構想范圍內，通過上述教導或相關領域的技術或知識進行改動。而本領域人員所進行的改動和變化不脫離本發明的精神和范圍，則都應在本發明所附權利要求的保護范圍內。
【主權項】
1.一種HTML模板動態配置的控制方法，其特征在于，包括如下步驟: 步驟一:根據用戶指令創建或從目標網頁拷貝一段HTML代碼，使用模板標簽替換需要設置的屬性； 步驟二:根據步驟一中的模板標簽使用JSON結構文件創建配置屬性； 步驟三:加載步驟二中設置的配置屬性，循環讀取每個元素，根據其屬性進行界面繪制并綁定相關事件； 步驟四:用戶進行屬性配置選擇時，響應對應元素綁定的事件，調用相關方法實現表單的關聯調用、賦值和驗證； 步驟五:讀取步驟一創建的模板，匹配出其中的對應的內容，依次取出并到保存的配置屬性中去替換為對應的值，完成配置操作。2.根據權利要求1所述的一種HTML模板動態配置的控制方法，其特征在于:所述步驟一包括: (1)根據用戶指令創建或從目標網頁拷貝一段HTML代碼； (2)將其中需要設置的屬性使用“{{}}”符號包裹起來，所述“{{}}”包裹起來的內容為標簽名。3.根據權利要求2所述的一種HTML模板動態配置的控制方法，其特征在于:所述標簽名為模板內的唯一標簽名。4.根據權利要求1所述的一種HTML模板動態配置的控制方法，其特征在于:所述步驟二包括: (1)依據步驟一設定模板中的模板標簽，建立模板配置選項； (2)根據不同的配置要求依次設定屬性配置的默認值和可選值以及類型。5.根據權利要求1所述的一種HTML模板動態配置的控制方法，其特征在于:所述步驟三包括: (1)根據步驟二中配置屬性的類型創建顯示界面； (2)根據步驟二中配置屬性的選項名稱設置配置項的顯示名稱； (3)根據步驟二中配置屬性的默認值設定配置項的默認值； (4)根據步驟二中配置屬性的可選值設定配置項的可選值。6.根據權利要求1所述的一種HTML模板動態配置的控制方法，其特征在于:所述步驟四包括:用戶在步驟三繪制的界面中點擊配置項，并且檢測可選值是否為空，如不為空則顯示可選值選擇界面，如為空則顯示輸入界面。7.根據權利要求1所述的一種HTML模板動態配置的控制方法，其特征在于:所述步驟五包括: (1)讀取步驟一設定的模板標簽，匹配出模板標簽中的標簽名； (2)依次讀取配置項，獲取其默認值，將該配置項的名稱和默認值保存； (3)讀取步驟(I)獲取的標簽名，并將讀取到的標簽名與(2)中的名稱交換。8.—種應用了如權利要求1所述的HTML模板動態配置的控制方法的系統，其特征在于:包括配置文件、模板和規則引擎，所述模板分別與配置文件和規則引擎連接。9.根據權利要求8所述的一種HTML模板動態配置的控制系統，其特征在于:所述模板內部設置有模板標簽生成器。10.根據權利要求8所述的一種HTML模板動態配置的控制系統，其特征在于:所述規則引擎進行表單驗證、關聯檢查、自動填充和多字段運算操作。
【文檔編號】G06F17/21GK105824787SQ201610147696
【公開日】2016年8月3日
【申請日】2016年3月15日
【發明人】何中, 陳甲偉, 戴建峰, 嚴偉, 張龍, 徐曉輝, 薛煒, 何登
【申請人】江蘇中威科技軟件系統有限公司