第三十九章： 後臺管理界面--管理頁設計
學習要點：
- 登陸驗證
- 管理頁設計
一、登陸驗證：
首先，創建一個數據庫：easyui
其次，創建一個表：easyui-admin
然後，創建三個字段，id（自動編號）、manager（管理員賬號）、password（管理員密碼）、create（創建時間）
<!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;
}
?>
<!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>
//admin.php
<?php
session_start();
if(!isset($_SESSION['admin'])){
header(location:login.php);
}
?>
$(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;
}
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103922695
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載