最新无码国产aⅴ_日韩Av免费一级毛片_久久精品无码一区二区app_911国产免费无码专区

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

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

1 HTML5 特性分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

根據(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)權(quán)限控制的前臺部分。

2.2 頁面視圖

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

2.3 后臺架構(gòu)

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

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

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

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

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

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

3 分層開發(fā)模式

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

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

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

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

由于 Web 監(jiān)控軟件采用 B/S 的設(shè)計模式， 所以系統(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)曲線和各種圖表的顯示。