简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >PHP实例演示会话控制/简单的登录注册功能

PHP实例演示会话控制/简单的登录注册功能

早晨
早晨原创
2022年08月25日 17:03:23666浏览

首页登录入口

  1. <?php
  3. namespace _0825;
  5. session_start();
  7. // 判断是否已登录?
  8. if (isset($_SESSION['user'])) {
  9.     $us = unserialize($_SESSION['user']);
  10. }
  11. ?>
  12. <!DOCTYPE html>
  13. <html lang="zh-CN">
  15. <head>
  16.     <meta charset="UTF-8">
  17.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.     <title>首页登录入口</title>
  20. </head>
  21. <style>
  22.     nav {
  23.         height: 40px;
  24.         background-color: deepskyblue;
  25.         padding: 0 20px;
  26.         display: flex;
  27.         justify-content: space-between;
  28.         align-items: center;
  29.     }
  31.     nav>a {
  32.         color: white;
  33.         text-decoration: none;
  34.     }
  35. </style>
  37. <body>
  38.     <nav>
  39.         <a href="index.php">我的博客</a>
  41.         <?php if (isset($us)) : ?>
  42.             <span style="margin-left: 400px">用户名：<?= $us['name'] ?></span>
  43.             <span style="color: red;">邮箱：<?= $us['email'] ?></span>
  45.             <a id="logout">退出</a>
  46.         <?php else : ?>
  47.             <a href="login.php">登录</a>
  48.         <?php endif ?>
  49.     </nav>
  50.     <script>
  51.         document.querySelector('#logout').addEventListener('click', function(event) {
  52.             if (confirm('是否退出')) {
  53.                 event.preventDefault();
  54.                 window.location.assign("top.php?us=logout");
  55.             }
  56.         });
  57.     </script>
  58. </body>
  60. </html>

用户登录login.php

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>用户登录</title>
  9.     <link rel="stylesheet" href="css/font-awesome.min.css">
  10.     <link rel="stylesheet" href="css/bootstrap.min.css">
  11.     <style type="text/css">
  12.         body,
  13.         html {
  14.             font-size: 100%;
  15.             padding: 0;
  16.             margin: 0;
  17.         }
  19.         /* Reset */
  20.         *,
  21.         *:after,
  22.         *:before {
  23.             -webkit-box-sizing: border-box;
  24.             -moz-box-sizing: border-box;
  25.             box-sizing: border-box;
  26.         }
  29.         .clearfix:before,
  30.         .clearfix:after {
  31.             content: " ";
  32.             display: table;
  33.         }
  35.         .clearfix:after {
  36.             clear: both;
  37.         }
  39.         body {
  40.             background: #00b4ef;
  41.             color: #D5D6E2;
  42.             font-weight: 500;
  43.             font-size: 1.05em;
  44.             font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
  45.         }
  47.         a {
  48.             color: rgba(255, 255, 255, 0.6);
  49.             outline: none;
  50.             text-decoration: none;
  51.             -webkit-transition: 0.2s;
  52.             transition: 0.2s;
  53.         }
  55.         a:hover,
  56.         a:focus {
  57.             color: #74777b;
  58.             text-decoration: none;
  59.         }
  61.         .form-horizontal {
  62.             background: #fff;
  63.             padding-bottom: 40px;
  64.             border-radius: 15px;
  65.             text-align: center;
  66.         }
  68.         .form-horizontal .heading {
  69.             display: block;
  70.             font-size: 35px;
  71.             font-weight: 700;
  72.             padding: 35px 0;
  73.             border-bottom: 1px solid #f0f0f0;
  74.             margin-bottom: 30px;
  75.         }
  77.         .form-horizontal .form-group {
  78.             padding: 0 40px;
  79.             margin: 0 0 25px 0;
  80.             position: relative;
  81.         }
  83.         .form-horizontal .form-control {
  84.             background: #f0f0f0;
  85.             border: none;
  86.             border-radius: 20px;
  87.             box-shadow: none;
  88.             padding: 0 20px 0 45px;
  89.             height: 40px;
  90.             transition: all 0.3s ease 0s;
  91.         }
  93.         .form-horizontal .form-control:focus {
  94.             background: #e0e0e0;
  95.             box-shadow: none;
  96.             outline: 0 none;
  97.         }
  99.         .form-horizontal .form-group i {
  100.             position: absolute;
  101.             top: 12px;
  102.             left: 60px;
  103.             font-size: 17px;
  104.             color: #c8c8c8;
  105.             transition: all 0.5s ease 0s;
  106.         }
  108.         .form-horizontal .form-control:focus+i {
  109.             color: #00b4ef;
  110.         }
  112.         .form-horizontal .fa-question-circle {
  113.             display: inline-block;
  114.             position: absolute;
  115.             top: 12px;
  116.             right: 60px;
  117.             font-size: 20px;
  118.             color: #808080;
  119.             transition: all 0.5s ease 0s;
  120.         }
  122.         .form-horizontal .fa-question-circle:hover {
  123.             color: #000;
  124.         }
  126.         .form-horizontal .main-checkbox {
  127.             float: left;
  128.             width: 20px;
  129.             height: 20px;
  130.             background: #11a3fc;
  131.             border-radius: 50%;
  132.             position: relative;
  133.             margin: 5px 0 0 5px;
  134.             border: 1px solid #11a3fc;
  135.         }
  137.         .form-horizontal .main-checkbox label {
  138.             width: 20px;
  139.             height: 20px;
  140.             position: absolute;
  141.             top: 0;
  142.             left: 0;
  143.             cursor: pointer;
  144.         }
  146.         .form-horizontal .main-checkbox label:after {
  147.             content: "";
  148.             width: 10px;
  149.             height: 5px;
  150.             position: absolute;
  151.             top: 5px;
  152.             left: 4px;
  153.             border: 3px solid #fff;
  154.             border-top: none;
  155.             border-right: none;
  156.             background: transparent;
  157.             opacity: 0;
  158.             -webkit-transform: rotate(-45deg);
  159.             transform: rotate(-45deg);
  160.         }
  162.         .form-horizontal .main-checkbox input[type=checkbox] {
  163.             visibility: hidden;
  164.         }
  166.         .form-horizontal .main-checkbox input[type=checkbox]:checked+label:after {
  167.             opacity: 1;
  168.         }
  170.         .form-horizontal .text {
  171.             float: left;
  172.             margin-left: 7px;
  173.             line-height: 20px;
  174.             padding-top: 5px;
  175.             text-transform: capitalize;
  176.         }
  178.         .form-horizontal .text a {
  179.             color: #000;
  180.         }
  182.         .form-horizontal .text a:hover {
  183.             color: red;
  184.         }
  186.         .form-horizontal .btn {
  187.             float: right;
  188.             font-size: 14px;
  189.             color: #fff;
  190.             background: #00b4ef;
  191.             border-radius: 30px;
  192.             padding: 10px 25px;
  193.             border: none;
  194.             text-transform: capitalize;
  195.             transition: all 0.5s ease 0s;
  196.         }
  198.         @media only screen and (max-width: 479px) {
  199.             .form-horizontal .form-group {
  200.                 padding: 0 25px;
  201.             }
  203.             .form-horizontal .form-group i {
  204.                 left: 45px;
  205.             }
  207.             .form-horizontal .btn {
  208.                 padding: 10px 20px;
  209.             }
  210.         }
  211.     </style>
  212. </head>
  214. <body>
  215.     <div class="demo" style="padding: 20px 0;">
  216.         <div class="container">
  217.             <div class="row">
  218.                 <div class="col-md-offset-3 col-md-6">
  219.                     <form class="form-horizontal" action="top.php?us=login" method="post" onsubmit="return compare()">
  220.                         <span class="heading">用户登录</span>
  221.                         <div class="form-group">
  222.                             <input type="email" class="form-control" name="email" id="inputEmail" placeholder="请输入邮箱">
  223.                             <i class="fa fa-user"></i>
  224.                         </div>
  225.                         <div class="form-group help">
  226.                             <input type="password" class="form-control" name="password" id="Password" placeholder="请输入密码">
  227.                             <i class="fa fa-lock"></i>
  228.                         </div>
  229.                         <div class="form-group">
  230.                             <span class="text"><a href="reg.php">注册用户</a></span>
  231.                             <button type="submit" class="btn btn-default">登录</button>
  232.                         </div>
  233.                     </form>
  234.                 </div>
  235.             </div>
  236.         </div>
  237.     </div>
  238. </body>
  239. </html>

注册用户reg.php

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>注册用户</title>
  9.     <link rel="stylesheet" href="css/font-awesome.min.css">
  10.     <link rel="stylesheet" href="css/bootstrap.min.css">
  11.     <style type="text/css">
  12.         body,
  13.         html {
  14.             font-size: 100%;
  15.             padding: 0;
  16.             margin: 0;
  17.         }
  19.         /* Reset */
  20.         *,
  21.         *:after,
  22.         *:before {
  23.             -webkit-box-sizing: border-box;
  24.             -moz-box-sizing: border-box;
  25.             box-sizing: border-box;
  26.         }
  29.         .clearfix:before,
  30.         .clearfix:after {
  31.             content: " ";
  32.             display: table;
  33.         }
  35.         .clearfix:after {
  36.             clear: both;
  37.         }
  39.         body {
  40.             background: #00b4ef;
  41.             color: #D5D6E2;
  42.             font-weight: 500;
  43.             font-size: 1.05em;
  44.             font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
  45.         }
  47.         a {
  48.             color: rgba(255, 255, 255, 0.6);
  49.             outline: none;
  50.             text-decoration: none;
  51.             -webkit-transition: 0.2s;
  52.             transition: 0.2s;
  53.         }
  55.         a:hover,
  56.         a:focus {
  57.             color: #74777b;
  58.             text-decoration: none;
  59.         }
  61.         .form-horizontal {
  62.             background: #fff;
  63.             padding-bottom: 40px;
  64.             border-radius: 15px;
  65.             text-align: center;
  66.         }
  68.         .form-horizontal .heading {
  69.             display: block;
  70.             font-size: 35px;
  71.             font-weight: 700;
  72.             padding: 35px 0;
  73.             border-bottom: 1px solid #f0f0f0;
  74.             margin-bottom: 30px;
  75.         }
  77.         .form-horizontal .form-group {
  78.             padding: 0 40px;
  79.             margin: 0 0 25px 0;
  80.             position: relative;
  81.         }
  83.         .form-horizontal .form-control {
  84.             background: #f0f0f0;
  85.             border: none;
  86.             border-radius: 20px;
  87.             box-shadow: none;
  88.             padding: 0 20px 0 45px;
  89.             height: 40px;
  90.             transition: all 0.3s ease 0s;
  91.         }
  93.         .form-horizontal .form-control:focus {
  94.             background: #e0e0e0;
  95.             box-shadow: none;
  96.             outline: 0 none;
  97.         }
  99.         .form-horizontal .form-group i {
  100.             position: absolute;
  101.             top: 12px;
  102.             left: 60px;
  103.             font-size: 17px;
  104.             color: #c8c8c8;
  105.             transition: all 0.5s ease 0s;
  106.         }
  108.         .form-horizontal .form-control:focus+i {
  109.             color: #00b4ef;
  110.         }
  112.         .form-horizontal .fa-question-circle {
  113.             display: inline-block;
  114.             position: absolute;
  115.             top: 12px;
  116.             right: 60px;
  117.             font-size: 20px;
  118.             color: #808080;
  119.             transition: all 0.5s ease 0s;
  120.         }
  122.         .form-horizontal .fa-question-circle:hover {
  123.             color: #000;
  124.         }
  126.         .form-horizontal .main-checkbox {
  127.             float: left;
  128.             width: 20px;
  129.             height: 20px;
  130.             background: #11a3fc;
  131.             border-radius: 50%;
  132.             position: relative;
  133.             margin: 5px 0 0 5px;
  134.             border: 1px solid #11a3fc;
  135.         }
  137.         .form-horizontal .main-checkbox label {
  138.             width: 20px;
  139.             height: 20px;
  140.             position: absolute;
  141.             top: 0;
  142.             left: 0;
  143.             cursor: pointer;
  144.         }
  146.         .form-horizontal .main-checkbox label:after {
  147.             content: "";
  148.             width: 10px;
  149.             height: 5px;
  150.             position: absolute;
  151.             top: 5px;
  152.             left: 4px;
  153.             border: 3px solid #fff;
  154.             border-top: none;
  155.             border-right: none;
  156.             background: transparent;
  157.             opacity: 0;
  158.             -webkit-transform: rotate(-45deg);
  159.             transform: rotate(-45deg);
  160.         }
  162.         .form-horizontal .main-checkbox input[type=checkbox] {
  163.             visibility: hidden;
  164.         }
  166.         .form-horizontal .main-checkbox input[type=checkbox]:checked+label:after {
  167.             opacity: 1;
  168.         }
  170.         .form-horizontal .text {
  171.             float: left;
  172.             margin-left: 7px;
  173.             line-height: 20px;
  174.             padding-top: 5px;
  175.             text-transform: capitalize;
  176.         }
  178.         .form-horizontal .text a {
  179.             color: #000;
  180.         }
  182.         .form-horizontal .text a:hover {
  183.             color: red;
  184.         }
  186.         .form-horizontal .btn {
  187.             float: right;
  188.             font-size: 14px;
  189.             color: #fff;
  190.             background: #00b4ef;
  191.             border-radius: 30px;
  192.             padding: 10px 25px;
  193.             border: none;
  194.             text-transform: capitalize;
  195.             transition: all 0.5s ease 0s;
  196.         }
  198.         @media only screen and (max-width: 479px) {
  199.             .form-horizontal .form-group {
  200.                 padding: 0 25px;
  201.             }
  203.             .form-horizontal .form-group i {
  204.                 left: 45px;
  205.             }
  207.             .form-horizontal .btn {
  208.                 padding: 10px 20px;
  209.             }
  210.         }
  211.     </style>
  213. </head>
  215. <body>
  217.     <div class="demo" style="padding: 20px 0;">
  218.         <div class="container">
  219.             <div class="row">
  220.                 <div class="col-md-offset-3 col-md-6">
  221.                     <form class="form-horizontal" action="top.php?us=reg" method="post" onsubmit="return compare()">
  222.                         <span class="heading">注册用户</span>
  223.                         <div class="form-group">
  224.                             <input type="text" class="form-control" name="name" id="inputName" placeholder="请输入昵称">
  225.                             <i class="fa fa-user"></i>
  226.                         </div>
  227.                         <div class="form-group">
  228.                             <input type="email" class="form-control" name="email" id="inputEmail" placeholder="请输入邮箱">
  229.                             <i class="fa fa-user"></i>
  230.                         </div>
  231.                         <div class="form-group help">
  232.                             <input type="password" class="form-control" name="password1" id="Pass1" placeholder="密码不少于8位">
  233.                             <i class="fa fa-lock"></i>
  234.                         </div>
  235.                         <div class="form-group help">
  236.                             <input type="password" class="form-control" name="password2" id="Pass2" placeholder="重复输入密码">
  237.                             <i class="fa fa-lock"></i>
  238.                         </div>
  239.                         <div class="form-group">
  240.                             <span class="text"><a href="login.php">用户登录</a></span>
  241.                             <button type="submit" class="btn btn-default" id="reg">提交注册</button>
  242.                         </div>
  243.                     </form>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.     </div>
  248.     <script>
  249.         function password() {
  250.             if (document.forms[0].pass1.value.trim() !== document.forms[0].pass2.value.trim()) {
  251.                 document.querySelector('#reg').innerText = "两次密码不一样，请重新设置。";
  252.                 return false;
  253.             }
  254.         }
  255.     </script>
  256. </body>
  258. </html>

会话处理top.php

  1. <?php
  3. namespace _0825;
  5. use PDO;
  6. // 开户会话
  7. session_start();
  8. // 连接数据库
  9. $db = new PDO('mysql:dbname=phpedu', 'root', '4889671');
  10. $stmt = $db->prepare('SELECT * FROM `admin_user`;');
  11. if ($stmt->execute()) {
  12.     $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
  13. } else {
  14.     print_r($stmt->errorInfo());
  15. }
  17. // 获取用户
  18. $us = strtolower($_GET['us']);
  19. switch ($us) {
  20.         // 注册
  21.     case 'reg':
  22.         // 1. 获取新用户的数据
  23.         $name = $_POST['name'];
  24.         $email = $_POST['email'];
  25.         $password = sha1(md5($_POST['password2']));
  26.         $datetime = time();
  27.         $sql = "INSERT `admin_user` SET `name`= ?, `email`= ?, `password`= ?, `datetime`= ?";
  28.         $stmt = $db->prepare($sql);
  29.         $data = [$name, $email, $password, $datetime];
  30.         if ($stmt->execute($data)) {
  31.             if ($stmt->rowCount() > 0) {
  32.                 // 注册成功之后,让用户自动登录
  33.                 $sql = 'SELECT * FROM `admin_user` WHERE `id` = ' . $db->lastInsertId();
  34.                 $stmt = $db->prepare($sql);
  35.                 $stmt->execute();
  36.                 $newUser = $stmt->fetch(PDO::FETCH_ASSOC);
  37.                 $_SESSION['user'] = serialize($newUser);
  38.                 exit('<script>alert("注册成功");location.href="index.php"</script>');
  39.             } else {
  40.                 exit('<script>alert("注册失败");location.href="reg.php"</script>');
  41.             }
  42.         } else {
  43.             print_r($stmt->errorInfo());
  44.         }
  46.         // 登录
  47.     case 'login':
  48.         if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  49.             $email = $_POST['email'];
  50.             $password = sha1(md5($_POST['password']));
  51.             $result = array_filter($users, function ($user) use ($email, $password) {
  52.                 return $user['email'] === $email && $user['password'] === $password;
  53.             });
  54.             if (count($result) === 1) {
  55.                 // 登录成功,写入session
  56.                 $_SESSION['user'] = serialize(array_pop($result));
  57.                 exit('<script>alert("验证通过");location.href="index.php"</script>');
  58.             }
  59.             exit('请求类型错误');
  60.         }
  62.     case 'logout':
  63.         if (isset($_SESSION['user'])) {
  64.             session_destroy();
  65.             exit('<script>alert("退出成功");location.href="index.php"</script>');
  66.         }
  67.     default:
  68.         exit('参数非法或未定义操作');
  69. }

运行效果

![![![](https://img.php.cn/upload/image/372/649/711/1661417934404408.jpg)](https://img.php.cn/upload/image/540/952/244/1661417923608889.jpg)](https://img.php.cn/upload/image/962/396/429/1661417915716768.jpg)

上一条：PHP之MVC底层实现下一条：0808-PHP运行原理图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多