用户登录/注册/退出全流程详解 -

index-zuoye.php

<?php
session_start();
//! unserialize — 从已存储的表示中创建 PHP 的值
if (isset($_SESSION['user'])) {
    $user = unserialize($_SESSION['user']);
}
// print_r($user);
?>
<!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>Document</title>
</head>
<body>
    <!-- isset — 检测变量是否已声明并且其值不为 null -->
    <?php  if (isset($user)) :?>
    <a href="" id="out-zuoye">退出</a>
    <?php  else :?>
    <a href="login-zuoye.php">登录</a>
    <?php  endif?>
    <script>
        let bools = document.querySelector('#out-zuoye');
        if (bools) {
            document.querySelector('#out-zuoye').addEventListener('click', function(event) {
                if (confirm('是否退出')) {
                    event.preventDefault();
                    location.assign('handle-zuoye.php?action=out-zuoye');
                }
            });
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<?php
session_start();
if (isset($_SESSION['user'])) {
    echo '<script>alert("不要重复登录");location.href="index-zuoye.php"</script>';
}
?>
<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>
</head>
<body>
    <form action="handle-zuoye.php?action=login-zuoye" method="post">
        <fieldset style="display: inline-block;background:lightcyan">
            <legend>用户登录</legend>
            <p>
                <label for="username">用户名：</label>
                <input type="text" name="username" id="username" placeholder="请输入用户名" require>
            </p>
            <p>
                <label for="password">密码：</label>
                <input type="password" name="password" id="password" placeholder="请输入密码" require>
            </p>
            <p>
                <button>提交</button>
                <a href="register-zuoye.php" style="margin-left: 100px; border:1px solid; text-decoration:none;background-color:#00bcd4;border-radius:8px;">注册</a>
            </p>
        </fieldset>
    </form>
</body>
</html>

register-zuoye.php

<!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>
</head>
<body>
    <form action="handle-zuoye.php?action=register-zuoye" method="POST">
        <fieldset style="display: inline-block;background:lightcyan">
            <legend>用户注册</legend>
            <p>
                <label for="username">用户名：</label>
                <!-- require :规定必需在提交之前填写输入字段 -->
                <input type="text" name="username" id="username" placeholder="请输入用户名" require>
            </p>
            <p>
                <label for="password">密码：</label>
                <input type="password" name="password" id="password" placeholder="请输入密码" require>
            </p>
            <p>
                <label for="again">确认密码：</label>
                <input type="password" name="again" id="again" placeholder="请再次输入密码" require>
            </p>
            <p>
                <button>提交</button>
            </p>
        </fieldset>
    </form>
    <script>
        document.querySelector('button').addEventListener('click', function(event) {
            $username = document.querySelector('#username').value;
            $pwd = document.querySelector('#password').value;
            $pwds = document.querySelector('#again').value;
            console.log($username);
            console.log($pwd);
            console.log($pwds);
            if ($username === '') {
                event.preventDefault();
                alert("用户名不能为空");
                return false;
            }
            if ($pwd === '') {
                event.preventDefault();
                alert("密码不能为空");
                return false;
            }
            if ($pwds === '') {
                event.preventDefault();
                alert("请输入确认密码");
                return false;
            }
            if ($username != '' && $pwd !== $pwds) {
                event.preventDefault();
                alert("两次输入的密码不一致");
            }
        })
    </script>
</body>
</html>

handle-zuoye.php

<?php
// include "register-zuoye.php";
session_start();
$db = new PDO('mysql:dbname=php', 'root', 'root');
$sql = 'SELECT * FROM `login`';
$stmt = $db->prepare($sql);
$stmt->execute();
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
// print_r($users);
//!查看是否转跳页面并获取index里的表单action
$action = $_GET['action'];
//!strtolower — 将字符串转化为小写
switch (strtolower($action)) {
    //!登录
    case 'login-zuoye':
        //!REQUEST_METHOD:访问页面使用的请求方法($_SERVER:超全局变量)
        // echo $_SERVER['REQUEST_METHOD'];
        if ($_SERVER['REQUEST_METHOD']==='POST') {
            // print_r($_POST);
            //!extract — 从数组中将变量导入到当前的符号表
            extract($_POST);
            // echo $name = $_POST['username'];
            // echo $password = $_POST['password'];
            //!array_filter — 使用回调函数过滤数组的元素
            $result = array_filter($users, function ($user) use ($username, $password) {
                return $user['name'] ===$username &&$user['password'] = md5($password);
            });
            // printf('<pre>%s</pre>',print_r($result,true));
            if (count($result)===1) {
                //!serialize — 产生一个可存储的值的表示
                //!array_pop — 弹出数组最后一个单元（出栈）
                $_SESSION['user'] = serialize(array_pop($result));
                //!exit — 输出一个消息并且退出当前脚本
                exit('<script>alert("登录成功");location.href="index-zuoye.php"</script>');
            } else {
                exit('<script>alert("登录失败，账号或密码错误");location.href="index-zuoye.php"</script>');
            }
        } else {
            //!die:结束进程
            die('请求错误');
        }
        break;
    //!退出
    case 'out-zuoye':
        if (isset($_SESSION['user'])) {
            //!session_destroy — 销毁一个会话中的全部数据
            session_destroy();
            //!location.assign:载入一个新文档,浏览器的后退按钮可用
            exit('<script>alert("退出成功");location.assign("index-zuoye.php")</script>');
        }
        break;
    //!注册
    case 'register-zuoye':
        // 获取注册用户信息
        $name = $_POST['username'];
        $password = md5($_POST['password']);
        $register_time = time();
        //print_r($_POST);
        //将新用户添加到表中
        $sqls = 'INSERT `login` SET `name`=?,`password`=?,`register_time`=? ';
        $stmt = $db->prepare($sqls);
        $stmt ->execute(array($name,$password,$register_time));
        if ($stmt->rowCount()===1) {
            exit('<script>alert("注册成功");location.href="index-zuoye.php"</script>');
        } else {
            exit('<script>alert("注册失败");</script>') ;
        }
        break;
}

用户登录/注册/退出全流程详解

index-zuoye.php

login-zuoye.php

register-zuoye.php

handle-zuoye.php

相关文章