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

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

1 HTML5 特性分析

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

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

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

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

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

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

2.1 單頁面開發(fā)模式

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

（1） 用戶操作簡單、 友好度高。

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

（2） 易于開發(fā)、 維護本系統(tǒng)采用單頁面的應用開發(fā)模式。 主頁面布局如圖 1所示。以下對各區(qū)域的功能進行解釋。

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

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

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

4） 常用功能區(qū)此區(qū)域是系統(tǒng)的常用功能集合， 包含 4 項功能： 系統(tǒng)設置、 密碼修改、 用戶注銷、 切換主題。

5） 組織機構樹形菜單區(qū)此區(qū)域是系統(tǒng)部署到的單位部門的樹形菜單展示， 是可以收起和展開的， 其頂級部門是當前登錄用戶所屬的部門， 即當前登錄用戶只能看到他所屬部門以及下級部門的樹形菜單展示， 無法看到上級部門和他的其他同級部門的樹形菜單節(jié)點。

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

6） 主菜單和二級菜單區(qū)本系統(tǒng)的主菜單采用 Tab 菜單模式， 系統(tǒng)的每一個模塊設置一個 Tab 菜單項， 每個 Tab 項包含一個二級菜單， 二級菜單可以是一個工具欄， 上面集成了該模塊的一系列子模塊，每個子模塊是一個單獨的頁面， 點擊某個二級菜單項時， 在應用區(qū)打開該項所代表的子模塊頁面。

7） 應用區(qū)應用區(qū)即是系統(tǒng)具體子模塊的功能展示操作區(qū)域， 此區(qū)域以一個浮動框架的形式將一個單獨的 HTML 頁面包含進來，每單打開一個新的子模塊時， 應該移除代表上一個子模塊的浮動框架， 以避免主頁面掛靠過多子頁面， 造成瀏覽器假死。

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

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

2） 左部部門樹面板此模塊的主要作用是實現(xiàn)部門節(jié)點的選擇反選， 上下級部門節(jié)點的聯(lián)動， 部門節(jié)點的模糊搜索， 向后臺傳遞部門節(jié)點選擇模型。

3） Tab 菜單面板Tab 菜單面板包含主菜單欄、 副菜單欄以及客戶區(qū)。 其主要作用就是實現(xiàn)子頁面的載入及移除， 實現(xiàn)系統(tǒng)權限控制的前臺部分。

2.2 頁面視圖

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

2.3 后臺架構

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

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

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

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

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

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

3 分層開發(fā)模式

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

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

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

表示層位于整個軟件體系的最上層， 也是和用戶關系最緊密的一層， 主要用于接收用戶的輸入數(shù)據(jù)、 頁面操作等請求， 并把后臺程序返回的數(shù)據(jù)和結果以適當?shù)男问椒答伣o用戶， 其主要作用是為用戶提供一個友好的交互式操作界面。

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