0513会话控制作业

1.登陆页前端 login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  7. </head>
  8. <body>
  9. <form id="loginForm">
  10. <table>
  11. <tr>
  12. <td><label for="username">用户名:</label></td>
  13. <td><input type="text" required autofocus placeholder="请输入用户名" name="username" id="username"></td>
  14. </tr>
  15. <tr>
  16. <td><label for="password">密码:</label></td>
  17. <td><input type="password" required autofocus placeholder="请输入密码" name="password" id="password"></td>
  18. </tr>
  19. <tr>
  20. <td><img src="gd_captcha.php" alt="验证码" onclick="reloadImg()" id="img"></td>
  21. <td><input type="text" name="captcha" id="captcha" placeholder="请输入验证码"></td>
  22. </tr>
  23. <tr>
  24. <td></td>
  25. <td><input type="button" value="登陆" id="btn" onclick="dologin()"></td>
  26. </tr>
  27. </table>
  28. </form>
  29. <script>
  30. // 重新生成验证码
  31. function reloadImg() {
  32. $('#img').attr('src', "gd_captcha.php?id="+Math.random());
  33. }
  34. // 回车登陆
  35. $('#btn').keydown(function (e) {
  36. if (e.keyCode == 13) {
  37. dologin();
  38. }
  39. });
  40. // 登陆
  41. function dologin() {
  42. let username = $.trim($('#username').val()),
  43. password = $.trim($('#password').val()),
  44. captcha = $.trim($('#captcha').val());
  45. if (username == '') {
  46. alert('请输入用户名');
  47. return false;
  48. }
  49. if (password == '') {
  50. alert('请输入密码');
  51. return false;
  52. }
  53. if (captcha == '') {
  54. alert('请输入验证码');
  55. return false;
  56. }
  57. $.post('dologin.php', {'username': username, 'password': password, 'captcha': captcha}, function (res) {
  58. if (res.code > 0) {
  59. alert(res.msg);
  60. reloadImg();
  61. } else {
  62. alert(res.msg);
  63. setTimeout(() => {
  64. window.location.href = 'index.php'
  65. }, 1000);
  66. }
  67. }, 'json')
  68. }
  69. </script>
  70. </body>
  71. </html>

2.处理登陆 dologin.php

  1. <?php
  2. require 'connect.php';
  3. session_start();
  4. $username = $_POST['username'];
  5. $password = $_POST['password'];
  6. $captcha = strtolower($_POST['captcha']);
  7. if ($username == '') {
  8. exit(json_encode(array('code' => 1, 'msg' => '用户名不能为空')));
  9. }
  10. if ($password == '') {
  11. exit(json_encode(array('code' => 1, 'msg' => '密码不能为空')));
  12. }
  13. if ($captcha == '') {
  14. exit(json_encode(array('code' => 1, 'msg' => '验证码不能为空')));
  15. }
  16. // 验证验证码
  17. if ($captcha != strtolower($_SESSION['captcha'])) {
  18. exit(json_encode(array('code' => 1, 'msg' => '验证码不正确')));
  19. }
  20. // 验证用户
  21. $sql = "SELECT `username`,`password` FROM `users` WHERE `username`= ?; ";
  22. $stmt = $pdo->prepare($sql);
  23. $stmt->execute([$username]);
  24. $user = $stmt->fetch();
  25. if ($user == false) {
  26. exit(json_encode(array('code' => 1, 'msg' => '用户名不存在')));
  27. }
  28. if (md5($user['username'].$password) != $user['password']) {
  29. exit(json_encode(array('code' => 1, 'msg' => '密码错误')));
  30. }
  31. // 验证成功后设置session
  32. $_SESSION['username'] = $username;
  33. exit(json_encode(array('code' => 0, 'msg' => '登陆成功')));

connect.php

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

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

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

4.安全退出dologout.php

  1. session_start();
  2. session_destroy();
  3. exit('退出成功');