基于ExtJS的V**管理系统的设计与实现

摘要：基于ExtJS设计了一个V**管理系统，主要应用于配网安全防护系统中的主站加密装置，可实现对主站加密装置的参数配置及运行维护。由于应用要求，该管理系统需界面美观、响应迅速、用户体验佳，且稳定性强、易于维护。综合对比分析多种JS框架，采用了Ajax开发框架——ExtJS作为前端开发框架，同时服务端选用简洁轻巧的网页开发语言PHP，再结合轻量级的后台数据库，最终实现了一个高效易用的V**管理系统，实现了方便快捷地对主站加密装置进行管理及维护的目的。

正文内容：

0 引 言

为了优化界面性能并增强竞争力，越来越多的管理系统和网站陆续开始采用Ajax（Asynchronous JavaScript and XML）这种创建交互式网页的新型技术。ExtJS作为Ajax框架的优秀代表之一，应运而生。如今，一些主流的V**开发商提供的管理系统界面，或多或少都运用了Ajax技术。基于此，为满足客户需求、提升用户体验，配网主站端V**管理系统就采用了基于ExtJS框架的开发路线。

1 ExtJS概述

1.1 ExtJS简介

ExtJS是一个与后台技术无关的前端Ajax框架，主要用于创建UI（User Interface用户界面），也被用来开发RIA（富客户端）的Web应用。它是由JavaScript、CSS和HTML等技术实现的。

ExtJS起源于YUI。YUI全称为Yahoo! User Interface Library，是一个采用JavaScript编写的工具和控件库[1]。起先，YUI仅限在Yahoo内部使用。之后，随着源码开放，出现了相当多的YUI扩展。这些扩展中，公认较为突出的是Jack Slocum的YUI-Ext。YUI-Ext参考了Java Swing等工具组织可视化组件的机制。

2006年，Jack发行了最早的YUI-Ext版本。1年后，他正式将Ext更名为ExtJS。经过6年的发展，ExtJS已优化更新到现如今的4.1.1版本，功能日益强大，使用范围也越来越广。

1.2 ExtJS的优势

（1）ExtJS开发的Web界面美观丰富，能很好地满足用户体验，给B/S应用带来生命力和活力；

（2）ExtJS可用于.Net、Java、PHP等各种语言开发应用中；

（3）ExtJS使开发人员从大量的Web UI操作及跨浏览器处理工作中脱离出来，使开发变得快速、轻松。

2 管理系统的设计

配网主站装置管理系统用于提供关于主站装置的可视化系统操作及监测管理主要的V**性能参数。该系统采用的是现今流行的B/S（Browser/Server，即浏览器/服务器）开发模式。这种模式相当于基于Web的数据库浏览模式[2]。用户界面完全通过Web浏览器实现，且对客户端硬件要求不高，具有很强的开放性，易于扩展。

本文中的主站Web管理系统以PHP的开发框架——CI为骨架，分为客户端和服务器端两部分实现。客户端即前台界面，采用ExtJS框架构成；服务器端包括全部操作功能的实现，采用网页语言PHP来完成。

2.1 系统的总体设计

系统设计是系统开发的首要步骤。只有预先架构出一个理想的系统模型，系统的开发工作才能正常进行。

根据用户的各项需求，通过对系统的整体分析，设计了一个管理系统的总体模块结构，包括系统状态、系统管理、V**管理、防火墙策略、日志审计五大功能模块，如图1所示。

（1）系统状态

系统状态功能是向用户显示设备的基本信息及运行状态。此界面对不同权限的操作者均开放。

（2）系统管理

该模块提供系统主要的管理功能。用户管理功能包括对系统用户的添加、编辑和删除等操作。在此，对可登录的用户划分为系统管理员、配置管理员和审计管理员三个级别。系统管理员仅拥有操作系统管理模块的权限，配置管理员拥有操作V**管理和防火墙策略两大功能模块的权限，审计管理员仅拥有操作日志审计模块的权限。系统时钟功能则提供对系统时间的调整设置。系统维护功能分为配置、备份、重启、恢复出厂配置和升级等五项子功能。网络配置功能实现对主站装置相关网络参数的修改配置。

（3）V**管理

系统的V**管理是一个主要的功能模块。该模块中，用户须先导出证书请求，完成主站证书上传，并成功添加终端装置后才可顺利建立隧道和规则。整个V**管理模块的重点在于策略管理。

（4）防火墙策略

防火墙包括安全策略、IP/MAC绑定和攻击防御三大功能。安全策略功能包括安全策略的新建、编辑和删除等操作；IP/MAC绑定模块则实现对某一IP地址和相应MAC的绑定；攻击防御模块实现对防火墙配置的按需更改。

（5）日志审计

对系统相关日志的统计和查看是V**管理系统不可省略的功能。通常，用户比较关心通信日志和操作日志。因此，日志审计模块涵盖了通信日志审计和操作日志审计两个子模块。通信日志记录IPSEC隧道通信内容；操作日志记录用户对系统的一系列操作结果，分为错误日志和成功日志两类。

2.2 系统的详细设计

完成管理系统的整体设计后，要细化系统各个功能模块。功能细化设计的主要工作是找出各个功能模块的实现方案和具体每一步实现的目标等。其中，系统登录和系统操作流程设计为两个主要环节。现针对系统登录和系统操作两大方面进行简要阐述。

2.2.1 系统登录设计

整个管理系统中，执行所有功能模块的首要条件是规划设计出用户根据权限登录和操作的所有流程。本管理系统的登录设计，如图2所示。

用户在登录界面输入正确的用户名和登录口令，验证通过后，系统再根据其所赋予的权限进行判断，给出相应的可操作界面。系统的登录设计基于ExtJS界面框架、采用Ajax技术进行数据交互。

2.2.2 系统操作设计

该管理系统采用典型的三层模型结构，从下到上分别为数据访问层、业务逻辑层和表示层。其中，数据访问层规定后台数据库的操作方式；业务逻辑层主要负责对用户输入数据进行逻辑处理，并关联到对应的数据访问层执行操作；表示层主要负责各种用户系统界面的呈现，包括登录、系统管理、V**管理、防火墙等界面。

通过用户相关操作实现系统的功能模块，大大提高了系统操作设计的重要性，直接影响后期系统的实现。列出执行流程图能更清楚直观地了解常用的系统操作过程，在此以V**策略中隧道添加为例说明，如图3所示。

用户在进行隧道添加操作前，需先对主站加密装置进行证书初始化。成功导入证书后，再进行装置添加。切换到节点管理界面，此时呈现给用户的即表示层。执行添加终端装置操作时，业务逻辑层验证处理用户传来的数据后，交由底层的数据访问层进行数据存储。完成装置添加后，切换到策略管理界面执行新建隧道操作。对应三层之间的数据流向及交互关系，与添加装置操作相同。

3 管理系统的实现

系统的开发经历分析、设计后，进入到最后的实现阶段。本系统的实现分为物理环境实现、代码实现及数据库的实现。

3.1 物理环境实现

系统的物理环境是系统能否成功实现的基本保证。对于本系统，物理环境主要包括登录主机软硬件环境的配置。首先，需要正确配置主站装置中的系统软件；其次，应该考虑计算机配置与应用系统的兼容性，避免出现系统安装出错、运行故障等问题；最后，要求连接到主站装置控制端口的计算机操作系统设定为Windows XP。

3.2 代码实现

系统的全部代码运行在CI框架上，各功能模块的代码又分模块放置。代码模块中的模型（models）包括数据和对数据的操作，采用PHP语言编写。视图（views）即用户界面，选取ExtJS库中的组件构成，其中内嵌少许PHP代码。控制器（controllers）即对模型的操作，采用PHP语言编写。整个系统代码构成了MVC式的网站组织模式。在所有代码中，ExtJS构成的用户视图与后台操作基本无关，这就实现了视图与操作的分离，便于界面的维护。

由于IE浏览器自身对JS脚本解析慢，支持性较差，在此对官方发布的ExtJS代码进行了裁剪瘦身，并在代码中采用ExtJS4新增的按需加载机制加载JS文件，同时开启了Apache服务器的gzip压缩功能，以提高网页传输速率。如此，这将大大提高ExtJS在IE下的性能，使得网页响应变快，IE对其兼容性变强。

3.3 数据库的实现

后台数据库采用SQLite软件存储数据。它是一款轻型的数据库，占用内存低，支持多种操作系统，且能与PHP代码融合较好。

根据系统所包含的几大功能模块，共建立了用户、V**和日志三个数据库。对于参考界面中的功能细节划分，三个数据库中分别建立了相应的数据表，在此不作详述。

至此，基于ExtJS的主站装置管理系统全部实现完成，当然还包括系统测试、运行等后期工作，此处不再一一赘述。

4 结 语

通过对前端框架及服务端开发技术的预研分析，结合经典的系统架构，根据系统的功能需求及性能需求，在完成对各功能模块的具体设计及细化后的操作设计后，最终完成了整个主站加密装置管理系统的开发实现。本管理系统中，富客户端框架ExtJS与PHP语言完成了很好的配合，数据交互及用户体验良好。但是，由于ExtJS框架源码占用空间较大，依旧会耗费一定的解析加载时间。因此，后期会考虑对ExtJS实现功能定制，且进一步优化PHP与ExtJS的数据交互机制。