一種頁面設(shè)置方法及裝置的制造方法
【專利摘要】本申請?zhí)峁┝艘环N頁面設(shè)置方法及裝置，包括：設(shè)置區(qū)接收設(shè)置參數(shù)，所述設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的參數(shù)；將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，所述設(shè)置區(qū)和所述展示區(qū)位于同一頁面。采用本申請實(shí)施例所提供的頁面設(shè)置方法和裝置，在進(jìn)行頁面設(shè)置時，設(shè)置區(qū)接收設(shè)置參數(shù)后，將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)，由于設(shè)置區(qū)和展示區(qū)位于同一頁面，使得用戶能夠在對頁面進(jìn)行設(shè)置的同時看到設(shè)置后的效果，不再需要用戶進(jìn)行設(shè)置、點(diǎn)擊預(yù)覽、再設(shè)置、再點(diǎn)擊預(yù)覽這樣的循環(huán)操作，極大地提高了管理效率和用戶體驗(yàn)。
【專利說明】
-種頁面設(shè)置方法及裝置
技術(shù)領(lǐng)域
[0001] 本申請涉及計(jì)算機(jī)技術(shù)領(lǐng)域，尤其涉及一種頁面設(shè)置方法及裝置。
【背景技術(shù)】
[0002] 隨著互聯(lián)網(wǎng)的不斷發(fā)展，當(dāng)今階段互聯(lián)網(wǎng)已呈現(xiàn)全線"無線A化IN"的態(tài)勢，不斷 產(chǎn)生很多基于新型用戶制造內(nèi)容的互聯(lián)網(wǎng)應(yīng)用程序（Web AP巧。送些Web APP的應(yīng)用內(nèi)容 展示通常是由后臺控制設(shè)置的，后臺設(shè)置的每個控件可W在前端顯示頁面格式化展示。
[0003] 當(dāng)需要對Web APP的頁面進(jìn)行設(shè)置時，用戶需要在后臺設(shè)置頁面進(jìn)行設(shè)置，設(shè)置成 功后點(diǎn)擊保存，再打開前端顯示頁面查看設(shè)置后的效果；如果展示效果不符合預(yù)期，則再返 回后臺設(shè)置頁面進(jìn)行重新設(shè)置，設(shè)置成功點(diǎn)擊保存，再打開前端顯示頁面查看設(shè)置后的效 果；通過送樣的循環(huán)往復(fù)，最終實(shí)現(xiàn)滿足預(yù)期效果的頁面設(shè)置。
[0004] 采用現(xiàn)有技術(shù)中的方案，查看設(shè)置后的效果時的操作步驟很繁瑣，極大地影響管 理效率W及用戶體驗(yàn)。

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

[0005] 本申請實(shí)施例提出了一種頁面設(shè)置方法及裝置，W解決現(xiàn)有技術(shù)中在頁面設(shè)置時 查看設(shè)置后的效果的步驟很繁瑣的技術(shù)問題。
[0006] 本申請實(shí)施例提供了一種頁面設(shè)置方法，包括如下步驟：
[0007] 設(shè)置區(qū)接收設(shè)置參數(shù)，所述設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的參數(shù)；
[0008] 將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，所述設(shè)置區(qū)和所述展示區(qū) 位于同一頁面。
[0009] 本申請實(shí)施例提供了一種頁面設(shè)置裝置，包括：
[0010] 接收模塊，用于設(shè)置區(qū)接收設(shè)置參數(shù)，所述設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的 參數(shù)；
[0011] 展示模塊，用于將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，所述設(shè)置區(qū) 和所述展示區(qū)位于同一頁面。
[0012] 有益效果如下：
[0013] 本申請實(shí)施例所提供的頁面設(shè)置方法和裝置，在進(jìn)行頁面設(shè)置時，設(shè)置區(qū)接收設(shè) 置參數(shù)后，將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)，由于設(shè)置區(qū)和展示區(qū)位于同一 頁面，使得用戶能夠在對頁面進(jìn)行設(shè)置的同時看到設(shè)置后的效果，不再需要用戶進(jìn)行設(shè)置、 點(diǎn)擊預(yù)覽、再設(shè)置、再點(diǎn)擊預(yù)覽送樣的循環(huán)操作，極大地提高了管理效率和用戶體驗(yàn)。
【附圖說明】
[0014] 下面將參照附圖描述本申請的具體實(shí)施例，其中：
[0015] 圖1示出了本申請實(shí)施例中頁面設(shè)置方法實(shí)施的流程示意圖；
[0016] 圖2示出了本申請實(shí)施例中頁面布局示意圖；
[0017] 圖3示出了本申請實(shí)施例中一效果示意圖；
[0018] 圖4示出了本申請實(shí)施例中另一效果示意圖；
[0019] 圖5示出了本申請實(shí)施例中頁面設(shè)置裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0020] 為了使本申請的技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，W下結(jié)合附圖對本申請的示例性 實(shí)施例進(jìn)行進(jìn)一步詳細(xì)的說明，顯然，所描述的實(shí)施例僅是本申請的一部分實(shí)施例，而不是 所有實(shí)施例的窮舉。并且在不沖突的情況下，本說明中的實(shí)施例及實(shí)施例中的特征可W互 相結(jié)合。
[0021] 針對現(xiàn)有技術(shù)的不足，本申請實(shí)施例提出了一種頁面設(shè)置方法及裝置，下面進(jìn)行 說明。
[0022] 圖1示出了本申請實(shí)施例中頁面設(shè)置方法實(shí)施的流程示意圖，如圖所示，所述方 法可W包括如下步驟：
[0023] 步驟101、設(shè)置區(qū)接收設(shè)置參數(shù)，該設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的參數(shù)；
[0024] 步驟102、將經(jīng)設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，設(shè)置區(qū)和展示區(qū)位于 同一頁面。
[00巧]本申請實(shí)施例中可W利用級聯(lián)樣式表（CSS，Cascading 5切10 Sheets)將頁面制 作成兩列CSS模版布局，一邊是設(shè)置區(qū)、一邊是展示區(qū)。
[0026] 其中，設(shè)置區(qū)可W通過輸入框、單選按鈕、下拉菜單等表單控件接收設(shè)置參數(shù)。待 設(shè)置頁面可W為任意前端顯示頁面，或者稱線上頁面。
[0027] W手機(jī)淘寶APP為例，現(xiàn)有技術(shù)中各個商家在進(jìn)行店鋪頁面設(shè)置時，需要在PC端 打開手機(jī)淘寶APP進(jìn)行店鋪設(shè)置，然后再打開手機(jī)端的手機(jī)淘寶APP查看設(shè)置后的效果，女口 果設(shè)置后的效果不符合要求，則再進(jìn)行PC端設(shè)置、手機(jī)端查看設(shè)置后的效果，循環(huán)操作直 至店鋪頁面符合預(yù)期效果。很顯然，送樣的操作方式比較繁瑣。
[0028] 而本申請實(shí)施例所提供的技術(shù)方案，在手機(jī)淘寶APP中的同一頁面內(nèi)既包括設(shè)置 區(qū)、又包括展示區(qū)，通過設(shè)置區(qū)接收設(shè)置參數(shù)，并將經(jīng)設(shè)置參數(shù)設(shè)置后的頁面展示在展示 區(qū)，從而實(shí)現(xiàn)商家設(shè)置店鋪的同時，預(yù)覽設(shè)置完成后的線上效果。
[0029] W待設(shè)置頁面為普通消費(fèi)者手機(jī)端的APP頁面為例，商家可W在本申請實(shí)施例頁 面的設(shè)置區(qū)輸入設(shè)置參數(shù)，右側(cè)展示區(qū)即可看到預(yù)覽效果，待商家確定設(shè)置完成并保存后， 在普通消費(fèi)者手機(jī)端的APP頁面即可呈現(xiàn)設(shè)置后的頁面。
[0030] 下面W設(shè)置區(qū)為表單設(shè)置、展示區(qū)為手機(jī)端預(yù)覽為例進(jìn)行說明。
[0031] 圖2示出了本申請實(shí)施例中頁面布局示意圖，如圖所示，左側(cè)是表單設(shè)置區(qū)、右側(cè) 是手機(jī)模型預(yù)覽區(qū)。
[0032] 本申請實(shí)施例中可W將左側(cè)和右側(cè)送一整體組件作為獨(dú)立的Web APP，擁有自己 完整的上下文作用域骨架，商家可W通過該Web APP實(shí)現(xiàn)對店鋪進(jìn)行設(shè)置的同時預(yù)覽設(shè)置 后的效果。
[0033] 兩側(cè)視圖由控制器管理交互邏輯：
[0034]
[00巧]上述代碼，通過ng-app指令給應(yīng)用程序指定名稱為mobileManager，通過ng-app 指令給控制器指定名稱為mainArea，然后再用class屬性分別標(biāo)識左側(cè)表單設(shè)置視圖和右 側(cè)手機(jī)模型預(yù)覽視圖。
[0036] 本申請實(shí)施例解決了現(xiàn)有技術(shù)中后臺設(shè)置頁面與前端顯示頁面的隔離問題，通過 將頁面設(shè)置成兩個區(qū)域，一個區(qū)域?yàn)樵O(shè)置區(qū)、另一個區(qū)域?yàn)檎故緟^(qū)，兩側(cè)實(shí)時同步，用戶可 W在進(jìn)行頁面設(shè)置時，即可觀察自己的設(shè)置在前端的展示是否符合預(yù)期，方便用戶及時調(diào) 整頁面設(shè)置。
[0037] 現(xiàn)有技術(shù)中，為實(shí)現(xiàn)后臺設(shè)置頁面與前端顯示頁面的同步，一般是通過腳本監(jiān)聽 后臺設(shè)置頁面每一個控件的變化，然后點(diǎn)對點(diǎn)的修改前端顯示頁面的文檔對象模型值0M， Document化ject Model),送種方式性能較低；而通過Flash技術(shù)來實(shí)現(xiàn)設(shè)置頁面和顯示頁 面同步，由于Flash開發(fā)需要高度專業(yè)技能等原因，每次開發(fā)的成本比較高。
[0038] 針對上述不足，本申請實(shí)施例還可W采用如下方式實(shí)施。
[0039] 實(shí)施中，在設(shè)置區(qū)接收設(shè)置參數(shù)之前，頁面設(shè)置方法可W進(jìn)一步包括：
[0040] 建立數(shù)據(jù)模型，數(shù)據(jù)模型中包括與模板結(jié)合形成展示區(qū)的所有數(shù)據(jù)；
[0041] 將設(shè)置區(qū)與展示區(qū)分別與數(shù)據(jù)模型綁定；
[0042] 將經(jīng)設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)，可W具體包括：
[0043] 根據(jù)設(shè)置參數(shù)修改數(shù)據(jù)模型，并通知展示區(qū)進(jìn)行相應(yīng)改變。
[0044] 本申請實(shí)施例中采用模型-視圖-控制（MVC)原理，也即；數(shù)據(jù)管理-數(shù)據(jù)模型 Model、應(yīng)用邏輯-控制器Controller、數(shù)據(jù)表現(xiàn)-視圖View,首先建立數(shù)據(jù)模型，可W是 化vaScript中的一個對象。其中該數(shù)據(jù)模型中包括實(shí)現(xiàn)左側(cè)和右側(cè)送一整體組件的所有數(shù) 據(jù)，可W與模板結(jié)合形成最終的視圖效果，數(shù)據(jù)模型可W是變量、數(shù)組等數(shù)據(jù)形式。
[0045] 本申請實(shí)施例中在設(shè)置區(qū)接收設(shè)置參數(shù)的同時，可W由控制器根據(jù)所述設(shè)置參數(shù) 修改所述數(shù)據(jù)模型，并通知所述展示區(qū)進(jìn)行相應(yīng)改變。也就是說，當(dāng)數(shù)據(jù)模型Model變化 時，視圖View也相應(yīng)改變。本申請實(shí)施例通過送種雙向綁定行為，將數(shù)據(jù)模型Model作為 視圖View和控制器Controller之間的紐帶，最終實(shí)現(xiàn)設(shè)置區(qū)與展示區(qū)的實(shí)時聯(lián)動。
[0046] 在具體實(shí)施中，可W采用Angular框架來實(shí)現(xiàn)雙向綁定，例如，如圖2所示的左側(cè) 表單設(shè)置區(qū)，本申請實(shí)施例中可W將每個表單控件域（每個表單控件域可W包括有多個或 一組表單控件）都通過ng-model模式綁定到控制器scope里的一個模型，同時，右側(cè)展示 區(qū)的文字或媒體內(nèi)容等也都綁定到該模型上。
[0047] 其中，在Angular中，可W通過scope對象的屬性來獲取數(shù)據(jù)模型，使用ng-model 屬性將頁面元素和數(shù)據(jù)模型屬性綁定起來，頁面元素可w是文本輸入框、單選框、多選框 等。
[0048] 繼續(xù)W手機(jī)淘寶APP為例，圖3示出了本申請實(shí)施例中頁面設(shè)置效果示意圖，如圖 所示，左側(cè)的輸入框、右側(cè)的上新顯示組件分別與數(shù)據(jù)模型綁定，當(dāng)商家在左側(cè)的輸入框進(jìn) 行輸入操作時，如輸入"demo公告，實(shí)時聯(lián)動"，即可在右側(cè)手機(jī)模型預(yù)覽區(qū)同步查看到手機(jī) 端的線上效果。由于本申請實(shí)施例采用的是雙向綁定方式，左側(cè)接收商家輸入內(nèi)容的同時， 右側(cè)實(shí)時顯示設(shè)置后的效果，如圖3所示的"lian' dong"字，左側(cè)和右側(cè)的同步顯示效果， 實(shí)時性較高。
[0049] 本申請實(shí)施例通過模型一視圖雙向綁定（Two-Way Binding)方式，可W通過數(shù)據(jù) 模型封裝表單等常用控件，每設(shè)置一個控件，便可同步觀察前端的線上效果，可W在較低成 本的情況下，實(shí)現(xiàn)高效設(shè)置、實(shí)時預(yù)覽。
[0050] 實(shí)施中，將設(shè)置區(qū)和展示區(qū)分別與數(shù)據(jù)模型綁定時，頁面設(shè)置方法可W進(jìn)一步包 括：
[0051] 對展示區(qū)內(nèi)經(jīng)設(shè)置參數(shù)設(shè)置后的頁面的框架進(jìn)行相對定位；
[0052] 對該頁面框架內(nèi)的各個組件進(jìn)行絕對定位。
[0053] 具體實(shí)施中，右側(cè)的手機(jī)模型對應(yīng)的視圖模板可W為：
[0054]
[00巧]其中，.phone-wrap內(nèi)放置利用CSS background-image嵌入的手機(jī)模型，將經(jīng)設(shè) 置參數(shù)設(shè)置后的頁面之外的范圍劃分為CSS padding屬性區(qū)域，寫在.phone-wrap上即可。
[0056] . phone-content即經(jīng)設(shè)置參數(shù)設(shè)置后的頁面，也就是實(shí)時聯(lián)動的主體部分，該頁 面框架利用position relative的相對定位該頁面內(nèi)的各個組件采用絕對定位方式，頁面 框架作為各個組件的父元素，各個元素相對于父元素進(jìn)行絕對定位，保證復(fù)雜的WebApp各 組件（如單選框、圖片等）的準(zhǔn)確定位聯(lián)動。
[0057] 本申請實(shí)施例通過對經(jīng)設(shè)置參數(shù)設(shè)置后的頁面框架采用CSS相對定位，由于各個 組件的父元素（右側(cè)展示區(qū)的頁面框架）采用的是相對定位，當(dāng)終端分辨率不同時，各個組 件可W相對于整個頁面（左側(cè)和右側(cè)送一整個頁面）移動；而頁面內(nèi)各個組件又是W其父 元素（右側(cè)展示區(qū)的頁面框架）絕對定位的，則在不同分辨率的情況下，各個組件可W在右 側(cè)展示區(qū)的頁面框架內(nèi)精確定位。
[005引繼續(xù)W圖3為例說明，右偵巧機(jī)模型預(yù)覽區(qū)內(nèi)"上新"、"優(yōu)惠"、"廣播"W及下面的 公告欄送一頁面屬于.phone-content嵌入的頁面，該部分頁面采用相對定位方式，也即， 在分辨率不同的終端上顯示時，送一頁面框架的位置可W移動；而其中的公告欄等組件采 用上新"、"優(yōu)惠"、"廣播及下面的公告欄送一頁面的框架為父元素進(jìn)行絕對定位，在 不同分辨率的終端上顯示時，頁面框架內(nèi)的"上新"、"優(yōu)惠"、"廣播及下面的公告欄送幾 個組件之間的相對位置是固定的。
[0059] 實(shí)施中，當(dāng)需要擴(kuò)展組件時，頁面設(shè)置方法可W進(jìn)一步包括：
[0060] 接收擴(kuò)展組件請求，請求中包括待擴(kuò)展組件信息；
[0061] 在數(shù)據(jù)模型內(nèi)添加與待擴(kuò)展組件相關(guān)的數(shù)據(jù)；
[0062] 在將數(shù)據(jù)模型所需數(shù)據(jù)與數(shù)據(jù)模型進(jìn)行映射后，通知展示區(qū)展示擴(kuò)展組件后的頁 面。
[0063] 為了便于本申請的實(shí)施，下面W-個商家店鋪公告作為實(shí)例進(jìn)行說明。
[0064] 左側(cè)表單設(shè)置區(qū)代碼為：
[0065] <textarea placeholder ="送里是默認(rèn)文案"
[0066] class = "custom-style" name = "custom_name"
[0067] maxlength = " 140 " ng-model = "custom_textarea"〉</textarea〉
[0068] 右側(cè)手機(jī)模型預(yù)覽區(qū)代碼為：
[0069]
[0070] 通過上述代碼，在左側(cè)表單設(shè)置區(qū)實(shí)現(xiàn)了一個表單輸入框，并定義了該表單輸 入框輸入字段的最大長度為140個字符。其中，表單輸入框加入了 ng-model屬性，實(shí)現(xiàn) 了輸入框texrarea和數(shù)據(jù)模型custom_textarea的綁定。在右側(cè)的手機(jī)模型預(yù)覽區(qū)嵌 入了手機(jī)模型，其中，由class =" phone-wrap"嵌入了手機(jī)模型框架，再通過class = "地one-content"嵌入與左側(cè)表單設(shè)置區(qū)的輸入框?qū)?yīng)的組件。由于右側(cè)手機(jī)模型預(yù)覽區(qū) 的代碼中通過{{custom_textarea}}綁定了該數(shù)據(jù)模型，因比可W實(shí)現(xiàn)表單輸入框與右側(cè) 手機(jī)模型預(yù)覽區(qū)的實(shí)時聯(lián)動。
[0071] 當(dāng)需要擴(kuò)展組件時，本申請實(shí)施例還可W采用如下方式實(shí)施。
[0072] 下面本申請實(shí)施例根據(jù)手機(jī)端抽獎獎池設(shè)定需求來改造下拉框到整個組件內(nèi)為 例進(jìn)行說明。
[0073] 建立數(shù)據(jù)模型，數(shù)據(jù)模型$rootScope. awardin化的數(shù)據(jù)結(jié)構(gòu)如下所示：
[0074]
[00 巧]
[0076] 通過上述代碼，在數(shù)據(jù)模型內(nèi)添加了與下拉框組件相關(guān)的Η個獎池屬性數(shù)據(jù)，分 別為XX獎池、yy獎池、ΖΖ獎池，還可W包括送Η類獎池的開始時間、結(jié)束時間、獎金額度等 數(shù)據(jù)。
[0077] 然后，控制器里會對數(shù)據(jù)模型進(jìn)行映射，W拉取、映射圖片等數(shù)據(jù)模型所需數(shù)據(jù)， 送些數(shù)據(jù)可W是預(yù)先存儲在本地的數(shù)據(jù)，也可W是通過下載等方式得到的數(shù)據(jù)，具體映射 代碼如下：
[0078]
[0079] 接下來，再將左側(cè)設(shè)置區(qū)和右側(cè)展示區(qū)分別與上述數(shù)據(jù)模型綁定，具體實(shí)現(xiàn)如 下：
[0080] 表單區(qū)代碼：
[0081]
[0083] 最終，達(dá)到的demo演示效果如圖4所示。左側(cè)設(shè)置區(qū)添加了下拉框組件，下拉框 內(nèi)包括XX獎池、yy獎池、ZZ獎池等屬性。當(dāng)商家選定yy獎池時，右側(cè)手機(jī)模型預(yù)覽區(qū)則顯 示yy獎池。在商家點(diǎn)擊保存后，普通消費(fèi)者即可在各自手機(jī)端看到公告欄顯示yy獎池送 樣的線上效果。
[0084] 本申請實(shí)施例中通過數(shù)據(jù)模型封裝了常用表單控件，控制器只需要根據(jù)接收到的 用戶操作請求，修改該數(shù)據(jù)模型中的數(shù)據(jù)，并通知展示區(qū)進(jìn)行相應(yīng)改變，即可實(shí)現(xiàn)更多復(fù) 雜的表單改造，且本申請實(shí)施例通過數(shù)據(jù)模型封裝所有控件，不再需要對每個表單控件的 change事件進(jìn)行監(jiān)聽、手工對比再進(jìn)行預(yù)覽區(qū)dom變化的道染，極大地簡化了操作。
[0085] W手機(jī)淘寶APP為例，該APP通過數(shù)據(jù)模型封裝了輸入框、下拉框等多種表單控 件，左側(cè)設(shè)置區(qū)與右側(cè)展示區(qū)分別與該數(shù)據(jù)模型綁定，當(dāng)控制器接收到商家的添加下拉框 的請求時，即可在數(shù)據(jù)模型中添加下拉框及該下拉框內(nèi)的各個屬性數(shù)據(jù)，并通知右側(cè)手機(jī) 預(yù)覽區(qū)顯示該下拉框?qū)?yīng)的屬性數(shù)據(jù)。采用本申請實(shí)施例所提供的技術(shù)方案，用戶可w根 據(jù)需要隨時添加所需組件，體驗(yàn)上得到很大的提升。
[0086] 實(shí)施中，所述頁面設(shè)置方法可W進(jìn)一步包括：
[0087] 在接收到設(shè)置完成指令時，對數(shù)據(jù)模型進(jìn)行數(shù)據(jù)校驗(yàn)。
[0088] 具體實(shí)施中，在商家設(shè)置完成、點(diǎn)擊保存時，本申請實(shí)施例中還可W配合控制器對 數(shù)據(jù)模型進(jìn)行校驗(yàn)，對必要的字段等進(jìn)行驗(yàn)證后方可形成最終效果，W避免由于用戶疏忽 所帶來的負(fù)面影響。
[0089] 本申請實(shí)施例所提供的技術(shù)方案，通過在接收到設(shè)置完成指令時，進(jìn)一步對數(shù)據(jù) 模型進(jìn)行數(shù)據(jù)校驗(yàn)，從而對設(shè)置參數(shù)是否符合要求、是否存在敏感字段等方面進(jìn)行判斷，W 便確保頁面的設(shè)置操作符合要求，當(dāng)設(shè)置操作不符合要求時及時提示用戶，提高頁面設(shè)置 的效率。
[0090] 基于同一發(fā)明構(gòu)思，本申請實(shí)施例中還提供了一種頁面設(shè)置裝置，由于送些設(shè)備 解決問題的原理與一種頁面設(shè)置方法相似，因此送些設(shè)備的實(shí)施可W參見方法的實(shí)施，重 復(fù)之處不再賞述。
[0091] 圖5示出了本申請實(shí)施例中頁面設(shè)置裝置的結(jié)構(gòu)示意圖，如圖所示，頁面設(shè)置裝 置可W包括：
[0092] 接收模塊501，用于設(shè)置區(qū)接收設(shè)置參數(shù)，該設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的 參數(shù)；
[0093] 展示模塊502,用于經(jīng)設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，設(shè)置區(qū)和展示 區(qū)位于同一頁面。
[0094] 實(shí)施中，頁面設(shè)置裝置可W進(jìn)一步包括：
[0095] 模型建立模決503,用于在設(shè)置區(qū)接收設(shè)置參數(shù)之前，建立數(shù)據(jù)模型，所述數(shù)據(jù)模 型中包括與模板結(jié)合形成展示區(qū)的所有數(shù)據(jù)；
[0096] 模型綁定模塊504,用于將設(shè)置區(qū)和展示區(qū)分別與數(shù)據(jù)模型綁定；
[0097] 展示模塊502可W具體用于根據(jù)設(shè)置參數(shù)修改所述數(shù)據(jù)模型，并通知展示區(qū)進(jìn)行 相應(yīng)改變。
[0098] 實(shí)施中，頁面設(shè)置裝置可W進(jìn)一步包括：
[0099] 定位模塊505,用于在將設(shè)置區(qū)和展示區(qū)分別與數(shù)據(jù)模型綁定時，利用CSS中相對 定位方式對展示區(qū)內(nèi)經(jīng)設(shè)置參數(shù)設(shè)置后的頁面的框架進(jìn)行相對定位；對該頁面框架內(nèi)的各 個組件進(jìn)行絕對定位。
[0100] 實(shí)施中，接收模塊501可W進(jìn)一步用于當(dāng)需要擴(kuò)展組件時，接收擴(kuò)展組件請求，請 求中包括待擴(kuò)展組件信息；
[0101] 展示模塊502可W進(jìn)一步用于在數(shù)據(jù)模型內(nèi)添加與待擴(kuò)展組件相關(guān)的數(shù)據(jù)；在將 數(shù)據(jù)模型所需數(shù)據(jù)與數(shù)據(jù)模型進(jìn)行映射后，通知展示區(qū)展示擴(kuò)展組件后的頁面。
[0102] 實(shí)施中，頁面設(shè)置裝置可W進(jìn)一步包括：
[0103] 校驗(yàn)?zāi)K506,用于在接收到設(shè)置完成指令時，對數(shù)據(jù)模型進(jìn)行數(shù)據(jù)校驗(yàn)。
[0104] 為了描述的方便，W上所述裝置的各部分W功能分為各種模塊或單元分別描述。 當(dāng)然，在實(shí)施本申請時可W把各模塊或單元的功能在同一個或多個軟件或硬件中實(shí)現(xiàn)。
[0105] 本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本申請的實(shí)施例可提供為方法、系統(tǒng)、或計(jì)算機(jī)程序 產(chǎn)品。因此，本申請可采用完全硬件實(shí)施例、完全軟件實(shí)施例、或結(jié)合軟件和硬件方面的實(shí) 施例的形式。而且，本申請可采用在一個或多個其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī) 可用存儲介質(zhì)（包括但不限于磁盤存儲器、CD-ROM、光學(xué)存儲器等）上實(shí)施的計(jì)算機(jī)程序產(chǎn) 品的形式。
[0106] 本申請是參照根據(jù)本申請實(shí)施例的方法、設(shè)備（系統(tǒng)）、和計(jì)算機(jī)程序產(chǎn)品的流程 圖和/或方框圖來描述的。應(yīng)理解可由計(jì)算機(jī)程序指令實(shí)現(xiàn)流程圖和/或方框圖中的每一 流程和/或方框、W及流程圖和/或方框圖中的流程和/或方框的結(jié)合?？商峁┧托┯?jì)算 機(jī)程序指令到通用計(jì)算機(jī)、專用計(jì)算機(jī)、嵌入式處理機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理 器W產(chǎn)生一個機(jī)器，使得通過計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生 用于實(shí)現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能 的裝置。
[0107] 送些計(jì)算機(jī)程序指令也可存儲在能引導(dǎo)計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備W特 定方式工作的計(jì)算機(jī)可讀存儲器中，使得存儲在該計(jì)算機(jī)可讀存儲器中的指今產(chǎn)生包括指 令裝置的制造品，該指令裝置實(shí)現(xiàn)在流程圖一個流程或多個流程和/或方框圖一個方框或 多個方框中指定的功能。
[010引送些計(jì)算機(jī)程序指令也可裝載到計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計(jì) 算機(jī)或其他可編程設(shè)備上執(zhí)行一系列操作步驟W產(chǎn)生計(jì)算機(jī)實(shí)現(xiàn)的處理，從而在計(jì)算機(jī)或 其他可編程設(shè)備上執(zhí)行的指令提供用于實(shí)現(xiàn)在流程圖一個流程或多個流程和/或方框圖 一個方框或多個方框中指定的功能的步驟。
[0109] 盡管已描述了本申請的優(yōu)選實(shí)施例，但本領(lǐng)域內(nèi)的技術(shù)人員一旦得知了基本創(chuàng)造 性概念，則可對送些實(shí)施例作出另外的變更和修改。所W，所附權(quán)利要求意欲解釋為包括優(yōu) 選實(shí)施例W及落入本申請范圍的所有變更和修改。
【主權(quán)項(xiàng)】
1. 一種頁面設(shè)置方法，其特征在于，包括如下步驟： 設(shè)置區(qū)接收設(shè)置參數(shù)，所述設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的參數(shù)； 將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，所述設(shè)置區(qū)和所述展示區(qū)位于 同一頁面。2. 如權(quán)利要求1所述的方法，其特征在于，在設(shè)置區(qū)接收設(shè)置參數(shù)之前，所述方法進(jìn)一 步包括： 建立數(shù)據(jù)模型，所述數(shù)據(jù)模型中包括與模板結(jié)合形成展示區(qū)的所有數(shù)據(jù)； 將所述設(shè)置區(qū)和所述展示區(qū)分別與所述數(shù)據(jù)模型綁定； 將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)，具體包括： 根據(jù)所述設(shè)置參數(shù)修改所述數(shù)據(jù)模型，并通知所述展示區(qū)進(jìn)行相應(yīng)改變。3. 如權(quán)利要求2所述的方法，其特征在于，在將所述設(shè)置區(qū)和所述展示區(qū)分別與所述 數(shù)據(jù)模型綁定時，所述方法進(jìn)一步包括： 對所述展示區(qū)內(nèi)經(jīng)設(shè)置參數(shù)設(shè)置后的頁面的框架進(jìn)行相對定位； 對所述頁面框架內(nèi)的各個組件進(jìn)行絕對定位。4. 如權(quán)利要求2所述的方法，其特征在于，當(dāng)需要擴(kuò)展組件時，所述方法進(jìn)一步包括： 接收擴(kuò)展組件請求，所述請求中包括待擴(kuò)展組件信息； 在所述數(shù)據(jù)模型內(nèi)添加與所述待擴(kuò)展組件相關(guān)的數(shù)據(jù)； 將所述數(shù)據(jù)模型所需數(shù)據(jù)與所述數(shù)據(jù)模型進(jìn)行映射后，通知所述展示區(qū)展示擴(kuò)展組件 后的頁面。5. 如權(quán)利要求2所述的方法，其特征在于，所述方法進(jìn)一步包括： 在接收到設(shè)置完成指令時，對所述數(shù)據(jù)模型進(jìn)行數(shù)據(jù)校驗(yàn)。6. -種頁面設(shè)置裝置，其特征在于，包括： 接收模塊，用于設(shè)置區(qū)接收設(shè)置參數(shù)，所述設(shè)置參數(shù)為對待設(shè)置頁面進(jìn)行設(shè)置的參 數(shù)； 展示模塊，用于將經(jīng)所述設(shè)置參數(shù)設(shè)置后的頁面展示在展示區(qū)；其中，所述設(shè)置區(qū)和所 述展示區(qū)位于同一頁面。7. 如權(quán)利要求6所述的裝置，其特征在于，所述裝置進(jìn)一步包括： 模型建立模塊，用于在設(shè)置區(qū)接收設(shè)置參數(shù)之前，建立數(shù)據(jù)模型，所述數(shù)據(jù)模型中包括 與模板結(jié)合形成展示區(qū)的所有數(shù)據(jù)； 模型綁定模塊，用于將所述設(shè)置區(qū)和所述展示區(qū)分別與所述數(shù)據(jù)模型綁定； 所述展示模塊具體用于根據(jù)所述設(shè)置參數(shù)修改所述數(shù)據(jù)模型，并通知所述展示區(qū)進(jìn)行 相應(yīng)改變。8. 如權(quán)利要求7所述的裝置，其特征在于，所述裝置進(jìn)一步包括： 定位模塊，用于在將所述設(shè)置區(qū)和所述展示區(qū)分別與所述數(shù)據(jù)模型綁定時，對所述展 示區(qū)內(nèi)經(jīng)設(shè)置參數(shù)設(shè)置后的頁面的框架進(jìn)行相對定位；對該頁面框架內(nèi)的各個組件進(jìn)行絕 對定位。9. 如權(quán)利要求7所述的裝置，其特征在于，所述接收模塊進(jìn)一步用于當(dāng)需要擴(kuò)展組件 時，接收擴(kuò)展組件請求，所述請求中包括待擴(kuò)展組件信息； 展示模塊進(jìn)一步用于在所述數(shù)據(jù)模型內(nèi)添加與所述待擴(kuò)展組件相關(guān)的數(shù)據(jù)；將所述數(shù) 據(jù)模型所需數(shù)據(jù)與所述數(shù)據(jù)模型進(jìn)行映射后，通知所述展示區(qū)展示擴(kuò)展組件后的頁面。10.如權(quán)利要求7所述的裝置，其特征在于，所述裝置進(jìn)一步包括： 校驗(yàn)?zāi)K，用于在接收到設(shè)置完成指令時，對所述數(shù)據(jù)模型進(jìn)行數(shù)據(jù)校驗(yàn)。
【文檔編號】G06F9/44GK105988778SQ201510041890
【公開日】2016年10月5日
【申請日】2015年1月28日
【發(fā)明人】臧濤
【申請人】阿里巴巴集團(tuán)控股有限公司