第三十九章： 后台管理界面--导航栏设计
学习要点：
- 退出登陆
- 导航栏设计
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<div id="login">
<p>管理员账号：<input type="text" class="manager" id="textbox"></p>
<p>管理员密码：<input type="password" class="password" id="textbox"></p>
</div>
<div id="btn">
<a href="#" class="easyui-linkbutton">登陆</a>
</div>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
#login{
padding:6px 0 0 0;
}
p{
height:22px;
line-height:22px;
padding:4px 0 0 25px;
}
.textbox{
height:22px;
padding:0 2px;
}
#btn{
text-align:center;
}
.easyui-linkbutton{
padding:0 10xp;
}
$(function(){
$('#login').dialog({
title:'后台管理',
width:300px,
height:180px,
modal:true,
iconCls:'icon-login',
buttons:'#btn',
});
//管理员账号验证
$('#manager').validatebox({
required:true,
missingMessage:'请输入管理员账号：',
invalidMessage:'管理员账号不得为空',
});
//管理员密码验证
$('#password').validatebox({
required:true,
validType：'length[6,30]',
missingMessage:'请输入管理员密码：',
invalidMessage:'管理员密码不得为空',
});
//加载时判断验证
if(!$('#manager').validatebox('isValid')){
$('#manager').focus();
}else if(!$('#password').validatebox('isValid')){
$('#password').focus();
}
//单击登陆
$('#btn a').click(function(){
if(!$('#manager').validatebox('isValid')){
$('#manager').focus();
}else if(!$('#password').validatebox('isValid')){
$('#password').focus();
}else{
$.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 = ($_POST['password']);
$query = mysql_query("SELECT id FORM 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;
}
?>
//admin.php
<?php
session_start();
if(!isset($_SESSION['admin'])){
header(location:login.php);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="css/admin.css"/>
</head>
<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" style="height:180px;padding:10px;"></div>
<div data-options="region:'center'" style="overflow:hidden;">
<div id="tabs">
<div title="起始页" style="padding:0 10px;display:block;">欢迎来到后台管理系统</div>
</div>
</div>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/admin.js"></script>
</body>
</html>
$(function(){
$('#tabs').tabs({
fit:true,
border:false,
});
});
<!-- admin.css -->
.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 15xp 0 0;
color:#fff;
}
a{
color:#fff;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
//logout.php
<?php
session_start();
session_destroy();
header('location:login.php');
?>
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/103922695
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载