- 搭建系统环境：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{
100%;
height: 100%;
overflow: hidden;
font-style: sans-serif;
}
body{
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;
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{
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{
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 ", $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>
未完，待续！