小实战：注册登录功能

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、index.php
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4.     <head>
  5.         <?php 
  6.             $arr = require 'data/data.php';
  7.         ?>
  8.         <meta charset="UTF-8" />
  9.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  10.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.         <meta name="keywords" content="<?= $arr[0] ?>" />
  12.         <meta name="description" content="<?= $arr[1] ?>" />
  13.         <link rel="stylesheet" href="static/css/style.css" />
  14.         <title><?= $arr[2] ?></title>
  15.     </head>
  17.     <body>
  18.         <?php
  19.             // 引入配置文件
  20.             include __DIR__. '/config/common.php';
  21.             // 引入头部 -->
  22.             include TMPL_PATH_PUBLIC. '/header.php';
  24.             // 引入新闻数据 -->
  25.             $news = include DATA_PATH . '/news.php';
  26.             // 引入产品数据 -->
  27.             $items = include DATA_PATH . '/items.php';
  28.             $users = include DATA_PATH . '/users.php';
  29.         ?>
  31.         <!-- 主体 -->
  32.         <main>
  33.             <!-- 新闻列表 -->
  34.             <div class="news">
  35.                 <h3>新闻列表</h3>
  36.                 <div class="list">
  37.                     <? foreach ($news as $k => $new) :
  38.                         extract($new);
  39.                         if ($k<5) :
  40.                     ?>
  41.                         <a href="<?= $url ?>" target=_blank>
  42.                             <?= mb_substr($title,0,35) ?>...
  43.                         </a>
  44.                         <? endif ?>
  45.                     <? endforeach ?>
  46.                 </div>
  47.             </div>
  49.             <!-- 产品列表 -->
  50.             <div class="items">
  51.                 <h3>产品列表</h3>
  52.                 <div class="list">
  53.                     <? foreach ($items as $k => $item) :
  54.                         extract($item);
  55.                         if ($k<4) :
  56.                     ?>
  57.                     <div class="item">
  58.                         <img src="<?= $img ?>" alt="<?= $title ?>" />
  59.                         <a href="<?= $url ?>" target=_blank>
  60.                             <?= mb_substr($title,0,9) ?>...
  61.                         </a>
  62.                     </div>
  63.                     <? endif ?>
  64.                     <? endforeach ?>
  65.                 </div>
  66.             </div>
  67.         </main>
  69.         <!-- 引入页脚 -->
  70.         <?php include 'template/public/footer.php' ?>
  71.     </body>
  73. </html>
二、register.php
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.         <meta name="keywords" content="新闻,产品,合肥" />
  9.         <meta name="description" content="专业生产中高档办公家具,行业畅销20年" />
  10.         <link rel="stylesheet" href="static/css/style.css" />
  11.         <title>注册</title>
  12.     </head>
  14.     <body>
  15.         <?php
  16.             // 引入配置文件
  17.             include __DIR__. '/config/common.php';
  18.             // 引入头部 -->
  19.             include TMPL_PATH_PUBLIC. '/header.php';
  20.         ?>
  22.         <!-- 主体 -->
  23.         <main>            
  24.             <form class="login" id="register"  method="post" action="">
  25.                 <table>
  26.                     <caption>用户注册</caption>
  27.                     <tbody>
  28.                         <tr>
  29.                             <td><label for="uname">昵称:</label></td>
  30.                             <td><input type="text" name="uname" id="uname" placeholder="uname" required autofocus /></td>
  31.                         </tr>
  32.                         <tr>
  33.                             <td><label for="email">邮箱:</label></td>
  34.                             <td><input type="email" name="email" id="email" placeholder="username@email.com" required /></td>
  35.                         </tr>
  36.                         <tr>
  37.                             <td><label for="password">密码:</label></td>
  38.                             <td><input type="password" name="password" id="password" placeholder="******" required /></td>
  39.                         </tr>
  40.                         <tr>
  41.                             <td><label for="rePassword">确认:</label></td>
  42.                             <td><input type="password" name="rePassword" id="rePassword" placeholder="******" required /></td>
  43.                         </tr>
  44.                         <tr>                            
  45.                             <td colspan="2"><button type="button" onclick="addUser(this)">提交</button></td>
  46.                         </tr>
  47.                     </tbody>
  48.                 </table>
  49.             </form>
  52.             <p>
  53.                 <a href="login.html">已有帐号,请直接登录</a>
  54.             </p>
  55.         </main>
  57.         <!-- 引入页脚 -->
  58.         <?php include 'template/public/footer.php' ?>
  59.     </body>
  60. </html>
  62. <script>
  63.     function addUser(btn) {
  64.         // 1. 获取用户的输入
  65.         const user = getInput(btn.form);
  67.         // 2. 非空验证
  68.         if (isEmpty(user)) {
  69.             // 3. 验证二次密码是否相等?
  70.             if (isPswEqu(user)) {
  71.                 // 4. 创建提交的数据JSON
  72.                 const data = createData(user);
  73.                 // 5. 异步提交
  74.                 insertUser(data);
  75.             }
  76.         }
  77.     }
  79.     // 1. 获取用户输入
  80.     const getInput = (form) => {
  81.         return {
  82.             // 呢称：
  83.             uname: {
  84.                 // dom元素
  85.                 ele: form.uname,
  86.                 // 值
  87.                 value: form.uname.value.trim()
  88.             },
  89.             // 邮箱：
  90.             email: {
  91.                 ele: form.email,
  92.                 value: form.email.value.trim()
  93.             },
  94.             // 密码：
  95.             password: {
  96.                 ele: form.password,
  97.                 value: form.password.value.trim()
  98.             },
  99.             // 确认密码：
  100.             rePassword: {
  101.                 ele: form.rePassword,
  102.                 value: form.rePassword.value.trim()
  103.             },
  104.         }
  105.     }
  107.     // 2. 非空验证
  108.     const isEmpty = (user) => {
  109.         switch (true) {
  110.             case user.uname.value.length === 0:
  111.             alert('呢称不能为空');
  112.             user.uname.ele.focus();
  113.             return false;
  114.             case user.email.value.length === 0:
  115.             alert('邮箱不能为空');
  116.             user.email.ele.focus();
  117.             return false;
  118.             case user.password.value.length === 0:
  119.             alert('密码不能为空');
  120.             user.password.ele.focus();
  121.             return false;
  122.             case user.rePassword.value.length === 0:
  123.             alert('重复密码不能为空');
  124.             user.rePassword.ele.focus();
  125.             return false;
  126.             default:
  127.             return true;
  128.         }
  129.     }
  131.     // 3. 验证二次密码是否相等?
  132.     const isPswEqu = (user) => {
  133.         if (user.password.value !== user.rePassword.value) {
  134.             alert('二次密码不相等,重新输入');
  135.             user.password.ele.focus();
  136.             return false;
  137.         } else {
  138.             return true;
  139.         }
  140.     }
  143.     // 4. 创建提交的数据JSON
  144.     const createData = (user) => {
  145.         return {
  146.             uname: user.uname.value,
  147.             email: user.email.value,
  148.             password: user.password.value,
  149.         }
  150.     }
  153.     // 5. 异步提交
  154.     async function insertUser(data) {
  155.         console.log(data);
  157.         const url = './lib/userHandle.php?action=register';
  158.         const response = await fetch(url, {
  159.             method: 'POST',
  160.             headers: {
  161.                 'content-type': 'application/json;charset=utf-8'
  162.             },
  163.             body: JSON.stringify(data)
  164.         });
  166.         const result = await response.json();
  167.         console.log(result);
  169.         //  响应处理
  170.         if (result) {
  171.             alert('添加成功');
  172.             // 跳到首页
  173.             location.href = 'index.php';
  174.         } else {
  175.             alert('添加失败');
  176.             location.href = 'register.php';
  177.             btn.form.email.focus();
  178.         }
  180.     }
  181. </script>
三、userHandle.php
  1. <?php
  2. session_start();
  4. require __DIR__ . '/../config/common.php';
  5. $users = require DATA_PATH . '/users.php';
  8. // 获取用户的操作动作
  9. $action = strtolower($_GET['action']);
  10. $prompt = false;
  12. switch ($action):
  13.     case 'login':
  14.         // 1. 获取用户登录数据，不能用传统的表单格式提交
  15.         // json当成文本流原始数据接收
  16.         $json = file_get_contents('php://input');
  18.         // 2. $json 并非php能识别的数据类型，它只是json格式的字符串而已
  19.         // json -> php.array, true: 数组
  20.         $user = json_decode($json, true);
  22.         // 3. 解析用户提交的数据，做预处理判断：
  23.         $email = $user['email'];
  24.         $salt = 'wwwphpcn';
  25.         $password = md5($user['password'] . $salt);
  28.         // 4. 用户过滤
  29.         $res = array_filter($users,function($item) use ($email, $password) {
  30.             return $item['email'] === $email && $item['password'] === $password;
  31.         });
  32.         $res = array_values($res);
  33.         // 5. 结果分析
  34.         // 默认检验用户信息 登录不通过
  35.         if (count($res) === 1) {
  36.             $prompt = true;
  37.             $_SESSION['user']['email'] = $res[0]['email'];
  38.             $_SESSION['user']['name'] = $res[0]['name'];
  39.         }
  40.         break;
  42.     case 'logout':
  43.         if(session_destroy()){
  44.             $prompt = true;
  45.         };
  46.         break;
  48.     case 'register':
  49.         $oriCount = count($users);
  50.         $json = file_get_contents('php://input');
  51.         $user = json_decode($json, true);
  52.         $user['password'] = md5($user['password']);
  53.         $user['id'] = count($users) + 1;
  54.         $users[] = $user;
  55.         if (count($users) === $oriCount + 1) {
  56.             $prompt = true;
  57.         }
  58.         break;
  61. endswitch;
  63. echo json_encode($prompt);
四、相关截图

五、疑问：能否获取了users.php文件数据，然后注册的时候重写进去呢，然后就可以直接用新注册的用户数组进行登录呢。" class="reference-link">能否获取了users.php文件数据，然后注册的时候重写进去呢，然后就可以直接用新注册的用户数组进行登录呢。【文章出处:香港站群多ip服务器 http://www.558idc.com/hkzq.html提供，感恩】
更多阅读