登录  /  注册
首页 > 博客列表 > 【PHP】用户登陆/用户注册/会话控制 实例总结
博主信息
博文 94
粉丝 0
评论 0
访问量 89442
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【PHP】用户登陆/用户注册/会话控制 实例总结
可乐随笔
原创
1902人浏览过

用户登陆/用户注册/会话控制

1.用户登陆

登陆页面：login.php

  1. <?php
  3. // 加载外部文件
  4. include 'template/public/header.php';
  5. ?>
  7. <!-- 
  8.   1.放弃 $_POST 和 $_GET 提交数据的方式
  9.   2.改为异步提交验证
  10.   3.button type改为 button，禁用默认提交行为
  11.  -->
  13. <!-- 主体 -->
  14. <main>
  15.   <!-- 用户登录 -->
  16.   <form class="login" id="login">
  17.     <table>
  18.       <caption>
  19.         用户登录
  20.       </caption>
  21.       <tbody>
  22.         <tr>
  23.           <td><label for="email">邮箱:</label></td>
  24.           <td><input type="email" name="email" id="email" autofocus /></td>
  25.         </tr>
  26.         <tr>
  27.           <td><label for="password">密码:</label></td>
  28.           <td><input type="password" name="password" id="password" /></td>
  29.         </tr>
  31.         <tr>
  32.           <td colspan="2"><button type="button" onclick=check(this)>提交</button></td>
  33.         </tr>
  34.       </tbody>
  35.     </table>
  36.   </form>
  38.   <p>
  39.     <a href="register.php">没有帐号,请先注册</a>
  40.   </p>
  41. </main>
  43. <script>
  44.   async function check(btn) {
  45.     //email
  46.     const email = btn.form.email.value.trim();
  47.     //password
  48.     const password = btn.form.password.value.trim();
  50.     //非空验证
  51.     if (email.length > 0 && password.length > 0) {
  52.       //异步提交：fetch api
  53.       const response = await fetch('lib/user/check.php', {
  54.         //请求类型：post
  55.         method: 'POST',
  56.         //请求头
  57.         headers: {
  58.           'Content-Type': 'application/json;charset=utf-8',
  59.         },
  60.         //数据
  61.         body: JSON.stringify({
  62.           email,
  63.           password
  64.         })
  65.       });
  67.       // 2.解析数据
  68.       const result = await response.json();
  69.       console.log(result);
  71.       // 3.响应处理
  72.       if (result) {
  73.         alert('登陆成功');
  74.         //跳到首页
  75.         location.href = 'index.php';
  76.       } else {
  77.         alert('登陆失败');
  78.         location.href = 'login.php';
  79.         btn.form.email.focus();
  80.       }
  82.     } else {
  83.       alert('邮箱或密码不能为空');
  84.       return false;
  85.     }
  86.   }
  87. </script>
  88. <!-- 页脚 -->
  89. <?php
  90. // 加载外部文件
  91. include 'template/public/footer.php';
  92. ?>

登陆验证页面：check.php

  1. <?php
  2. //开启会话
  3. session_start();
  5. // 1.导入用户数组
  6. require __DIR__ .'/../../config/common.php';
  7. $users = require DATA_PATH .'/users.php';
  9. // 2. 获取登录数据
  10. //json当成文本原始数据流来接收
  11. $json = file_get_contents('php://input');
  13. // 3. 将 json 转为 PHP数组（true:数组，不传：就是对象）
  14. $user = json_decode($json,true);
  16. // 4. 解析用户提交的数组，并预处理
  17. $email = $user['email'];
  18. $password = md5($user['password']);
  20. // 5. 验证用户数据（过滤）
  21. // 使用 use 将外外部的数据导入函数中使用
  22. $result = array_filter($users,function($user) use ($email,$password){
  23.     return $user['email'] === $email && $user['password'] === $password;
  24. });
  26. //从数组尾部中弹出数据
  27. // print_r($result);
  29. // 6. 分析结果
  30. $prompt = false;
  31. if(count($result) === 1){
  32.     $prompt = true;
  34.     //登陆成功，将用户登陆信息写入会话
  35.     $_SESSION['user'] = array_pop($result);
  36. }
  37. echo json_encode($prompt);
  38. ?>

2.用户注册

用户注册页面：register.php

  1. <?php
  3. // 加载外部文件
  4. include 'template/public/header.php';
  6. ?>
  8. <!-- 主体 -->
  9. <main>
  10.   <!-- 用户登录 -->
  11.   <form class="login" id="register">
  12.     <table>
  13.       <caption>
  14.         用户注册
  15.       </caption>
  16.       <tbody>
  17.         <tr>
  18.           <td><label for="nickname">昵称:</label></td>
  19.           <td><input type="text" name="nickname" id="nickname" autofocus /></td>
  20.         </tr>
  21.         <tr>
  22.           <td><label for="email">邮箱:</label></td>
  23.           <td><input type="email" name="email" id="email" /></td>
  24.         </tr>
  25.         <tr>
  26.           <td><label for="password">密码:</label></td>
  27.           <td><input type="password" name="password" id="password" autocomplete="off" /></td>
  28.         </tr>
  29.         <tr>
  30.           <td><label for="rePassword">确认:</label></td>
  31.           <td><input type="password" name="rePassword" id="rePassword" autocomplete="off" /></td>
  32.         </tr>
  33.         <tr>
  34.           <td colspan="2"><button type="button" onclick="addUser(this)">提交</button></td>
  35.         </tr>
  36.       </tbody>
  37.     </table>
  38.   </form>
  40.   <p>
  41.     <a href="login.php">已有帐号,请直接登录</a>
  42.   </p>
  43. </main>
  45. <!-- 页脚 -->
  46. <?php
  48. // 加载外部文件
  49. include 'template/public/footer.php';
  51. ?>
  53. <script>
  54.   function addUser(btn) {
  55.     // 1. 获取用户输入
  56.     const user = getInput(btn.form);
  58.     // 2. 非空验证
  59.     if (isEmpty(user)) {
  60.       // 3. 验证二次密码是否相等
  61.       if (isPswEqu(user)) {
  62.         // 4. 创建提交的数据JSON
  63.         const data = createDate(user);
  64.         // 5. 异步提交
  65.         insertUser(data);
  66.       }
  67.     }
  68.   }
  70.   // 1. 验证用户输入函数
  71.   const getInput = (form) => {
  72.     return {
  73.       // 昵称
  74.       nickname: {
  75.         // dom元素
  76.         ele: form.nickname,
  77.         // 值
  78.         value: form.nickname.value.trim()
  79.       },
  80.       // 邮箱
  81.       email: {
  82.         ele: form.email,
  83.         value: form.email.value.trim()
  84.       },
  85.       // 密码
  86.       password: {
  87.         ele: form.password,
  88.         value: form.password.value.trim()
  89.       },
  90.       // 重复密码
  91.       rePassword: {
  92.         ele: form.rePassword,
  93.         value: form.rePassword.value.trim()
  94.       },
  95.     }
  96.   }
  98.   // 2. 非空验证函数
  99.   const isEmpty = (user) => {
  100.     switch (true) {
  101.       case user.nickname.value.length === 0:
  102.         alert('昵称不能为空');
  103.         user.nickname.ele.focus();
  104.         return false;
  105.       case user.email.value.length === 0:
  106.         alert('邮箱不能为空');
  107.         user.email.ele.focus();
  108.         return false;
  109.       case user.password.value.length === 0:
  110.         alert('密码不能为空');
  111.         user.password.ele.focus();
  112.         return false;
  113.       case user.rePassword.value.length === 0:
  114.         alert('重复密码不能为空');
  115.         user.rePassword.ele.focus();
  116.         return false;
  117.         //必须要有默认返回
  118.       default:
  119.         return true;
  120.     }
  121.   }
  123.   // 3. 密码一致性验证函数
  124.   const isPswEqu = (user) => {
  125.     if (user.password.value != user.rePassword.value) {
  126.       alert('两次密码不一致');
  127.       user.password.value.focus();
  128.       return false;
  129.     } else {
  130.       // console.log('OK');
  131.       return true;
  132.     }
  133.   }
  135.   // 4. 提交数据
  136.   const createDate = (user) => {
  137.     return {
  138.       nickname: user.nickname.value,
  139.       email: user.email.value,
  140.       password: user.password.value,
  141.     }
  142.   }
  144.   // 5. 异步提交
  145.   async function insertUser(data) {
  146.     console.log(data);
  148.     const url = 'lib/user/add_user.php';
  149.     const response = await fetch(url, {
  150.       method: 'POST',
  151.       headers: {
  152.         'content-type': 'application/json;charset=utf-8'
  153.       },
  154.       body: JSON.stringify(data)
  155.     })
  157.     const result = await response.json();
  158.     console.log(result);
  160.      // 响应处理
  161.      if (result) {
  162.         alert('添加成功');
  163.         //跳到首页
  164.         location.href = 'index.php';
  165.       } else {
  166.         alert('添加失败');
  167.         location.href = 'register.php';
  168.         btn.form.email.focus();
  169.       }
  170.   }
  171. </script>

接收数据页面：add_user.php

  1. <?php
  3. //todo 用户注册
  5. // 1. 导入用户数组
  6. require __DIR__ . '/../../config/common.php';
  7. $users = require DATA_PATH . '/users.php';
  9. // 数组长度
  10. $oriCount = count($users);
  12. // 2. 接收数据，json
  13. $json = file_get_contents('php://input');
  15. // 3. json 转 数组
  16. $user = json_decode($json, true);
  18. // 4. 创建新用户
  19. // md5 + 加盐
  20. $user['password'] = md5($user['password'] . 'Z@7sU!k');
  21. $user['id'] = $oriCount + 1;
  23. // 5. 添加用户
  24. // print_r($user);
  25. $users[] = $user;
  27. // 6. 分析结果
  28. $prompt = false;
  29. if (count($users) === $oriCount + 1) {
  30.     $prompt = true;
  31. }
  32. echo json_encode($prompt);

3. 用户退出

用户登陆状态展示：header.php

  1. <?php
  3. // 开启会话
  4. session_start();
  6. ?>
  8. <!-- 公共页眉 -->
  10. <!DOCTYPE html>
  11. <html lang="zh-CN">
  13. <head>
  14.     <meta charset="UTF-8" />
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  17.     <link rel="stylesheet" href="./static/css/style.css" />
  18.     <title>login</title>
  19. </head>
  21. <body>
  23.     <!-- 页眉 -->
  24.     <header>
  25.         <nav>
  26.             <a href="index.php"><?= '首页' ?></a>
  27.             <a href="news.php"><?= '新闻' ?></a>
  28.             <a href="items.php">产品</a>
  29.             <a href="contact.php">联系</a>
  31.             <!-- 检测是否登陆 -->
  32.             <?php if (!isset($_SESSION['user'])) : ?>
  33.                 <a href="login.php">登录</a>
  34.             <?php else : ?>
  35.                 <!-- 退出要让用户确认 -->
  36.                 <a href="" onclick="logout(event)"><?= $_SESSION['user']['name'] ?>退出</a>
  37.             <?php endif ?>
  38.         </nav>
  39.     </header>
  41.     <script>
  42.         //退出函数
  43.         async function logout(ev) {
  44.             //禁用默认行为
  45.             ev.preventDefault();
  47.             if (confirm('是否退出?')) {
  49.                 const url = './lib/user/logout.php';
  50.                 const response = await fetch(url);
  51.                 const result = await response.json();
  52.                 //响应处理
  53.                 if (result) {
  54.                     alert('退出成功');
  55.                     location.href = 'index.php';
  56.                 } else {
  57.                     alert('退出失败');
  58.                     location.href = 'login.php';
  59.                     btn.form.email.focus();
  60.                 }
  61.             }
  63.         }
  64.     </script>

4.会话控制()

演示作用:实际，用户登陆验证成功后，就会写入SESSION

  1. <?php
  3. //开启session
  4. session_start();
  6. // 服务器 -> 会话ID -> 浏览器
  7. // 名称：SESSIONID: 值：b3XXXXXXXXXXXXXXXXX
  8. echo session_name() .'<br>';
  9. echo session_id() .'<br>';
  10. // session 在服务器中的路径
  11. echo session_save_path() .'<br>';
  13. // 设置session,使用超全局变量 $_SESSION
  14. // $_SESSION['name'] = 'admin';
  15. // $_SESSION['password'] = md5('888');
  17. $_SESSION['user']['name'] = 'admin';
  18. $_SESSION['user']['password'] = md5('888');
  20. // echo session_encode() . '<br>';
  22. // 销毁会话
  23. // 1. 清空内容，保留文件
  24. session_unset();
  26. // 2. 删除会话文件
  27. session_destroy();
批改老师：PHPzPHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录