純手寫打造。
下載地址：http://download.csdn.net/detail/qq_33599520/9779970
項目結構：
下面是代碼：
<!DOCTYPE html> <html lang="cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>后台登陸</title> <link href="css/login.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/login.js"></script> </head> <body> <div class="login"> <div class="message">大數據的事件智能抓取和畫像后台登陸</div> <div id="darkbannerwrap"></div> <form name="login" action="php/login.php" method="post" onsubmit="return check()"> <input name="name" id="name" placeholder="請輸入登錄帳號" type="text" required="required" maxlength="16"> <hr class="hr15"> <input name="password" id="password" placeholder="請輸入登錄密碼" type="password" required="required" maxlength="16"> <hr class="hr15"> <input value="登錄" style="width:100%;" type="submit" name="submit"> <a href="result.html">注冊</a> <a href="#">忘記密碼</a> <hr class="hr20"> </form> </div> </body> </html>
<!DOCTYPE html> <html lang="cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>后台注冊</title> <link href="css/result.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="js/result.js"></script> </head> <body> <div class="login"> <div class="message">大數據的事件智能抓取和畫像后台注冊</div> <div id="darkbannerwrap"></div> <form name="result" action="php/result.php" method="post" onsubmit="return check()"> <input name="name" id="name" placeholder="請輸入帳號" type="text" required="required" maxlength="16"> <hr class="hr15"> <input name="password" id="password" placeholder="請輸入密碼" type="password" required="required" maxlength="16"> <hr class="hr15"> <input name="pwd" id="pwd" placeholder="請再次輸入密碼" type="password" required="required" maxlength="16"> <hr class="hr15"> <input value="注冊" style="width:100%;" type="submit" name="submit"> <a href="login.html">返回登錄</a> <a href="#">忘記密碼</a> <hr class="hr20"> </form> </div> </body> </html>
function $(id) {
return document.getElementById(id);
}
function check() {
var password = $("password").value;
if(password == "") {
alert("密碼不能為空");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("密碼長度必須為6-16位");
$("password").focus();
return false;
}
}
function $(id) {
return document.getElementById(id);
}
function check() {
var password = $("password").value;
var pwd = $("pwd").value;
if(password == "") {
alert("密碼不能為空");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("密碼長度必須為6-16位");
$("password").focus();
return false;
}
if(pwd != password) {
alert("您兩次輸入的密碼不一致！");
$("pwd").focus();
return false;
}
}
*{
font: 13px/1.5 '微軟雅黑', Verdana, Helvetica, Arial, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
padding:0;
margin:0;
list-style:none;
box-sizing: border-box;
}
body,html{
height:100%;
overflow:hidden;
}
body{
background:url(../images/web_login_bg.jpg) no-repeat center;
background-size: cover;
}
a{
color:#27A9E3;
text-decoration:none;
cursor:pointer;
}
.login{
margin: 150px auto 0 auto;
min-height: 420px;
max-width: 420px;
padding: 40px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
/* overflow-x: hidden; */
box-sizing: border-box;
}
a.logo{
display: block;
height: 58px;
width: 167px;
margin: 0 auto 30px auto;
background-size: 167px 42px;
}
.message {
margin: 10px 0 0 -58px;
padding: 18px 10px 18px 60px;
background: #27A9E3;
position: relative;
color: #fff;
font-size: 16px;
}
#darkbannerwrap {
background: url(../images/aiwrap.png);
width: 18px;
height: 10px;
margin: 0 0 20px -58px;
position: relative;
}
input[type=text],
input[type=file],
input[type=password],
input[type=email], select {
border: 1px solid #DCDEE0;
vertical-align: middle;
border-radius: 3px;
height: 50px;
padding: 0px 16px;
font-size: 14px;
color: #555555;
outline:none;
width:100%;
}
input[type=text]:focus,
input[type=file]:focus,
input[type=password]:focus,
input[type=email]:focus, select:focus {
border: 1px solid #27A9E3;
}
input[type=submit],
input[type=button]{
display: inline-block;
vertical-align: middle;
padding: 12px 24px;
margin: 0px;
font-size: 18px;
line-height: 24px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
color: #ffffff;
background-color: #27A9E3;
border-radius: 3px;
border: none;
-webkit-appearance: none;
outline:none;
width:100%;
}
hr.hr15 {
height: 15px;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
}
hr.hr20 {
height: 20px;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.copyright{
font-size:14px;
color:rgba(255,255,255,0.85);
display:block;
position:absolute;
bottom:15px;
right:15px;
}
*{
font: 13px/1.5 '微軟雅黑', Verdana, Helvetica, Arial, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing: border-box;
padding:0;
margin:0;
list-style:none;
box-sizing: border-box;
}
body,html{
height:100%;
overflow:hidden;
}
body{
background:url(../images/web_result_bg.jpg) no-repeat center;
background-size: cover;
}
a{
color:#27A9E3;
text-decoration:none;
cursor:pointer;
}
.login{
margin: 150px auto 0 auto;
min-height: 420px;
max-width: 420px;
padding: 40px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
/* overflow-x: hidden; */
box-sizing: border-box;
}
a.logo{
display: block;
height: 58px;
width: 167px;
margin: 0 auto 30px auto;
background-size: 167px 42px;
}
.message {
margin: 10px 0 0 -58px;
padding: 18px 10px 18px 60px;
background: #27A9E3;
position: relative;
color: #fff;
font-size: 16px;
}
#darkbannerwrap {
background: url(../images/aiwrap.png);
width: 18px;
height: 10px;
margin: 0 0 20px -58px;
position: relative;
}
input[type=text],
input[type=file],
input[type=password],
input[type=email], select {
border: 1px solid #DCDEE0;
vertical-align: middle;
border-radius: 3px;
height: 50px;
padding: 0px 16px;
font-size: 14px;
color: #555555;
outline:none;
width:100%;
}
input[type=text]:focus,
input[type=file]:focus,
input[type=password]:focus,
input[type=email]:focus, select:focus {
border: 1px solid #27A9E3;
}
input[type=submit],
input[type=button]{
display: inline-block;
vertical-align: middle;
padding: 12px 24px;
margin: 0px;
font-size: 18px;
line-height: 24px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
color: #ffffff;
background-color: #27A9E3;
border-radius: 3px;
border: none;
-webkit-appearance: none;
outline:none;
width:100%;
}
hr.hr15 {
height: 15px;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
}
hr.hr20 {
height: 20px;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.copyright{
font-size:14px;
color:rgba(255,255,255,0.85);
display:block;
position:absolute;
bottom:15px;
right:15px;
}
<?php
$server="localhost";//主機
$db_username="root";//你的數據庫用戶名
$db_password="root";//你的數據庫密碼
$con = mysql_connect($server,$db_username,$db_password);//鏈接數據庫
if(!$con){
die("can't connect".mysql_error());//如果鏈接失敗輸出錯誤
}
mysql_select_db('test',$con);//選擇數據庫（test是數據庫名稱）
//字符轉換，讀庫
mysql_query("set character set 'utf-8'");
//寫庫
mysql_query("set names 'utf-8'");
?>
<?PHP
header("Content-Type: text/html; charset=utf8");
if(!isset($_POST["submit"])){
exit("非法訪問！");
}//檢測是否有submit操作
include('connect.php');//鏈接數據庫
$name = $_POST['name'];//post獲得用戶名表單值
$passowrd = MD5($_POST['password']);//post獲得用戶密碼單值,使用MD5加密，不可逆
if ($name && $passowrd){//如果用戶名和密碼都不為空
$sql = "select * from admin where username = '$name' and password='$passowrd'";//檢測數據庫是否有對應的username和password的sql
$result = mysql_query($sql);//執行sql
$rows=mysql_num_rows($result);//返回一個數值
if($rows){//0 false 1 true
//登錄成功
session_start();//啟動Session
$_SESSION['name'] = $_POST['name'];
header("refresh:0;url=sucess.php");//如果成功跳轉至sucess.php頁面
exit;
}else{
echo "用戶名或密碼錯誤，請重新登錄！";
echo "
<script>
setTimeout(function(){window.location.href='../login.html';},1000);
</script>
";//如果錯誤使用js 1秒后跳轉到登錄頁面重試;
}
}else{//如果用戶名或密碼有空
echo "用戶名或密碼填寫不完整，請重新登錄！";
echo "
<script>
setTimeout(function(){window.location.href='../login.html';},1000);
</script>";
//如果錯誤使用js 1秒后跳轉到登錄頁面重試;
}
mysql_close();//關閉數據庫
?>
<?php
session_start();//初始化session
session_destroy();//注銷session
header("location:../login.html");//注銷session並跳轉
?>
<?php
header("Content-Type: text/html; charset=utf8");
if(!isset($_POST['submit'])){
exit("錯誤執行");
}//判斷是否有submit操作
$name=$_POST['name'];//post獲取表單里的name
$password=MD5($_POST['password']);//post獲取表單里的password,使用MD5加密，不可逆
include('connect.php');//鏈接數據庫
$sql = "select username from admin where username = '$name'";//SQL語句
$result = mysql_query($sql);//執行SQL語句
$num = mysql_num_rows($result);//統計執行結果影響的行數
if ($num) {//如果已經存在該用戶
echo "<script>alert('溫馨提示：用戶存在！'); history.go(-1);</script>";
} else {
$q="insert into admin(id,username,password) values (null,'$name','$password')";//向數據庫插入表單傳來的值的sql
$reslut=mysql_query($q,$con);//執行sql
if (!$reslut){
die('Error: ' . mysql_error());//如果sql執行失敗輸出錯誤
}else{
echo "注冊成功";//成功輸出注冊成功
echo "
<script>
setTimeout(function(){window.location.href='../login.html';},1000);
</script>";
//如果注冊成功使用js 1秒后跳轉到登錄頁面;
}
}
mysql_close($con);//關閉數據庫
?>
<?PHP
ini_set("error_reporting","E_ALL & ~E_NOTICE");
session_start();//啟動Session
if(!$_SESSION['name']){
echo "<script language='javascript'>alert('對不起，您未登錄！');history.back();</script>";
}
?>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>歡迎成功進入首頁！</title>
</head>
<body>
<h1>當前登錄用戶：</h1>
<h2>
<?PHP
echo $_SESSION['name'];
?>
</h2>
<a href="logout.php">注銷用戶</a>
</body>
</html>
<?php ?>
純手寫，如果有不足之處請諒解。