網(wǎng)頁頁面布局動(dòng)態(tài)生成方法

馮燕　博瑨

摘 要 網(wǎng)頁頁面布局動(dòng)態(tài)生成方法，實(shí)質(zhì)是解決系統(tǒng)網(wǎng)頁頁面針對(duì)不同用戶在同一系統(tǒng)模塊頁面中所需展現(xiàn)的網(wǎng)頁頁面內(nèi)容及側(cè)重點(diǎn)不同，為系統(tǒng)的網(wǎng)頁頁面展示增加了靈活性、可配置性，使得不同用戶可根據(jù)自身需求選擇頁面顯示內(nèi)容并拖拽出所需顯示區(qū)域的位置和范圍。

關(guān)鍵詞 網(wǎng)頁；頁面布局；可配置

中圖分類號(hào) TP2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 2095-6363（2017）11-0141-02

值班信息系統(tǒng)主要是解決各級(jí)值班數(shù)據(jù)的錄入和顯示，由于不同節(jié)點(diǎn)對(duì)值班數(shù)據(jù)的需求不同，甚至系統(tǒng)同一頁面的數(shù)據(jù)顯示需求也可能不盡相同，這就要求系統(tǒng)對(duì)同一頁面顯示具備多樣性。為滿足各級(jí)節(jié)點(diǎn)的不同需求和個(gè)性化展示，要求系統(tǒng)數(shù)據(jù)展現(xiàn)具備靈活性，并且用戶可自行配置網(wǎng)頁頁面布局。傳統(tǒng)網(wǎng)頁頁面布局方式需要對(duì)各個(gè)應(yīng)用場景由編程人員專門定制頁面布局樣式，這將是一個(gè)龐大的工作量，同時(shí)可能由于編程人員對(duì)于不同應(yīng)用場景的需求并不是十分明確，導(dǎo)致頁面布局樣式需反復(fù)修改。為實(shí)現(xiàn)各級(jí)節(jié)點(diǎn)根據(jù)權(quán)限不同、需求不同，可對(duì)系統(tǒng)頁面布局進(jìn)行動(dòng)態(tài)配置，要求研制一種網(wǎng)頁頁面布局動(dòng)態(tài)配置方法。

將系統(tǒng)將網(wǎng)頁布局的處理、展現(xiàn)與存儲(chǔ)進(jìn)行分離，用戶通過配置界面配置父模塊對(duì)應(yīng)的子模塊以及各子模塊展示的區(qū)域位置及范圍，系統(tǒng)換算并存儲(chǔ)用戶在頁面配置界所配置和拖拽出的區(qū)域參數(shù)，系統(tǒng)讀取并換算父模塊所對(duì)應(yīng)各子模塊的位置、區(qū)域參數(shù)展現(xiàn)于相應(yīng)的網(wǎng)頁頁面。實(shí)現(xiàn)了網(wǎng)頁頁面布局的編輯、網(wǎng)頁頁面顯示等上層應(yīng)用展示與頁面布局?jǐn)?shù)據(jù)存儲(chǔ)的分離與對(duì)應(yīng)關(guān)系，從而實(shí)現(xiàn)各級(jí)節(jié)點(diǎn)網(wǎng)頁頁面布局的靈活擴(kuò)展，以及各網(wǎng)頁頁面布局的個(gè)性化定制[1]。

在網(wǎng)頁頁面布局動(dòng)態(tài)顯示與管理中使用抽象技術(shù)、封裝技術(shù)等將對(duì)頁面布局的操作分解為強(qiáng)內(nèi)聚、松耦合的功能模塊。對(duì)各類不同的網(wǎng)頁頁面排版數(shù)據(jù)，通過提取、換算、分類以及通用的網(wǎng)頁前臺(tái)代碼，個(gè)性化展現(xiàn)網(wǎng)頁頁面，同時(shí)達(dá)到網(wǎng)頁頁面自適應(yīng)性。

1 具體實(shí)現(xiàn)步驟

1.1 建立用于存儲(chǔ)網(wǎng)頁頁面布局的數(shù)據(jù)庫表

為滿足網(wǎng)頁頁面布局的多樣性、不確定性要求，同時(shí)也為了增加網(wǎng)頁頁面布局的可擴(kuò)展性，設(shè)計(jì)網(wǎng)頁頁面布局的數(shù)據(jù)結(jié)構(gòu)如表1所示。

具體步驟：建立數(shù)據(jù)結(jié)構(gòu)。節(jié)點(diǎn)內(nèi)碼和部位號(hào)：確保了各級(jí)節(jié)點(diǎn)各部位頁面布局的唯一性。模塊號(hào)：系統(tǒng)頁面二級(jí)菜單唯一標(biāo)識(shí)。CSSID：頁面布局編輯模塊區(qū)域的唯一標(biāo)識(shí)。CSS名稱：頁面布局編輯模塊區(qū)域的名稱。TOP和LEFT：標(biāo)記區(qū)域位置，以“%”為單位。WIDTH和HEIGHT：標(biāo)記區(qū)域大小，以“%”為單位。

1.2 創(chuàng)建網(wǎng)頁頁面布局配置界面

具體步驟1：創(chuàng)建網(wǎng)頁頁面布局配置界面的工具欄。頁面布局下拉列表——系統(tǒng)頁面的一級(jí)菜單（父模塊名）；增加——為該界面增加排版區(qū)域；保存——保存該排版數(shù)據(jù)于數(shù)據(jù)庫；微調(diào)——點(diǎn)擊后展開，用戶可以通過選擇區(qū)域下拉列表中的區(qū)域，從而對(duì)指定區(qū)域的“X、Y、寬、高”進(jìn)行微調(diào)。微調(diào)中數(shù)字單位是像素，網(wǎng)頁頁面布局配置界面是以彈出框的形式展現(xiàn)。

具體步驟2：創(chuàng)建網(wǎng)頁頁面布局配置界面的區(qū)域框。區(qū)域框的第一行分別是區(qū)域名和區(qū)域刪除按鈕。區(qū)域框的第二行為該區(qū)域工具欄：菜單下拉列表——為該區(qū)域添加二級(jí)菜單（子模塊名稱），選中后該區(qū)域內(nèi)會(huì)增加所選中的二級(jí)菜單名稱；刪除——點(diǎn)擊具體要?jiǎng)h除的二級(jí)菜單，該區(qū)域中的刪除鍵顯示可用，用于刪除該區(qū)域中的二級(jí)菜單。

網(wǎng)頁頁面布局配置界面操作流程：頁面布局下拉列表中選擇要配置的一級(jí)菜單，系統(tǒng)默認(rèn)對(duì)該一級(jí)菜單下的二級(jí)菜單分別創(chuàng)建對(duì)應(yīng)區(qū)域。用戶可以通過鼠標(biāo)拖拽區(qū)域的位置和大小，也可以通過微調(diào)對(duì)指定區(qū)域的位置和大小進(jìn)行細(xì)微調(diào)節(jié)。用戶可以刪除指定區(qū)域或增加新區(qū)域。同時(shí)可對(duì)某一區(qū)域指定二級(jí)菜單或刪除二級(jí)菜單。配置完成后點(diǎn)擊保存。

1.3 排版數(shù)據(jù)錄入數(shù)據(jù)庫

存儲(chǔ)用戶在頁面配置界面對(duì)頁面各區(qū)域大小、區(qū)域位置、區(qū)域包含菜單的設(shè)定。讀取頁面區(qū)域大?。╓IDTH和HEIGHT）、區(qū)域位置（LEFT和TOP）、區(qū)域所包含的二級(jí)菜單號(hào)（子模塊號(hào)）、區(qū)域ID（CSSID）、區(qū)域名稱（CSS名稱）、節(jié)點(diǎn)內(nèi)碼、部位號(hào)；根據(jù)頁面布局配置界面尺寸和已讀取的區(qū)域大小、區(qū)域位置尺寸，換算后得到WIDTH、HEIGHT、LEFT和TOP，（單位為“%”，為了前臺(tái)頁面更好的自適應(yīng)屏幕）；錄入數(shù)據(jù)庫。

1.4 網(wǎng)頁頁面顯示

為滿足網(wǎng)頁頁面展現(xiàn)的自適應(yīng)性、可定制性要求，同時(shí)也為了增加網(wǎng)頁頁面布局的可擴(kuò)展性，前臺(tái)頁面排版和數(shù)據(jù)顯示。根據(jù)數(shù)據(jù)庫存儲(chǔ)的頁面布局?jǐn)?shù)據(jù)格式，編寫通用型網(wǎng)頁前臺(tái)代碼：根據(jù)網(wǎng)頁頁面的一級(jí)菜單讀取所對(duì)應(yīng)的二級(jí)菜單，從而讀取該一級(jí)菜單網(wǎng)頁頁面下的排版數(shù)據(jù)；為滿足網(wǎng)頁頁面展現(xiàn)對(duì)屏幕尺寸的自適應(yīng)性，首先讀取當(dāng)前屏幕尺寸（單位為像素），根據(jù)數(shù)據(jù)庫中讀取的網(wǎng)頁頁面排版數(shù)據(jù)WIDTH、HEIGHT、LEFT和TOP，換算出在當(dāng)前屏幕中各區(qū)域的WIDTH、HEIGHT、LEFT和TOP（單位為像素）。

當(dāng)該一級(jí)菜單網(wǎng)頁頁面下二級(jí)菜單的區(qū)域ID出現(xiàn)相同時(shí)，利用TAB頁切換二級(jí)菜單的顯隱。讀取具體區(qū)域中二級(jí)菜單對(duì)應(yīng)的三級(jí)菜單，換算出三級(jí)菜單數(shù)據(jù)顯示區(qū)（若無三級(jí)菜單，該區(qū)域整體為二級(jí)菜單數(shù)據(jù)顯示區(qū)）。由于系統(tǒng)的特殊性，大多數(shù)數(shù)據(jù)都以文字或數(shù)字形式展現(xiàn)，為確保每行數(shù)據(jù)顯示自適應(yīng)顯示器尺寸[2]，不會(huì)因屏幕尺寸過大或過小出現(xiàn)不合理的數(shù)據(jù)顯示布局，規(guī)定了顯示每行數(shù)據(jù)的像素高度。根據(jù)三級(jí)菜單（或二級(jí)菜單）數(shù)據(jù)顯示區(qū)尺寸換算出該菜單下顯示最新數(shù)據(jù)的數(shù)量。

2 結(jié)論

網(wǎng)頁頁面布局動(dòng)態(tài)生成方法用于網(wǎng)頁頁面布局的動(dòng)態(tài)配置與展現(xiàn)中，在頁面配置管理中使用抽象技術(shù)、封裝技術(shù)等，編寫通用性網(wǎng)頁頁面布局代碼，通過配置界面?zhèn)€性化展示網(wǎng)頁頁面。使網(wǎng)頁頁面布局具有可擴(kuò)展性，大大提高了系統(tǒng)網(wǎng)頁的適用范圍。將應(yīng)用層和數(shù)據(jù)庫存儲(chǔ)分離開來處理的方法，大大減少網(wǎng)頁頁面布局交互、編寫和修改的工作量。對(duì)于前端網(wǎng)頁頁面展現(xiàn)進(jìn)行自適應(yīng)處理，確保了網(wǎng)頁頁面自適應(yīng)不同尺寸的顯示屏。

參考文獻(xiàn)

[1]雷燁.運(yùn)用DIV+CSS技術(shù)對(duì)網(wǎng)頁進(jìn)行布局[J].電腦知識(shí)與技術(shù)，2016，12（7）：212-213.

[2]宗士強(qiáng).基于虛擬視圖的網(wǎng)絡(luò)化數(shù)據(jù)共享[J].指揮信息系統(tǒng)與技術(shù)，2012，3（5）：74-77.

[3]馮興利，洪丹丹，羅軍鋒，等.自適應(yīng)網(wǎng)頁設(shè)計(jì)中的關(guān)鍵技術(shù)[J].計(jì)算機(jī)應(yīng)用，2016，36（s1）：249-251.