接口自动化平台搭建<一>

搭建系统环境：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/

<!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>

View Code

    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;
    }

View Code

结果如下所示：

编写调用Login.html数据的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();
  }
?>

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">配置中心 &nbsp &nbsp </a></p>
                                <p><a href="itf.html" >接口列表 &nbsp &nbsp </a></p>
                                <p><a href="../relation/relation.html" >关联列表 &nbsp &nbsp </a></p>
                                <p><a href="../kit/kit.html" >套件列表 &nbsp &nbsp </a></p>
                                <p><a href="../control/control.html" >运行 &nbsp &nbsp </a></p>
                                <p><a href="../result/result.html" >日志 &nbsp &nbsp </a></p>
                        </tr>
                </div>
        </div>

</span>
<HR align=center width=1600 color=#987cb9 SIZE=2>
</body>
</html>

View Code

未完，待续！