现在我们就来看看我们的页面设计部分。首先是登陆页面logon.jsp：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>HR Manager Project</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/common.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">
Ext.onReady(function(){
Ext.get("logon").on("click", function(){
if(Ext.getDom("userName").value==""){
Ext.MessageBox.alert('提示', '请输入用户名！',function(){
Ext.get("userName").focus();
});
return;
}
if(Ext.getDom("passWord").value==""){
Ext.MessageBox.alert('提示', '请输入密码！',function(){
Ext.get("passWord").focus();
});
return;
}
var msg = Ext.get('msg');
msg.load({
url: 'logon.hr',
params: 'userName='+Ext.getDom("userName").value+'&passWord='+Ext.getDom("passWord").value,
text: '正在登陆...',
callback: function(oElement) {
if(oElement.dom.innerHTML=="success"){
oElement.dom.innerHTML="<font color='green'>验证成功，,请稍候...</font>";
window.setTimeout("window.location='index.jsp'", 200);
}
}
});
msg.show();
});
Ext.get("close").on("click",function(){
Ext.MessageBox.confirm('提示', '你确定要退出系统么?', function(button){
if(button=='yes'){
window.close();
}
});
});
});
</script>
</head>
<body class="logon-body">
<table class="logon-body-table">
<tr class="logon-body-table-tr">
<td class="logon-body-table-tr-td">
<div class="logon-body-table-tr-td-div">
<div class="logon-body-table-tr-td-div-div">
用户名&nbsp;:&nbsp;
<input type="text" id="userName" size="20" />
</div>
<div class="logon-body-table-tr-td-div-div">
密 码&nbsp;:&nbsp;
<input type="password" id="passWord" size="22" />
</div>
<div align="right" class="logon-body-table-tr-td-div-div">
<button id="logon">
登 陆
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button id="close">
关 闭
</button>
&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div id="msg" align="right"
class="logon-body-table-tr-td-div-message">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
下面是主页面index.jsp,主要用ExtJs构建，登陆成功后就可以进入，主要分为3个模块，员工管理，机构管理和用户管理。在员工管理里面，我们实现了对员工的CRUD并且分页显示员工信息：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>HR Manager</title>
<span style="font-size: 9pt; color: teal; font-family: Verdana;"><</spa | 
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡