前言：有段時間沒更新了，把剩下的教程寫完。還是老樣子，上手敲代碼。
本步驟主要知識點：
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，抓住用法，你離高大上的云后臺不遠了。
切記多動手敲代碼，一味復制粘貼達不到學習效果的~
