本發(fā)明涉及通信技術(shù)領(lǐng)域，特別涉及一種編輯頁(yè)面的方法和系統(tǒng)。

背景技術(shù)：

目前主流的網(wǎng)站交易系統(tǒng)，都存在需要隨時(shí)調(diào)整頁(yè)面布局，頁(yè)面元素，頁(yè)面顯示內(nèi)容等，比如電商網(wǎng)站就是典型的交易網(wǎng)站，在電商網(wǎng)站會(huì)經(jīng)常增加新的商品品類(lèi)，增加新的互聯(lián)網(wǎng)玩法，增加廣告，增加促銷(xiāo)等操作。當(dāng)前界面實(shí)現(xiàn)的技術(shù)，一般都是通過(guò)javascript(js)代碼來(lái)獲取到后臺(tái)的數(shù)據(jù)，這些數(shù)據(jù)來(lái)自一個(gè)后臺(tái)的數(shù)據(jù)服務(wù)，js通過(guò)調(diào)用這個(gè)服務(wù)得到要顯示的數(shù)據(jù)，然后將這些數(shù)據(jù)設(shè)置到要顯示的界面的數(shù)據(jù)對(duì)象上。這個(gè)過(guò)程就是一個(gè)寫(xiě)js代碼的過(guò)程，如果按照上面的需求，發(fā)生界面顯示內(nèi)容變化時(shí)，就必須修改這樣一段代碼，來(lái)替換當(dāng)前代碼中對(duì)數(shù)據(jù)服務(wù)的調(diào)用，同時(shí)把它映射到界面要顯示的數(shù)據(jù)對(duì)象上。由于js代碼只能在客戶端瀏覽器被執(zhí)行，所以js代碼是無(wú)法讀取任何的服務(wù)器配置信息的，正因?yàn)槿绱耍龅竭@樣的需求，無(wú)法通過(guò)配置的方法實(shí)現(xiàn)，只能硬代碼來(lái)完成。而硬代碼的過(guò)程是一個(gè)完整的開(kāi)發(fā)過(guò)程，為了保證代碼的正確性，必須通過(guò)調(diào)測(cè)和測(cè)試流程后才能上線，這樣就會(huì)導(dǎo)致：從一個(gè)需求提出到最后實(shí)現(xiàn)，周期非常長(zhǎng)，一般都是以月為單位，往往從需求提出到上線，最佳時(shí)機(jī)已經(jīng)錯(cuò)過(guò)。

技術(shù)實(shí)現(xiàn)要素：

一方面，本發(fā)明實(shí)施例提供了一種編輯網(wǎng)頁(yè)的方法，該方法包括：頁(yè)面編輯系統(tǒng)獲取要編輯的頁(yè)面，并從所述頁(yè)面中拆解出頁(yè)面組件。其中，頁(yè)面組件中包括界面數(shù)據(jù)對(duì)象、數(shù)據(jù)服務(wù)以及配置，所述配置用于配置所述界面數(shù)據(jù)對(duì)象和所述數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系。頁(yè)面編輯系統(tǒng)可以根據(jù)用戶(界面修改人員)的選擇指令選定需要編輯的頁(yè)面組件。當(dāng)頁(yè)面組件庫(kù)中存在可直接替換所述要編輯的頁(yè)面組件的目標(biāo)頁(yè)面組件時(shí)，頁(yè)面編輯系統(tǒng)可以直接將所述目標(biāo)頁(yè)面組件替換所述需要修改的頁(yè)面組件。頁(yè)面編輯系統(tǒng)也可以對(duì)所述需要編輯的頁(yè)面組件進(jìn)行編輯，所述編輯包括：從數(shù)據(jù)服務(wù)庫(kù)中選擇目標(biāo)數(shù)據(jù)服務(wù)來(lái)替換所述需要編輯的頁(yè)面組件中的數(shù)據(jù)服務(wù)，并將所述的界面數(shù)據(jù)對(duì)象和所述數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系修改成所述的界面數(shù)據(jù)對(duì)象和所述目標(biāo)數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系。

上述方法，通過(guò)在頁(yè)面組件中包括數(shù)據(jù)服務(wù)和配置，從而可以通過(guò)配置的方式來(lái)進(jìn)行頁(yè)面的修改，將現(xiàn)有技術(shù)中的需要硬代碼寫(xiě)js代碼部分的工作完全變成了配置，大大縮短交付時(shí)間。

在一種可能的設(shè)計(jì)中，頁(yè)面組件還進(jìn)一步包括界面顯示模板，界面的層疊樣式css，所述界面顯示模板和所述css決定所述界面該如何顯示。其中，對(duì)所述需要編輯的頁(yè)面組件進(jìn)行編輯還包括修改所述頁(yè)面組件的界面顯示模板，和/或，界面的層疊樣式。

在一種可能的設(shè)計(jì)中，頁(yè)面組件還可以進(jìn)一步包括js動(dòng)態(tài)事件，所述js動(dòng)態(tài)事件用于處理來(lái)自所述頁(yè)面組件上面的不同按鈕，從而動(dòng)態(tài)調(diào)用所述按鈕對(duì)應(yīng)的數(shù)據(jù)服務(wù)。

在一種可能的設(shè)計(jì)中，所述數(shù)據(jù)服務(wù)是通過(guò)服務(wù)注冊(cè)管理系統(tǒng)注冊(cè)到所述數(shù)據(jù)服務(wù)庫(kù)中。通過(guò)注冊(cè)數(shù)據(jù)服務(wù)的方式，將后臺(tái)數(shù)據(jù)對(duì)象通過(guò)可配置的數(shù)據(jù)服務(wù)來(lái)提供，解決了對(duì)后臺(tái)數(shù)據(jù)信息模型的封裝問(wèn)題，通過(guò)數(shù)據(jù)服務(wù)的封裝，完全屏蔽了后臺(tái)數(shù)據(jù)信息的具體格式信息；通過(guò)數(shù)據(jù)服務(wù)這種形式提供后臺(tái)數(shù)據(jù)，同樣也解決了不同系統(tǒng)間的數(shù)據(jù)提供問(wèn)題。

在一種可能的設(shè)計(jì)中，所述頁(yè)面組件是通過(guò)頁(yè)面組件注冊(cè)管理系統(tǒng)注冊(cè)到頁(yè)面組件庫(kù)中的。頁(yè)面組件庫(kù)中注冊(cè)的頁(yè)面組件可以直接對(duì)頁(yè)面中的頁(yè)面組件進(jìn)行替換，提高了修改頁(yè)面的效率。

在一種可能的設(shè)計(jì)中，所述數(shù)據(jù)服務(wù)用于獲取與其對(duì)應(yīng)的后臺(tái)數(shù)據(jù)，所述后臺(tái)數(shù)據(jù)被格式化后作為所述數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)；通過(guò)所述配置中的映射關(guān)系，所述數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)被設(shè)置到所述界面數(shù)據(jù)對(duì)象上通過(guò)頁(yè)面顯示給用戶。將后臺(tái)數(shù)據(jù)對(duì)象通過(guò)可配置的數(shù)據(jù)服務(wù)來(lái)提供，解決了對(duì)后臺(tái)數(shù)據(jù)信息模型的封裝問(wèn)題，通過(guò)數(shù)據(jù)服務(wù)的封裝，完全屏蔽了后臺(tái)數(shù)據(jù)信息的具體格式信息；通過(guò)數(shù)據(jù)服務(wù)這種形式提供后臺(tái)數(shù)據(jù)，同樣也解決了不同系統(tǒng)間的數(shù)據(jù)提供問(wèn)題。

在一種可能的設(shè)計(jì)中，所述的頁(yè)面編輯系統(tǒng)還可以進(jìn)一步對(duì)所修改的頁(yè)面或者頁(yè)面組件進(jìn)行測(cè)試，并反饋測(cè)試結(jié)果。頁(yè)面編輯系統(tǒng)可以確定測(cè)試成功后將所述修改的頁(yè)面(包括頁(yè)面的修改和/或頁(yè)面組件的修改)部署到生產(chǎn)系統(tǒng)頁(yè)面站點(diǎn)。

又一方面，本發(fā)明實(shí)施例提供了一種編輯頁(yè)面的系統(tǒng)，該系統(tǒng)具有實(shí)現(xiàn)上述方法實(shí)施例中頁(yè)面編輯系統(tǒng)行為的功能。所述功能可以通過(guò)硬件實(shí)現(xiàn)，也可以通過(guò)硬件執(zhí)行相應(yīng)的軟件實(shí)現(xiàn)。所述硬件或軟件包括一個(gè)或多個(gè)與上述功能相對(duì)應(yīng)的部件(比如，頁(yè)面管理子系統(tǒng)和頁(yè)面編輯子系統(tǒng))。

可選的所述的頁(yè)面編輯系統(tǒng)還可以進(jìn)一步包括頁(yè)面模擬測(cè)試子系統(tǒng)，用于對(duì)所修改的頁(yè)面或者頁(yè)面組件進(jìn)行測(cè)試，并反饋測(cè)試結(jié)果。所述的頁(yè)面模擬測(cè)試子系統(tǒng)可以確定測(cè)試成功后將所述修改的頁(yè)面(包括頁(yè)面的修改和/或頁(yè)面組件的修改)部署到生產(chǎn)系統(tǒng)頁(yè)面站點(diǎn)。

在一種可能的設(shè)計(jì)中，頁(yè)面編輯系統(tǒng)(包括頁(yè)面管理子系統(tǒng)和頁(yè)面編輯子系統(tǒng))的硬件結(jié)構(gòu)中包括處理器和存儲(chǔ)器，所述存儲(chǔ)器用于存儲(chǔ)支持該系統(tǒng)執(zhí)行上述方法的應(yīng)用程序代碼，所述處理器被配置為用于執(zhí)行所述存儲(chǔ)器中存儲(chǔ)的應(yīng)用程序。所述頁(yè)面編輯系統(tǒng)還可以包括網(wǎng)絡(luò)接口，用于頁(yè)面編輯系統(tǒng)與其他設(shè)備或通信網(wǎng)絡(luò)通信。

再一方面，本發(fā)明實(shí)施例提供了一種計(jì)算機(jī)存儲(chǔ)介質(zhì)，用于儲(chǔ)存為上述頁(yè)面編輯系統(tǒng)所用的計(jì)算機(jī)軟件指令，其包含用于執(zhí)行上述方面為頁(yè)面編輯系統(tǒng)所設(shè)計(jì)的程序。

本發(fā)明實(shí)施例通過(guò)將頁(yè)面組件設(shè)計(jì)成包括數(shù)據(jù)服務(wù)和配置的方式，從而可以通過(guò)配置的方式來(lái)進(jìn)行頁(yè)面的修改，將現(xiàn)有技術(shù)中的需要硬代碼寫(xiě)js代碼部分的工作完全變成了配置，大大縮短交付時(shí)間。

附圖說(shuō)明

圖1為本發(fā)明實(shí)施例提供的一種頁(yè)面編輯系統(tǒng)架構(gòu)圖；

圖2為本發(fā)明實(shí)施例提供的一種頁(yè)面編輯系統(tǒng)中的頁(yè)面在線編輯子系統(tǒng)的示意圖；

圖3為本發(fā)明實(shí)施例提供的一種頁(yè)面組件組成以及動(dòng)態(tài)綁定框架的示意圖。

圖4為本發(fā)明實(shí)施例提供的一種在線頁(yè)面編輯方法的流程圖；

圖5為本發(fā)明實(shí)施例提供的一種直接修改頁(yè)面的頁(yè)面編輯方法的流程圖；

圖6為本發(fā)明實(shí)施例提供的一種替換頁(yè)面組件的頁(yè)面編輯方法的流程圖。

圖7為本發(fā)明實(shí)施例提供的另一種頁(yè)面編輯系統(tǒng)結(jié)構(gòu)圖。

具體實(shí)施方式

為了使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖對(duì)本發(fā)明作進(jìn)一步地詳細(xì)描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。基于本發(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其它實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

本發(fā)明實(shí)施例描述的網(wǎng)絡(luò)架構(gòu)以及業(yè)務(wù)場(chǎng)景是為了更加清楚的說(shuō)明本發(fā)明實(shí)施例的技術(shù)方案，并不構(gòu)成對(duì)于本發(fā)明實(shí)施例提供的技術(shù)方案的限定，本領(lǐng)域普通技術(shù)人員可知，隨著網(wǎng)絡(luò)架構(gòu)的演變和新業(yè)務(wù)場(chǎng)景的出現(xiàn)，本發(fā)明實(shí)施例提供的技術(shù)方案對(duì)于類(lèi)似的技術(shù)問(wèn)題，同樣適用。

參見(jiàn)圖1為本發(fā)明實(shí)施例提供的一種編輯頁(yè)面的頁(yè)面編輯系統(tǒng)的架構(gòu)圖，該系統(tǒng)包括以下部件或子系統(tǒng)：

服務(wù)注冊(cè)管理子系統(tǒng)101：該系統(tǒng)負(fù)責(zé)對(duì)數(shù)據(jù)服務(wù)的統(tǒng)一管理。數(shù)據(jù)服務(wù)以應(yīng)用接口(applicationinterface,api)的形式承載。運(yùn)營(yíng)商數(shù)字資產(chǎn)管理員負(fù)責(zé)將頁(yè)面編輯系統(tǒng)支持的數(shù)據(jù)服務(wù)注冊(cè)到服務(wù)注冊(cè)管理子系統(tǒng)101形成數(shù)據(jù)服務(wù)庫(kù)。服務(wù)注冊(cè)管理系統(tǒng)101提供對(duì)數(shù)據(jù)服務(wù)的基本信息和元數(shù)據(jù)進(jìn)行管理。

頁(yè)面組件注冊(cè)管理子系統(tǒng)102：該系統(tǒng)負(fù)責(zé)對(duì)頁(yè)面組件的統(tǒng)一管理。運(yùn)營(yíng)商數(shù)字資產(chǎn)管理員負(fù)責(zé)將頁(yè)面編輯系統(tǒng)支持的頁(yè)面組件注冊(cè)到頁(yè)面組件注冊(cè)管理子系統(tǒng)102形成頁(yè)面組件庫(kù)。頁(yè)面組件注冊(cè)管理子系統(tǒng)102提供對(duì)頁(yè)面組件的基本信息和元數(shù)據(jù)進(jìn)行管理。

頁(yè)面管理子系統(tǒng)103：該系統(tǒng)負(fù)責(zé)對(duì)頁(yè)面的統(tǒng)一管理。頁(yè)面管理子系統(tǒng)102提供對(duì)頁(yè)面的管理，可以從網(wǎng)站抓取頁(yè)面，將頁(yè)面分解為一個(gè)個(gè)頁(yè)面組件。頁(yè)面管理子系統(tǒng)102也可以將屬于一個(gè)頁(yè)面的頁(yè)面組件組裝成頁(yè)面。

頁(yè)面在線編輯子系統(tǒng)104：該系統(tǒng)負(fù)責(zé)對(duì)頁(yè)面中的頁(yè)面組件進(jìn)行替換或編輯。其中，對(duì)頁(yè)面組件的編輯可包括：選擇目標(biāo)數(shù)據(jù)服務(wù)來(lái)替換所述需要編輯的頁(yè)面組件中的數(shù)據(jù)服務(wù)，并在所述配置中將所述的界面數(shù)據(jù)對(duì)象和所述數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系修改成所述的界面數(shù)據(jù)對(duì)象和所述目標(biāo)數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系。

頁(yè)面模擬測(cè)試子系統(tǒng)105：該系統(tǒng)負(fù)責(zé)對(duì)修改后的頁(yè)面進(jìn)行顯示。具體實(shí)施例中該頁(yè)面模擬測(cè)試系統(tǒng)105可以是一個(gè)webserver，也可以與所述的頁(yè)面管理子系統(tǒng)103和頁(yè)面在線編輯子系統(tǒng)104部署在同一物理機(jī)器上。

需要說(shuō)明的是，圖1中所示的頁(yè)面管理子系統(tǒng)103和頁(yè)面在線編輯子系統(tǒng)104可能位于同一物理計(jì)算機(jī)或服務(wù)器上。

以下結(jié)合具體實(shí)施例對(duì)上述頁(yè)面在線編輯子系統(tǒng)進(jìn)行詳細(xì)說(shuō)明，如圖2所示，所述的頁(yè)面在線編輯子系統(tǒng)包括頁(yè)面對(duì)象管理器201、頁(yè)面編輯器202及編輯元素庫(kù)203。

頁(yè)面對(duì)象管理器201提供某業(yè)務(wù)站點(diǎn)的各頁(yè)面列表，并將各頁(yè)面中的頁(yè)面組件以樹(shù)形結(jié)構(gòu)或其它結(jié)構(gòu)顯示出來(lái)。一個(gè)頁(yè)面可以由多個(gè)顯示單元組成，每個(gè)顯示單元關(guān)聯(lián)上一個(gè)頁(yè)面組件，因此，一個(gè)頁(yè)面組件可以看成是某個(gè)頁(yè)面中的某個(gè)顯示單元的體現(xiàn)。用戶可以在頁(yè)面組件列中選擇需要編輯的頁(yè)面組件。

如圖2所示，其中示例的頁(yè)面對(duì)象管理器201中顯示了各頁(yè)面中的其中一個(gè)頁(yè)面名稱(chēng)為myprofile的頁(yè)面，以及該頁(yè)面myprofile所包括的頁(yè)面組件，其包括基本信息，賬戶信息，訂單信息以及網(wǎng)站排行榜信息等頁(yè)面組件，以及各頁(yè)面組件所包括的頁(yè)面組件組成元素，例如基本信息頁(yè)面組件下包括css/template、文檔對(duì)象模型(documentobjectmodel，dom)、用于獲取客戶基本信息的數(shù)據(jù)服務(wù)dataservice、配置(configuration)、js動(dòng)態(tài)事件(jsevent)。各頁(yè)面組件是可編輯對(duì)象。其中界面css/template主要指的是界面顯示模板以及界面的層疊樣式(cascadingstylesheets，css)，主要用于確定界面如何顯示。文檔對(duì)象模型dom指的是界面模型，是界面顯示的數(shù)據(jù)對(duì)象。數(shù)據(jù)服務(wù)主要用于獲取后臺(tái)數(shù)據(jù)。數(shù)據(jù)服務(wù)都是以restful的形式提供，輸出數(shù)據(jù)格式為json格式。配置主要用于配置dom中的界面數(shù)據(jù)對(duì)象和數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系。js動(dòng)態(tài)事件用于處理來(lái)自頁(yè)面組件上面的不同按鈕，從而動(dòng)態(tài)調(diào)用所述按鈕對(duì)應(yīng)的數(shù)據(jù)服務(wù)。關(guān)于頁(yè)面組件中的怎么通過(guò)配置來(lái)實(shí)現(xiàn)界面數(shù)據(jù)對(duì)象和數(shù)據(jù)服務(wù)的映射綁定可參見(jiàn)下面圖3部分的介紹。

編輯元素庫(kù)203提供頁(yè)面組件庫(kù)列表信息和數(shù)據(jù)服務(wù)庫(kù)列表信息，這兩個(gè)庫(kù)的信息分別來(lái)自頁(yè)面組件注冊(cè)管理系統(tǒng)和服務(wù)注冊(cè)管理系統(tǒng)。每個(gè)頁(yè)面組件包含的信息和在線編輯頁(yè)面 對(duì)象中的頁(yè)面組件包含的信息是一樣的；每個(gè)數(shù)據(jù)服務(wù)包含數(shù)據(jù)服務(wù)的名稱(chēng)和數(shù)據(jù)服務(wù)的定義，這個(gè)定義信息主要包括數(shù)據(jù)服務(wù)的輸入數(shù)據(jù)對(duì)象定義和輸出數(shù)據(jù)對(duì)象定義。

頁(yè)面編輯器202提供對(duì)頁(yè)面對(duì)象的編輯功能，可以直接針對(duì)頁(yè)面進(jìn)行編輯，也可以針對(duì)頁(yè)面中某個(gè)頁(yè)面組件進(jìn)行編輯。針對(duì)頁(yè)面做編輯時(shí)，可以把頁(yè)面中某個(gè)頁(yè)面組件替換為頁(yè)面組件庫(kù)中的任何一個(gè)頁(yè)面組件；針對(duì)某個(gè)頁(yè)面組件進(jìn)行編輯時(shí)，可以編輯頁(yè)面組件中的css/template，dom，dataservice，配置和jsevent，編輯后保存為一個(gè)新的頁(yè)面組件。

以下實(shí)施例是關(guān)于如何將頁(yè)面組件中的界面數(shù)據(jù)對(duì)象與數(shù)據(jù)服務(wù)進(jìn)行動(dòng)態(tài)綁定，具體參考圖3，一個(gè)具體的實(shí)施例中可以將頁(yè)面組件做如下方式的設(shè)計(jì)：

界面view(即界面視圖)，具體可以包括界面的顯示模板(template/html)，css文件定義等，界面view決定了界面該如何顯示。

界面model(即界面模型，如，dom)，界面顯示的界面數(shù)據(jù)對(duì)象，是界面顯示的一系列屬性定義，這個(gè)屬性定義與界面view的顯示格式綁定。一般系統(tǒng)會(huì)預(yù)置界面顯示模板和對(duì)應(yīng)的dom格式。

數(shù)據(jù)model(即數(shù)據(jù)模型)，采用javascript對(duì)象表示法(javascriptobjectnotation，json)格式的動(dòng)態(tài)數(shù)據(jù)，該數(shù)據(jù)通過(guò)數(shù)據(jù)服務(wù)得到。

動(dòng)態(tài)綁定框架dynamicbindingframe(dbf)，是使用js實(shí)現(xiàn)的一段框架代碼，該框架代碼中實(shí)現(xiàn)兩個(gè)功能，功能之一是調(diào)用一個(gè)數(shù)據(jù)服務(wù)接口api，restfulservice，如，圖3右側(cè)dbf中的call(xxrestfulservice)，得到后臺(tái)數(shù)據(jù)對(duì)象(即，數(shù)據(jù)服務(wù)的輸出數(shù)據(jù))，該輸出數(shù)據(jù)可以是一個(gè)后臺(tái)數(shù)據(jù)對(duì)象的輸入?yún)?shù)和輸出參數(shù)，這些參數(shù)都以json的格式承載。功能之二是將這些對(duì)象進(jìn)行格式化處理，將這些對(duì)象變成界面數(shù)據(jù)對(duì)象和后臺(tái)數(shù)據(jù)對(duì)象映射時(shí)可以識(shí)別的對(duì)象，同時(shí)實(shí)現(xiàn)界面數(shù)據(jù)對(duì)象和后臺(tái)數(shù)據(jù)對(duì)象的映射。

圖2所示的頁(yè)面組件中的數(shù)據(jù)服務(wù)和配置都通過(guò)該動(dòng)態(tài)綁定框架來(lái)實(shí)現(xiàn)。具體實(shí)施方式中，在動(dòng)態(tài)綁定框架中的第一個(gè)功能可以采用一種標(biāo)準(zhǔn)的寫(xiě)法(按預(yù)先設(shè)計(jì)好的格式的一段js代碼)，在后臺(tái)服務(wù)器(webserver)提供一個(gè)配置，這個(gè)配置用來(lái)配置某個(gè)頁(yè)面組件的界面數(shù)據(jù)對(duì)象對(duì)應(yīng)的數(shù)據(jù)服務(wù)，通過(guò)頁(yè)面在線編輯子系統(tǒng)來(lái)修改這個(gè)配置，修改成功后，自動(dòng)替換動(dòng)態(tài)綁定框架中的標(biāo)準(zhǔn)js代碼。在后臺(tái)服務(wù)器提供另外一個(gè)配置，這個(gè)配置用來(lái)配置某個(gè)頁(yè)面組件的界面數(shù)據(jù)對(duì)象和后臺(tái)數(shù)據(jù)對(duì)象的映射關(guān)系，通過(guò)頁(yè)面在線編輯子系統(tǒng)來(lái)修改這個(gè)配置，修改成功后，自動(dòng)提供動(dòng)態(tài)綁定框架中的對(duì)象格式化代碼。

通過(guò)上述機(jī)制，將現(xiàn)有技術(shù)中的需要硬代碼寫(xiě)js代碼部分的工作完全變成了配置，從而可以在生產(chǎn)系統(tǒng)上直接進(jìn)行，不需要任何的調(diào)試或者測(cè)試，直接修改配置就可以看到修改效果，大大縮短交付時(shí)間；另外通過(guò)將后臺(tái)數(shù)據(jù)對(duì)象通過(guò)可配置的數(shù)據(jù)服務(wù)來(lái)提供，解決了對(duì)后臺(tái)數(shù)據(jù)信息模型的封裝問(wèn)題，通過(guò)數(shù)據(jù)服務(wù)的封裝，完全屏蔽了后臺(tái)數(shù)據(jù)對(duì)象的具體格式 信息；通過(guò)數(shù)據(jù)服務(wù)這種形式提供后臺(tái)數(shù)據(jù)，同樣也解決了不同系統(tǒng)間的數(shù)據(jù)提供問(wèn)題。

此外，在本分明的另一個(gè)實(shí)施例中，在dbf的框架代碼中，提供了對(duì)js動(dòng)態(tài)事件的處理功能，js動(dòng)態(tài)事件的目的是處理來(lái)自頁(yè)面組件上面的不同按鈕，比如是查詢按鈕或者修改按鈕，通過(guò)不同的按鈕觸發(fā)的事件，來(lái)動(dòng)態(tài)的調(diào)用后臺(tái)不同的數(shù)據(jù)服務(wù)，比如查詢只調(diào)用查詢的數(shù)據(jù)服務(wù)，修改時(shí)只調(diào)用修改的數(shù)據(jù)服務(wù)。

以下是本發(fā)明提供的一種進(jìn)行在線頁(yè)面編輯的方法，如圖4所示，本實(shí)施例中的方法具體包括如下步驟：

步驟401、數(shù)據(jù)服務(wù)的注冊(cè)以及數(shù)據(jù)服務(wù)庫(kù)的維護(hù)和更新。

具體實(shí)施方式中，運(yùn)營(yíng)商的數(shù)字資產(chǎn)管理員會(huì)將本系統(tǒng)所支持的數(shù)據(jù)服務(wù)通過(guò)“服務(wù)注冊(cè)管理子系統(tǒng)”注冊(cè)到數(shù)據(jù)服務(wù)庫(kù)中去。這個(gè)過(guò)程是一個(gè)持續(xù)的過(guò)程，只要有新的數(shù)據(jù)服務(wù)，都可以通過(guò)“服務(wù)注冊(cè)管理子系統(tǒng)”進(jìn)行注冊(cè)，更新數(shù)據(jù)服務(wù)庫(kù)。

步驟402、頁(yè)面組件的注冊(cè)以及頁(yè)面組件庫(kù)的維護(hù)和更新。

具體實(shí)施方式中，運(yùn)營(yíng)商的數(shù)字資產(chǎn)管理員會(huì)將本系統(tǒng)支持的所有頁(yè)面組件注冊(cè)到“頁(yè)面組件注冊(cè)管理子系統(tǒng)”中。與上述數(shù)據(jù)服務(wù)的注冊(cè)一樣，頁(yè)面組件的注冊(cè)和頁(yè)面組件庫(kù)的維護(hù)和更新也是一個(gè)持續(xù)的過(guò)程，只要有新的頁(yè)面組件，都可以通過(guò)“頁(yè)面組件注冊(cè)管理子系統(tǒng)”進(jìn)行注冊(cè)，從而更新頁(yè)面組件庫(kù)。

步驟403、獲取頁(yè)面修改請(qǐng)求。

具體實(shí)施方式中，頁(yè)面管理子系統(tǒng)獲取用戶發(fā)起的頁(yè)面修改請(qǐng)求，該頁(yè)面修改請(qǐng)求攜帶有需要修改頁(yè)面的頁(yè)面站點(diǎn)信息(例如網(wǎng)站名稱(chēng)或者網(wǎng)址地址)和頁(yè)面標(biāo)識(shí)(例如頁(yè)面名稱(chēng))。例如，某個(gè)基于網(wǎng)站的生產(chǎn)系統(tǒng)上線后，在生產(chǎn)系統(tǒng)的運(yùn)行過(guò)程中，運(yùn)營(yíng)商發(fā)現(xiàn)某個(gè)站點(diǎn)的某個(gè)頁(yè)面需要修改，運(yùn)營(yíng)商通過(guò)與頁(yè)面管理子系統(tǒng)連接的其它系統(tǒng)向頁(yè)面管理子系統(tǒng)發(fā)起頁(yè)面修改請(qǐng)求，指示需要修改那個(gè)頁(yè)面。

步驟404、獲取要修改的頁(yè)面，對(duì)需要修改的頁(yè)面進(jìn)行拆解獲得頁(yè)面組件。

頁(yè)面管理子系統(tǒng)利用該頁(yè)面管理子系統(tǒng)的網(wǎng)頁(yè)抓取能力，根據(jù)所述的頁(yè)面站點(diǎn)信息和頁(yè)面名稱(chēng)將生產(chǎn)系統(tǒng)的對(duì)應(yīng)網(wǎng)站的頁(yè)面站點(diǎn)的頁(yè)面信息抓取到頁(yè)面管理子系統(tǒng)。

具體實(shí)施方式中，頁(yè)面管理子系統(tǒng)得到生產(chǎn)系統(tǒng)的網(wǎng)站頁(yè)面后，自動(dòng)將這些頁(yè)面組織好，并把頁(yè)面中的頁(yè)面組件分解出來(lái)；具體的拆解方式根據(jù)各頁(yè)面具體情況，例如頁(yè)面所包括的顯示單元，拆解成相應(yīng)的頁(yè)面組件，例如包括前述的界面的css/template，界面數(shù)據(jù)對(duì)象dom，數(shù)據(jù)服務(wù)(dataservice)，配置(configuration)和js動(dòng)態(tài)事件(jsevent)；需要說(shuō)明的是，有些頁(yè)面可能包括除這些之外的其他頁(yè)面組件。

步驟405、對(duì)需要修改的頁(yè)面進(jìn)行頁(yè)面修改。

具體實(shí)施方式中，頁(yè)面在線編輯子系統(tǒng)從頁(yè)面管理子系統(tǒng)獲取需要修改的頁(yè)面，進(jìn)行頁(yè) 面的修改，具體修改步驟參見(jiàn)下面針對(duì)圖5和圖6的詳細(xì)說(shuō)明。

步驟406、保存修改的頁(yè)面，并對(duì)修改的頁(yè)面進(jìn)行測(cè)試。

具體實(shí)施方式中，頁(yè)面修改完畢后進(jìn)行修改頁(yè)面的保存，在頁(yè)面修改成功后保存后，把將修改的頁(yè)面它推送到頁(yè)面模擬測(cè)試子系統(tǒng)。界面修改人員在瀏覽器中輸入該頁(yè)面的地址，可以直接查看修改效果。本領(lǐng)域技術(shù)人員可以采用現(xiàn)有技術(shù)中的測(cè)試方式，本發(fā)明不予以限制，也不再贅述。

步驟407、將修改后的頁(yè)面部署到生產(chǎn)系統(tǒng)頁(yè)面站點(diǎn)。

具體實(shí)施方式中，所述修改的頁(yè)面在模擬測(cè)試通過(guò)后，可以直接將所修改頁(yè)面部署到生產(chǎn)系統(tǒng)站點(diǎn)，最終用戶就可以直接看到修改后的結(jié)果。具體部署方式可以采用現(xiàn)有的方式進(jìn)行部署，此處不再贅述。

下面結(jié)合圖5和圖6分別就步驟405進(jìn)行詳細(xì)說(shuō)明，圖5和圖6是本分明提供的進(jìn)行頁(yè)面的修改的兩種實(shí)施例場(chǎng)景，圖5所示的場(chǎng)景一為直接修改頁(yè)面；圖6所示的場(chǎng)景二為修改頁(yè)面中的頁(yè)面組件。

如圖5所示，場(chǎng)景一中的直接修改頁(yè)面操作具體可以包括如下步驟：

步驟1、頁(yè)面在線編輯子系統(tǒng)從頁(yè)面管理子系統(tǒng)獲取需要修改的頁(yè)面，在頁(yè)面在線編輯子系統(tǒng)的頁(yè)面對(duì)象管理器中顯示各頁(yè)面的頁(yè)面組件組成樹(shù)以及各頁(yè)面組件的組成樹(shù)，在頁(yè)面編輯器中顯示所述需要編輯的頁(yè)面以及該頁(yè)面的頁(yè)面組件，在所述編輯元素庫(kù)中顯示頁(yè)面組件庫(kù)列表和數(shù)據(jù)服務(wù)庫(kù)列表。

如圖5所示，頁(yè)面在線編輯子系統(tǒng)左側(cè)的在頁(yè)面對(duì)象管理器中顯示了各頁(yè)面的頁(yè)面站點(diǎn)信息，各頁(yè)面頁(yè)面名稱(chēng)(例如myprofile)，各頁(yè)面所包括的頁(yè)面組件，例如以頁(yè)面myprofile為例，其包括基本信息，賬戶信息，訂單信息以及網(wǎng)站排行榜信息等頁(yè)面組件，以及各頁(yè)面組件所包括的頁(yè)面組件組成元素，例如基本信息頁(yè)面組件下包括css/template、dom、dataservice:客戶基本信息、configuration(配置)、jsevent。頁(yè)面在線編輯子系統(tǒng)中間的頁(yè)面編輯器中顯示包括各頁(yè)面組件組成的需要編輯的頁(yè)面myprofile，即包括基本信息組件，賬戶信息組件，訂單信息組件以及網(wǎng)站排行榜組件的頁(yè)面myprofile。頁(yè)面在線編輯子系統(tǒng)右側(cè)的編輯元素庫(kù)中顯示頁(yè)面組件庫(kù)列表以及數(shù)據(jù)服務(wù)庫(kù)列表，其中所述頁(yè)面組件庫(kù)列表中顯示由所述服務(wù)注冊(cè)管理子系統(tǒng)提供的所有注冊(cè)的頁(yè)面組件，數(shù)據(jù)服務(wù)庫(kù)列表中顯示服務(wù)注冊(cè)管理子系統(tǒng)提供的所有注冊(cè)的數(shù)據(jù)服務(wù)。

具體實(shí)施方式中，頁(yè)面對(duì)象管理器根據(jù)用戶(界面修改人員)的操作來(lái)選擇要編輯的頁(yè)面。例如，界面修改人員可以在頁(yè)面對(duì)象管理器中執(zhí)行將需要編輯的頁(yè)面myprofile拖入到所述頁(yè)面在線編輯子系統(tǒng)的頁(yè)面編輯器中的操作，頁(yè)面對(duì)象管理器通過(guò)檢測(cè)該拖動(dòng)操作，來(lái)選擇出要編輯的頁(yè)面，將該頁(yè)面信息通知給頁(yè)面編輯器。頁(yè)面編輯器自動(dòng)把頁(yè)面分解為頁(yè)面 組件的顯示。

步驟2、針對(duì)需要編輯的頁(yè)面組件，從頁(yè)面組件庫(kù)中選擇需要替換的目標(biāo)頁(yè)面組件，將目標(biāo)頁(yè)面組件替換原有的頁(yè)面組件。

具體實(shí)施方式中，頁(yè)面編輯器根據(jù)界面修改人員的操作來(lái)選擇替換的目標(biāo)頁(yè)面組件，并對(duì)原有頁(yè)面組件進(jìn)行替換。例如，界面修改人員可以執(zhí)行從頁(yè)面組件庫(kù)中選擇需要替換的目標(biāo)頁(yè)面組件，并拖入到頁(yè)面的需要替換的頁(yè)面組件上的操作，比如把頁(yè)面中中的網(wǎng)站排行榜修改為音樂(lè)排行榜。頁(yè)面編輯器通過(guò)檢測(cè)該操作來(lái)實(shí)現(xiàn)替換。

步驟3、頁(yè)面修改完畢后進(jìn)行保存。

頁(yè)面修改保存后，頁(yè)面對(duì)象管理器中的頁(yè)面就自動(dòng)變成修改后的頁(yè)面。

如圖6所示，場(chǎng)景一中的修改頁(yè)面中的頁(yè)面組件操作具體可以包括如下步驟：

步驟1、頁(yè)面在線編輯子系統(tǒng)從頁(yè)面管理子系統(tǒng)獲取需要修改的頁(yè)面組件，在頁(yè)面在線編輯子系統(tǒng)的頁(yè)面對(duì)象管理器中顯示各頁(yè)面的頁(yè)面組件組成樹(shù)以及各頁(yè)面組件的組成樹(shù)，在頁(yè)面編輯器中顯示所述需要編輯的頁(yè)面組件，在所述在線編輯元素庫(kù)中顯示頁(yè)面組件庫(kù)列表和數(shù)據(jù)服務(wù)庫(kù)列表。

具體實(shí)施方式中，如圖5所示，頁(yè)面在線編輯子系統(tǒng)左側(cè)的在頁(yè)面對(duì)象管理器中顯示了各頁(yè)面的頁(yè)面站點(diǎn)信息，各頁(yè)面頁(yè)面名稱(chēng)(例如myprofile)，各頁(yè)面所包括的頁(yè)面組件，例如以頁(yè)面myprofile為例，其包括基本信息，賬戶信息，訂單信息以及網(wǎng)站排行榜信息等頁(yè)面組件，以及各頁(yè)面組件所包括的頁(yè)面組件組成元素，例如基本信息頁(yè)面組件下包括css/template、dom、dataservice:客戶基本信息、configuration(配置)、jsevent。頁(yè)面在線編輯子系統(tǒng)中間的頁(yè)面編輯器中顯示包括需要編輯的頁(yè)面組件組成，即網(wǎng)站排行榜頁(yè)面組件，并顯示該頁(yè)面組件所包括css/template、截面數(shù)據(jù)對(duì)象dom、dataservice:客戶基本信息、configuration(配置)、jsevent組成部分。頁(yè)面在線編輯子系統(tǒng)右側(cè)的編輯元素庫(kù)中顯示頁(yè)面組件庫(kù)列表以及數(shù)據(jù)服務(wù)庫(kù)列表，其中所述頁(yè)面組件庫(kù)列表中顯示由所述服務(wù)注冊(cè)管理子系統(tǒng)提供的所有注冊(cè)的頁(yè)面組件，數(shù)據(jù)服務(wù)庫(kù)列表中顯示服務(wù)注冊(cè)管理子系統(tǒng)提供的所有注冊(cè)的數(shù)據(jù)服務(wù)。

具體實(shí)施方式中，界面修改人員選擇指定的頁(yè)面，找到需要修改的頁(yè)面組件，比如找到網(wǎng)站排行榜頁(yè)面組件，將該頁(yè)面組件拖入到頁(yè)面編輯器中。頁(yè)面對(duì)象管理器檢測(cè)到界面修改人員的該操作后，選定界面修改人員操作的頁(yè)面組件，將該頁(yè)面組件的信息通知給頁(yè)面編輯器。

步驟2、頁(yè)面編輯器將頁(yè)面組件的信息打開(kāi)，對(duì)打開(kāi)的頁(yè)面組件信息進(jìn)行修改。

具體實(shí)施方式中，頁(yè)面組件的修改包括，例如修改頁(yè)面的顯示樣式與顯示模板，即頁(yè)面組件中的css/template，通過(guò)顯示模板得到界面的dom信息。

本實(shí)施例以修改頁(yè)面組件中的數(shù)據(jù)服務(wù)為例進(jìn)行說(shuō)明。界面修改人員從編輯元素庫(kù)中選擇需要目標(biāo)數(shù)據(jù)服務(wù)，將選中的目標(biāo)數(shù)據(jù)服務(wù)拖動(dòng)到頁(yè)面編輯器，比如選擇數(shù)據(jù)服務(wù)庫(kù)中的音樂(lè)排行榜數(shù)據(jù)服務(wù)替換需要修改頁(yè)面組件下的dataservice中的網(wǎng)站排行榜的數(shù)據(jù)服務(wù)。頁(yè)面編輯器根據(jù)界面修改人員的操作將頁(yè)面組件中的原數(shù)據(jù)服務(wù)替換為目標(biāo)數(shù)據(jù)服務(wù)。

步驟3、修改界面數(shù)據(jù)對(duì)象與數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系。

具體實(shí)施方式中，界面修改人員可修改改頁(yè)面組件的configuration信息，頁(yè)面編輯器可根據(jù)界面修改人員的操作配置數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)和界面數(shù)據(jù)對(duì)象之間的對(duì)應(yīng)關(guān)系。

步驟4、頁(yè)面組件修改完畢后，將頁(yè)面組件作為一個(gè)新的頁(yè)面組件保存下來(lái)，并自動(dòng)注冊(cè)到頁(yè)面注冊(cè)管理系統(tǒng)中。同時(shí)將頁(yè)面中對(duì)應(yīng)的頁(yè)面組件替換為新的頁(yè)面組件。

本發(fā)明實(shí)施例提供的頁(yè)面編輯系統(tǒng)，將現(xiàn)有技術(shù)中的需要硬代碼寫(xiě)js代碼部分的工作完全變成了配置，從而可以在生產(chǎn)系統(tǒng)上直接進(jìn)行，直接修改配置就可以看到修改效果，大大縮短交付時(shí)間；另外通過(guò)將后臺(tái)數(shù)據(jù)對(duì)象通過(guò)可配置的數(shù)據(jù)服務(wù)來(lái)提供，解決了對(duì)后臺(tái)數(shù)據(jù)信息模型的封裝問(wèn)題，通過(guò)數(shù)據(jù)服務(wù)的封裝，完全屏蔽了后臺(tái)數(shù)據(jù)信息的具體格式信息；通過(guò)數(shù)據(jù)服務(wù)這種形式提供后臺(tái)數(shù)據(jù)，同樣也解決了不同系統(tǒng)間的數(shù)據(jù)提供問(wèn)題。

本發(fā)明實(shí)施例中的頁(yè)面管理子系統(tǒng)和頁(yè)面在線編輯子系統(tǒng)可通過(guò)計(jì)算機(jī)設(shè)備來(lái)實(shí)現(xiàn)，兩者可以位于同一物理實(shí)體中，也可以位于不同的物理實(shí)體中。圖7是本發(fā)明一個(gè)實(shí)施例提供頁(yè)面管理子系統(tǒng)和頁(yè)面在線編輯子系統(tǒng)所采用的計(jì)算機(jī)設(shè)備的結(jié)構(gòu)圖，包括至少一個(gè)處理器710(例如cpu)，至少一個(gè)網(wǎng)絡(luò)接口720或者其他通信接口，存儲(chǔ)器730，輸入/輸出接口750和至少一個(gè)通信總線740，用于實(shí)現(xiàn)這些裝置之間的連接通信。處理器710用于執(zhí)行存儲(chǔ)器730中存儲(chǔ)的程序731。存儲(chǔ)器730可能包含高速隨機(jī)存取存儲(chǔ)器(ram：randomaccessmemory)，也可能還包括非不穩(wěn)定的存儲(chǔ)器(non-volatilememory)，例如至少一個(gè)磁盤(pán)存儲(chǔ)器。通過(guò)至少一個(gè)網(wǎng)絡(luò)接口720(可以是有線或者無(wú)線)實(shí)現(xiàn)該數(shù)據(jù)查詢裝置與至少一個(gè)其他網(wǎng)元之間的通信連接，可以使用互聯(lián)網(wǎng)，廣域網(wǎng)，本地網(wǎng)，城域網(wǎng)等。輸入/輸出接口750用于實(shí)現(xiàn)與界面修改人員進(jìn)行交互，比如接收界面修改人員的操作指令，以及將操作結(jié)果呈現(xiàn)給界面修改人員。

網(wǎng)絡(luò)接口720，用于與其他網(wǎng)絡(luò)設(shè)備連接，例如與頁(yè)面組件注冊(cè)管理子系統(tǒng)和/或服務(wù)注冊(cè)管理子系統(tǒng)進(jìn)行連接，從頁(yè)面組件注冊(cè)管理子系統(tǒng)獲取頁(yè)面組件庫(kù)列表信息，從服務(wù)注冊(cè)管理系子統(tǒng)處獲取數(shù)據(jù)服務(wù)庫(kù)列表信息。

處理器710，用于獲取要編輯的頁(yè)面；從所述頁(yè)面中拆解出頁(yè)面組件，所述頁(yè)面組件包括界面數(shù)據(jù)對(duì)象、數(shù)據(jù)服務(wù)以及配置，所述配置用于配置所述界面數(shù)據(jù)對(duì)象和所述數(shù)據(jù)服務(wù)的輸入輸出參數(shù)之間的映射關(guān)系；選擇需要編輯的頁(yè)面組件；對(duì)所述需要編輯的頁(yè)面組件進(jìn)行編輯，所述編輯包括：從數(shù)據(jù)服務(wù)庫(kù)中選擇目標(biāo)數(shù)據(jù)服務(wù)來(lái)替換所述需要編輯的頁(yè)面組件 中的數(shù)據(jù)服務(wù)，并在所述配置中將所述的界面數(shù)據(jù)對(duì)象和所述數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系修改成所述的界面數(shù)據(jù)對(duì)象和所述目標(biāo)數(shù)據(jù)服務(wù)的輸出數(shù)據(jù)之間的映射關(guān)系。

可選的，處理器710，用于當(dāng)頁(yè)面組件庫(kù)中存在可以直接替換所述要編輯的頁(yè)面組件的目標(biāo)頁(yè)面組件時(shí)，直接將所述目標(biāo)頁(yè)面組件替換所述需要修改的頁(yè)面組件。

在本申請(qǐng)所提供的幾個(gè)實(shí)施例中，應(yīng)該理解到，所公開(kāi)的系統(tǒng)和方法，可以通過(guò)其它的方式實(shí)現(xiàn)。例如，以上所描述的裝置實(shí)施例僅僅是示意性的，例如，所述模塊的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，例如多個(gè)模塊或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過(guò)一些接口，裝置或單元的間接耦合或通信連接，可以是電性，機(jī)械或其它的形式。

所述作為分離部件說(shuō)明的模塊可以是或者也可以不是物理上分開(kāi)的，作為模塊顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部單元來(lái)實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本發(fā)明各個(gè)實(shí)施例中的各功能模塊可以集成在一個(gè)處理單元中，也可以是各個(gè)模塊單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上模塊集成在一個(gè)單元中。上述集成的模塊既可以采用硬件的形式實(shí)現(xiàn)，也可以采用硬件加軟件功能單元的形式實(shí)現(xiàn)。

上述以軟件功能單元的形式實(shí)現(xiàn)的集成的單元，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中。上述軟件功能單元存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例所述方法的部分步驟。而前述的存儲(chǔ)介質(zhì)包括：u盤(pán)、移動(dòng)硬盤(pán)、隨機(jī)存取存儲(chǔ)器(英文全稱(chēng)：randomaccessmemory，簡(jiǎn)稱(chēng)：ram)、磁碟或者光盤(pán)等各種可以存儲(chǔ)數(shù)據(jù)的介質(zhì)。