`
coral0212
  • 浏览: 101428 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

简单的ext 登录界面 (含验证码)

    博客分类:
  • UI
阅读更多

以下是一个简单的 ext 登录界面:

 

    1.   login.jsp

 

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv='Expires' content='-10'>
<meta http-equiv='Pragma'  content='No-cache'>

<title>系统登录</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ext-all.css" />
	<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/mycss.css" />
 	<script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/ext-base.js"></script>
    <script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/ext-all.js"></script>
    <script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/ext-lang-zh_CN-min.js"></script>
    <script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/login.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/grid-examples.css" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/examples.css" />
<style type="text/css">
.user{ background:url(../images/user.gif) no-repeat 1px 2px; }
.key{ background:url(../images/key.gif) no-repeat 1px 2px; }
.user,.key,.key{background-color:#FFFFFF;padding-left:20px;font-weight:bold;color:#000033;}
</style>
</head>
<body>

</body>
</html>	
 
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv='Expires' content='-10'>
<meta http-equiv='Pragma'  content='No-cache'>

<title>系统登录</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/ext-all.css" />
	<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/mycss.css" />
 	<script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/ext-base.js"></script>
    <script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/ext-all.js"></script>
    <script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/ext-lang-zh_CN-min.js"></script>
    <script type="text/javascript" charset="gb2312" src="<%=request.getContextPath() %>/js/login.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/grid-examples.css" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/examples.css" />
<style type="text/css">
.user{ background:url(../images/user.gif) no-repeat 1px 2px; }
.key{ background:url(../images/key.gif) no-repeat 1px 2px; }
.user,.key,.key{background-color:#FFFFFF;padding-left:20px;font-weight:bold;color:#000033;}
</style>
</head>
<body>

</body>
</html>	

 

    2. login.js   (EXT 部分,  核心代码)

 

Ext.QuickTips.init();
LoginWindow=Ext.extend(Ext.Window,{
		title : '登陆系统',        
		width : 265,            
		height : 170,        
		collapsible : true,
		defaults : {            
			border : false
		},
		buttonAlign : 'center',    
		createFormPanel :function() {
				return new Ext.form.FormPanel( {
					bodyStyle : 'padding-top:6px',
					defaultType : 'textfield',
					labelAlign : 'right',
					labelWidth : 55,
					labelPad : 0,
					frame : true,
					defaults : {
					allowBlank : false,
					width : 158
					},
					items : [{
							cls : 'user',
							name : 'username',
							fieldLabel : '帐号',
							blankText : '帐号不能为空'
						}, {
							cls : 'key',
							name : 'password',
							fieldLabel : '密码',
							blankText : '密码不能为空',
							inputType : 'password'
						}, {
							cls : 'key',
							name:'randCode',
							id:'randCode',
							fieldLabel:'验证码',
							width:80,
							blankText : '验证码不能为空'
					}]
				});
		},
		///登录
		login:function() {
			this.fp.form.submit({
				waitMsg : '正在登录......',
				url : 'login.do',   
				method : 'POST',  
				success : function(form, action) {
					//Ext.Msg.alert('操作', action.result.data);    
					window.location.href = '/Lich/jsp/a.jsp';
					 
				},
				failure : function(form, action) {
					form.reset();
					if (action.failureType == Ext.form.Action.SERVER_INVALID)
			  		Ext.MessageBox.alert('警告', action.result.errors.msg);
				}
			});
		},
		
		///注册
		regedit:function(){
			window.location.href = "/Lich/jsp/regedit.jsp";
		},
		
		initComponent : function(){
			this.keys = {
					key : Ext.EventObject.ENTER,
					fn : this.login,
					scope : this
			};	
			LoginWindow.superclass.initComponent.call(this);       
			this.fp=this.createFormPanel();
			this.add(this.fp);
			this.addButton('登陆',this.login,this);
			this.addButton('重置', function(){this.fp.form.reset();},this);
			this.addButton('注册',this.regedit,this);
		}     
}); 

Ext.onReady(function(){              
var w = new LoginWindow();
w.show();    
var bd = Ext.getDom('randCode');   
var bd2 = Ext.get(bd.parentNode);  
bd2.createChild([{tag:'span',html:'     '},{tag: 'img', src: 'image.jsp',align:'absbottom'}]);                               
});

 

 

    3.    image.jsp    ( 这部分用于生成验证码)

 

<%@ page contentType="image/jpeg" import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>
<%!
Color getRandColor(int fc,int bc){//给定范围获得随机颜色
Random random = new Random();
if(fc>255) fc=255;
if(bc>255) bc=255;
int r=fc+random.nextInt(bc-fc);
int g=fc+random.nextInt(bc-fc);
int b=fc+random.nextInt(bc-fc);
return new Color(r,g,b);
}
%>
<%
//设置页面不缓存
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);

// 在内存中创建图象
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文
Graphics g = image.getGraphics();

//生成随机类
Random random = new Random();

// 设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);

//设定字体
g.setFont(new Font("Times New Roman",Font.PLAIN,18));

//画边框
//g.setColor(new Color());
//g.drawRect(0,0,width-1,height-1);

// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x,y,x+xl,y+yl);
}

// 取随机产生的认证码(4位数字)
String sRand="";
for (int i=0;i<4;i++){
String rand=String.valueOf(random.nextInt(10));
sRand+=rand;
// 将认证码显示到图象中
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成
g.drawString(rand,13*i+6,16);
}

// 将认证码存入SESSION
session.setAttribute("rand",sRand);

// 图象生效
g.dispose();
OutputStream output=response.getOutputStream();

// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());
output.flush();
out.clear();
out = pageContext.pushBody();

%>
 

    1bf81b66-dd0f-3438-8490-cd79bcba5910-thumb

 

分享到:
评论

相关推荐

    EXT登陆验证码

    EXT登陆验证码是一种安全机制,常用于网络应用中增强用户账户的安全性。在登录过程中,EXT验证码的目的是防止恶意机器人、自动化脚本或者未经授权的第三方尝试非法访问用户的账号。EXT可能是EXTension的缩写,暗示这...

    ext4.1登陆界面

    描述中的"ext4.1简单的登陆界面 包含login.jsp 验证码.jsp"进一步说明了这个登录系统的基本构成。`login.jsp`是JavaServer Pages(JSP)文件,这是一种动态网页技术,用于处理用户登录请求,将用户的输入与服务器端...

    extjs 登陆页面+验证码

    我们可以利用ExtJS的`Ext.util.Random`类生成随机字符串作为验证码,并显示在一个`Ext.field.Text`组件中。同时,还需要一个图片展示验证码图像,这可以通过动态生成并返回图像的服务器端脚本来实现,客户端则使用`...

    ssh+extjs全注解登陆实现,包含验证码和记住用户名等

    4. **ExtJS组件**:熟悉ExtJS的表单组件,如`Ext.form.Panel`,以及如何使用`Ext.form.field.Text`、`Ext.form.field.Checkbox`等构建登录界面。 5. **前端验证**:使用ExtJS内置的验证功能,对用户输入的数据进行...

    163邮箱批量登录 免验证码

    3. `ex_directui.ext`:可能是一个扩展文件,可能与`exdui.dll`有关,提供了DirectUI相关的功能,DirectUI是Windows编程中用于创建现代、自定义用户界面的一种技术。 4. `导入格式.txt`:这是一个文本文件,很可能...

    ext+struts2整合实现登陆

    在IT行业中,Web开发是一个重要的领域,而Struts2和EXT是两个常用的技术框架。本文将详细介绍如何将它们整合以实现一个登录功能。 Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它极大地...

    extjs实现登陆验证

    2. **添加验证码图片**:为了展示验证码,代码中使用`Ext.getDom`获取到了验证码输入框的DOM元素,并在其父节点中插入了一张图片,图片的源地址指向了`code.php`,这是一个后端生成随机验证码的脚本。 3. **表单...

    基于Vue+SpringBoot实现的通讯录管理系统源码+项目说明(课程设计).zip

    首先是 ExtJS 版本的登陆页,是暗黑风格的登陆模块,登陆界面需要输入标准三大套件:账号、密码、验证码,如下所示。 ![输入图片说明](image/ext/1.png) 当然也有注册页面,注册就要多填一些数据,实现逻辑大致...

    ExtJs登陆验证(ASP后台)

    它的组件模型和丰富的UI控件为开发人员提供了创建复杂、交互式的用户界面的能力。在登录验证场景中,ExtJs通常用于设计登录表单,包括输入框(用户名和密码)、提交按钮以及可能的错误提示区域。例如,可以使用`Ext....

    KODExplorer 芒果云-资源管理器

    - 你可以把他当做管理linux的一个操作系统界面 - 可以用来作为私有云存储系统,存储你的文件... - 当然你也可以用来分享文件 - Web IDE / browser code editor awesomeness - 更多场景等你来挖掘!…… #### 3....

Global site tag (gtag.js) - Google Analytics