后台管理界面--管理页设计

本章我们开始进行后台管理界面的设计，本节课设计一下登录后的管理页。

一．登录验证
首先，创建一个数据库：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;
}

转载于:https://www.cnblogs.com/qinsilandiao/p/5018053.html

后台管理界面--管理页设计相关推荐

APP界面引导页设计注意事项
海淘科技与你分享<APP界面引导页设计注意事项> 一.什么内容需要引导 1. 产品特色展示产品的核心竞争力及最有特色的点,让用户清晰地了解该产品和同类产品相比最突出的优势,有一个良好的第 ...
Easyui后台管理界面设计
1 Easyui 后台管理界面登陆设计 @{Layout = null; }<!DOCTYPE html><html> <head><meta name=&q ...
基于bootstrap的漂亮网站后台管理界面框架汇总
基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...
微擎人人商城对接京东vop 对接京东商品，同步商品地址，库存，价格，上下架等。（二）上设置后台管理界面...
昨天提到了,由于vop商品池未开通,故对接工作只能暂缓,现在要做一个专门针对vop商品的后台管理, 老规矩,先上设计链路图因为后台本来就是有比较完善的商品管理系统, 所以我们只是针对vop 进行简单 ...
P15-Vue3后台管理系统-用户管理界面-table表格封装
P15-Vue3后台管理系统-用户管理界面-table表格封装 1.概述这篇文章继续介绍用户管理界面,在这篇文章中完成table表格封装 2.新建表格组件 2.1.新建CommonTable组件 2 ...
php后台幻灯片管理,制作后台管理界面、在线编辑器幻灯片.ppt
制作后台管理界面.在线编辑器幻灯片制作后台管理界面在线编辑器后台管理界面接PPT17(设置IIS,建立站点) 1.将压缩文件ewebeditor.rar放在admin中 2.右键eweb ...
吐血推荐50个高端大气上档次的后台管理界面模板
UI设计 | 2013-09-03 通过使用漂亮的管理面板你可以省掉很多的时间,同样,设计良好的界面也适合在移动终端上使用,从而减少对PC的依赖和提供管理的灵活性. 这里收集了50个高端大气上档次 ...
设备管理系统html,蓝色的远程监控设备系统后台管理界面html模板
模板名称: 蓝色的远程监控设备系统后台管理界面html模板模板页面: actions.html.add.html.apikey_manage.html.batch.html.change_passw ...
HDFS设计思路，HDFS使用，查看集群状态，HDFS，HDFS上传文件，HDFS下载文件，yarn web管理界面信息查看，运行一个mapreduce程序，mapreduce的demo
26 集群使用初步 HDFS的设计思路 l 设计思想分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: l 在大数据系统中作用: 为各类分布式 ...

后台管理界面--管理页设计

后台管理界面--管理页设计相关推荐

最新文章

热门文章