久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

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

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

1 HTML5 特性分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2 頁面視圖

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

2.3 后臺(tái)架構(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 個(gè)層 , Action 層 、Service 層和 Dao 層， 由 struts2 在 Action 層處理客戶端請求并實(shí)現(xiàn) MVC, hibernate 作為 Dao 層的 ORM 框架處理數(shù)據(jù)持久化方面的邏輯， spring 作為一個(gè)中間層的容器， 統(tǒng)一管理系統(tǒng)的業(yè)務(wù)邏輯。

系統(tǒng)遵循接口編程的原則， 所有的 Action、 Service 和 Dao都應(yīng)該定義接口。 在縱向上劃分為 Action、 Service 和 Dao 3 個(gè)層， 橫向按功能模塊劃分， 每一個(gè)具體的子模塊應(yīng)該擁有其對應(yīng)的 Action、 Service 和 Dao 層。 據(jù)此思想， 在子模塊的子一級功能中， 應(yīng)當(dāng)對其進(jìn)行封裝， 以使各個(gè)不同的子功能之間不相耦合。 系統(tǒng)在 Service 層上應(yīng)該使用 spring 的 AOP 機(jī)制實(shí)現(xiàn)系統(tǒng)的事務(wù)管理、 日志記錄功能， 可以編寫一個(gè)通用的Dao, 所有其他 Dao 都繼承自此 Dao, 以減少 Dao 層的開發(fā)量。 系統(tǒng)后臺(tái)的基本架構(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 集合的映射 ,以提供一個(gè)統(tǒng)一的數(shù)據(jù)集接口。 該數(shù)據(jù)集除了由 jdbc 操作從數(shù)據(jù)庫中獲取數(shù)據(jù)外， 還應(yīng)提供一個(gè)外部接口， 用以構(gòu)造該數(shù)據(jù)集。

由此可知對于該輔助架構(gòu)， 它的底層是一個(gè)數(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ù)模型肯定不是唯一的， 對于每一個(gè)不同的業(yè)務(wù)， 可能都會(huì)有一種不同的模型，因此， 對于該數(shù)據(jù)集提供者， 可以采用 Java 泛型設(shè)計(jì)模式。

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

3 分層開發(fā)模式

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

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

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

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

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