0513会话控制作业

1.登陆页前端 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form  id="loginForm">
    <table>
        <tr>
            <td><label for="username">用户名:</label></td>
            <td><input type="text" required autofocus placeholder="请输入用户名" name="username" id="username"></td>
        </tr>
        <tr>
            <td><label for="password">密码:</label></td>
            <td><input type="password" required autofocus placeholder="请输入密码" name="password" id="password"></td>
        </tr>
        <tr>
            <td><img src="gd_captcha.php" alt="验证码" onclick="reloadImg()" id="img"></td>
            <td><input type="text" name="captcha" id="captcha" placeholder="请输入验证码"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="登陆" id="btn" onclick="dologin()"></td>
        </tr>
    </table>
</form>
<script>
    // 重新生成验证码
    function reloadImg() {
        $('#img').attr('src', "gd_captcha.php?id="+Math.random());
    }
    // 回车登陆
    $('#btn').keydown(function (e) {
        if (e.keyCode == 13) {
            dologin();
        }
    });
    // 登陆
    function dologin() {
        let username = $.trim($('#username').val()),
            password = $.trim($('#password').val()),
            captcha = $.trim($('#captcha').val());
        if (username == '') {
            alert('请输入用户名');
            return false;
        }
        if (password == '') {
            alert('请输入密码');
            return false;
        }
        if (captcha == '') {
            alert('请输入验证码');
            return false;
        }
        $.post('dologin.php', {'username': username, 'password': password, 'captcha': captcha}, function (res) {
            if (res.code > 0) {
                alert(res.msg);
                reloadImg();
            } else {
                alert(res.msg);
                setTimeout(() => {
                    window.location.href = 'index.php'
                }, 1000);
            }
        }, 'json')
    }
</script>
</body>
</html>

2.处理登陆 dologin.php

<?php
require 'connect.php';
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
$captcha = strtolower($_POST['captcha']);
if ($username == '') {
    exit(json_encode(array('code' => 1, 'msg' => '用户名不能为空')));
}
if ($password == '') {
    exit(json_encode(array('code' => 1, 'msg' => '密码不能为空')));
}
if ($captcha == '') {
    exit(json_encode(array('code' => 1, 'msg' => '验证码不能为空')));
}
// 验证验证码
if ($captcha != strtolower($_SESSION['captcha'])) {
    exit(json_encode(array('code' => 1, 'msg' => '验证码不正确')));
}
// 验证用户
$sql = "SELECT `username`,`password` FROM `users` WHERE `username`= ?; ";
$stmt = $pdo->prepare($sql);
$stmt->execute([$username]);
$user  = $stmt->fetch();
if ($user == false) {
    exit(json_encode(array('code' => 1, 'msg' => '用户名不存在')));
}
if (md5($user['username'].$password) != $user['password']) {
    exit(json_encode(array('code' => 1, 'msg' => '密码错误')));
}
// 验证成功后设置session
$_SESSION['username'] = $username;
exit(json_encode(array('code' => 0, 'msg' => '登陆成功')));

connect.php

$dsn = 'mysql:host=127.0.0.1;port=3306;dbname=user';
$username = 'root';
$password = 'root123';
$pdo = new PDO($dsn, $username, $password);

3.登陆成功后到主页index.php

<?php
session_start();
echo $_SESSION['username']. '登陆成功';
?>
<button name="logout" id="logout">安全退出</button>
<script>
    const btn = document.querySelector('#logout');
    btn.onclick = (() => location.href='dologout.php')
</script>

4.安全退出dologout.php

session_start();
session_destroy();
exit('退出成功');

相关文章