- 搭建系統環境：CentOS7系統 + Apache+php+mysql
- 按照完成之后，在后台創建登錄用戶名數據庫
# 創建數據庫 myWeb
CREATE DATABASE myWeb;
# 進入myWeb數據庫
use myWeb;
# 創建用戶名數據表
create table person(id int PRIMARY KEY AUTO_INCREMENT,name varchar(20) NOT NULL,email varchar(50) NOT NULL,password varchar(50) NOT NULL); # 創建自增表
# 插入數據
INSERT INTO person(name,email,password) VALUES("張三","Tian.Zhou@dbappsecurity.com.cn","ZhangShan");
INSERT INTO person(name,email,password) VALUES("李四","ktf@dbappsecurity.com.cn","LiShi");
INSERT INTO person(name,email,password) VALUES("王二","ShengKai.Chen@dbappsecurity.com.cn","WangEr");
INSERT INTO person(name,email,password) VALUES("麻子","YongHong.Liu@dbappsecurity.com.cn","MaZhi");
# 顯示支持的字符集
show variables like '%char%';
# 將某個字段設置為gbk（避免mysql顯示亂碼)
alter table person modify name char(20) character set gbk;
- 編寫登錄界面（login.html/Login.css):在/var/www/html/
login.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="login" /> <title>自動化接口測試平台</title> <link rel="stylesheet" type="text/css" href="Login.css"/> </head> <body> <div id="login"> <h1>自動化接口測試平台</h1> <form action="Login.php" method="post"> <input type="text" required="required" placeholder="用戶名" name="u"></input> <input type="password" required="required" placeholder="密碼" name="p"></input> <button class="but" type="submit">登錄</button> </form> </div> </body> </html>
Login.css:
html{
width: 100%;
height: 100%;
overflow: hidden;
font-style: sans-serif;
}
body{
width: 100%;
height: 100%;
font-family: 'Open Sans',sans-serif;
margin: 0;
background-color: #4A374A;
}
#login{
position: absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
#login h1{
color: #fff;
text-shadow:0 0 10px;
letter-spacing: 1px;
text-align: center;
}
h1{
font-size: 2em;
margin: 0.67em 0;
}
input{
width: 278px;
height: 18px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow:1px 1px 1px;
border-top: 1px solid #312E3D;
border-left: 1px solid #312E3D;
border-right: 1px solid #312E3D;
border-bottom: 1px solid #56536A;
border-radius: 4px;
background-color: #2D2D3F;
}
.but{
width: 300px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 5px;
margin: 0;
}
結果如下所示：
編寫調用Login.html數據的Login.php:
Login.php:
#!/usr/bin/php <?php //ini_set('error_reporting', -1); //ini_set('display_errors', 'On'); // 開啟Session //session_start(); /* 連接數據庫 */ $conn = new mysqli('localhost','root','root','myWeb'); /* check connection */ if ($conn->connect_errno) { printf("Connect failed: %s\n", $conn->connect_error); exit(); } // 接收用戶的登錄信息 $user = $_POST["u"]; $pwd = $_POST["p"]; if($user && $pwd){ //如果用戶名和密碼都不為空 $sql = "SELECT id FROM person where name='$user' and password='$pwd'"; $conn ->query("SET NAMES 'utf8'"); $result = $conn->query($sql); $rows = $result->num_rows; echo $user; echo $pwd; echo $sql; echo $rows; if($rows){ //0 false 1 true header("refresh:0;url=index.html"); //如果成功-->跳轉轉index.php頁面 exit(); }else{ // 用戶名或密碼錯誤 echo "<script>alert('用戶名或密碼錯誤!')</script>"; echo " <script> setTimeout(function(){window.location.href='login.html';},1000); </script> ";//如果錯誤使用js 1秒后跳轉到登錄頁面重試; } //釋放結果集 $result->free(); } ?>
編寫登錄成功之后的跳轉界面index.php：
index.php:
<?php header('Content-type:text/html;charset=utf-8'); // 開啟Session session_start(); // 首先判斷Cookie是否有記住了用戶信息 if (isset($_COOKIE['userInp'])) { # 若記住了用戶信息，則直接傳給Session $_SESSION['userInp'] = $_COOKIE['userInp']; $_SESSION['islogin'] = 1; } if (isset($_SESSION['islogin'])) { // 若已經登錄 echo "你好！".$_SESSION['userInp'].' ,歡迎來的個人中心！<br>'; echo "<a href='logout.php'>注銷</a>"; } else { // 若沒用登錄 echo "你還沒有登錄，請<a href='/app/index.html'>登錄</a>"; } ?>
編寫各跳轉界面（itf.html):
itf.html:
<!DOCTYPE html> <html> <head> <meta id="cross-request-sign" charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="keywords" content="接口測試平台"> <title>可視化接口測試平台</title> </head> <body style=""> <span class="ant-breadcrumb-link" style="font-size:20px;letter-spacing:0em"><a href="/group/15">歡迎進入WEB接口自動化測試平台</a></span> <span> <div> <div class="bgDiv"> <tr > <style> a{text-decoration:none} p{padding:0px; margin:0px;display: inline;} </style> <p><a href="../conf/conf.html">配置中心     </a></p> <p><a href="itf.html" >接口列表     </a></p> <p><a href="../relation/relation.html" >關聯列表     </a></p> <p><a href="../kit/kit.html" >套件列表     </a></p> <p><a href="../control/control.html" >運行     </a></p> <p><a href="../result/result.html" >日志     </a></p> </tr> </div> </div> </span> <HR align=center width=1600 color=#987cb9 SIZE=2> </body> </html>
未完，待續！