PDO登录实战

1. 文件结构

2. 首页

  1. <!DOCTYPE html>
  2. <?php session_start() ?>
  3. <!DOCTYPE html>
  4. <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.         html {
  13.             background: url(https://t7.baidu.com/it/u=2961459243,2146986594&fm=193&f=GIF) no-repeat;
  14.             background-size: 100%;
  15.         }
  17.         header {
  18.             max-width: 996px;
  19.             margin: auto;
  20.             padding: 0.5em 0.5em;
  21.             background-color: #4395ff;
  22.             display: flex;
  23.             place-content: space-between;
  24.         }
  26.         a {
  27.             margin-right: 1em;
  28.             color: #eee;
  29.             text-decoration: none;
  30.         }
  32.         a:hover {
  33.             color: yellow;
  34.         }
  35.     </style>
  36. </head>
  38. <body>
  39.     <header>
  40.         <a href="">首页</a>
  41.         <nav>
  42.             <?php
  43.             if (!isset($_SESSION['username']) || empty($_SESSION['username'])) {
  44.                 echo "
  45.                         <a href='login.php'>登录</a>
  46.                         <a href='register.php'>注册</a>                        
  47.                     ";
  48.             } else {
  49.                 echo "
  50.                     <a href=''>{$_SESSION['username']}</a>
  51.                     <a href='request_controller.php?type=logout'>退出</a>
  52.                 ";
  53.             }
  54.             ?>
  55.         </nav>
  56.     </header>
  57. </body>
  59. </html>

3. 登录

  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>PDO登录实战</title>
  8.     <!-- 引入md5加密文件 -->
  9.     <script src="../public/md5.js"></script>
  10.     <style>
  11.       .form {
  12.         width: 220px;
  13.         height: 100px;
  14.         margin: 10% auto;
  15.         display: grid;
  16.       }
  17.       input {
  18.         margin: 10px;
  19.         text-align: center;
  20.       }
  21.       .btn {
  22.         cursor: pointer;
  23.       }
  24.       h4 {
  25.         text-align: center;
  26.       }
  27.     </style>
  28.   </head>
  30.   <body>
  31.     <form class="form" id="form">
  32.       <h4>PDO登录实战</h4>
  33.       <input
  34.         type="text"
  35.         name="username"
  36.         id="username"
  37.         placeholder="请输入用户名"
  38.       />
  39.       <input
  40.         type="password"
  41.         name="password"
  42.         id="password"
  43.         placeholder="请输入密码"
  44.       />
  45.       <input type="button" value="登　录" class="btn" onclick="login()" />
  46.     </form>
  47.     <script>
  48.       async function login() {
  49.         // 取得输入的用户名和密码
  50.         let username = document.forms.form.username.value;
  51.         let password = hex_md5(document.forms.form.password.value);
  53.         // 请求分发文件链接
  54.         url = "Request_Controller.php?type=login";
  55.         // 定义常量存贮异步请求响应
  56.         const response = await fetch(url, {
  57.           method: "POST",
  58.           headers: {
  59.             "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
  60.           },
  61.           body: `username=${username}&password=${password}`,
  62.         });
  63.         response.json().then((res_json) => {
  64.           if (res_json.status) {
  65.             window.location.href = "index.php";
  66.           } else {
  67.             alert(res_json.msg);
  68.           }
  69.         });
  70.       }
  71.     </script>
  72.   </body>
  73. </html>

4. 注册

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>用户注册</title>
  9.     <script src="../public/md5.js"></script>
  10.     <style>
  11.         .form {
  12.             width: 220px;
  13.             height: 100px;
  14.             margin: 10% auto;
  15.             display: grid;
  16.         }
  18.         input,
  19.         p {
  20.             margin: 10px;
  21.             padding: 0.2em;
  22.             text-align: center;
  23.         }
  25.         .btn:hover,
  26.         label:hover {
  27.             cursor: pointer;
  28.         }
  30.         .btn:disabled {
  31.             cursor: not-allowed;
  32.         }
  34.         h3 {
  35.             text-align: center;
  36.         }
  38.         label {
  39.             margin: 0 1em;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <form class="form" id="form">
  46.         <h3>用户注册</h3>
  47.         <input type="text" name="username" id="username" placeholder="用户名，必须中文" onblur="check_user(this)" value="" />
  48.         <input type="password" name="password" id="password" placeholder="密码，必须大于或等于6位" onblur="check_password(this)" />
  49.         <input type="password" name="check_pwd" id="check_pwd" placeholder="确认密码" onblur="check_check_pwd(this)" />
  50.         <p>
  51.             <label for="man">男<input type="radio" name="gender" id="man" value="1" checked></label>
  52.             <label for="women">女<input type="radio" name="gender" id="women" value="0"></label>
  53.         </p>
  54.         <input type="button" value="提　交" class="btn" onclick="register()" disabled />
  55.     </form>
  56.     <script>
  57.         /*
  58.          * 验证表单，只写了简单的验证功能原代码，实际开发多用插件，自带验证功能
  59.          */
  61.         // 变量记录验证通过情况
  62.         let check_status = [0, 0, 0]
  63.         btn_status(check_status)
  64.         document.querySelector("#username").value = ""
  66.         // 验证用户名，只能是中文
  67.         async function check_user(ev) {
  68.             const test = /^[\u4E00-\u9FA5]+$/
  69.             if (!test.test(ev.value) || ev.value.length == 0) {
  70.                 alert("用户名不能为空，并且只能是中文！")
  71.                 ev.value = ev.value.replace(/[^\u4e00-\u9fa5]/g, '')
  72.                 check_status[0] = 0
  73.             } else {
  74.                 // 检查用户名是否存在
  75.                 url = "Request_Controller.php?type=duplicate_name";
  76.                 // 定义常量存贮异步请求响应
  77.                 const response = await fetch(url, {
  78.                     method: "POST",
  79.                     headers: {
  80.                         "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
  81.                     },
  82.                     body: `username=${ev.value}`,
  83.                 });
  84.                 response.json().then((res_json) => {
  85.                     if (res_json.status) {
  86.                         alert(res_json.msg)
  87.                         check_status[0] = 0
  88.                         btn_status(check_status)
  89.                     } else {
  90.                         alert(res_json.msg)
  91.                         check_status[0] = 1
  92.                         btn_status(check_status)
  93.                     }
  94.                 })
  95.             }
  96.         }
  98.         // 验证密码，必须大于6位
  99.         function check_password(ev) {
  100.             if (ev.value.length < 6) {
  101.                 alert("密码必须大于等于6位！")
  102.                 check_status[1] = 0
  103.             } else {
  104.                 check_status[1] = 1
  105.             }
  106.             btn_status(check_status)
  107.         }
  109.         // 再次验证密码是否一致
  110.         function check_check_pwd(ev) {
  111.             if (ev.value != document.querySelector("#password").value) {
  112.                 alert("两次输入的密码不一致！")
  113.                 check_status[2] = 0
  114.             } else {
  115.                 check_status[2] = 1
  116.             }
  117.             btn_status(check_status)
  118.         }
  120.         // 设置提交按钮是否可用
  121.         function btn_status(status) {
  122.             if (status.toString() === [1, 1, 1].toString()) {
  123.                 document.querySelector(".btn").removeAttribute("disabled")
  124.             } else {
  125.                 document.querySelector(".btn").disabled = "true"
  126.             }
  127.         }
  129.         async function register() {
  130.             // 取得输入的用户名和密码
  131.             let username = document.forms.form.username.value
  132.             let password = hex_md5(document.forms.form.password.value)
  133.             let gender = document.forms.form.gender.value
  135.             // 请求链接
  136.             url = "Request_Controller.php?type=register"
  137.             // 定义常量存贮异步请求响应
  138.             const response = await fetch(url, {
  139.                 method: "POST",
  140.                 headers: {
  141.                     "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
  142.                 },
  143.                 body: `username=${username}&password=${password}&gender=${gender}`,
  144.             });
  145.             response.json().then((res_json) => {
  146.                 if (res_json.status) {
  147.                     alert("注册成功，请登录。")
  148.                     window.location.href = "login.php"
  149.                 } else {
  150.                     alert(res_json.msg)
  151.                 }
  152.             })
  153.         }
  154.     </script>
  155. </body>
  157. </html>

5. 请求分发器

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>用户注册</title>
  9.     <script src="../public/md5.js"></script>
  10.     <style>
  11.         .form {
  12.             width: 220px;
  13.             height: 100px;
  14.             margin: 10% auto;
  15.             display: grid;
  16.         }
  18.         input,
  19.         p {
  20.             margin: 10px;
  21.             padding: 0.2em;
  22.             text-align: center;
  23.         }
  25.         .btn:hover,
  26.         label:hover {
  27.             cursor: pointer;
  28.         }
  30.         .btn:disabled {
  31.             cursor: not-allowed;
  32.         }
  34.         h3 {
  35.             text-align: center;
  36.         }
  38.         label {
  39.             margin: 0 1em;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <form class="form" id="form">
  46.         <h3>用户注册</h3>
  47.         <input type="text" name="username" id="username" placeholder="用户名，必须中文" onblur="check_user(this)" value="" />
  48.         <input type="password" name="password" id="password" placeholder="密码，必须大于或等于6位" onblur="check_password(this)" />
  49.         <input type="password" name="check_pwd" id="check_pwd" placeholder="确认密码" onblur="check_check_pwd(this)" />
  50.         <p>
  51.             <label for="man">男<input type="radio" name="gender" id="man" value="1" checked></label>
  52.             <label for="women">女<input type="radio" name="gender" id="women" value="0"></label>
  53.         </p>
  54.         <input type="button" value="提　交" class="btn" onclick="register()" disabled />
  55.     </form>
  56.     <script>
  57.         /*
  58.          * 验证表单，只写了简单的验证功能原代码，实际开发多用插件，自带验证功能
  59.          */
  61.         // 变量记录验证通过情况
  62.         let check_status = [0, 0, 0]
  63.         btn_status(check_status)
  64.         document.querySelector("#username").value = ""
  66.         // 验证用户名，只能是中文
  67.         async function check_user(ev) {
  68.             const test = /^[\u4E00-\u9FA5]+$/
  69.             if (!test.test(ev.value) || ev.value.length == 0) {
  70.                 alert("用户名不能为空，并且只能是中文！")
  71.                 ev.value = ev.value.replace(/[^\u4e00-\u9fa5]/g, '')
  72.                 check_status[0] = 0
  73.             } else {
  74.                 // 检查用户名是否存在
  75.                 url = "Request_Controller.php?type=duplicate_name";
  76.                 // 定义常量存贮异步请求响应
  77.                 const response = await fetch(url, {
  78.                     method: "POST",
  79.                     headers: {
  80.                         "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
  81.                     },
  82.                     body: `username=${ev.value}`,
  83.                 });
  84.                 response.json().then((res_json) => {
  85.                     if (res_json.status) {
  86.                         alert(res_json.msg)
  87.                         check_status[0] = 0
  88.                         btn_status(check_status)
  89.                     } else {
  90.                         alert(res_json.msg)
  91.                         check_status[0] = 1
  92.                         btn_status(check_status)
  93.                     }
  94.                 })
  95.             }
  96.         }
  98.         // 验证密码，必须大于6位
  99.         function check_password(ev) {
  100.             if (ev.value.length < 6) {
  101.                 alert("密码必须大于等于6位！")
  102.                 check_status[1] = 0
  103.             } else {
  104.                 check_status[1] = 1
  105.             }
  106.             btn_status(check_status)
  107.         }
  109.         // 再次验证密码是否一致
  110.         function check_check_pwd(ev) {
  111.             if (ev.value != document.querySelector("#password").value) {
  112.                 alert("两次输入的密码不一致！")
  113.                 check_status[2] = 0
  114.             } else {
  115.                 check_status[2] = 1
  116.             }
  117.             btn_status(check_status)
  118.         }
  120.         // 设置提交按钮是否可用
  121.         function btn_status(status) {
  122.             if (status.toString() === [1, 1, 1].toString()) {
  123.                 document.querySelector(".btn").removeAttribute("disabled")
  124.             } else {
  125.                 document.querySelector(".btn").disabled = "true"
  126.             }
  127.         }
  129.         async function register() {
  130.             // 取得输入的用户名和密码
  131.             let username = document.forms.form.username.value
  132.             let password = hex_md5(document.forms.form.password.value)
  133.             let gender = document.forms.form.gender.value
  135.             // 请求链接
  136.             url = "Request_Controller.php?type=register"
  137.             // 定义常量存贮异步请求响应
  138.             const response = await fetch(url, {
  139.                 method: "POST",
  140.                 headers: {
  141.                     "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
  142.                 },
  143.                 body: `username=${username}&password=${password}&gender=${gender}`,
  144.             });
  145.             response.json().then((res_json) => {
  146.                 if (res_json.status) {
  147.                     alert("注册成功，请登录。")
  148.                     window.location.href = "login.php"
  149.                 } else {
  150.                     alert(res_json.msg)
  151.                 }
  152.             })
  153.         }
  154.     </script>
  155. </body>
  157. </html>

6. 连接数据库

  1. <?php
  2. /* 
  3.  * PDO连接数据库文件
  4.  * 参数：$DB_type   数据库类型名，默认为mysql
  5.  * 参数：$DB_host      数据库服务器名，默认为localhost
  6.  * 参数：$DB_port      数据库数据库服务器端口，默认为'3308'
  7.  * 参数：$DB_username  数据库服务器用户名，默认为'root'
  8.  * 参数：$DB_password  数据库服务器密码，默认为''
  9.  * 参数：$DB_dbname    数据库名，默认为 'php'
  10.  * 参数：$DB_charset   字符集，默认为 ''utf8mb4'
  11.  * 以上变量在引入文件处可设置值
  12.  * 连接错误请注意检查是否有与参数重名的变量
  13.  */
  16. $DB_type = $DB_type ?? 'mysql';
  17. $DB_host = $DB_host ?? 'localhost';
  18. $DB_port = $DB_port ?? '3308';
  19. $DB_dbname = $DB_dbname ?? 'php';
  20. $DB_charset = $DB_charset ?? 'utf8mb4';
  21. $DB_username = $DB_username ?? 'root';
  22. $DB_password = $DB_password ?? '';
  24. // 定义数据库连接字串
  25. $dsn = '%s:host=%s;port=%s;dbname=%s;charset=%s';
  26. $dsn = sprintf($dsn, $DB_type, $DB_host, $DB_port, $DB_dbname, $DB_charset);
  27. // 连接数据库
  28. try {
  29.     $pdo = new PDO($dsn, $DB_username, $DB_password);
  30. } catch (PDOException $err) {
  31.     // PDOException异常类，指定变量$err为异常类型变量
  32.     die('连接错误：' . $err->getMessage());
  33. }

7. 数据处理模型

  1. <?php
  2. /* 
  3.  * 数据处理模型
  4.  */
  6. // 连接数据库
  7. require_once 'conn.php';
  8. session_start();
  11. // 验证登录用户名密码
  12. function check_user($user, $pwd)
  13. {
  14.     global $pdo;    // 声明pdo为全局变量，才能在函数中调用
  15.     $sql = 'SELECT `name` FROM `user` WHERE `name`=? AND `pass`=? ';
  16.     $stmt = $pdo->prepare($sql);
  17.     $stmt->execute([$user, $pwd]);
  18.     $res = $stmt->fetchAll(PDO::FETCH_ASSOC);
  19.     if ($res) {
  20.         //验证通过记录用户名
  21.         $_SESSION['username'] = $user;
  22.         return true;
  23.     } else {
  24.         return false;
  25.     }
  26. }
  28. // 注册插入用户数据
  29. function add_user($user, $pwd, $gender)
  30. {
  31.     global $pdo;
  32.     $sql = 'INSERT INTO `user` (`name`,`pass`,`gender`) VALUES (?,?,?)';
  33.     $stmt = $pdo->prepare($sql);
  34.     $stmt->execute([$user, $pwd, $gender]);
  35.     $res = $stmt->rowCount();
  36.     if ($res) {
  37.         return true;
  38.     } else {
  39.         return false;
  40.     }
  41. }
  43. // 注册时检查用户名是否已存在
  44. function check_duplicate_name($name)
  45. {
  46.     global $pdo;
  47.     $sql = 'SELECT 1 FROM `user` WHERE `name`=?';
  48.     $stmt = $pdo->prepare($sql);
  49.     $stmt->execute([$name]);
  50.     if ($stmt->rowCount()) {
  51.         return true;
  52.     } else {
  53.         return false;
  54.     }
  55. }
  59. // 删除一条数据
  60. // $sql = 'DELETE FROM `user` WHERE `id`=?';
  61. // $stmt = $pdo->prepare($sql);
  62. // $stmt->execute([3]);
  63. // if ($stmt->rowCount() === 1) {
  64. //     echo '删除成功<br>';
  65. // } else {
  66. //     echo '删除失败<br>';
  67. // }
  70. // 更新一条数据
  71. // $sql = 'UPDATE `user` SET `pass`=? WHERE `id`=?';
  72. // $pass = md5('654321');
  73. // $id = 1;
  74. // $stmt = $pdo->prepare($sql);
  75. // $stmt->execute([$pass, $id]);
  76. // if ($stmt->rowCount() === 1) {
  77. //     echo '更新密码成功<br>';
  78. // } else {
  79. //     echo '更新密码失败<br>';
  80. // }

更多相关文章

  1. android通过webservice验证用户
  2. Android自动读取短信验证码
  3. classlist对象和表单非空验证
  4. 1. 实例演示classList对象 2. 使用blur事件进行表单非空验证
  5. classList对象与用blur事件进行表单非空验证
  6. js操作class和使用blur事件进行表单非空验证
  7. ClassList对象学习总结、表单事件非空验证
  8. classList对象、blur事件进行表单非空验证
  9. 实例演示classList对象及表单非空验证

随机推荐

  1. Android 线程学习
  2. 【Android】几种常见广播监听器(Wifi,亮
  3. 为Android加入busybox工具
  4. android view getWidth 和 getHeight 的
  5. Android单元测试之Testing和Instrumentat
  6. android apk编译
  7. 浅析Android线程模型一
  8. Android的专用驱动
  9. 用Android LiveCD体验Android 操作系统的
  10. android 获取web 内容简单实现