[發(fā)明專(zhuān)利]一種HTML模板動(dòng)態(tài)配置的控制方法及系統(tǒng)

有效

• 申請(qǐng)?zhí)枺?/td>: 201610147696.X
• 申請(qǐng)日: 2016-03-15
• 公開(kāi)（公告）號(hào): CN105824787B
• 公開(kāi)（公告）日: 2018-03-02
• 發(fā)明（設(shè)計(jì)）人: 何中;陳甲偉;戴建峰;嚴(yán)偉;張龍;徐曉輝;薛煒;何登
• 申請(qǐng)（專(zhuān)利權(quán)）人: 江蘇中威科技軟件系統(tǒng)有限公司
• 主分類(lèi)號(hào): G06F17/21
• 分類(lèi)號(hào): G06F17/21;G06F17/24
• 代理公司: 北京馳納智財(cái)知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙)11367
• 代理人: 蔣路帆

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

本發(fā)明涉及互聯(lián)網(wǎng)信息技術(shù)領(lǐng)域，尤其涉及一種HTML模板動(dòng)態(tài)配置的控制方法及系統(tǒng)。

背景技術(shù)

模板網(wǎng)站是用已經(jīng)成形的網(wǎng)站為框架進(jìn)行套用，可以在后臺(tái)進(jìn)行設(shè)置網(wǎng)站的一些信息，把這個(gè)網(wǎng)站改變成自己需要的網(wǎng)站信息，最為直接的就是一些網(wǎng)站提供的自助建站和我們眾所周知的博客，比如谷谷互聯(lián)、中華網(wǎng)庫(kù)專(zhuān)業(yè)提供網(wǎng)站模板，另外還有一些公司把自己公司已經(jīng)設(shè)計(jì)好的網(wǎng)站進(jìn)行一些修改再套用如修改風(fēng)格，網(wǎng)站名稱(chēng)等信息，但大致格式及里面的代碼并未改動(dòng)，此網(wǎng)站也可叫作模版網(wǎng)站。他們最大的特點(diǎn)就是省時(shí)，省力，操作簡(jiǎn)單。網(wǎng)站模板就是已經(jīng)做好的網(wǎng)頁(yè)框架，使用網(wǎng)頁(yè)編輯軟件將模板原有的圖片和文字替換成自己的內(nèi)容，再發(fā)布到自己的網(wǎng)站。而模板網(wǎng)站的模板設(shè)置及創(chuàng)建在模板網(wǎng)站的運(yùn)用過(guò)程中起到了作為基石的作用，并且影響到后期模板動(dòng)態(tài)配置的效率。現(xiàn)有html模板配置技術(shù)，多半需要編碼實(shí)現(xiàn)，并且在添加多個(gè)配置選項(xiàng)時(shí)，需要?jiǎng)?chuàng)建多個(gè)html配置標(biāo)簽和javascript函數(shù)。同時(shí)配置屬性多有編碼人員進(jìn)行配置，用戶如需可視化配置，還需開(kāi)發(fā)可視化配置界面。并且大部分模板配置流程步驟多，專(zhuān)業(yè)性強(qiáng)，效率低。

例如中國(guó)專(zhuān)利CN104714989A公開(kāi)的一種在瀏覽器中動(dòng)態(tài)存取和可視化編輯WEB頁(yè)面的方法，該方法按照以下步驟進(jìn)行的：A、服務(wù)器在可編輯頁(yè)面建立有特定功能的腳本；B、客戶端觸發(fā)編輯事件；C、服務(wù)器響應(yīng)編輯事件，載入頁(yè)面編輯的腳本代碼；D、載入鼠標(biāo)右鍵菜單系統(tǒng)；載入鼠標(biāo)事件和/或鍵盤(pán)事件；E、建立無(wú)模式對(duì)話框體現(xiàn)的菜單窗口，通過(guò)獲取窗口句柄，建立根據(jù)選中對(duì)象的類(lèi)型進(jìn)行菜單窗口中菜單的自動(dòng)切換的體系；F、刪除用于將腳本載入本頁(yè)面的代碼，保持頁(yè)面的原貌；G、服務(wù)器將處理后的頁(yè)面送到客戶端的瀏覽器中；H、將編輯完成的頁(yè)面設(shè)置保存到網(wǎng)絡(luò)或保存到本地。該方法通過(guò)腳本代碼實(shí)現(xiàn)網(wǎng)頁(yè)編輯，對(duì)于不同的網(wǎng)頁(yè)屬性不一的情況，該方法并不能完全適用，缺乏模板的通用性。

又例如中國(guó)專(zhuān)利CN101968817B公開(kāi)的一種網(wǎng)頁(yè)發(fā)布技術(shù)，具體的說(shuō)是對(duì)靜態(tài)網(wǎng)頁(yè)所使用的模板進(jìn)行數(shù)據(jù)配置的方法。一種網(wǎng)頁(yè)模板配置技術(shù)包括以下步驟：a通過(guò)模板導(dǎo)入，將網(wǎng)頁(yè)模板的全部信息保存到數(shù)據(jù)庫(kù)；b獲得網(wǎng)頁(yè)模板配置請(qǐng)求；c分析網(wǎng)頁(yè)模板，解析模板中需要配置的組件，并生成對(duì)應(yīng)的組件配置界面；c保存模板的配置；e發(fā)布網(wǎng)頁(yè)時(shí)，根據(jù)模板的配置生成網(wǎng)頁(yè)結(jié)果。該方法中采用的動(dòng)態(tài)模板采用編碼實(shí)現(xiàn)需要?jiǎng)?chuàng)建多個(gè)html配置標(biāo)簽和javascript函數(shù)，對(duì)于非專(zhuān)業(yè)人員具有一定的難度，實(shí)現(xiàn)效率低。

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

為克服現(xiàn)有技術(shù)中存在的HTML模板動(dòng)態(tài)配置流程步驟多效率低的問(wèn)題，本發(fā)明提供了一種HTML模板動(dòng)態(tài)配置的控制方法及系統(tǒng)。

一種HTML模板動(dòng)態(tài)配置的控制方法，包括如下步驟：

步驟一：根據(jù)用戶指令創(chuàng)建或從目標(biāo)網(wǎng)頁(yè)拷貝一段HTML代碼，使用模板標(biāo)簽替換需要設(shè)置的屬性；

步驟二：根據(jù)步驟一中的模板標(biāo)簽使用JSON結(jié)構(gòu)文件創(chuàng)建配置屬性；

步驟三：加載步驟二中設(shè)置的配置屬性，循環(huán)讀取每個(gè)元素，根據(jù)其屬性進(jìn)行界面繪制并綁定相關(guān)事件；

步驟四：用戶進(jìn)行屬性配置選擇時(shí)，響應(yīng)對(duì)應(yīng)元素綁定的事件，調(diào)用相關(guān)方法實(shí)現(xiàn)表單的關(guān)聯(lián)調(diào)用、賦值和驗(yàn)證；

步驟五：讀取步驟一創(chuàng)建的模板，匹配出其中的對(duì)應(yīng)的內(nèi)容,依次取出并到保存的配置屬性中去替換為對(duì)應(yīng)的值，完成配置操作。

進(jìn)一步的，所述步驟一包括：

(1)根據(jù)用戶指令創(chuàng)建或從目標(biāo)網(wǎng)頁(yè)拷貝一段HTML代碼；

(2)將其中需要設(shè)置的屬性使用“{{}}”符號(hào)包裹起來(lái)，所述“{{}}”包裹起來(lái)的內(nèi)容為標(biāo)簽名。

進(jìn)一步的，所述標(biāo)簽名為模板內(nèi)的唯一標(biāo)簽名。

進(jìn)一步的，所述步驟二包括：

(1)依據(jù)步驟一設(shè)定模板中的模板標(biāo)簽，建立模板配置選項(xiàng)；

(2)根據(jù)不同的配置要求依次設(shè)定屬性配置的默認(rèn)值和可選值以及類(lèi)型。

進(jìn)一步的，所述步驟三包括：

(1)根據(jù)步驟二中配置屬性的類(lèi)型創(chuàng)建顯示界面；

(2)根據(jù)步驟二中配置屬性的選項(xiàng)名稱(chēng)設(shè)置配置項(xiàng)的顯示名稱(chēng)；

(3)根據(jù)步驟二中配置屬性的默認(rèn)值設(shè)定配置項(xiàng)的默認(rèn)值；

(4)根據(jù)步驟二中配置屬性的可選值設(shè)定配置項(xiàng)的可選值。

進(jìn)一步的，所述步驟四包括：用戶在步驟三繪制的界面中點(diǎn)擊配置項(xiàng)，并且檢測(cè)可選值是否為空，如不為空則顯示可選值選擇界面，如為空則顯示輸入界面。

進(jìn)一步的，所述步驟五包括：