介面自動化平臺搭建<一>
阿新 • • 發佈：2020-12-22
- 搭建系統環境：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("張三
","[email protected]","ZhangShan");INSERT INTO person(name,email,password) VALUES("李四","[email protected]","LiShi");
INSERT INTO person(name,email,password) VALUES("王二","[email protected]","WangEr");
INSERT INTO person(name,email,password) VALUES("麻子","[email protected]","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"View Codecontent="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;
}
View Code
結果如下所示：
編寫呼叫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(); } ?>View Code
編寫登入成功之後的跳轉介面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>"; } ?>View Code
編寫各跳轉介面（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>View Code
未完，待續！