用户登录,注册,退出等常用功能统一处理 及完成用户注册功能

用户登录,注册,退出等常用功能统一处理 及完成用户注册功能

用户登录,注册,退出等常用功能统一处理

userHandle.php文件代码

<?php
session_start();
require __DIR__ . '/../config/common.php';
$users = require DATA_PATH . '/users.php';
// 获取对用户的操作动作
$action = strtolower($_GET['action']);
$prompt = false;
// 操作白名单
$allowOpts = ['login', 'register', 'logout'];
// 检测操作类型是否合法?
if (!in_array($action, $allowOpts)) {
    echo <<< TIPS
    <script>
        alert('操作类型非法');
        location.href='../login.php';
    </script>
    TIPS;
    die;
}
switch ($action):
    case 'login':
        $json = file_get_contents('php://input');
        $user = json_decode($json, true);
        $email = $user['email'];
        $salt = 'wwwphpcn';
        $password = md5($user['password'] . $salt);
        $result = array_filter($users, function ($user) use ($email, $password) {
            return $user['email'] === $email && $user['password'] === $password;
        });
        $result = array_values($result);
        if (count($result) === 1) {
            $prompt = true;
            $_SESSION['user']['email'] = $result[0]['email'];
            $_SESSION['user']['name'] = $result[0]['name'];
        }
        break;
    case 'logout':
        if (session_destroy()) {
            $prompt = true;
        }
        break;
    case 'register':
        $oriCount = count($users);
        $json = file_get_contents('php://input');
        $user = json_decode($json, true);
        $user['password'] = md5($user['password']);
        $user['id'] = count($users) + 1;
        $users[] = $user;
        if (count($users) === $oriCount + 1) {
            $prompt = true;
        }
        break;
endswitch;
echo json_encode($prompt);

完成用户注册功能

register.php 文件

<?php
// 公共页眉
require __DIR__ . '/template/public/header.php';
?>
<!-- 主体 -->
<main>
  <!-- 用户注册 -->
  <form class="login" id="register">
    <table>
      <caption>
        用户注册
      </caption>
      <tbody>
        <tr>
          <td><label for=" nickname">昵称:</label></td>
          <td><input type="text" name="nickname" id="nickname" autofocus /></td>
        </tr>
        <tr>
          <td><label for="email">邮箱:</label></td>
          <td><input type="email" name="email" id="email" /></td>
        </tr>
        <tr>
          <td><label for="password">密码:</label></td>
          <td><input type="password" name="password" id="password" /></td>
        </tr>
        <tr>
          <td><label for="rePassword">确认:</label></td>
          <td><input type="password" name="rePassword" id="rePassword" /></td>
        </tr>
        <tr>
          <td colspan="2"><button type="button" onclick="addUser(this)">提交</button></td>
        </tr>
      </tbody>
    </table>
  </form>
  <p>
    <a href="login.php">已有帐号,请直接登录</a>
  </p>
</main>
<!-- 页脚 -->
<?php
// 加载外部文件
include 'template/public/footer.php';
?>
<script>
  function addUser(btn) {
    // 1. 获取用户的输入
    const user = getInput(btn.form);
    // 2. 非空验证
    if (isEmpty(user)) {
      // 3. 验证二次密码是否相等?
      if (isPswEqu(user)) {
        // 4. 创建提交的数据JSON
        const data = createData(user);
        // 5. 异步提交
        insertUser(data);
      }
    }
  }
  // 1. 获取用户输入
  const getInput = (form) => {
    return {
      // 呢称
      nickname: {
        // dom元素
        ele: form.nickname,
        // 值
        value: form.nickname.value.trim()
      },
      // 邮箱
      email: {
        ele: form.email,
        value: form.email.value.trim()
      },
      // 密码
      password: {
        ele: form.password,
        value: form.password.value.trim()
      },
      // 重复密码
      rePassword: {
        ele: form.rePassword,
        value: form.rePassword.value.trim()
      },
    }
  }
  // 2. 非空验证
  const isEmpty = (user) => {
    switch (true) {
      case user.nickname.value.length === 0:
        alert('呢称不能为空');
        user.nickname.ele.focus();
        return false;
      case user.email.value.length === 0:
        alert('邮箱不能为空');
        user.email.ele.focus();
        return false;
      case user.password.value.length === 0:
        alert('密码不能为空');
        user.password.ele.focus();
        return false;
      case user.rePassword.value.length === 0:
        alert('重复密码不能为空');
        user.rePassword.ele.focus();
        return false;
      default:
        return true;
    }
  }
  // 3. 验证二次密码是否相等?
  const isPswEqu = (user) => {
    if (user.password.value !== user.rePassword.value) {
      alert('二次密码不相等,重新输入');
      user.password.ele.focus();
      return false;
    } else {
      return true;
    }
  }
  // 4. 创建提交的数据JSON
  const createData = (user) => {
    return {
      nickname: user.nickname.value,
      email: user.email.value,
      password: user.password.value,
    }
  }
  // 5. 异步提交
  async function insertUser(data) {
    console.log(data);
    const url = './lib/userHandle.php?action=register';
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'content-type': 'application/json;charset=utf-8'
      },
      body: JSON.stringify(data)
    });
    const result = await response.json();
    console.log(result);
    //  响应处理
    if (result) {
      alert('添加成功');
      // 跳到首页
      location.href = 'index.php';
    } else {
      alert('添加失败');
      location.href = 'register.php';
      btn.form.email.focus();
    }
  }
</script>