基于EXTJS的WEB客户端访问权限设置的研究

摘要：该文对extjs技术的概念和特点作了简要介绍，通过对基于B/S结构的web客户端访问的一些问题进行分析，针对web客户端访问权限的问题提出解决方法，用实例来分析和说明用extjs技术对web客户端权限的设置的过程和其优越性。

关键词：EXTJS；web客户端；B/S结构；权限设置

中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)08-1826-03

The WEB-based Client EXTJS Set of Access Rights

YANG Zhu, SONG Shao-yun

(Yuxi Teachers College of Information Technology and Engineering, Yuxi 653100, China)

Abstract: The concept and characteristics of extjs technologies are briefly introduced, through based on B / S structure of the web client to access a number of issues analysis, for web client access solutions to the issues raised, with examples to analyze and Help with extjs web client technology to set the permissions process and its advantages.

Key words: EXTJS; web clients; B/S structure; permissions

随着Internet技术的不断发展和信息的高度集中，网络已经是人类生活中不可或缺的一部分。人们可以从网络上获取所需的各方面的知识和信息，如生活、学习、娱乐等，正是网络的这种重要性，才会让人们这么依赖。但是在人们如此依赖网络的同时，也随之带来了许多问题，许多不法之徒大肆的扰乱着网络次序，Web客户端为了限制无关人员的使用和破坏，对客户端采取权限设置的方式进行授权使用，是现在最重要和使用最频繁的一种方式。就web客户端的安全问题而言，本文提出了解决此问题的一种方法，即设置客户端权限，限制访问和浏览的权限。该方法基于extjs技术，并通过实例证明该方法的可行性。

1 EXTJS概述

1.1 extjs的概念

EXTJS技术[1]是一种兼容各种浏览器的开源JavaScript库，最开始时由YUI技术扩展而来的，它由JackSlocum开发，在开发过程中参考JavaSwing的机制组织面向对象的可视化组件，无论从UI界面设计、CSS样式的应用，对DOM的操作，到数据解析上的异常处理都算是一个JavaScript客户端技术的精品。

从应用的角度上说，extjs技术是一个用户界面库，它提供功能强大的组件库，实现Ajax一步刷新技术，并与DOM、CSS、HTML等技术结合在一起，实现更具有交互性的WEB应用。

Extjs技术用于在客户端常见丰富多彩的web应用程序界面，使B/S结构应用更具有活力性。它也可以用来开发RIA富客户端的Ajax应用，主要用于创建web客户端用户界面，是一个与后台服务器技术无关的Ajax应用。因此，extjs技术可以应用在.Net、Java、php等各种服务器端编程语言中。

1.2 extjs的优点

在众多的Ajax的框架中，extjs技术脱颖而出，不仅仅是由于它为用户提供优美的用户界面和功能强大的组件，这些组件数量繁多，数据存储机制安全可靠，通过使用该框架可以使web的开发使用到面向对象的特性，该框架的核心思想是通过JavaScript来动态创建页面的标记元素，从而使页面更灵活。Extjs最大的优势在于它将web应用程序的操作方式向传统桌面应用程序的操作方式进行转化甚至消除了这种差异，从根本上提高了用户的使用体验，使用extjs对浏览器没有任何要求可以说是一种绿色的富客户端实现方式，它提供了各种组件可以用更加标准的方式展示数据降低了开发难度。总的来说框架的结构优点在于[2]：

1）其架构简单，容易扩展。

2）控件比较完整。

3）数据管理与界面显示分离。

4）代码书写简单，容易掌握。

5）兼容各种浏览器。

1.3 extjs的主要功能

Extjs的主要功能包括[2]：对标准信息提示框的扩展、对标准表单的组件的扩展、支持版面及各种布局方式、提供了大量的工具类和工具方法、提供了增强的时间机制、提供美观实用的各种组件。

2 B/S结构

2.1 B/S的定义

B/S是Browser/Server的缩写，B/S结构指的就是浏览器和服务器结构。它是随着Internet技术的兴起的一种网络结构模式，对C/S结构的一种变化和改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。

2.2 B/S结构的优点

B/S结构最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件。只要有一台能上网的电脑就能使用，客户端零维护。系统的扩展非常容易，只要能上网，再由系统管理员分配一个用户名和密码，就可以使用了。甚至可以在线申请，通过公司内部的安全认证（如CA证书）后，不需要人的参与，系统可以自动分配给用户一个账号进入系统。

2.3 B/S架构软件的优势与劣势

B/S架构软件的优势与劣势有：维护和升级方式简单；成本降低，选择更多；应用服务器运行数据负荷较重。

3 extjs技术下web客户端访问权限的设置

现就基于个人管家――个人信息管理系统为实例，针对用户如何访问客户端的权限问题做简单介绍和探究。该软件是基于B/S结构上的管理系统，当用户登录时，必须输入用户名和密码登录，以下是用登录对话框的实现代码来说明有没有访问该客户端的权限。用户访问该系统时登录窗口的实现代码如下所示：

LoginForm = Ext.extend(Ext.form.FormPanel, {

mydisabled : false,

constructor : function(_cfg) {

if (_cfg == null) {

_cfg = {}

}

Ext.apply(this, _cfg);

LoginForm.superclass.constructor.call(this, {

layout : "form",

frame : true,

labelWidth : 55,

baseCls : "x-plain",

bodyStyle : "padding:10px;",

defaults : {

xtype : "textfield",

anchor : "92%"

},

items : [{

fieldLabel : "用户名",

emptyText : "请输入用户名",

disabled : this.mydisabled,

name : "uname",

blankText : "请输入用户名",

allowBlank : false

},{

fieldLabel : "密 码",

emptyText : "请输入密码",

disabled : this.mydisabled,

name : "upassword",

blankText : "请输入密码",

inputType : "password",

allowBlank : false

}]

}

);

},

mySubmit : function(_url) {

this.getForm().submit({

url : _url,

waitTitle : "正在登陆",

waitMsg : "登陆中,请稍等...",

success : this.onSuccess,

failure : this.onFailure,

scope : this

});

},

onSuccess : function(form, action) {

Ext.Msg.alert("提示","登录成功，正在跳转。。。。");

window.location.href = "main.jsp";

},

onFailure : function(form, action) {

Ext.Msg.alert("提示","登录失败");

}

});

LoginWindow = Ext

.extend(

Ext.Window,

{

loginForm: null,

constructor : function() {

this.loginForm=new LoginForm();

LoginWindow.superclass.constructor.call(this, {

width : 280,

closeAction : "hide",

plain : true,

title : "系统登录",

iconCls : "logIcon",

collapsible : true,

resizable : false,

closable : false,

boderStyle : "padding 5px;",

modal : true,

items : [this.loginForm],

buttonAlign : "right",

buttons : [ {

text : "登陆",

id : "b1",

handler : this.onLogin,

scope : this

}, {

text : "重置",

handler : this.onReset,

scope : this

}]

})

},

onLogin : function() {

this.loginForm.mySubmit("loginServlet");

},

onReset : function() {

this.loginForm.getForm().reset();

}

});

其运行结果的截图如图1所示。

4 总结

本文通过实例分析，提出了一种基于extjs技术如何对客户端访问权限设置的一种方法，有效地限制访问条件和访问人数，对网络的安全提供了一定的安全保障，通过该方法的研究，验证了该方法的实用，高效和安全的特性。

参考文献：

[1] 杨丽彬.基于EXTJS的可视化web页面设计工具的研究和开发[D].景德镇:景德镇陶瓷学院,2009.

[2] 黄灯桥,徐会生.Ext JS高级程序设计[J].北京:机械出版社,2010.

[3] 杨超宇.基于ExtJS的web系统中excel数据导入研究[J].微计算机信息,2010(28).

[4] 张银鹤,刘志国,张豪.JSP动态网站开发时间教程[M].2版.北京:清华大学出版社,2009.