您的位置：首页 > Web前端 > JavaScript

ExtJS实战(7)-登陆

2008-12-22 00:37 134 查看

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

1.login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="resources/js/login.js"></script>
</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);
}

// 提交到服务器操作
login.form.doAction('submit', {
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() {
login.form.reset();
}// 重置表单
}]
});
// 定义窗体
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 {

public boolean valid(User user);
}
package org.leno.houseHire.dao;

import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;

public class LoginDAOImpl implements ILoginDAO {

private SessionFactory sessionFactory;

public void setSessionFactory(SessionFactory sessionFactory) {
this.sessionFactory = sessionFactory;
}

public boolean valid(User user) {
Session session = sessionFactory.openSession();
Query query = session.createQuery("from User u where u.uname=:name and u.upass=:pass");
query.setString("name", user.getUname());
query.setString("pass", user.getUpass());
Object obj = query.uniqueResult();
session.close();
if(obj!=null){
User user2= (User) obj;
user.setUid(user2.getUid());
return true;
}
return false;
}

}

2.服务层（Service及其实现）
package org.leno.houseHire.service;

public interface ILoginService {

public boolean valid(LoginDTO dto);
}
package org.leno.houseHire.service;

import java.lang.reflect.InvocationTargetException;

import org.apache.commons.beanutils.BeanUtils;
import org.leno.houseHire.dao.ILoginDAO;
import org.leno.houseHire.dao.User;

public class LoginServiceImpl implements ILoginService {

private ILoginDAO loginDAO;

public void setLoginDAO(ILoginDAO loginDAO) {
this.loginDAO = loginDAO;
}

public boolean valid(LoginDTO dto) {
User pojo = new User();
try {
BeanUtils.copyProperties(pojo, dto);
} catch (IllegalAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (InvocationTargetException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
boolean flag = loginDAO.valid(pojo);
if(flag){
dto.setUid(pojo.getUid());
}
return flag;
}

}

3.登陆应用的DTO（数据传输对象）
package org.leno.houseHire.service;

public class LoginDTO {

private Integer uid;
private String uname;
private String upass;

public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getUpass() {
return upass;
}
public void setUpass(String upass) {
this.upass = upass;
}

}

4.登陆应用的ActonForm（表现层的传值组件）
package org.leno.houseHire.action;

import org.apache.struts.action.ActionForm;
import org.leno.houseHire.service.LoginDTO;

public class LoginForm extends ActionForm {

private LoginDTO login = new LoginDTO();

public LoginDTO getLogin() {
return login;
}

public void setLogin(LoginDTO login) {
this.login = login;
}
}

如果用户登陆失败，将会继续停留在登陆页面，获得错误提示信息；如果登陆成功，那么就可以进入到系统首页index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/skin.js"></script>
<script type="text/javascript" src="resources/js/TabCloseMenu.js"></script>
<script type="text/javascript" src="resources/js/init-main.js"></script>
<style type="text/css">
.x-panel-body p {
margin: 5px;
}

.x-column-layout-ct .x-panel {
margin-bottom: 5px;
}

.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom: 5px;
}

.user {
background-image: url(resources/icons/user.gif) !important;
}

.unit {
background-image: url(resources/icons/application_view_list.png)
!important;
}

.settings {
background-image: url(resources/icons/cog.png) !important;
}

.tabs {
background-image: url(resources/icons/tabs.gif ) !important;
}
.munuList {
list-style: square;
padding-left: 30px;
margin-top: 10px;
color: #000000;
font-size: 12px;
text-decoration: underline;
cursor: hand;
}

#main-panel td {
padding: 5px;
}
</style>
</head>
<body>
<div id="toolbar-div"></div>
<div id="menus">
<div id="userMenus">
<ul class="munuList">
<li>
<span id="person" href="house/infos.jsp"
onclick="onClickMenuItem(this)">租房信息</span>
</li>
</ul>
</div>
<div id="unitMenus">
<ul class="munuList">
<li>
<span id="unit" href="unit/default.jsp"
onclick="onClickMenuItem(this)">机构信息</span>
</li>
</ul>
</div>
<div id="settingMenus">
<ul class="munuList">
<li>
<span id="userManager" href="system/default.jsp"
onclick="onClickMenuItem(this)">用户管理</span>
</li>
</ul>
</div>
<div id="msg">
<ul class="munuList">
<li>
<span id="readMsg" href="system/default.jsp"
onclick="onClickMenuItem(this)">阅读短信息</span>
</li>
<li>
<span id="sendMsg" href="system/default.jsp"
onclick="onClickMenuItem(this)">发送短信息</span>
</li>
<li>
<span id="searchMsg" href="system/default.jsp"
onclick="onClickMenuItem(this)">查询短信息</span>
</li>
</ul>
</div>
<div id="eMeeting">
<ul class="munuList">
<li>
<span id="meetingRoom" href="system/default.jsp"
onclick="onClickMenuItem(this)">电子会议室</span>
</li>
<li>
<span id="newMeetingRoom" href="system/default.jsp"
onclick="onClickMenuItem(this)">新建电子会议</span>
</li>
<li>
<span id="meetingManage" href="system/default.jsp"
onclick="onClickMenuItem(this)">电子会议管理</span>
</li>
</ul>
</div>
</div>

<div id="center">

</div>

<div id="afficheDiv">
<p>
尊敬的
<font color=green><B>LENO</B> </font> ,欢迎您使用房屋出租系统.
</p>
<p>
<img src="resources/images/ajax.bmp" width="600" height="400">

</p>
</div>
</body>
</html>

首页上面涉及到的JS，主要部分已经贴出来了。那么，结合init-main.js里的onClickMenuItem()函数，我们知道，还需要一个放frame的tabFrame.jsp页面，如下：
<%@ page language="java" pageEncoding="utf-8"%>
<IFRAME SRC="<%=request.getParameter("url")%>" width="100%" height="100%" frameborder="0"></IFRAME>

这样，我们就能将它和我们前面的表格串起来了，我们的登陆应用也完成了。效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航