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

馮燕　博瑨

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

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

中圖分類號 TP2 文獻標識碼 A 文章編號 2095-6363（2017）11-0141-02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2 結(jié)論

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

參考文獻

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

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

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