本章我们开始进行后台管理界面的设计，本节课设计一下登录后的管理页。
一． 登录验证
首先，创建一个数据库：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="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 {
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;
}