PDO登录实战完善请求分发器小结

发布于：2022-04-16 12:19:13 栏目：技术文档

PDO登录实战

1. 文件结构

2. 首页

<!DOCTYPE html>
<?php session_start() ?>
<!DOCTYPE html>
<html lang="en">
<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>首页</title>
    <style>
        html {
            background: url(https://t7.baidu.com/it/u=2961459243,2146986594&fm=193&f=GIF) no-repeat;
            background-size: 100%;
        }
        header {
            max-width: 996px;
            margin: auto;
            padding: 0.5em 0.5em;
            background-color: #4395ff;
            display: flex;
            place-content: space-between;
        }
        a {
            margin-right: 1em;
            color: #eee;
            text-decoration: none;
        }
        a:hover {
            color: yellow;
        }
    </style>
</head>
<body>
    <header>
        <a href="">首页</a>
        <nav>
            <?php
            if (!isset($_SESSION['username']) || empty($_SESSION['username'])) {
                echo "
                        <a href='login.php'>登录</a>
                        <a href='register.php'>注册</a>                        
                    ";
            } else {
                echo "
                    <a href=''>{$_SESSION['username']}</a>
                    <a href='request_controller.php?type=logout'>退出</a>
                ";
            }
            ?>
        </nav>
    </header>
</body>
</html>

3. 登录

<!DOCTYPE html>
<html lang="en">
  <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>PDO登录实战</title>
    <!-- 引入md5加密文件 -->
    <script src="../public/md5.js"></script>
    <style>
      .form {
        width: 220px;
        height: 100px;
        margin: 10% auto;
        display: grid;
      }
      input {
        margin: 10px;
        text-align: center;
      }
      .btn {
        cursor: pointer;
      }
      h4 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <form class="form" id="form">
      <h4>PDO登录实战</h4>
      <input
        type="text"
        name="username"
        id="username"
        placeholder="请输入用户名"
      />
      <input
        type="password"
        name="password"
        id="password"
        placeholder="请输入密码"
      />
      <input type="button" value="登　录" class="btn" onclick="login()" />
    </form>
    <script>
      async function login() {
        // 取得输入的用户名和密码
        let username = document.forms.form.username.value;
        let password = hex_md5(document.forms.form.password.value);
        // 请求分发文件链接
        url = "Request_Controller.php?type=login";
        // 定义常量存贮异步请求响应
        const response = await fetch(url, {
          method: "POST",
          headers: {
            "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
          },
          body: `username=${username}&password=${password}`,
        });
        response.json().then((res_json) => {
          if (res_json.status) {
            window.location.href = "index.php";
          } else {
            alert(res_json.msg);
          }
        });
      }
    </script>
  </body>
</html>

4. 注册

<!DOCTYPE html>
<html lang="en">
<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>用户注册</title>
    <script src="../public/md5.js"></script>
    <style>
        .form {
            width: 220px;
            height: 100px;
            margin: 10% auto;
            display: grid;
        }
        input,
        p {
            margin: 10px;
            padding: 0.2em;
            text-align: center;
        }
        .btn:hover,
        label:hover {
            cursor: pointer;
        }
        .btn:disabled {
            cursor: not-allowed;
        }
        h3 {
            text-align: center;
        }
        label {
            margin: 0 1em;
        }
    </style>
</head>
<body>
    <form class="form" id="form">
        <h3>用户注册</h3>
        <input type="text" name="username" id="username" placeholder="用户名，必须中文" onblur="check_user(this)" value="" />
        <input type="password" name="password" id="password" placeholder="密码，必须大于或等于6位" onblur="check_password(this)" />
        <input type="password" name="check_pwd" id="check_pwd" placeholder="确认密码" onblur="check_check_pwd(this)" />
        <p>
            <label for="man">男<input type="radio" name="gender" id="man" value="1" checked></label>
            <label for="women">女<input type="radio" name="gender" id="women" value="0"></label>
        </p>
        <input type="button" value="提　交" class="btn" onclick="register()" disabled />
    </form>
    <script>
        /*
         * 验证表单，只写了简单的验证功能原代码，实际开发多用插件，自带验证功能
         */
        // 变量记录验证通过情况
        let check_status = [0, 0, 0]
        btn_status(check_status)
        document.querySelector("#username").value = ""
        // 验证用户名，只能是中文
        async function check_user(ev) {
            const test = /^[\u4E00-\u9FA5]+$/
            if (!test.test(ev.value) || ev.value.length == 0) {
                alert("用户名不能为空，并且只能是中文！")
                ev.value = ev.value.replace(/[^\u4e00-\u9fa5]/g, '')
                check_status[0] = 0
            } else {
                // 检查用户名是否存在
                url = "Request_Controller.php?type=duplicate_name";
                // 定义常量存贮异步请求响应
                const response = await fetch(url, {
                    method: "POST",
                    headers: {
                        "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    body: `username=${ev.value}`,
                });
                response.json().then((res_json) => {
                    if (res_json.status) {
                        alert(res_json.msg)
                        check_status[0] = 0
                        btn_status(check_status)
                    } else {
                        alert(res_json.msg)
                        check_status[0] = 1
                        btn_status(check_status)
                    }
                })
            }
        }
        // 验证密码，必须大于6位
        function check_password(ev) {
            if (ev.value.length < 6) {
                alert("密码必须大于等于6位！")
                check_status[1] = 0
            } else {
                check_status[1] = 1
            }
            btn_status(check_status)
        }
        // 再次验证密码是否一致
        function check_check_pwd(ev) {
            if (ev.value != document.querySelector("#password").value) {
                alert("两次输入的密码不一致！")
                check_status[2] = 0
            } else {
                check_status[2] = 1
            }
            btn_status(check_status)
        }
        // 设置提交按钮是否可用
        function btn_status(status) {
            if (status.toString() === [1, 1, 1].toString()) {
                document.querySelector(".btn").removeAttribute("disabled")
            } else {
                document.querySelector(".btn").disabled = "true"
            }
        }
        async function register() {
            // 取得输入的用户名和密码
            let username = document.forms.form.username.value
            let password = hex_md5(document.forms.form.password.value)
            let gender = document.forms.form.gender.value
            // 请求链接
            url = "Request_Controller.php?type=register"
            // 定义常量存贮异步请求响应
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
                },
                body: `username=${username}&password=${password}&gender=${gender}`,
            });
            response.json().then((res_json) => {
                if (res_json.status) {
                    alert("注册成功，请登录。")
                    window.location.href = "login.php"
                } else {
                    alert(res_json.msg)
                }
            })
        }
    </script>
</body>
</html>

5. 请求分发器

<!DOCTYPE html>
<html lang="en">
<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>用户注册</title>
    <script src="../public/md5.js"></script>
    <style>
        .form {
            width: 220px;
            height: 100px;
            margin: 10% auto;
            display: grid;
        }
        input,
        p {
            margin: 10px;
            padding: 0.2em;
            text-align: center;
        }
        .btn:hover,
        label:hover {
            cursor: pointer;
        }
        .btn:disabled {
            cursor: not-allowed;
        }
        h3 {
            text-align: center;
        }
        label {
            margin: 0 1em;
        }
    </style>
</head>
<body>
    <form class="form" id="form">
        <h3>用户注册</h3>
        <input type="text" name="username" id="username" placeholder="用户名，必须中文" onblur="check_user(this)" value="" />
        <input type="password" name="password" id="password" placeholder="密码，必须大于或等于6位" onblur="check_password(this)" />
        <input type="password" name="check_pwd" id="check_pwd" placeholder="确认密码" onblur="check_check_pwd(this)" />
        <p>
            <label for="man">男<input type="radio" name="gender" id="man" value="1" checked></label>
            <label for="women">女<input type="radio" name="gender" id="women" value="0"></label>
        </p>
        <input type="button" value="提　交" class="btn" onclick="register()" disabled />
    </form>
    <script>
        /*
         * 验证表单，只写了简单的验证功能原代码，实际开发多用插件，自带验证功能
         */
        // 变量记录验证通过情况
        let check_status = [0, 0, 0]
        btn_status(check_status)
        document.querySelector("#username").value = ""
        // 验证用户名，只能是中文
        async function check_user(ev) {
            const test = /^[\u4E00-\u9FA5]+$/
            if (!test.test(ev.value) || ev.value.length == 0) {
                alert("用户名不能为空，并且只能是中文！")
                ev.value = ev.value.replace(/[^\u4e00-\u9fa5]/g, '')
                check_status[0] = 0
            } else {
                // 检查用户名是否存在
                url = "Request_Controller.php?type=duplicate_name";
                // 定义常量存贮异步请求响应
                const response = await fetch(url, {
                    method: "POST",
                    headers: {
                        "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    body: `username=${ev.value}`,
                });
                response.json().then((res_json) => {
                    if (res_json.status) {
                        alert(res_json.msg)
                        check_status[0] = 0
                        btn_status(check_status)
                    } else {
                        alert(res_json.msg)
                        check_status[0] = 1
                        btn_status(check_status)
                    }
                })
            }
        }
        // 验证密码，必须大于6位
        function check_password(ev) {
            if (ev.value.length < 6) {
                alert("密码必须大于等于6位！")
                check_status[1] = 0
            } else {
                check_status[1] = 1
            }
            btn_status(check_status)
        }
        // 再次验证密码是否一致
        function check_check_pwd(ev) {
            if (ev.value != document.querySelector("#password").value) {
                alert("两次输入的密码不一致！")
                check_status[2] = 0
            } else {
                check_status[2] = 1
            }
            btn_status(check_status)
        }
        // 设置提交按钮是否可用
        function btn_status(status) {
            if (status.toString() === [1, 1, 1].toString()) {
                document.querySelector(".btn").removeAttribute("disabled")
            } else {
                document.querySelector(".btn").disabled = "true"
            }
        }
        async function register() {
            // 取得输入的用户名和密码
            let username = document.forms.form.username.value
            let password = hex_md5(document.forms.form.password.value)
            let gender = document.forms.form.gender.value
            // 请求链接
            url = "Request_Controller.php?type=register"
            // 定义常量存贮异步请求响应
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
                },
                body: `username=${username}&password=${password}&gender=${gender}`,
            });
            response.json().then((res_json) => {
                if (res_json.status) {
                    alert("注册成功，请登录。")
                    window.location.href = "login.php"
                } else {
                    alert(res_json.msg)
                }
            })
        }
    </script>
</body>
</html>

6. 连接数据库

<?php
/* 
 * PDO连接数据库文件
 * 参数：$DB_type   数据库类型名，默认为mysql
 * 参数：$DB_host      数据库服务器名，默认为localhost
 * 参数：$DB_port      数据库数据库服务器端口，默认为'3308'
 * 参数：$DB_username  数据库服务器用户名，默认为'root'
 * 参数：$DB_password  数据库服务器密码，默认为''
 * 参数：$DB_dbname    数据库名，默认为 'php'
 * 参数：$DB_charset   字符集，默认为 ''utf8mb4'
 * 以上变量在引入文件处可设置值
 * 连接错误请注意检查是否有与参数重名的变量
 */
$DB_type = $DB_type ?? 'mysql';
$DB_host = $DB_host ?? 'localhost';
$DB_port = $DB_port ?? '3308';
$DB_dbname = $DB_dbname ?? 'php';
$DB_charset = $DB_charset ?? 'utf8mb4';
$DB_username = $DB_username ?? 'root';
$DB_password = $DB_password ?? '';
// 定义数据库连接字串
$dsn = '%s:host=%s;port=%s;dbname=%s;charset=%s';
$dsn = sprintf($dsn, $DB_type, $DB_host, $DB_port, $DB_dbname, $DB_charset);
// 连接数据库
try {
    $pdo = new PDO($dsn, $DB_username, $DB_password);
} catch (PDOException $err) {
    // PDOException异常类，指定变量$err为异常类型变量
    die('连接错误：' . $err->getMessage());
}

7. 数据处理模型

<?php
/* 
 * 数据处理模型
 */
// 连接数据库
require_once 'conn.php';
session_start();
// 验证登录用户名密码
function check_user($user, $pwd)
{
    global $pdo;    // 声明pdo为全局变量，才能在函数中调用
    $sql = 'SELECT `name` FROM `user` WHERE `name`=? AND `pass`=? ';
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$user, $pwd]);
    $res = $stmt->fetchAll(PDO::FETCH_ASSOC);
    if ($res) {
        //验证通过记录用户名
        $_SESSION['username'] = $user;
        return true;
    } else {
        return false;
    }
}
// 注册插入用户数据
function add_user($user, $pwd, $gender)
{
    global $pdo;
    $sql = 'INSERT INTO `user` (`name`,`pass`,`gender`) VALUES (?,?,?)';
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$user, $pwd, $gender]);
    $res = $stmt->rowCount();
    if ($res) {
        return true;
    } else {
        return false;
    }
}
// 注册时检查用户名是否已存在
function check_duplicate_name($name)
{
    global $pdo;
    $sql = 'SELECT 1 FROM `user` WHERE `name`=?';
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$name]);
    if ($stmt->rowCount()) {
        return true;
    } else {
        return false;
    }
}
// 删除一条数据
// $sql = 'DELETE FROM `user` WHERE `id`=?';
// $stmt = $pdo->prepare($sql);
// $stmt->execute([3]);
// if ($stmt->rowCount() === 1) {
//     echo '删除成功<br>';
// } else {
//     echo '删除失败<br>';
// }
// 更新一条数据
// $sql = 'UPDATE `user` SET `pass`=? WHERE `id`=?';
// $pass = md5('654321');
// $id = 1;
// $stmt = $pdo->prepare($sql);
// $stmt->execute([$pass, $id]);
// if ($stmt->rowCount() === 1) {
//     echo '更新密码成功<br>';
// } else {
//     echo '更新密码失败<br>';
// }

相关推荐

合肥KTV招聘模特佳丽日结包住宿经验者享受优先待遇
上海KTV招聘酒水促销员全职兼职都可以少
合肥KTV招聘酒水促销员包住宿报路费
小米集团2024年三季度创造了单季史上最强业绩
苹果开发采用博通台积电N3P工艺制造的AI芯片

阅读 + 点赞 +