【PHP】用户登陆/用户注册/会话控制实例总结 - PHP编程

首页 > 博客列表 > 【PHP】用户登陆/用户注册/会话控制实例总结

博主信息

博文 94

粉丝 0

访问量 122522

专题推荐

更多>

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

1.用户登陆

<?php
// 加载外部文件
include 'template/public/header.php';
?>
<!-- 
  1.放弃 $_POST 和 $_GET 提交数据的方式
  2.改为异步提交验证
  3.button type改为 button，禁用默认提交行为
 -->
<!-- 主体 -->
<main>
  <!-- 用户登录 -->
  <form class="login" id="login">
    <table>
      <caption>
        用户登录
      </caption>
      <tbody>
        <tr>
          <td><label for="email">邮箱:</label></td>
          <td><input type="email" name="email" id="email" autofocus /></td>
        </tr>
        <tr>
          <td><label for="password">密码:</label></td>
          <td><input type="password" name="password" id="password" /></td>
        </tr>
        <tr>
          <td colspan="2"><button type="button" onclick=check(this)>提交</button></td>
        </tr>
      </tbody>
    </table>
  </form>
  <p>
    <a href="register.php">没有帐号,请先注册</a>
  </p>
</main>
<script>
  async function check(btn) {
    //email
    const email = btn.form.email.value.trim();
    //password
    const password = btn.form.password.value.trim();
    //非空验证
    if (email.length > 0 && password.length > 0) {
      //异步提交：fetch api
      const response = await fetch('lib/user/check.php', {
        //请求类型：post
        method: 'POST',
        //请求头
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
        },
        //数据
        body: JSON.stringify({
          email,
          password
        })
      });
      // 2.解析数据
      const result = await response.json();
      console.log(result);
      // 3.响应处理
      if (result) {
        alert('登陆成功');
        //跳到首页
        location.href = 'index.php';
      } else {
        alert('登陆失败');
        location.href = 'login.php';
        btn.form.email.focus();
      }
    } else {
      alert('邮箱或密码不能为空');
      return false;
    }
  }
</script>
<!-- 页脚 -->
<?php
// 加载外部文件
include 'template/public/footer.php';
?>

登陆验证页面：check.php

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

2.用户注册

用户注册页面：register.php

<?php
// 加载外部文件
include '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" autocomplete="off" /></td>
        </tr>
        <tr>
          <td><label for="rePassword">确认:</label></td>
          <td><input type="password" name="rePassword" id="rePassword" autocomplete="off" /></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 = createDate(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.value.focus();
      return false;
    } else {
      // console.log('OK');
      return true;
    }
  }
  // 4. 提交数据
  const createDate = (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/user/add_user.php';
    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>

接收数据页面：add_user.php

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

3. 用户退出

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

<?php
// 开启会话
session_start();
?>
<!-- 公共页眉 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./static/css/style.css" />
    <title>login</title>
</head>
<body>
    <!-- 页眉 -->
    <header>
        <nav>
            <a href="index.php"><?= '首页' ?></a>
            <a href="news.php"><?= '新闻' ?></a>
            <a href="items.php">产品</a>
            <a href="contact.php">联系</a>
            <!-- 检测是否登陆 -->
            <?php if (!isset($_SESSION['user'])) : ?>
                <a href="login.php">登录</a>
            <?php else : ?>
                <!-- 退出要让用户确认 -->
                <a href="" onclick="logout(event)"><?= $_SESSION['user']['name'] ?>退出</a>
            <?php endif ?>
        </nav>
    </header>
    <script>
        //退出函数
        async function logout(ev) {
            //禁用默认行为
            ev.preventDefault();
            if (confirm('是否退出?')) {
                const url = './lib/user/logout.php';
                const response = await fetch(url);
                const result = await response.json();
                //响应处理
                if (result) {
                    alert('退出成功');
                    location.href = 'index.php';
                } else {
                    alert('退出失败');
                    location.href = 'login.php';
                    btn.form.email.focus();
                }
            }
        }
    </script>

4.会话控制()

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

<?php
//开启session
session_start();
// 服务器 -> 会话ID -> 浏览器
// 名称：SESSIONID: 值：b3XXXXXXXXXXXXXXXXX
echo session_name() .'<br>';
echo session_id() .'<br>';
// session 在服务器中的路径
echo session_save_path() .'<br>';
// 设置session,使用超全局变量 $_SESSION
// $_SESSION['name'] = 'admin';
// $_SESSION['password'] = md5('888');
$_SESSION['user']['name'] = 'admin';
$_SESSION['user']['password'] = md5('888');
// echo session_encode() . '<br>';
// 销毁会话
// 1. 清空内容，保留文件
session_unset();
// 2. 删除会话文件
session_destroy();