|
第二步：
上一篇博文我们已经把POJO类建立好了，现在我们可以发挥我们一贯的懒人作风，呵呵，继续用IDE生成我们的DAO类（实际开发中不推荐这样做，当然我们生成之后还是要修改的） 好了，为了节约空间，这里就不贴代码了，现在的程序架构如下：
好了，现在基本准备工作已经完毕，因为我们使用EXT作为视图层，现在我们可以开始设计视图层了。
EXT的基本知识我这里也不再复述了，直接贴代码吧，我们首先需要一个实现一个登录窗体，页面代码如下：
login.jsp:(我们现在把这个页面放到/WEB-INF/views/目录下面，这里用到的资源文件我会在下面提供下载，randomImgCode.do 是一个生成验证码的action，我会直接在下面的源码中提供，具体实现大家可以看看我的源码。)
Html代码
  
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易便签系统 - 用户登录</title>
<link rel="stylesheet" href="css/skin.css" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
</head>
<body>
<!--loading加载 -->
<div id="loadingTab">
<div class="loading-indicator">
<img src="js/ext/resources/images/default/shared/large-loading.gif"
width="32" height="32"
style="margin-right: 8px; float: left; vertical-align: top;" />
简易便签系统-
<span id="loading-yfo"><a href="mailto:huangking124@163.com"
target="_blank">开发：黄磊</a> </span>
<br />
<span id="loading-msg">加载样式表和图片...</span>
</div>
</div>
<link rel="stylesheet" type="text/css"
href="js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="js/ext/resources/css/xtheme-gray.css" />
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script>
<!--加载EXT核心文件-->
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/locale/ext-lang-zh_CN.js"
charset="utf-8"></script>
<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>
<!--加载自定义组件-->
<script type="text/javascript" src="js/Login.js"></script>
<script type="text/javascript">
$('loading-msg').innerHTML = '初始化完毕！！';
Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失
</script>
<div class="x-hide-display" id="imagecode">
<img src="randomImgCode.do" title="看不清楚,刷新验证码" id="checkimg"
onclick="javascript:this.src='randomImgCode.do?t='+Math.random();"
style="border-width: 0px; cursor: hand;" />
</div>
</body>
</html>
login.js:（这里面的几个提交地址是暂时写上的，以后会用到） Js代码
/**
* 登录界面
* 作者：黄磊
*/
Ext.namespace('MyNote');
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = "js/ext/resources/images/default/s.gif";
MyNote.Login = function() {
this.init();
};
Ext.extend(MyNote.Login, Ext.util.Observable, {
init : function() {
var loginwindow = new Ext.Window({ //登录窗体
iconCls : 'key',
title : '用户登录',
height : 220,
width : 290,
closable : false,
resizable : false,
border : false,
modal : true,
items : [new Ext.FormPanel({
id : 'loginform',
bodyStyle : 'padding-top:6px',
labelWidth : 55,
frame : true,
labelAlign : 'right',
items : [new Ext.form.FieldSet({
autoHeight : true,
autoWidth : true,
bodyStyle : 'padding:5px',
title : '用户登录',
style : 'margin:5px',
items : [new Ext.form.TextField({
allowBlank : false,
itemCls : 'user',
blankText : '账号不能为空',
name : 'username',
fieldLabel : '账 号'
}), new Ext.form.TextField({
allowBlank : false,
itemCls : 'key',
blankText : '密码不能为空',
inputType : 'password',
name : 'userpwd',
fieldLabel : '密 码'
}), new Ext.Panel({
layout : 'column',
items : [new Ext.Panel({
bodyStyle : 'align:left;',
width : 130,
layout : 'form',
items : [new Ext.form.TextField({
allowBlank : false,
itemCls : 'key2',
blankText : '验证码不能为空',
width : 60,
name : 'checkcode',
fieldLabel : '验证码'
})]
}), new Ext.Panel({
bodyStyle : 'align:right;',
contentEl : 'imagecode'
})]
})]
})],
buttons : [new Ext.Button({
text : '登 录 系 统',
type : 'submit',
listeners : {
click : function() {
var login = Ext.getCmp('loginform');
if (login.form.isValid()) {
login.form.submit({
waitMsg : '正在登录......',
url : 'main.do?cmd=login',
success : function(form, action) {
form.reset();
functions.waitBar('请稍后','正在加载系统...');
window.location.href = 'page.do?cmd=main';
},
failure : function(form, action) {
form.reset();
Ext.MessageBox.show({
title : '错 误',
msg : action.result.msg,
buttons : Ext.Msg.OK,
icon : Ext.MessageBox.ERROR
});
Ext.getDom("checkimg").src = "randomImgCode.do?t="
+ Math.random();
}
});
} else {
Ext.MessageBox.show({
title : '警 告',
msg : '您的输入有问题,请检查后提交!',
buttons : Ext.Msg.OK,
icon : Ext.MessageBox.WARNING
});
}
}
}
}), new Ext.Button({
text : '重 置 输 入',
type : 'reset',
listeners : {
click : function() {
Ext.getCmp("loginform").form.reset();
}
}
})]
})]
});
loginwindow.show();
}
});
Ext.onReady(function() {
login = new MyNote.Login();
});
好了，JSP文件里面的EXT路径大家可以修改成你们自己的，刚才我们是把login.jsp文件放在了/WEB-INF/views/目录下面，那我们该怎么去访问呢？
现在我们就开始切入下一步。
第三步：
首先我们在包lonlysky..mynote下建立一个类BaseAction，用于客户端请求处理的基类 大家可能要问，问什么要建立一个这样的ACTION呢？其实大家有没有想过，当我对客户端的一些公共的处理方法，比如获取会话中的用户信息，判断用户是否登录等等的在所有ACTION都要做的事情都放到这个基类来实现，然后其他ACTION都继承此类，那么不是可以减少很多的代码吗？而且做了SSH整合之后，STRUTS1的ACTION也实现了非单例运行模式（基于线程安全），这样做就会有很多的好处了，在这个教程后面我们可以明显的感受到，当然这只是我个人的一个想法，大家如果有更好的意见或者建议欢迎拍砖。
Java代码
/**
* 客户端处理基类
*
* @author 黄磊
*
*/
public class BaseAction extends DispatchActionSupport {
}
那么下面我们需要做的就是如何才能访问到我们刚才写的登录界面，我个人的想法是单独写一个ACTION来用作页面的跳转
那么，我们就在包lonlysky..mynote.action下建立一个，PageAction，我们需要的是继承自我们刚才写好的BaseAction
Java代码
/**
* 本ACTION用于页面跳转
*
* @author 黄磊
*
*/
public class PageAction extends BaseAction {
// 跳转用户登录界面
public ActionForward login(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
return mapping.findForward("login");
}
}
既然写了Action，那么我们现在要做的就是配置struts-config.xml文件，我们需要在全局跳转处加入我们的login.jsp页面，然后配置我们的PageAction Xml代码
<global-forwards> <!-- 登录跳转 --> <forward name="login" path="/WEB-INF/view/login.jsp" /> </global-forwards> <action-mappings> <action path="/randomImgCode" type="lonlysky..mynote.action.RandomImgCodeAction" /> <!-- 页面跳转Action --> <action path="/page" type="lonlysky..mynote.action.PageAction" parameter="cmd" /> </action-mappings>
好了，现在我们可以运行调试我们的项目并预览效果了
启动服务器后我们可以尝试访问 http://localhost:8080/mynotepro/page.do?cmd=login
如果一切正常我们就可以看到如下效果
（未完待续）
本小结项目源码下载（因为空间限制，所以我删除了所有的JAR架包）
|
|
|
