ExtJS实战(7)-登陆

最新推荐文章于 2010-12-02 22:06:00 发布

最新推荐文章于 2010-12-02 22:06:00 发布 · 101 阅读

文章标签：

#EXT #Struts #JavaScript #CSS #应用服务器 #ViewUI

本文介绍了一个使用ExtJS实现的简单登录应用实例，包括前端页面和表单的设计，以及后端Struts框架处理登录请求的过程。

上篇文章我们已经把最核心的ExtJS代码贴出来了。慢慢消化着，我们先来一个完整的登陆应用。登陆页面如下：

1.login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</chmetcnv>//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

2.其中使用到的login.js

Ext.onReady(function() {

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// 使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

// 定义表单

var login = new Ext.FormPanel({

labelWidth : 75,

monitorValid : true,// 把有formBind:true的按钮和验证绑定

baseCls : 'x-plain',

defaults : {

width : 150

defaultType : 'textfield',// 默认字段类型

// 定义表单元素

items : [{

fieldLabel : '帐户',

name : 'login.uname',// 元素名称

// anchor:'95%',//也可用此定义自适应宽度

allowBlank : false,// 不允许为空

blankText : '帐户不能为空!'// 错误提示内容

}, {

inputType : 'password',

fieldLabel : '密码',

// anchor:'95%',

name : 'login.upass',

allowBlank : false,

blankText : '密码不能为空!'

}],

buttons : [{

text : '登陆',

formBind : true,

type : 'submit',

// 定义表单提交事件

handler : function() {

if (simple.form.isValid()) {// 验证合法后使用加载进度条

Ext.MessageBox.show({

title : '请稍等',

msg : '正在登陆...',

progressText : '',

width : 300,

progress : true,

closable : false,

animEl : 'loading'

});

// 控制进度速度

var f = function(v) {

return function() {

var i = v / 11;

Ext.MessageBox

.updateProgress(i, '');

};

for (var i = 1; i < 12; i++) {

setTimeout(f(i), i * 150);

}

// 提交到服务器操作

url : 'login.do',// 文件路径

method : 'post',// 提交方法post或get

params : '',

// 提交成功的回调函数

success : function(form, action) {

if (action.result.msg == 'ok') {

window.location = 'index.jsp';

} else {

Ext.Msg

.alert(

'登陆失败',

action.result.msg);

}

// 提交失败的回调函数

failure : function() {

Ext.Msg.alert('错误',

'服务器出现错误请稍后再试！');

}

});

}

}, {

text : '取消',

handler : function() {

}// 重置表单

}]

});

// 定义窗体

var win = new Ext.Window({

id : 'loginWin',

title : '用户登陆',

layout : 'fit', // 布局方式fit，自适应布局

width : 300,

height : 150,

modal : true,

plain : true,

bodyStyle : 'padding:5px;',

maximizable : false,// 禁止最大化

closeAction : 'close',

closable : false,// 禁止关闭

collapsible : true,// 可折叠

plain : true,

buttonAlign : 'center',

items : login

// 将表单作为窗体元素嵌套布局

});

win.show();// 显示窗体

});

看了上篇文章中的JS代码，这里的登陆JS真是小巫见大巫，简单的不行。我们看到，上面主要是一个窗口和一个表单，这个表单提交的URL为login.do,那我们服务器端就要一个Action组件来对此进行响应。接下来我们就来看下服务器端的代码：

package org.leno.houseHire.action;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.leno.houseHire.service.ILoginService;

import org.leno.houseHire.service.LoginDTO;

public class LoginAction extends Action {

private ILoginService loginService;

public void setLoginService(ILoginService loginService) {

this.loginService = loginService;

}

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response) throws Exception {

response.setCharacterEncoding("utf-8");

PrintWriter pw = response.getWriter();

LoginForm lForm = (LoginForm) form;

LoginDTO dto = lForm.getLogin();

boolean flag = loginService.valid(dto);

if(flag){

request.getSession().setAttribute("USER_INFO", dto);

pw.print("{success:true,msg:'ok'}");

}else{

pw.print("{success:true,msg:'用户名或密码错误！'}");

}

return null;

}

这里有几个地方要提醒下大家，首先是我们这里的Action也是利用Service做事，所以是由Spring来管理的，其次，我们依然采用实体DTO对象做ActionForm的属性，最后，也是最重要的一点，结合客户端的回调代码分析，要清楚服务器端返回给客户端的是一个JSON对象！这里使用到的其它JAVA类如下：

1.数据访问层（DAO及其实现）

package org.leno.houseHire.dao;

public interface ILoginDAO {