前言：有段时间没更新了，把剩下的教程写完。还是老样子，上手敲代码。
本步骤主要知识点：
1、超全局变量$_SESSION应用保存登录状态，注意使用前必须session_start()
2、给普通密码加盐值，加强密码强度
3、注销登录，具体查看logout.php代码
1、模板
html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>留言表单后台登录_科科分享</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div class="row4 fix">
<div class="wp">
<div class="tit-i">
<h3>留言表单后台登录</h3>
<h5><span>FEEDBACK</span></h5>
</div>
<div class="login-r">
<form action="php/login.php" class="login-form" method="post">
<div class="">
<input type="text" class="inp l" name="login_name" placeholder="登录账号">
<input type="text" class="inp r" name="password" placeholder="登录密码">
</div>
<input type="submit" value="登录" class="sub">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css代码
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1, h2, h3, h3, h4, h5, h6 {
font-weight: normal;
}
body {
font-family:"微软雅黑", "Microsoft Yahei";
}
.wp {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
a {
color: #333;
}
a:hover {
color: #e4392a;
}
#hd {
/*height: 101px;*/
height: 90px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index:9999;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.tit-i {
text-align: center;
padding: 50px 0;
line-height: 36px;
overflow: hidden;
}
.tit-i h3 {
font-size: 30px;
color: #002;
margin-bottom: 10px;
}
.tit-i h5 {
font-size: 20px;
color: #cacace;
text-transform: uppercase;
font-family: Arial;
}
.tit-i h5 span {
color: #e4392a;
}
.tit-i em {
width: 45px;
border-bottom: 1px solid #7f7f90;
display: inline-block;
}
.login-l {
width: 38%;
float: left;
}
.login-r {
width: 50%;
margin: 0 auto;
}
.login-form .inp {
width: 49%;
border: 1px solid #6d6d88;
height: 33px;
padding: 0 10px;
margin-bottom: 15px;
}
.login-form textarea {
width: 100%;
border: 1px solid #6d6d88;
height: 98px;
margin-bottom: 24px;
}
.login-form .sub {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background-color: #63637f;
border: 0;
cursor: pointer;
font-family:"微软雅黑", "Microsoft Yahei";
font-size: 16px;
}
.list ul{
padding: 20px 0;
width: 50%;
margin: 0 auto;
}
.list .tit-i{
padding: 50px 0 10px 0;
}
.list ul li{line-height: 1.8em;color: #666;}
2、数据操作
--
-- 表的结构 `admin`
--
CREATE TABLE `admin` (
`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`login_name` varchar(128) NOT NULL COMMENT '登录账号',
`password` varchar(64) NOT NULL COMMENT '登录密码',
`salt` char(4) NOT NULL COMMENT '盐值，加强密码强度',
`addtime` int(10) UNSIGNED NOT NULL DEFAULT '0' COMMENT '记录时间',
PRIMARY KEY (`id`),
KEY `login_name` (`login_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='管理员数据表';
login.php
<?php
include 'config.php';
$login_name = !empty($_POST['login_name'])? addslashes(strip_tags($_POST['login_name'])):'';
$password = !empty($_POST['password'])?addslashes(strip_tags($_POST['password'])):'';
// 简单验证一下提交的数据
if (empty($login_name) || empty($password)) {
exit('请输入登录信息！');
}
$sql = "SELECT * FROM admin WHERE `login_name` = '{$login_name}' LIMIT 1";
$result = mysqli_query($mysqli, $sql);
$row = mysqli_fetch_array($result);
if (empty($row)) {
exit('账号密码错误！');
}
$res_password = $row['password'];
$password = md5(md5($password) . $row['salt']);
// 密码不匹配
if ($res_password != $password) {
exit('账号密码错误！'); // 为了程序的安全，这里不必具体提示密码错误，告知用户账号或密码错误即可。
}
// 登录成功，保存登录信息，一般都用session进行处理
session_start();
$_SESSION['login_admin_id'] = $row['id'];
$_SESSION['login_admin_name'] = $row['login_name'];
echo "<script type='text/javascript'>alert('登录成功');setTimeout(function(){location.href='/login_ok.php'}, 500)</script>";
login_ok.php
<?php
session_start();
include 'php/config.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>留言表单后台登录_科科分享</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div class="row4 fix">
<div class="wp">
<div class="tit-i">
您好，<?php echo $_SESSION['login_admin_name']?>，<a href="">退出</a>。
</div>
<div class="tit-i">
<h3>您已登录后台中心！</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<a id="logout">logout.php</a>
<?php
session_start();
unset($_SESSION['login_admin_id']);
unset($_SESSION['login_admin_name']);
session_destroy();
echo "<script type='text/javascript'>alert('注销登录成功');setTimeout(function(){location.href='/login.html'}, 500)</script>";
3、测试
养成好习惯，简单测试一遍，再提交工作。
登录页面
image.png
登录成功后的页面
image.png
4、总结
这节知识点就一个session，抓住用法，你离高大上的云后台不远了。
切记多动手敲代码，一味复制粘贴达不到学习效果的~
网友评论