HTML5技术下Web富客户端网页设计方案

HTML 5 是近十年来 Web 开发标准最巨大的飞跃 , 其设计宗旨在于减少网络应用对于浏览器插件的需求， 给站点带来更多的过媒体元素[1]. 与 HTML 4、 HTML 3 等版本不同 ,HTML 5 并非仅仅用来表示 Web 内容 , 它更具有将 Web 带入一个成熟的应用平台[2].

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了伊金霍洛免费建站欢迎大家使用！

1 HTML5 特性分析

HTML5 大大简化了编程工作， 使 Web 程序更容易地访问各类设备和应用程序， 并且提供了很多重要的新特性[3-4].

（1） 新的标记语言标准HTML5 比之前的 HTML 版本更新了标记语言及其附属的标准， 包括访问和操作 HTML 文档结构 （DOM） 的标准； 全新的级联样式表 （CSS） 标准， 用于定义 HTML 文档的外观和呈现方式以及 JavaScript 脚本语言。

（2） 实现基于标准的富 WebHTML 5 实现了富应用的新 API, 诸如图形 、 动画 、 多媒体， 在此之前需要通过 Flash 等各类插件实现这些功能， 使用上述插件技术不仅带来安全隐患， 而且限制了受众的范围。

HTML 5 提供的 audio 和 ideo 等标签为 Web 开发者们提供了嵌入媒体方面的极大便利， 尤其是采用中立的编码标准解放了浏览器厂商的开发自主性。

（3） 革新的结构HTML5 标准中引入了一整套新的元素 , 使建构网页更变得更容易。 使用这些元素具有明显的优点： 当与标题元素联同使用时， 产生了一种使用标题级别标记嵌套章节的方法，这将超过以前版本 HTML 的标题级别。

2 Web 富客户端网页设计方案

2.1 单页面开发模式

目前， Web 程序的界面开发模式有单页面和多页面两种，基于 HTML5 的 Web 富客户端实现 Web 单页面应用， 与 2.0版本的多页面应用相比， 单页面应用具有以下优点：

（1） 用户操作简单、 友好度高。

在单页面应用上， 添加、 修改等一些操作采用弹出层的方式实现， 而在多页面应用上， 甚至每一个具体的功能， 都需要跳转到一个新的页面完成， 当用户完成该操作时， 再返回到原始页面， 用户操作复杂， 友好度低。

（2） 易于开发、 维护本系统采用单页面的应用开发模式。 主页面布局如图 1所示。以下对各区域的功能进行解释。

1） 客户和登录用户信息区此区域的上部份由文字或图片展示系统当前部署到的客户的信息， 下部份展示系统当前的登录用户的欢迎信息。 此区域的信息不应该是静态的， 而应是根据系统的实际环境实时更新的。

2） 系统标题栏区此区域显示系统的标题， 如本系统的标题舜阳电压质量分析管理系统， 因为系统的标题是不会轻易更改的， 因此本区域可设计成静态区域。

3） 报警信息显示区此区域显示监测点的报警信息， 报警信息是由左自右滚动显示的， 并可自由配置文字颜色、 滚动速度、 显示条数，此区域的设计需要一定的伸缩性。

4） 常用功能区此区域是系统的常用功能集合， 包含 4 项功能： 系统设置、 密码修改、 用户注销、 切换主题。

5） 组织机构树形菜单区此区域是系统部署到的单位部门的树形菜单展示， 是可以收起和展开的， 其顶级部门是当前登录用户所属的部门， 即当前登录用户只能看到他所属部门以及下级部门的树形菜单展示， 无法看到上级部门和他的其他同级部门的树形菜单节点。

考虑到树形菜单可能会存在数千个节点， 此区域的设计应该要及其注意其性能， 并且应该提供一个供用户模糊搜索菜单节点的搜索框。

6） 主菜单和二级菜单区本系统的主菜单采用 Tab 菜单模式， 系统的每一个模块设置一个 Tab 菜单项， 每个 Tab 项包含一个二级菜单， 二级菜单可以是一个工具栏， 上面集成了该模块的一系列子模块，每个子模块是一个单独的页面， 点击某个二级菜单项时， 在应用区打开该项所代表的子模块页面。

7） 应用区应用区即是系统具体子模块的功能展示操作区域， 此区域以一个浮动框架的形式将一个单独的 HTML 页面包含进来，每单打开一个新的子模块时， 应该移除代表上一个子模块的浮动框架， 以避免主页面挂靠过多子页面， 造成浏览器假死。

根据以上功能以及区域位置的划分， 可以将主页面按功能区域划分为 3 个模块：

1） 顶部面板此模块是若干个小模块的集合， 其主要部分是常用功能区和报警信息显示区。

2） 左部部门树面板此模块的主要作用是实现部门节点的选择反选， 上下级部门节点的联动， 部门节点的模糊搜索， 向后台传递部门节点选择模型。

3） Tab 菜单面板Tab 菜单面板包含主菜单栏、 副菜单栏以及客户区。 其主要作用就是实现子页面的载入及移除， 实现系统权限控制的前台部分。

2.2 页面视图

此模块的作用主要是完成对以上各个模块的整合， 将一系列的功能模块组合成系统的主页面并负责显示。页面的设计图， 如图 2 所示。

2.3 后台架构

基于 HTML5 的 Web 富客户端系统采用 SSH2 架构， 针对网页处理数据量异常巨大， 导致对系统的资源要求非常苛刻，在非分布式的系统处理中， 采用 SSH2 架构容易出现性能瓶颈， 从而影响系统处理其他业务逻辑， 对系统的整体性能造成影响。 因此， 本系统采用两套架构方案， 基本架构和辅助架构。

系统的主要部分采用 SSH2 架构， 即 struts2+spring+hiber-nate, 系统在纵向上按业务流程划分为 3 个层 , Action 层 、Service 层和 Dao 层， 由 struts2 在 Action 层处理客户端请求并实现 MVC, hibernate 作为 Dao 层的 ORM 框架处理数据持久化方面的逻辑， spring 作为一个中间层的容器， 统一管理系统的业务逻辑。

系统遵循接口编程的原则， 所有的 Action、 Service 和 Dao都应该定义接口。 在纵向上划分为 Action、 Service 和 Dao 3 个层， 横向按功能模块划分， 每一个具体的子模块应该拥有其对应的 Action、 Service 和 Dao 层。 据此思想， 在子模块的子一级功能中， 应当对其进行封装， 以使各个不同的子功能之间不相耦合。 系统在 Service 层上应该使用 spring 的 AOP 机制实现系统的事务管理、 日志记录功能， 可以编写一个通用的Dao, 所有其他 Dao 都继承自此 Dao, 以减少 Dao 层的开发量。 系统后台的基本架构如图 3 所示。系统的辅助系统处理数据查询量大问题， 在非分布式的系统中， 使用上述架构容易导致资源枯竭造成系统崩溃， 故而数据查询模块不采用上述架构， 而采用传统的 servlet+jav-abean+jdbc 的架构模式。

采用传统的架构模式并不意味着就是最简单、 最基本的模式， 为了减少 jdbc 层的开发， 首先， 该辅助架构应该将 jd-bc 操作封装成 jdbc 模板 , 提供 ResultSet 到 Java 集合的映射 ,以提供一个统一的数据集接口。 该数据集除了由 jdbc 操作从数据库中获取数据外， 还应提供一个外部接口， 用以构造该数据集。

由此可知对于该辅助架构， 它的底层是一个数据集的提供者， 该数据集提供者有两种方法获取数据集， 一是通过 jd-bc 接口从数据库中获取数据并将其转化为 Java 集合 , 二是通过外部接口设置其数据集。 数据集总是和模型一并存在的，有数据集就意味着有构成该数据集的模型， 辅助架构的数据集提供者必须是统一的、 通用的， 而数据模型肯定不是唯一的， 对于每一个不同的业务， 可能都会有一种不同的模型，因此， 对于该数据集提供者， 可以采用 Java 泛型设计模式。

比如 DataQuery 类有 3 个属性， list 属性表示该类所封装的数据集， 它可以是由 jdbc 操作从数据库中获取的， 也可以是由外部设置进来的； sql 属性表示当该 DataQuery 是由 jdbc方式构造时， 用以从数据库提取数据的 sql 语句； totalCount 属性表示数据集的大小。 DataQuery 类有 5 个方法， 其中两个构造方法， DataQuery （in sql: String） 构造方法表示该构造方法接收一条 sql 语句， 由 JDBC 方式构造该数据集， 当由此方式构造数据集时， 对数据的提取以及到 Java 集合的映射操作被封装在了 excute（） 方法中， 这是一个私有方法。 getData 和getAllData 方法顾名思义， 前者是返回原始数据集中指定位置、指定长度的新的数据集， 后者是返回整个原始数据集。

3 分层开发模式

基于 HTML5 的 Web 富客户端网页设计采用软件体系架构设计中常用的分层的设计方法， 分层的设计方法是软件体系结构设计中最为常见也最重要的一种方法， 从上到下分别是：表示层 （UI）、 业务逻辑层 （BLL）、 数据访问层 （DAL） 和数据层 （DL）。 4 层之间相互作用的关系图如图 4 所示。

采用分层的软件结构使开发人员可以只关注其中的某一层进行设计与开发， 可以降低层与层之间的依赖关系， 在需求变化时可以方便地用新的实现替换原有的层次实现， 更有利于软件结构的标准化和各层逻辑的复用， 也在很大程度上降低了后期软件维护的成本。

4 基于 HTML5 技术的表示层开发

表示层位于整个软件体系的最上层， 也是和用户关系最紧密的一层， 主要用于接收用户的输入数据、 页面操作等请求， 并把后台程序返回的数据和结果以适当的形式反馈给用户， 其主要作用是为用户提供一个友好的交互式操作界面。

由于 Web 监控软件采用 B/S 的设计模式， 所以系统中的表现层的主要形式是 Web 页面， 而在程序中的表现形式是ASPX 文件 . 在 Web 监控系统中需要通过大量的图表和曲线对生产运行数据进行显示， 因此采用最新的超文本语言版本HTML5 和 SVG 可缩放矢量图形 （Scalable Vector Graphics） 实现了更加良好的曲线与图表的显示效果， 同时为进一步地增加交互界面的可操作性， 可以选用第三方控件 Highcharts 和jqGrid 来实现软件平台中实时动态曲线和各种图表的显示。