目錄可視化維護(hù)方法和裝置制造方法
【專利摘要】本發(fā)明提供一種目錄可視化維護(hù)方法和裝置，其中，所述方法包括：頁面前端調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)；為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)；通過所述事件函數(shù)捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改；在所述頁面前端根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。本發(fā)明提供的目錄可視化維護(hù)方法和裝置，能實(shí)現(xiàn)了目錄結(jié)構(gòu)的所見即所得的可視化維護(hù)，有效降低目錄維護(hù)的錯(cuò)誤率，提高了維護(hù)效率。
【專利說明】目錄可視化維護(hù)方法和裝置
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)站維護(hù)領(lǐng)域，具體而言，涉及一種目錄可視化維護(hù)方法和裝置。
【背景技術(shù)】
[0002]網(wǎng)站系統(tǒng)中經(jīng)常需要在頁面前端展示目錄結(jié)構(gòu)的內(nèi)容，如商品分類、地區(qū)分類等，這些信息內(nèi)容不固定，需要進(jìn)行后臺(tái)維護(hù)。
[0003]現(xiàn)有的維護(hù)方式如下:在后臺(tái)利用文本框組件(textbox)將這些目錄的代碼直接展示出來，然后在textbox中修改代碼，最后再在頁面前端展示。
[0004]現(xiàn)有技術(shù)方案利用textbox的形式維護(hù)目錄結(jié)構(gòu)的代碼，相當(dāng)于在寫程序，界面不友好且容易造成維護(hù)的高錯(cuò)誤率，進(jìn)而造成頁面前端展示錯(cuò)誤。此外，目錄是頁面前端使用量較大的模塊，一旦出錯(cuò)對系統(tǒng)影響較大，不利于網(wǎng)站的推廣。
[0005]如何改變這種面向代碼的維護(hù)方式同時(shí)提高維護(hù)效率，是網(wǎng)站維護(hù)人員所面臨的難題。

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

[0006]為解決上述技術(shù)問題，本發(fā)明提供了一種目錄可視化維護(hù)方法和裝置，能在頁面前端以目錄展現(xiàn)樣式的界面進(jìn)行可視化的所見即所得的維護(hù)。
[0007]根據(jù)本發(fā)明的一種實(shí)施例，提供了一種目錄可視化維護(hù)方法，包括:
[0008]頁面前端調(diào)用源超文本標(biāo)記語言(Hyper Text Mark-up Language,html)代碼,將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)；
[0009]為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)；
[0010]通過所述事件函數(shù)捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改；
[0011]在所述頁面前端根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。
[0012]根據(jù)本發(fā)明的一種實(shí)施例，提供了一種目錄可視化維護(hù)裝置，包括:
[0013]頁面前端，用于調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)；
[0014]事件函數(shù)加載模塊，用于為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)；
[0015]事件函數(shù)處理模塊，用于捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改；
[0016]所述頁面前端還用于，根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。
[0017]實(shí)施本發(fā)明實(shí)施例所提供的目錄可視化維護(hù)方法和裝置，具有如下優(yōu)點(diǎn):不依賴于目錄層級(jí)的多少以及每一層級(jí)上的類目數(shù)量的多少，能自適應(yīng)的讀取已有的目錄結(jié)構(gòu)，通過將目錄的代碼嵌入到頁面文件并在頁面前端展示，同時(shí)通過設(shè)置事件并利用JavaScript來控制該事件所觸發(fā)的對于目錄結(jié)構(gòu)的增加、刪除或修改操作(本質(zhì)上即對這 些目錄結(jié)構(gòu)的html代碼的重新編輯)，從而實(shí)現(xiàn)目錄的可視化維護(hù)，有效提高維護(hù)效率。
【專利附圖】

【附圖說明】
[0018]圖1是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)方法的流程示意圖；
[0019]圖2是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)方法的流程示意圖；
[0020]圖3是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)裝置的方塊示意圖；
[0021]圖4是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)裝置的方塊示意圖。
【具體實(shí)施方式】
[0022]為使本發(fā)明的實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖對本發(fā)明作進(jìn)一步地詳細(xì)描述。
[0023]圖1是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)方法的流程示意圖，參見圖1，該方法包括:
[0024]100:頁面前端調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)。其中，頁面前端調(diào)用的源html代碼可以是完整的源html代碼，也可以是源html代碼片段。
[0025]通過100可以在頁面前端顯示經(jīng)過瀏覽器解析的圖形化界面。
[0026]102:為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)。
[0027]JavaScript是一種基于對象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語言。使用JavaScript可以與html超文本標(biāo)記語言、Java腳本語言一起實(shí)現(xiàn)在一個(gè)Web頁面中連接多個(gè)對象、與Web客戶交互等作用。JavaScript通過嵌入或調(diào)入到標(biāo)準(zhǔn)的html語言中實(shí)現(xiàn)。
[0028]104:通過所述事件函數(shù)捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改。
[0029]其中，所述用戶的操作事件可以包括鼠標(biāo)事件(例如:單擊事件)、鍵盤事件等。
[0030]106:在所述頁面前端根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。
[0031]本實(shí)施例所提供的目錄可視化維護(hù)方法，通過102和104，實(shí)現(xiàn)了通過事件驅(qū)動(dòng)機(jī)制修改源html代碼；通過106,實(shí)現(xiàn)了在修改源html代碼的同時(shí)在頁面展示修改后的效果(即:目錄的結(jié)構(gòu))。因此，本實(shí)施例所提供的方法實(shí)現(xiàn)了目錄的所見即所得的可視化維護(hù)(維護(hù)人員所做的每一步操作，都能實(shí)時(shí)的看到該操作在頁面前端的展示效果)，能降低維護(hù)錯(cuò)誤率，并提高維護(hù)效率。
[0032]此外，如果利用頁面將目錄的每一個(gè)層級(jí)以及該層級(jí)上的類目展示出來以逐個(gè)進(jìn)行維護(hù)的話，由于目錄的層級(jí)、每一層級(jí)上的類目數(shù)量均是不斷變化的，將會(huì)導(dǎo)致一種嚴(yán)重的后果:頁面元素的展現(xiàn)變得難以控制。而本實(shí)施例所提供的方法通過在頁面前端展示目錄的結(jié)構(gòu)同時(shí)結(jié)合所見即所得的維護(hù)方式，則不存在上述缺陷。
[0033]圖2是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)方法的流程示意圖，參見圖2，該方法包括:
[0034]200:頁面前端調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)。[0035]可選的，所述源html代碼存儲(chǔ)于數(shù)據(jù)庫中，在200之前，從數(shù)據(jù)庫中讀取源html代碼并發(fā)送至頁面前端。
[0036]其中，頁面前端調(diào)用的源html代碼可以是完整的源html代碼，也可以是源html代碼片段。
[0037]202:為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)。
[0038]204:通過所述事件函數(shù)捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改。
[0039]可選的，在本實(shí)施例的一種實(shí)現(xiàn)方式中，204包括:根據(jù)觸發(fā)所述操作事件的標(biāo)簽所在的前后標(biāo)簽結(jié)構(gòu)，在所述源html代碼中增加或刪除標(biāo)簽元素。例如:當(dāng)需要在目錄中的類目A之后新增一個(gè)類目B時(shí)，所述事件函數(shù)可以用于捕捉用戶的單擊事件，具體而言，所述事件函數(shù)捕捉用戶對于類目A的單擊，出現(xiàn)“后面新增”、“刪除”和“修改”按鈕，之后捕捉用戶對于“后面新增”按鈕的單擊，并觸發(fā)以下操作:彈出用于用戶輸入新增類目的名稱的輸入框，在用戶確認(rèn)輸入內(nèi)容后，將用戶輸入的內(nèi)容以html標(biāo)簽元素的形式插入源html代碼中相應(yīng)位置(即類目A的標(biāo)簽元素之后、類目B的標(biāo)簽元素之前)。再例如，當(dāng)目錄中包括依次排列的類目A、類目B和類目C，并且需要?jiǎng)h除類目B時(shí)，所述事件函數(shù)捕捉對于“刪除”按鈕的單擊，并觸發(fā)如下操作:刪除源html代碼中與類目B相關(guān)的標(biāo)簽元素(例如:刪除類目A對應(yīng)的html之后、類目B對應(yīng)的html代碼之前的標(biāo)簽元素)。
[0040]可選的，在本實(shí)施例的一種實(shí)現(xiàn)方式中，204包括:根據(jù)觸發(fā)所述操作事件的標(biāo)簽，在所述源html代碼中修改標(biāo)簽元素。例如，當(dāng)需要對目錄的類目A的名稱進(jìn)行修改時(shí)，事件函數(shù)捕捉到用戶對于“修改”按鈕的單擊后觸發(fā)以下操作:彈出用于用戶輸入修改后的名稱的輸入框，在用戶確認(rèn)輸出內(nèi)容后，根據(jù)輸入框的內(nèi)容修改類目A的源html代碼中的相應(yīng)標(biāo)簽元素。
[0041]205:保存修改后的html代碼。例如，將修改后的html代碼保存在數(shù)據(jù)庫，以便在正式對外展示的過程中，讀取修改后的所述代碼并嵌入到頁面中展示。
[0042]206:在所述頁面前端根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。從而實(shí)時(shí)地展現(xiàn)修改后的效果。
[0043]通過本實(shí)施例所提供的方法實(shí)現(xiàn)了目錄的所見即所得的可視化維護(hù)。
[0044]圖3是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)裝置的方塊示意圖，參照圖3，所述維護(hù)裝置30包括頁面前端31、事件函數(shù)加載模塊32和事件函數(shù)處理模塊33。下面具體進(jìn)行說明。
[0045]頁面前端31，用于調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)。其中，頁面前端31調(diào)用的源html代碼可以是完整的源html代碼，也可以是源html代碼片段。頁面前端31顯示的是經(jīng)過瀏覽器解析的圖形化界面。
[0046]事件函數(shù)加載模塊32，用于為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)。
[0047]事件函數(shù)處理模塊33，用于捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改。其中，所述用戶的操作事件可以包括鼠標(biāo)事件(例如:單擊事件)、鍵盤事件等。
[0048]所述頁面前端31還用于，根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。[0049]本實(shí)施例所提供的目錄可視化維護(hù)裝置，通過事件函數(shù)加載模塊32和事件函數(shù)處理模塊33，實(shí)現(xiàn)了通過事件驅(qū)動(dòng)機(jī)制修改源html代碼；通過頁面前端31，實(shí)現(xiàn)了在修改源html代碼的同時(shí)在頁面展示修改后的效果(S卩:目錄的結(jié)構(gòu))。因此，本實(shí)施例所提供的裝置實(shí)現(xiàn)了目錄的所見即所得的可視化維護(hù)(維護(hù)人員所做的每一步操作，都能實(shí)時(shí)的看到該操作在頁面前端的展示效果)，能降低維護(hù)錯(cuò)誤率，并提高維護(hù)效率。
[0050]圖4是根據(jù)本發(fā)明實(shí)施例的一種目錄可視化維護(hù)裝置的方塊示意圖，參照圖4，所述維護(hù)裝置40除了包括頁面前端31、事件函數(shù)加載模塊32和事件函數(shù)處理模塊33之外，還包括存儲(chǔ)模塊41，用于保存修改后的html代碼，或用于將修改后的html代碼保存至數(shù)據(jù)庫。通過存儲(chǔ)模塊41使得在正式對外展示的過程中，能讀取修改后的html代碼并嵌入到頁面中展示。
[0051]可選的，在本實(shí)施例的一種實(shí)現(xiàn)方式中，事件函數(shù)處理模塊33包括:
[0052]增刪處理子模塊331，用于根據(jù)觸發(fā)所述操作事件的標(biāo)簽所在的前后標(biāo)簽結(jié)構(gòu)，在所述源html代碼中增加或刪除標(biāo)簽元素。具體說明請參照圖2所示方法實(shí)施例中的相應(yīng)說明。
[0053]可選的，在本實(shí)施例的一種實(shí)現(xiàn)方式中，事件函數(shù)處理模塊33包括:
[0054]修改處理子模塊332，用于根據(jù)觸發(fā)所述操作事件的標(biāo)簽，在所述源html代碼中修改標(biāo)簽元素。具體說明請參照圖2所示方法實(shí)施例中的相應(yīng)說明。
[0055]通過本發(fā)明實(shí)施例所提供的目錄可視化維護(hù)裝置，能實(shí)現(xiàn)對于目錄的所見即所得的可視化維護(hù)。
[0056]通過以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到本發(fā)明可借助軟件結(jié)合硬件平臺(tái)的方式來實(shí)現(xiàn)，當(dāng)然也可以全部通過硬件來實(shí)施?；谶@樣的理解，本發(fā)明的技術(shù)方案對【背景技術(shù)】做出貢獻(xiàn)的全部或者部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品可以存儲(chǔ)在存儲(chǔ)介質(zhì)中，如R0M/RAM、磁碟、光盤等，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例或者實(shí)施例的某些部分所述的方法。
[0057]以上所揭露的僅為本發(fā)明的優(yōu)選實(shí)施例而已，當(dāng)然不能以此來限定本發(fā)明的保護(hù)范圍，因此依本發(fā)明權(quán)利要求的教導(dǎo)對上述實(shí)施例所作的等同變化，仍屬于本發(fā)明權(quán)利要求所涵蓋的范圍內(nèi)。
【權(quán)利要求】
1.一種目錄可視化維護(hù)方法，其特征在于，所述方法包括: 頁面前端調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)； 為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)； 通過所述事件函數(shù)捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改； 在所述頁面前端根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。
2.如權(quán)利要求1所述的方法，其特征在于，在對所述源html代碼進(jìn)行修改之后，所述方法還包括:保存修改后的html代碼。
3.如權(quán)利要求1所述的方法，其特征在于，根據(jù)所述操作事件對所述源html代碼進(jìn)行修改包括: 根據(jù)觸發(fā)所述操作事件的標(biāo)簽所在的前后標(biāo)簽結(jié)構(gòu)，在所述源html代碼中增加或刪除標(biāo)簽元素。
4.如權(quán)利要求1所述的方法，其特征在于，根據(jù)所述操作事件對所述源html代碼進(jìn)行修改包括: 根據(jù)觸發(fā)所述操作事件的標(biāo)簽，在所述源html代碼中修改標(biāo)簽元素。
5.如權(quán)利要求1-4中任一項(xiàng)所述的方法，其特征在于，所述操作事件包括單擊事件。
6.一種目錄可視化維護(hù)裝置，其特征在于，所述裝置包括: 頁面前端，用于調(diào)用源html代碼，將所述源html代碼嵌入頁面文件以展示出目錄的結(jié)構(gòu)； 事件函數(shù)加載模塊，用于為所述源html代碼中的每一類html標(biāo)簽加載JavaScript事件函數(shù)； 事件函數(shù)處理模塊，用于捕捉用戶對所述目錄的結(jié)構(gòu)的操作事件并根據(jù)所述操作事件對所述源html代碼進(jìn)行修改； 所述頁面前端還用于，根據(jù)修改后的html代碼展示目錄的結(jié)構(gòu)。
7.如權(quán)利要求6所述的裝置，其特征在于，所述裝置還包括: 存儲(chǔ)模塊，用于保存修改后的html代碼，或用于將修改后的html代碼保存至數(shù)據(jù)庫。
8.如權(quán)利要求6所述的裝置，其特征在于，所述事件函數(shù)處理模塊包括: 增刪處理子模塊，用于根據(jù)觸發(fā)所述操作事件的標(biāo)簽所在的前后標(biāo)簽結(jié)構(gòu)，在所述源html代碼中增加或刪除標(biāo)簽元素。
9.如權(quán)利要求6所述的裝置，其特征在于，所述事件函數(shù)處理模塊包括: 修改處理子模塊，用于根據(jù)觸發(fā)所述操作事件的標(biāo)簽，在所述源html代碼中修改標(biāo)簽元素。
10.如權(quán)利要求6-9中任一項(xiàng)所述的裝置，其特征在于，所述操作事件包括單擊事件。
【文檔編號(hào)】G06F9/44GK103793225SQ201410024881
【公開日】2014年5月14日 申請日期:2014年1月20日 優(yōu)先權(quán)日:2014年1月20日
【發(fā)明者】章夢, 周振, 季宜鋒, 龐以新, 王海潮, 張敏, 何燕萍, 王尋, 鄧梁, 張興強(qiáng) 申請人:中國建設(shè)銀行股份有限公司