首先 看过(学习中记录过程1)并且XAMPP已配置完成

在前面 我们在HTML上使用的方法是GET
你会发现浏览器地址栏上面会输出输入内容
这时候就可以使用POST隐藏起来
然后我们完善之前的登陆界面html
此内容在上一个上面做微修改就可以了
注意 我这边把index.html的文件改名为login.html 方便自己看 你也可以保留为index

/webtest/test/login.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./login.css"> //设置样式 [!这里的样式是我自己的login.css 下文可以看到!]
</head>

<body>
    <div class="loginCard"> //设置样式
        <div class="text"> //设置样式
            登陆页面
        </div>
        <form action="./login.php" method="post"> //创建form 并且绑定index.html目录下的login.php [!方法为POST!]
            <label for="">账号：</label>
            <input type="text" name="username" id="" placeholder="请输入账号">
            <br />
            <br />
            <label for="">密码：</label>
            <input type="password" name="pword" id="" placeholder="请输入密码">
            <br />
            <br />
            <button type="submit">提交</button> //提交
        </form>
    </div>
</body>
</html>

然后是自己修改这个网页的样式 我这边是这样的

/webtest/test/login.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.loginCard{
    width: fit-content;
    padding: 20px 40px;
    margin: 290px auto;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 2px 2px 10px 1px #ccc;
    border-radius: 7px;
}
.loginCard .text{
    width: 65px;
    height: 20px;
    margin: 0 auto;
    transform: translateY(-36px);
    background-color: white;
    text-shadow: 2px 2px #ccc;
}

这样 一个网页就设计好了 然后是后端 也就是PHP的code
在上文 我form绑定的php是login.php 所以在这里 我的文件也叫login.php

/webtest/test/login.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
session_start(); //开始服务端缓存
if(isset($_POST["username"]) && isset($_POST["pword"])){ //检测login.html里有输入内容 检测变量是否已设置[!方法为POST!]
    $username = $_POST["username"]; //username变量填入php里的username变量
    $passwd = $_POST["pword"]; //pword变量填入php里的passwd变量
    if(strlen(trim($username)) > 0 && strlen(trim($passwd)) > 6 && !isset($_SESSION["username"])){//判断username去掉空格后的字符数不为0 密码不小于6 并且没有已经登陆过(检测下文缓存)
        $_SESSION["username"] = $username;//username存入缓存
        echo "登陆成功 ID: {$username}";//登陆成功
    }else if(strlen(trim($username)) > 0 && strlen(trim($passwd)) > 6 && $_SESSION["username"]){//再次判断 和上文一致(但是最后一个不一样 如果有缓存 那么就是已经登陆过了)
        echo "你已经登陆过了! ID: ".$_SESSION["username"];//检测到已经登陆过
        unset($_SESSION["username"]);//把缓存设置为空
    }else{
        echo "Error:不符合规范";//不满足上文的username>0 passwd>6 执行
    }
}else{
    echo "Error"; //其他情况
}
?>

一个非常简单的检测登陆就做好了 然后就是链接检测mysqli 这个下一篇博客再写