标签：js ria qooxdoo javascript
在我使用qooxdoo设计应用系统时，通过需要设计制作系统的登录入口，如果直接使用qooxdoo来制作有两个缺点，一个是登录界面个性化设计不太好做，另一个就是登录时加载速度问题，所以我在使用qooxdoo系统时通常将登录界面单位做成一个html文件，然后通过ajax来进行用户名称及密码的验证工作，如果验证通过使用js将页面地址指向qooxdoo的入口文件。通过这种方式就需要将登录的用户名称、用户ID等系统传递到qooxdoo中。我使用的方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>股份有限公司</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow:hidden;
}
.STYLE3 {color: #528311; font-size: 12px; }
.STYLE4 {
color: #42870a;
font-size: 12px;
}
</style>
<!--[if lte IE 10]><script type="text/javascript" src="script/json2.js"></script><![endif]-->
<script type="text/javascript" src="script/ajax.js"></script>
<script type="text/javascript" language="javascript">
window.onload = function() {
document.getElementById('LoginName').focus();
}
function AdminLogin() {
if (document.getElementById('LoginName').value=="") { alert('用户登录名称不能为空'); document.getElementById('LoginName').focus(); }
if (document.getElementById('LoginPWD').value=="") { alert('用户登录密码不能为空'); document.getElementById('LoginPWD').focus(); }
var ajax = Ajax('json');
ajax.post('./DataServices/common/VerifyLogin.php', {username:document.getElementById('LoginName').value,
userpwd:document.getElementById('LoginPWD').value}, function(data) {
var json=JSON.parse(data);
if (json.status == 1) {
switch (json.role) { //根据用户角色的不同登录到不同的qooxdoo系统中
case "1": //管理员
location.href='./Application.php';
break;
case "2": //普通用户
location.href='./common.php';
break;
default:
location.href='./index.php';
break;
}
} else {
alert(json.msg);
}
});
}
function ClearLoginInfo() {
document.getElementById('LoginName').value="";
document.getElementById('LoginPWD').value="";
document.getElementById('LoginName').focus();
}
function PwdKeypress(e) {
var keynum;
if(window.event) { //IE
keynum = e.keyCode
} else if(e.which) { // Netscape/Firefox/Opera
keynum = e.which
}
if (keynum == 13) { AdminLogin(); }
}
</script>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#e5f6cf"> </td>
</tr>
<tr>
<td height="608" background="./resource/link//login/login_03.gif"><table width="862" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="266" background="./resource/link//login/login_04.gif"> </td>
</tr>
<tr>
<td height="95"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="424" height="95" background="./resource/link//login/login_06.gif"> </td>
<td width="183" background="./resource/link//login/login_07.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" height="30"><div align="center"><span class="STYLE3">用户</span></div></td>
<td width="79%" height="30">
<input type="text" name="LoginName" id="LoginName" style="height:18px; width:130px; border:solid 1px #cadcb2; font-size:12px; color:#81b432;">
</td>
</tr>
<tr>
<td height="30"><div align="center"><span class="STYLE3">密码</span></div></td>
<td height="30"><input type="password" name="LoginPWD" id="LoginPWD" style="height:18px; width:130px; border:solid 1px #cadcb2; font-size:12px; color:#81b432;" onkeypress="PwdKeypress(event)"></td>
</tr>
<tr>
<td height="30"> </td>
<td height="30"><img src="./resource/link//login/dl.gif" width="81" height="22" border="0" usemap="#Map"></td>
</tr>
</table></td>
<td width="255" background="./resource/link//login/login_08.gif"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="247" valign="top" background="./resource/link//login/login_09.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="30"> </td>
<td width="56%"> </td>
<td width="22%"> </td>
</tr>
<tr>
<td> </td>
<td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="44%" height="20"> </td>
<td width="56%" class="STYLE4">版本 2014 V1.0 </td>
</tr>
</table></td>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#a2d962"> </td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="3,3,36,19" href="javascript:void(0)" onClick="AdminLogin()">
<area shape="rect" coords="40,3,78,18" href="javascript:void(0)" onClick="ClearLoginInfo()">
</map>
</body>
</html>
后台登录信息处理如下：
<?php
session_start();
include "../options/db_settings.php";
$UserName = $_POST['username'];
$UserPWD = $_POST['userpwd'];
$rs=$DBConn->Execute("select user_id,login_pwd,user_name,user_role,lk_department.dept_id,dept_name,dept_kind from lk_user_info,lk_department where lk_user_info.dept_id = lk_department.dept_id and login_name='" . $UserName . "'");
if (!$rs->EOF) {
if ($rs->fields['login_pwd'] == strtoupper(md5($UserPWD))) {
if (($rs->fields['dept_kind'] == 1) || ($rs->fields['dept_kind'] == 2)) {
$arr['status'] = 1;
$arr['role']=$rs->fields['user_role'];
$arr['msg'] = '';
$_SESSION['Logined'] =true;
$_SESSION['user_id'] =$rs->fields['user_id'];
$_SESSION['user_name']=$rs->fields['user_name'];
$_SESSION['user_role']=$rs->fields['user_role'];
$_SESSION['dept_id'] =$rs->fields['dept_id'];
$_SESSION['dept_name']=$rs->fields['dept_name'];
} else {
$arr['status'] = 0;
$arr['role']=0;
$arr['msg'] = '用户所在单位没有权限登录!';
}
} else {
$arr['status'] = 0;
$arr['role']=0;
$arr['msg'] = '登录密码错误,请重新输入!';
}
} else {
$arr['status'] = 0;
$arr['role']=0;
$arr['msg'] = '用户名称错误,请重新输入!';
}
echo json_encode($arr);
?>
而application.php是qooxdoo的入口文件index.html进行修改得到的，具体内容如下：
<?php
session_start();
if (isset($_SESSION['Logined']) && ($_SESSION['Logined'] == true)) {
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>林克(秦皇岛)供应链股份有限公司</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('DivWaiting').style.visibility = 'hidden';
}
window.qx = {
$$environment : {
"UserID" : "<?php echo $_SESSION['user_id']; ?>",
"UserName": "<?php echo $_SESSION['user_name']; ?>",
"UserRole": "<?php echo $_SESSION['user_role']; ?>",
"DeptID" : "<?php echo $_SESSION['dept_id']; ?>",
"DeptName": "<?php echo $_SESSION['dept_name']; ?>"
}
}
</script>
<script type="text/javascript" src="script/mqttws31.js"></script>
<script type="text/javascript" src="script/link.js"></script>
</head>
<body bgcolor="#e6ffce">
<div id='DivWaiting' style='Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%'>
<table width='100%' height='100%'>
<tr align='center' valign='middle'>
<td><img src="./resource/link/RLoading.gif"><br><b><font size="2" color="red">正在加载页面，请等待...</font></b></td>
</tr>
</table>
</div>
</body>
</html>
<?php
} else {
Header("Location: ./index.html");
}
?> this.setUserID(qx.core.Environment.get("UserID"));
this.setUserName(qx.core.Environment.get("UserName"));
this.setDeptID(qx.core.Environment.get("DeptID"));
this.setDeptName(qx.core.Environment.get("DeptName"));
this.setUserRole(parseInt(qx.core.Environment.get("UserRole")));
标签：js ria qooxdoo javascript
原文地址：http://blog.csdn.net/qhdcsj/article/details/42709413
