本章我们开始进行后台管理界面的设计，本节课设计一下登录后的管理页。
一． 登录验证
首先，创建一个数据库：easyui；
其次，创建一个表：easyui_admin；
然后，创建三个字段：id(自动编号)、manager(管理员帐号)、password(管理员密
码)、create(创建时间)。
//服务器端验证
$.ajax({
url : \'checklogin.php\',
type : \'POST\',
data : {
manager : $(\'#manager\').val(),
password : $(\'#password\').val(),
},
beforeSend : function () {
$.messager.progress({
text : \'正在尝试登录...\',
});
},
success : function(data, response, status){
$.messager.progress(\'close\');
if (data > 0) {
location.href = \'admin.php\';
} else {
$.messager.alert(\'登录失败！ \',\'用户名或密码错误！ \',\'warning\',
function () {
$(\'#password\').select();
});
}
}
});
//checklogin.php
<?php
session_start();
require \'config.php\';
$manager = $_POST[\'manager\'];
$password = sha1($_POST[\'password\']);
$query = mysql_query("SELECT id FROM easyui_admin WHERE
manager=\'$manager\' AND password=\'$password\' LIMIT 1") or die(\'SQL 错误！\');
if (!!mysql_fetch_array($query, MYSQL_ASSOC)) {
$_SESSION[\'admin\'] = $manager;
echo 1;
} else {
echo 0;
}
?>
二． 管理页设计
<?php
session_start();
if (!isset($_SESSION[\'admin\'])) {
header(\'location:login.php\');
}
?>
<body class="easyui-layout">
<div data-options="region:\'north\',title:\'header\',
split:true,noheader:true" style="height:60px;background:#666;">
<div class="logo">后台管理</div>
<div class="logout">
您好，<?php echo $_SESSION[\'admin\']?> | <a href="logout.php">
退出</a>
</div>
</div>
<div
data-options="region:\'south\',title:\'footer\',split:true,noheader:true"
style="height:35px;line-height:30px;text-align:center;">
©2009-2015 瓢城 Web 俱乐部. Powered by PHP and EasyUI.
</div>
<div data-options="region:\'west\',title:\' 导 航
\',split:true,iconCls:\'icon-world\'" style="width:180px;padding:10px;">
<ul id="nav"></ul>
</div>
<div data-options="region:\'center\'" style="overflow:hidden;">
<div id="tabs">
<div title=" 起 始 页 " iconCls="icon-house" style="padding:0
10px;display:block;">
<p>欢迎来到后台管理系统！</p>
</div>
</div>
</div>
$(\'#tabs\').tabs({
fit : true,
border : false,
});
.logo {
width:180px;
height:50px;
line-height:50px;
text-align:center;
font-size:20px;
font-weight:bold;
float:left;
color:#fff;
}
.logout {
float:right;
padding:30px 15px 0 0;
color:#fff;
}
a {
color:#fff;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}