HTML5技術(shù)下Web富客戶(hù)端網(wǎng)頁(yè)設計方案發(fā)布者：本站     時(shí)間：2020-05-02 14:05:22

HTML 5 是近十年來(lái) Web 開(kāi)發(fā)標準最巨大的飛躍 , 其設計宗旨在于減少網(wǎng)絡(luò )應用對于瀏覽器插件的需求， 給站點(diǎn)帶來(lái)更多的過(guò)媒體元素[1]. 與 HTML 4、 HTML 3 等版本不同 ,HTML 5 并非僅僅用來(lái)表示 Web 內容 , 它更具有將 Web 帶入一個(gè)成熟的應用平臺[2].

1 HTML5 特性分析

HTML5 大大簡(jiǎn)化了編程工作， 使 Web 程序更容易地訪(fǎng)問(wèn)各類(lèi)設備和應用程序， 并且提供了很多重要的新特性[3-4].

（1） 新的標記語(yǔ)言標準HTML5 比之前的 HTML 版本更新了標記語(yǔ)言及其附屬的標準， 包括訪(fǎng)問(wèn)和操作 HTML 文檔結構 （DOM） 的標準； 全新的級聯(lián)樣式表 （CSS） 標準， 用于定義 HTML 文檔的外觀(guān)和呈現方式以及 JavaScript 腳本語(yǔ)言。

（2） 實(shí)現基于標準的富 WebHTML 5 實(shí)現了富應用的新 API, 諸如圖形 、 動(dòng)畫(huà) 、 多媒體， 在此之前需要通過(guò) Flash 等各類(lèi)插件實(shí)現這些功能， 使用上述插件技術(shù)不僅帶來(lái)安全隱患， 而且限制了受眾的范圍。

HTML 5 提供的 audio 和 ideo 等標簽為 Web 開(kāi)發(fā)者們提供了嵌入媒體方面的極大便利， 尤其是采用中立的編碼標準解放了瀏覽器廠(chǎng)商的開(kāi)發(fā)自主性。

（3） 革新的結構HTML5 標準中引入了一整套新的元素 , 使建構網(wǎng)頁(yè)更變得更容易。 使用這些元素具有明顯的優(yōu)點(diǎn)： 當與標題元素聯(lián)同使用時(shí)， 產(chǎn)生了一種使用標題級別標記嵌套章節的方法，這將超過(guò)以前版本 HTML 的標題級別。

2 Web 富客戶(hù)端網(wǎng)頁(yè)設計方案

2.1 單頁(yè)面開(kāi)發(fā)模式

目前， Web 程序的界面開(kāi)發(fā)模式有單頁(yè)面和多頁(yè)面兩種，基于 HTML5 的 Web 富客戶(hù)端實(shí)現 Web 單頁(yè)面應用， 與 2.0版本的多頁(yè)面應用相比， 單頁(yè)面應用具有以下優(yōu)點(diǎn)：

（1） 用戶(hù)操作簡(jiǎn)單、 友好度高。

在單頁(yè)面應用上， 添加、 修改等一些操作采用彈出層的方式實(shí)現， 而在多頁(yè)面應用上， 甚至每一個(gè)具體的功能， 都需要跳轉到一個(gè)新的頁(yè)面完成， 當用戶(hù)完成該操作時(shí)， 再返回到原始頁(yè)面， 用戶(hù)操作復雜， 友好度低。

（2） 易于開(kāi)發(fā)、 維護本系統采用單頁(yè)面的應用開(kāi)發(fā)模式。 主頁(yè)面布局如圖 1所示。以下對各區域的功能進(jìn)行解釋。

1） 客戶(hù)和登錄用戶(hù)信息區此區域的上部份由文字或圖片展示系統當前部署到的客戶(hù)的信息， 下部份展示系統當前的登錄用戶(hù)的歡迎信息。 此區域的信息不應該是靜態(tài)的， 而應是根據系統的實(shí)際環(huán)境實(shí)時(shí)更新的。

2） 系統標題欄區此區域顯示系統的標題， 如本系統的標題舜陽(yáng)電壓質(zhì)量分析管理系統， 因為系統的標題是不會(huì )輕易更改的， 因此本區域可設計成靜態(tài)區域。

3） 報警信息顯示區此區域顯示監測點(diǎn)的報警信息， 報警信息是由左自右滾動(dòng)顯示的， 并可自由配置文字顏色、 滾動(dòng)速度、 顯示條數，此區域的設計需要一定的伸縮性。

4） 常用功能區此區域是系統的常用功能集合， 包含 4 項功能： 系統設置、 密碼修改、 用戶(hù)注銷(xiāo)、 切換主題。

5） 組織機構樹(shù)形菜單區此區域是系統部署到的單位部門(mén)的樹(shù)形菜單展示， 是可以收起和展開(kāi)的， 其頂級部門(mén)是當前登錄用戶(hù)所屬的部門(mén)， 即當前登錄用戶(hù)只能看到他所屬部門(mén)以及下級部門(mén)的樹(shù)形菜單展示， 無(wú)法看到上級部門(mén)和他的其他同級部門(mén)的樹(shù)形菜單節點(diǎn)。

考慮到樹(shù)形菜單可能會(huì )存在數千個(gè)節點(diǎn)， 此區域的設計應該要及其注意其性能， 并且應該提供一個(gè)供用戶(hù)模糊搜索菜單節點(diǎn)的搜索框。

6） 主菜單和二級菜單區本系統的主菜單采用 Tab 菜單模式， 系統的每一個(gè)模塊設置一個(gè) Tab 菜單項， 每個(gè) Tab 項包含一個(gè)二級菜單， 二級菜單可以是一個(gè)工具欄， 上面集成了該模塊的一系列子模塊，每個(gè)子模塊是一個(gè)單獨的頁(yè)面， 點(diǎn)擊某個(gè)二級菜單項時(shí)， 在應用區打開(kāi)該項所代表的子模塊頁(yè)面。

7） 應用區應用區即是系統具體子模塊的功能展示操作區域， 此區域以一個(gè)浮動(dòng)框架的形式將一個(gè)單獨的 HTML 頁(yè)面包含進(jìn)來(lái)，每單打開(kāi)一個(gè)新的子模塊時(shí)， 應該移除代表上一個(gè)子模塊的浮動(dòng)框架， 以避免主頁(yè)面掛靠過(guò)多子頁(yè)面， 造成瀏覽器假死。

根據以上功能以及區域位置的劃分， 可以將主頁(yè)面按功能區域劃分為 3 個(gè)模塊：

1） 頂部面板此模塊是若干個(gè)小模塊的集合， 其主要部分是常用功能區和報警信息顯示區。

2） 左部部門(mén)樹(shù)面板此模塊的主要作用是實(shí)現部門(mén)節點(diǎn)的選擇反選， 上下級部門(mén)節點(diǎn)的聯(lián)動(dòng)， 部門(mén)節點(diǎn)的模糊搜索， 向后臺傳遞部門(mén)節點(diǎn)選擇模型。

3） Tab 菜單面板Tab 菜單面板包含主菜單欄、 副菜單欄以及客戶(hù)區。 其主要作用就是實(shí)現子頁(yè)面的載入及移除， 實(shí)現系統權限控制的前臺部分。

2.2 頁(yè)面視圖

此模塊的作用主要是完成對以上各個(gè)模塊的整合， 將一系列的功能模塊組合成系統的主頁(yè)面并負責顯示。頁(yè)面的設計圖， 如圖 2 所示。

2.3 后臺架構

基于 HTML5 的 Web 富客戶(hù)端系統采用 SSH2 架構， 針對網(wǎng)頁(yè)處理數據量異常巨大， 導致對系統的資源要求非?？量?，在非分布式的系統處理中， 采用 SSH2 架構容易出現性能瓶頸， 從而影響系統處理其他業(yè)務(wù)邏輯， 對系統的整體性能造成影響。 因此， 本系統采用兩套架構方案， 基本架構和輔助架構。

系統的主要部分采用 SSH2 架構， 即 struts2+spring+hiber-nate, 系統在縱向上按業(yè)務(wù)流程劃分為 3 個(gè)層 , Action 層 、Service 層和 Dao 層， 由 struts2 在 Action 層處理客戶(hù)端請求并實(shí)現 MVC, hibernate 作為 Dao 層的 ORM 框架處理數據持久化方面的邏輯， spring 作為一個(gè)中間層的容器， 統一管理系統的業(yè)務(wù)邏輯。

系統遵循接口編程的原則， 所有的 Action、 Service 和 Dao都應該定義接口。 在縱向上劃分為 Action、 Service 和 Dao 3 個(gè)層， 橫向按功能模塊劃分， 每一個(gè)具體的子模塊應該擁有其對應的 Action、 Service 和 Dao 層。 據此思想， 在子模塊的子一級功能中， 應當對其進(jìn)行封裝， 以使各個(gè)不同的子功能之間不相耦合。 系統在 Service 層上應該使用 spring 的 AOP 機制實(shí)現系統的事務(wù)管理、 日志記錄功能， 可以編寫(xiě)一個(gè)通用的Dao, 所有其他 Dao 都繼承自此 Dao, 以減少 Dao 層的開(kāi)發(fā)量。 系統后臺的基本架構如圖 3 所示。系統的輔助系統處理數據查詢(xún)量大問(wèn)題， 在非分布式的系統中， 使用上述架構容易導致資源枯竭造成系統崩潰， 故而數據查詢(xún)模塊不采用上述架構， 而采用傳統的 servlet+jav-abean+jdbc 的架構模式。

采用傳統的架構模式并不意味著(zhù)就是最簡(jiǎn)單、 最基本的模式， 為了減少 jdbc 層的開(kāi)發(fā)， 首先， 該輔助架構應該將 jd-bc 操作封裝成 jdbc 模板 , 提供 ResultSet 到 Java 集合的映射 ,以提供一個(gè)統一的數據集接口。 該數據集除了由 jdbc 操作從數據庫中獲取數據外， 還應提供一個(gè)外部接口， 用以構造該數據集。

由此可知對于該輔助架構， 它的底層是一個(gè)數據集的提供者， 該數據集提供者有兩種方法獲取數據集， 一是通過(guò) jd-bc 接口從數據庫中獲取數據并將其轉化為 Java 集合 , 二是通過(guò)外部接口設置其數據集。 數據集總是和模型一并存在的，有數據集就意味著(zhù)有構成該數據集的模型， 輔助架構的數據集提供者必須是統一的、 通用的， 而數據模型肯定不是唯一的， 對于每一個(gè)不同的業(yè)務(wù)， 可能都會(huì )有一種不同的模型，因此， 對于該數據集提供者， 可以采用 Java 泛型設計模式。

比如 DataQuery 類(lèi)有 3 個(gè)屬性， list 屬性表示該類(lèi)所封裝的數據集， 它可以是由 jdbc 操作從數據庫中獲取的， 也可以是由外部設置進(jìn)來(lái)的； sql 屬性表示當該 DataQuery 是由 jdbc方式構造時(shí)， 用以從數據庫提取數據的 sql 語(yǔ)句； totalCount 屬性表示數據集的大小。 DataQuery 類(lèi)有 5 個(gè)方法， 其中兩個(gè)構造方法， DataQuery （in sql: String） 構造方法表示該構造方法接收一條 sql 語(yǔ)句， 由 JDBC 方式構造該數據集， 當由此方式構造數據集時(shí)， 對數據的提取以及到 Java 集合的映射操作被封裝在了 excute（） 方法中， 這是一個(gè)私有方法。 getData 和getAllData 方法顧名思義， 前者是返回原始數據集中指定位置、指定長(cháng)度的新的數據集， 后者是返回整個(gè)原始數據集。

3 分層開(kāi)發(fā)模式

基于 HTML5 的 Web 富客戶(hù)端網(wǎng)頁(yè)設計采用軟件體系架構設計中常用的分層的設計方法， 分層的設計方法是軟件體系結構設計中最為常見(jiàn)也最重要的一種方法， 從上到下分別是：表示層 （UI）、 業(yè)務(wù)邏輯層 （BLL）、 數據訪(fǎng)問(wèn)層 （DAL） 和數據層 （DL）。 4 層之間相互作用的關(guān)系圖如圖 4 所示。

采用分層的軟件結構使開(kāi)發(fā)人員可以只關(guān)注其中的某一層進(jìn)行設計與開(kāi)發(fā)， 可以降低層與層之間的依賴(lài)關(guān)系， 在需求變化時(shí)可以方便地用新的實(shí)現替換原有的層次實(shí)現， 更有利于軟件結構的標準化和各層邏輯的復用， 也在很大程度上降低了后期軟件維護的成本。

4 基于 HTML5 技術(shù)的表示層開(kāi)發(fā)

表示層位于整個(gè)軟件體系的最上層， 也是和用戶(hù)關(guān)系最緊密的一層， 主要用于接收用戶(hù)的輸入數據、 頁(yè)面操作等請求， 并把后臺程序返回的數據和結果以適當的形式反饋給用戶(hù)， 其主要作用是為用戶(hù)提供一個(gè)友好的交互式操作界面。

由于 Web 監控軟件采用 B/S 的設計模式， 所以系統中的表現層的主要形式是 Web 頁(yè)面， 而在程序中的表現形式是ASPX 文件 . 在 Web 監控系統中需要通過(guò)大量的圖表和曲線(xiàn)對生產(chǎn)運行數據進(jìn)行顯示， 因此采用最新的超文本語(yǔ)言版本HTML5 和 SVG 可縮放矢量圖形 （Scalable Vector Graphics） 實(shí)現了更加良好的曲線(xiàn)與圖表的顯示效果， 同時(shí)為進(jìn)一步地增加交互界面的可操作性， 可以選用第三方控件 Highcharts 和jqGrid 來(lái)實(shí)現軟件平臺中實(shí)時(shí)動(dòng)態(tài)曲線(xiàn)和各種圖表的顯示。