PHP注册、登录、退出实战小案例

效果图

（开发环境：Windows，wampserver）

  1. 首先，创建数据库userinfo，添加数据表user，如下
  2. 创建项目结构，并引入公共资源
  3. config/ 文件夹下面创建database.php文件，代码如下：
  1. <?php
  2. return [
  3.     'type' => $type ?? 'mysql',
  4.     'username' => $username ?? 'root',
  5.     'password' => $password ?? '',
  6.     'host' => $host ?? 'localhost',
  7.     'port' => $port ?? '3306',
  8.     'charset' => $charset ?? 'utf8',
  9.     'dbname' => 'userinfo'
  10. ];
  1. 编写login.php
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>登录-恋爱ya</title>
  8.     <link rel="stylesheet" href="/public/static/css/adminlte.min.css">
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  14.         .container_header {
  15.             width: 100%;
  16.             height: auto;
  17.             position: relative;
  18.         }
  19.         .container_header div img {
  20.             width: 100%;
  21.             height: auto;
  22.         }
  23.         .container_header .container_form {
  24.             position: absolute;
  25.             top: 65%;
  26.             left: 15%;
  27.             height: 200px;
  28.             width: 70%;
  29.             /* border: 1px solid red; */
  30.         }
  31.         .container_form input {
  32.             width: 100%;
  33.             height: 2.5em;
  34.             border: none;
  35.             border-bottom: 1px solid #d0d0d0;
  36.         }
  37.         .container_form label {
  38.             font-size: 1em;
  39.             font-weight: normal;
  40.             color: lightslategray;
  41.         }
  42.         ::placeholder {
  43.             color: #d0d0d0;
  44.         }
  45.         .container_form .click_button button {
  46.             width: 100%;
  47.             font-size: 1.4em;
  48.             height: 1.5em;
  49.             color: #fff;
  50.             font-weight: 500;
  51.             position: absolute;
  52.             background-color: #ffdf58;
  53.             border: none;
  54.             border-radius: 20px;
  55.             margin-top: 10px;
  56.         }
  57.         .container_form a {
  58.             color: #fb948b;
  59.             font-size: 0.8em;
  60.             position: absolute;
  61.             margin-top: 50px;
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <div class="container_header">
  67.         <div class="container_img">
  68.             <img src="./public/static/img/bgimg.jpg" alt="">
  69.         </div>
  70.         <div class="container_form">
  71.             <form action="" role="form" id="sub_form">
  72.                 <div class="input_uname form-group">
  73.                     <label for="uname">用户名：</label>
  74.                     <input type="text" id="uname" name="uname" placeholder="请输入用户名" autofocus>
  75.                 </div>
  76.                 <div class="input_upwd form-group">
  77.                     <label for="upwd">密&emsp;码：</label>
  78.                     <input type="password" id="upwd" name="upwd" placeholder="请输入密码">
  79.                 </div>
  80.                 <div class="click_button">
  81.                 <button type="submit" class="">登&emsp;录</button>
  82.                 </div>
  83.                 <a href="reg.php">没有账号？点击注册呀~</a>
  84.             </form>
  85.         </div>
  86.     </div>
  87.     <script src="/public/static/js/jquery.min.js"></script>
  88.     <script src="/public/static/js/jquery.form.min.js"></script>
  89.     <script src="/public/static/js/jquery.validate.min.js"></script>
  90.     <script>
  91.         $(document).ready(function() {
  92.             $.validator.setDefaults({
  93.                 submitHandler: function(form) {
  94.                     $('#sub_form').ajaxSubmit({
  95.                         url: 'dosubmit.php?type=login',
  96.                         dataType: 'json',
  97.                         type: 'POST',
  98.                         success: function(res) {
  99.                             if (res.status == 1) {
  100.                                 alert('登录成功');
  101.                                 window.location.href = "index.php";
  102.                             } else {
  103.                                 alert('用户名或密码错误,请检查');
  104.                             }
  105.                         },
  106.                         error: function() {
  107.                             alert('系统出错啦,请稍后重试ya');
  108.                         }
  109.                     })
  110.                 }
  111.             });
  112.             // 对表单的校验
  113.             $('#sub_form').validate({
  114.                 rules: {
  115.                     uname: {
  116.                         required: true,
  117.                         rangelength: [2, 10]
  118.                     },
  119.                     upwd: {
  120.                         required: true,
  121.                         minlength: 6
  122.                     }
  123.                 },
  124.                 messages: {
  125.                     uname: {
  126.                         required: "账户不能为空",
  127.                         rangelength: '用户名必须2-10字符'
  128.                     },
  129.                     upwd: {
  130.                         required: "密码不能为空",
  131.                         minlength: "密码至少6位"
  132.                     }
  133.                 },
  134.                 errorElement: 'span',
  135.                 errorPlacement: function(error, element) {
  136.                     error.addClass('invalid-feedback');
  137.                     element.closest('.form-group').append(error);
  138.                 },
  139.                 highlight: function(element, errorClass, validClass) {
  140.                     $(element).addClass('is-invalid');
  141.                 },
  142.                 unhighlight: function(element, errorClass, validClass) {
  143.                     $(element).removeClass('is-invalid');
  144.                 }
  145.             });
  146.         });
  147.     </script>
  148. </body>
  149. </html>
  1. 编写reg.php
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>注册-恋爱ya</title>
  8.     <link rel="stylesheet" href="/public/static/css/adminlte.min.css">
  9.     <style>
  10.         * {
  11.             padding: 0;
  12.             margin: 0;
  13.         }
  14.         .container_header {
  15.             width: 100%;
  16.             height: auto;
  17.             position: relative;
  18.         }
  19.         .container_header div img {
  20.             width: 100%;
  21.             height: auto;
  22.         }
  23.         .container_header .container_form {
  24.             position: absolute;
  25.             top: 60%;
  26.             left: 15%;
  27.             height: 200px;
  28.             width: 70%;
  29.             /* border: 1px solid red; */
  30.         }
  31.         .container_form input {
  32.             width: 100%;
  33.             height: 2.5em;
  34.             border: none;
  35.             border-bottom: 1px solid #d0d0d0;
  36.         }
  37.         .container_form label {
  38.             font-size: 1em;
  39.             font-weight: normal;
  40.             color: lightslategray;
  41.         }
  42.         ::placeholder {
  43.             color: #d0d0d0;
  44.         }
  45.         .container_form .click_button button {
  46.             width: 100%;
  47.             font-size: 1.4em;
  48.             height: 1.5em;
  49.             color: #fff;
  50.             font-weight: 500;
  51.             position: absolute;
  52.             background-color: #ffdf58;
  53.             border: none;
  54.             border-radius: 20px;
  55.             margin-top: 10px;
  56.         }
  57.         .container_form a {
  58.             color: #fb948b;
  59.             font-size: 0.8em;
  60.             position: absolute;
  61.             margin-top: 50px;
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <div class="container_header">
  67.         <div class="container_img">
  68.             <img src="./public/static/img/bgimg.jpg" alt="">
  69.         </div>
  70.         <div class="container_form">
  71.             <form action="" role="form" id="sub_form">
  72.                 <div class="input_uname form-group">
  73.                     <label for="uname">用户名：</label>
  74.                     <input type="text" id="uname" name="uname" placeholder="请输入用户名" autofocus>
  75.                 </div>
  76.                 <div class="input_upwd form-group">
  77.                     <label for="upwd">密&emsp;码：</label>
  78.                     <input type="password" id="upwd" name="upwd" placeholder="请输入密码">
  79.                 </div>
  80.                 <div class="input_upwd form-group">
  81.                     <label for="upwd_check">确认密码：</label>
  82.                     <input type="password" id="upwd_check" name="upwd_check" placeholder="请再次输入密码">
  83.                 </div>
  84.                 <div class="click_button">
  85.                     <button type="submit" class="">注&emsp;册</button>
  86.                 </div>
  87.                 <a href="login.php">已有账号，前往登录ya~</a>
  88.             </form>
  89.         </div>
  90.     </div>
  91.     <script src="/public/static/js/jquery.min.js"></script>
  92.     <script src="/public/static/js/jquery.form.min.js"></script>
  93.     <script src="/public/static/js/jquery.validate.min.js"></script>
  94.     <script>
  95.         $(document).ready(function() {
  96.             $.validator.setDefaults({
  97.                 submitHandler: function(form) {
  98.                     $('#sub_form').ajaxSubmit({
  99.                         url: 'dosubmit.php?type=reg',
  100.                         dataType: 'json',
  101.                         type: 'POST',
  102.                         success: function(res) {
  103.                             if (res.status == 1) {
  104.                                 alert('注册成功');
  105.                                 window.location.href = "index.php";
  106.                             } else {
  107.                                 alert('注册失败，可能是系统出错了~');
  108.                             }
  109.                         },
  110.                         error: function() {
  111.                             alert('系统出错啦,请稍后重试ya');
  112.                         }
  113.                     })
  114.                 }
  115.             });
  116.             // 对表单的校验
  117.             $('#sub_form').validate({
  118.                 rules: {
  119.                     uname: {
  120.                         required: true,
  121.                         rangelength: [2, 10]
  122.                     },
  123.                     upwd: {
  124.                         required: true,
  125.                         minlength: 6
  126.                     },
  127.                     upwd_check: {
  128.                         equalTo: "#upwd",
  129.                         required: true,
  130.                         minlength: 6
  131.                     }
  132.                 },
  133.                 messages: {
  134.                     uname: {
  135.                         required: "账户不能为空",
  136.                         rangelength: '用户名必须2-10字符'
  137.                     },
  138.                     upwd: {
  139.                         required: "密码不能为空",
  140.                         minlength: "密码至少6位"
  141.                     },
  142.                     upwd_check: {
  143.                         equalTo: "两次密码输入值需一致",
  144.                         required: "请再次确认密码",
  145.                         minlength: "密码至少6个字符"
  146.                     }
  147.                 },
  148.                 errorElement: 'span',
  149.                 errorPlacement: function(error, element) {
  150.                     error.addClass('invalid-feedback');
  151.                     element.closest('.form-group').append(error);
  152.                 },
  153.                 highlight: function(element, errorClass, validClass) {
  154.                     $(element).addClass('is-invalid');
  155.                 },
  156.                 unhighlight: function(element, errorClass, validClass) {
  157.                     $(element).removeClass('is-invalid');
  158.                 }
  159.             });
  160.         });
  161.     </script>
  162. </body>
  163. </html>
  1. 编写common.php,进行用户登录注册检验
  1. <?php
  2. session_start();
  3. // 这个相当于模型文件 model
  4. //连接数据库
  5. require 'connect.php';
  6. //用户登录检测
  7. function loginCheck($name, $pwd)
  8. {
  9.     $sql = "SELECT `username`,`password` FROM `user` WHERE `username` = ? AND `password` = ? ";
  10.     // prepare准备阶段
  11.     global $pdo;
  12.     $stmt = $pdo->prepare($sql);
  13.     $res = $stmt->execute([$name, md5($pwd)]);
  14.     if ($res) {
  15.         $res = $stmt->fetch(PDO::FETCH_ASSOC);
  16.         // 验证通过
  17.         if ($res) {
  18.             // 开启session 将用户的信息储存在服务器上的某个文件中
  19.             $_SESSION['username'] = $res['username'];
  20.             return true;
  21.         } else {
  22.             return false;
  23.         }
  24.     }
  25. }
  26. //用户注册
  27. function insertData($name, $pwd, $gender, $created_at)
  28. {
  29.     $flag = false;
  30.     global $pdo;
  31.     $pwd = md5($pwd);
  32.     $sql = "INSERT INTO `user` SET `username` =?,`password`=?, `gender`=?,`created_at`=?  ";
  33.     $stmt = $pdo->prepare($sql);
  34.     $stmt->execute([$name, $pwd, $gender, $created_at]);
  35.     if ($stmt->rowCount() == 1) {
  36.         // 插入数据成功
  37.         $flag = true;
  38.     }
  39.     return $flag;
  40. }
  1. 编写dosubmit.php,处理前端传过来的数据
  1. <?php
  2. // 控制器文件
  3. require 'common.php';
  4. // 后端可接受前端传过来的参数
  5. $name = isset($_POST['uname']) ? $_POST['uname'] : null;
  6. $pwd = isset($_POST['upwd']) ? $_POST['upwd'] : null;
  7. $gender = isset($_POST['gender']) ? $_POST['gender'] : null;
  8. $created_at = time();
  9. $type = strtolower($_GET['type']);
  10. // 请求分发器  注册 登录 退出登录
  11. switch ($type) {
  12.     case 'login':
  13.         $res = loginCheck($name, $pwd);
  14.         if ($res) {
  15.             echo json_encode(['status' => 1, 'msg' => '登录成功了'], 320);
  16.             exit;
  17.         }
  18.         echo json_encode(['status' => 0, 'msg' => '用户名或密码错误'], 320);
  19.         break;
  20.     case 'reg':
  21.         // 新增数据;
  22.         $res = insertData($name, $pwd, $gender, $created_at);
  23.         if ($res) {
  24.             echo json_encode(['status' => 1, 'msg' => '注册成功'], 320);
  25.             exit;
  26.         }
  27.         echo json_encode(['status' => 0, 'msg' => '注册失败'], 320);
  28.         break;
  29.     case 'logout':
  30.         // 删除注册的session数据的文件 关闭session会话
  31.         // unset($_SESSION);
  32.         session_destroy();
  33.         header('Location:index.php');
  34.         break;
  35.     default:
  36.         exit('非法请求');
  37. }
  1. 编写index.php,完成登录跳转
  1. <?php
  2. session_start();
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>恋爱呀~</title>
  11.     <style>
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.             list-style: 0;
  16.             text-decoration: none;
  17.             box-sizing: border-box;
  18.         }
  19.         header {
  20.             display: flex;
  21.             background-color: #ffce00;
  22.             padding: 0.5em 1em;
  23.             opacity: 0.5;
  24.         }
  25.         a {
  26.             color: #fff;
  27.             text-decoration: none;
  28.         }
  29.         a:hover,
  30.         span {
  31.             color: white;
  32.         }
  33.         header nav {
  34.             margin-left: auto;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <header>
  40.         <a href="">首页</a>
  41.         <nav>
  42.             <!-- 如果没有session信息 代表未登录  显示登录 注册按钮-->
  43.             <?php if (!isset($_SESSION['username']) || empty($_SESSION['username'])) : ?>
  44.                 <a href="login.php">登录</a>&nbsp;
  45.                 <a href="reg.php">注册</a>
  46.             <?php else : ?>
  47.                 <a href="javascript:;">欢迎<b><?= $_SESSION['username'] ?></b>小可爱呀~</a>&emsp;
  48.                 <a href="dosubmit.php?type=logout" id="logOut">退出</a>
  49.             <?php endif ?>
  50.         </nav>
  51.     </header>
  52. </body>
  53. </html>