服务端 - PHP - 会话控制之Session实现

一、目录结构

├─WWW                  应用目录
│  ├─user              用户模块
│  │  ├─login.php      登录页面  
│  │  └─register.php   注册页面
│  │
│  ├─css               样式目录
│  │  ├─index.css      首页样式
│  │  ├─login.css      登录页面样式
│  │  └─register.css   注册页面样式
│  │
│  ├─index.php         首页
│  ├─handle.php        控制器

二、实现

1. index.php & index.css

<?php
//开启会话
session_start();
//判断是否登录
if (isset($_SESSION['user'])) {
    //如果已登录则取出SESSIONID
    $un = $_SESSION['user'];
}
?>
<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css\index.css">
</head>
<body>
    <nav>
        <span class="l-nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">资料</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </span>
        <span class="r-nav">
            <?php
                //如果已登录的话显示用户名和退出按钮
                if (isset($un)):
            ?>
            <span style="color: yellow;font-size: larger;font-weight: bolder;line-height: 40px;"><?php echo $un?></span>
            <a href="" id="logout">
            退出
            </a>
            <?php
                //否则显示登录按钮
                else:
            ?>
            <a href="\user\login.php" id="login">登录</a>
            <?php endif ?>
        </span>
    </nav>
    <script>
        //为退出按钮创建一个事件，点击它会让其跳转到退出事件处理器
        document.querySelector('#logout').addEventListener('click', function(event) {
            //弹出对话框
            if (confirm('是否退出')) {
                //取消默认行为, 其实就是禁用原<a>标签的点击跳转行为,使用事件中的自定义方法处理
                event.preventDefault();
                //跳转到退出事件处理器
                window.location.assign('handle.php?action=logout');
            }
        });
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    color: white;
    font-size: larger;
    font-weight: bolder;
    text-decoration: none;
}
nav {
    width: 100%;
    height: 40px;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.l-nav > ul {
    display: flex;
    list-style: none;
}
.l-nav > ul > li {
    width: 100px;
    height: 40px;
}
.l-nav > ul > li > a {
    width: 100%;
    height: 100%;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.l-nav > ul > li > a:hover {
    color: #303;
    background-color: yellow;
}
.r-nav {
    display: flex;
    justify-content: space-between;
    width: 150px;
    height: 40px;
    margin-right: 20px;
}
.r-nav > a {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.r-nav > a:hover {
    color: #303;
    background-color: yellow;
}

<?php
//开启会话
session_start();
//判断是否登录
if (isset($_SESSION['user'])) {
    //如果已登录则输出请勿重复登录的信息并返回首页
    exit('<script>alert("请勿重复登录");location.href="/index.php"</script>');
}
?>
<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="\css\login.css">
</head>
<body>
    <h2>登录表单</h2>
    <div class="f-box">
        <form action="..\handle.php?action=login" method="POST">
            <fieldset>
                <div class="e-box">
                    <label for="email">邮箱：</label>
                    <input type="email" name="email" id="email" require autofocus autocomplete="on">
                </div>
                <div class="p-box">
                    <label for="password">密码：</label>
                    <input type="password" name="password" id="password" require>
                </div>
                <div class="s-box">
                    <button type="submit">提交</button>
                </div>
                <div class="o-box">
                    <!--链接到注册页-->
                    <a href="register.php">还没有账户？注册一个吧！</a>
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    color: black;
    text-decoration: none;
}
h2 {
    width: 300px;
    height: 40px;
    margin: 10px auto 0 auto;
    text-align: center;
    line-height: 40px;
}
.f-box {
    width: 400px;
    height: 500px;
    margin: 20px auto;
}
.e-box {
    width: 300px;
    height: 30px;
    margin: 25px auto 0 auto;
}
.e-box input {
    width: 240px;
    height: 100%;
}
.p-box {
    width: 300px;
    height: 30px;
    margin: 10px auto;
}
.p-box input {
    width: 240px;
    height: 100%;
}
.s-box {
    width: 300px;
    height: 30px;
    margin: 0 auto;
}
.s-box button {
    width: 100%;
    height: 100%;
}
.s-box button:hover {
    background-color: lightyellow;
}
.o-box {
    width: 200px;
    margin: 10px auto 30px auto;
}

3. register.php & register.css

<?php
//开启会话
session_start();
//判断是否登录
if (isset($_SESSION['user'])) {
    //如果已登录则输出请勿重复登录的信息并返回首页
    exit('<script>alert("请勿重复登录");location.href="/index.php"</script>');
}
?>
<!DOCTYPE html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页</title>
    <link rel="stylesheet" href="\css\register.css">
</head>
<body>
<h2>注册表单</h2>
    <div class="f-box">
        <!--给一个提交验证，如果验证失败中止提交-->
        <form action="..\handle.php?action=register" method="POST" onsubmit="return compare()">
            <fieldset>
                <div class="d-box">
                    <label for="username">姓名：</label>
                    <input type="text" name="username" id="username" required autofocus autocomplete="on">
                </div>
                <div class="d-box">
                    <label for="email">邮箱：</label>
                    <input type="email" name="email" id="email" required autocomplete="on">
                </div>
                <div class="d-box">
                    <label for="p1">密码：</label>
                    <input type="password" name="p1" id="p1" required>
                </div>
                <div class="d-box">
                    <label for="p2">重复：</label>
                    <input type="password" name="p2" id="p2" required>
                </div>
                <div class="d-box">
                    <button type="submit">提交</button>
                </div>
                <div class="d-box">
                    <a href="login.php">已有账号？直接登录！</a>
                </div>
            </fieldset>
        </form>
    </div>
    <script>
        //验证二次密码是否相等
        function compare() {
            if (document.forms[0].p1.value.trim() !== document.forms[0].p2.value.trim()) {
                window.alert('二次密码不相等');
                return false;
            };
        }
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    color: black;
    text-decoration: none;
}
h2 {
    width: 300px;
    height: 40px;
    margin: 10px auto 0 auto;
    text-align: center;
    line-height: 40px;
}
.f-box {
    width: 400px;
    height: 600px;
    margin: 20px auto;
}
.d-box:nth-of-type(1) {
    width: 300px;
    height: 30px;
    margin: 25px auto 0 auto;
}
.d-box:nth-of-type(1) input {
    width: 240px;
    height: 100%;
}
.d-box:nth-of-type(2) {
    width: 300px;
    height: 30px;
    margin: 10px auto;
}
.d-box:nth-of-type(2) input {
    width: 240px;
    height: 100%;
}
.d-box:nth-of-type(3) {
    width: 300px;
    height: 30px;
    margin: 10px auto;
}
.d-box:nth-of-type(3) input {
    width: 240px;
    height: 100%;
}
.d-box:nth-of-type(4) {
    width: 300px;
    height: 30px;
    margin: 10px auto;
}
.d-box:nth-of-type(4) input {
    width: 240px;
    height: 100%;
}
.d-box:nth-of-type(5) {
    width: 300px;
    height: 30px;
    margin: 0 auto;
}
.d-box:nth-of-type(5) button {
    width: 100%;
    height: 100%;
}
.d-box:nth-of-type(5) button:hover {
    background-color: lightyellow;
}
.d-box:nth-of-type(6) {
    width: 200px;
    margin: 10px auto 30px auto;
}

4. handle.php

<?php
//开启会话
session_start();
//1. 获取表中用户名、邮箱和密码字段数据
$pdo = new PDO('mysql:host=localhost;dbname=shopping', 'root', 'root');
$stmt = $pdo->prepare('SELECT `user_name`, `email`, `passwd` FROM `userinfo`');
$stmt->execute();
$t_data = $stmt->fetchAll(PDO::FETCH_ASSOC);
//2. 处理用户登录、退出与注册
//获取请求参数值并根据其来使用对应的方法进行处理
$action = $_GET['action'];
switch (strtolower($action)) {
    //2.1 登录
    case 'login':
        //判断请求是否合法
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            //获取从前端传过来的数据
            $f_email = $_POST['email'];
            $f_passwd = md5($_POST['password']);
            //与后台数据进行校验并获取
            $results = array_filter($t_data, function($user) use ($f_email, $f_passwd) {
                return $user['email'] === $f_email && $user['passwd'] === $f_passwd;
            });
            //如果有记录证明校验成功并在服务端设置SESSIONID
            if (count($results) === 1) {
                $user_v = (current($results))['user_name'];
                $_SESSION['user'] = $user_v;
                //校验通过并设置好SESSIONID后退出当前页面返回首页
                exit('<script>alert("验证通过");location.href="index.php"</script>');
            } else {
                //校验不通过输出错误信息后返回当前页面
                exit('<script>alert("邮箱或密码错误，或者还未注册账户");location.href="user/login.php"</script>');
            }
        } else {
            die('请求类型错误');
        }
    break;
    //2.2 退出
    case 'logout':
        //判断是否登录，已登录则清除SESSIONID并返回首页
        if (isset($_SESSION['user'])) {
            session_destroy();
            exit('<script>alert("退出成功");location.href="/index.php"</script>');
        }
    break;
    //2.3 注册
    case 'register':
        //获取从前端传过来的数据
        $username = $_POST['username'];
        $email = $_POST['email'];
        $pwd = md5($_POST['p1']);
        //定义非空字段数据
        $reg_time = time();
        //将新用户数据插入到表中
        $sql = "INSERT `userinfo` SET `user_name`='{$username}', `passwd`='{$pwd}', `email`='{$email}', `reg_time`='{$reg_time}'";
        $stmt = $pdo->prepare($sql);
        $stmt->execute();
        //判断是否插入成功
        if ($stmt->rowCount() === 1) {
            //插入成功代表注册成功并返回至登录页面
            exit('<script>alert("注册成功");location.href="user/login.php"</script>');
        } else {
            //注册失败输出错误信息后返回当前页面
            exit('<script>alert("注册失败");location.href="user/register.php"</script>');
        }
    break;
    //未定义
    default:
        exit('未定义操作');
}