前言：有段時(shí)間沒(méi)更新了治宣，把剩下的教程寫(xiě)完丹擎。還是老樣子，上手敲代碼秒啦。
本步驟主要知識(shí)點(diǎn)：
1熬粗、超全局變量$_SESSION應(yīng)用保存登錄狀態(tài)，注意使用前必須session_start()
2余境、給普通密碼加鹽值驻呐，加強(qiáng)密碼強(qiáng)度
3灌诅、注銷登錄，具體查看logout.php代碼
1含末、模板
html代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>留言表單后臺(tái)登錄_科科分享</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div class="row4 fix">
<div class="wp">
<div class="tit-i">
<h3>留言表單后臺(tái)登錄</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="登錄賬號(hào)">
<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猜拾、數(shù)據(jù)操作
--
-- 表的結(jié)構(gòu) `admin`
--
CREATE TABLE `admin` (
`id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
`login_name` varchar(128) NOT NULL COMMENT '登錄賬號(hào)',
`password` varchar(64) NOT NULL COMMENT '登錄密碼',
`salt` char(4) NOT NULL COMMENT '鹽值，加強(qiáng)密碼強(qiáng)度',
`addtime` int(10) UNSIGNED NOT NULL DEFAULT '0' COMMENT '記錄時(shí)間',
PRIMARY KEY (`id`),
KEY `login_name` (`login_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='管理員數(shù)據(jù)表';
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'])):'';
// 簡(jiǎn)單驗(yàn)證一下提交的數(shù)據(jù)
if (empty($login_name) || empty($password)) {
exit('請(qǐng)輸入登錄信息佣盒！');
}
$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('賬號(hào)密碼錯(cuò)誤挎袜！');
}
$res_password = $row['password'];
$password = md5(md5($password) . $row['salt']);
// 密碼不匹配
if ($res_password != $password) {
exit('賬號(hào)密碼錯(cuò)誤！'); // 為了程序的安全肥惭，這里不必具體提示密碼錯(cuò)誤盯仪，告知用戶賬號(hào)或密碼錯(cuò)誤即可。
}
// 登錄成功蜜葱，保存登錄信息全景，一般都用session進(jìn)行處理
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>留言表單后臺(tái)登錄_科科分享</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>您已登錄后臺(tái)中心！</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揭鳞、測(cè)試
養(yǎng)成好習(xí)慣炕贵，簡(jiǎn)單測(cè)試一遍，再提交工作野崇。
登錄頁(yè)面
image.png
登錄成功后的頁(yè)面
image.png
4称开、總結(jié)
這節(jié)知識(shí)點(diǎn)就一個(gè)session，抓住用法舞骆，你離高大上的云后臺(tái)不遠(yuǎn)了钥弯。
切記多動(dòng)手敲代碼，一味復(fù)制粘貼達(dá)不到學(xué)習(xí)效果的~
