JS复习-22-登录功能实现

前后端不分离式登录功能

1、准备一个登录页面 login.html

  form 标签, 一个表单标签
     + 有自动提交功能
	 + action: 提交到哪一个地址(哪一个 php 文件)
	 + button 标签对: 等价于 submit 按钮, 点击的时候会自动提交
  input
     + form 表单的自动提交
     + 只会提交有 name 属性的表单
     + name 的值作为 key,表单的 value 作为 value
     + 例子:
        => guoxiang
        => 123456
        => 提交到 login.php 的内容就是 username=guoxiang&password=123456
     问题：用户名和密码会显示在浏览器的地址栏

<form action="./login.php" method="GET">
    <input type="text" name="username" autocomplete="off">
    <br>
    <input type="text" name="password" autocomplete="off">
    <br>
    <input type="text" placeholder="性别">
    <br>
    <button>登录</button>
  </form>

2.服务器解析提交的数据 login.php

 / 1. 接收前端发来的内容
  / PHP 有一个天生的关联型数组叫做 $_GET
  / 所有从 地址栏 带过来的参数信息, 都自动存储在里面
  $username = $_GET['username'];  // guoxiang
  $password = $_GET['password'];

  header('content-type: text/html;charset=utf-8;');

  / 2. 使用前端发来的内容去数据库查询
  $link = mysqli_connect('localhost', 'root', 'root', 'gp20');

  $sql = "SELECT * FROM `users` WHERE `username`='$username' AND `password`='$password'";
  $res = mysqli_query($link, $sql);

  /把结果解析完毕, 查看解析完毕的关联型数组的 length
  $data = mysqli_fetch_all($res, MYSQLI_ASSOC);
 
  / 3. 返回结果给前端, 登录成功, 登录失败
  if (count($data)) {
    / 表示有数据, 登录成功
    / 暂时使用 php 操作一下浏览器 告诉浏览器, 把你的地址栏写成 home.html
    header('location: ./home.html');
  } else {
    // 表示没有数据, 登录失败
    echo '用户名密码错误!';
    echo '<button><a href="./login.html">跳转</a></button>';
  }

判断用户有没有登录过

利用cookie和session

login.php
 if (count($data)) {
    / 表示登录成功
    / 存储一个简单的信息到 session 空间里面
    / 就会有一半密码存储在 cookie 里面了
    session_start();
    / 存储一个信息进去
    $_SESSION['login'] = 1;
    $_SESSION['username'] = $data[0]['username'];

    header('location: ./index.php');
  } else {
    / 表示登录失败
    echo '用户名密码错误!';
  }

index.php
<?php
  / 打开 session 空间
  /从里面拿到 login 和 username 信息
  / 只要有, 证明登陆过 没有, 就没有登录过
  session_start();

  / 逻辑: 判断一下 $_SESSION 里面有没有, 有再获取, 没有直接不获取
  // $username = $_SESSION['username'];

  if (isset($_SESSION['username'])) {
    $username = $_SESSION['username'];
  } else {
    $username = '亲!请登录';
  }
?>

前后端分离式登录功能

前端业务逻辑
    1. 获取元素
    2. 绑定事件
      => submit 事件
      => button 的点击事件
      => **阻止表单的自动提交**
    3. 获取用户输入的内容
    4. 表单验证
      => 非空验证
      => 格式验证
    5. 发送请求
    6. 根据响应做不同的操作

login.html
	/ 1. 获取元素
    const nameInp = document.querySelector('input[name=username]')
    const pwdInp = document.querySelector('input[name=password]')
    // const btn = document.querySelector('button')
    const form = document.querySelector('form')
    const h3 = document.querySelector('h3')

    / 2. 绑定事件
    form.addEventListener('submit', e => {
      e = e || window.event
      // 阻止默认事件
      e.preventDefault()

      / 3. 获取用户输入的数据
      const username = nameInp.value
      const password = pwdInp.value

      / 4. 简单的非空验证
      if (!username || !password) return alert('完整填写表单')

      / 5. 提交到后端
      const xhr = new XMLHttpRequest()
      xhr.open('POST', './login.php')
      xhr.onload = function () {
        // 准备根据后端返回的结果去操作
        const { message, code } = JSON.parse(xhr.responseText)

        if (code === 1) {
          // 登录成功
          window.location.href = './index.html'
        } else if (code === 2) {
          h3.style.display = 'block'
        }
      }
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      xhr.send(`username=${username}&password=${password}`)
    })

login.php
<?php
  / 后端的业务逻辑
  / 1. 接收参数, 判断任何一个没有, 都不是正常行为
  if (!isset($_POST['username']) || !isset($_POST['password'])) {

    $arr = array("message" => "请按照规则携带参数", "code" => 0);

    echo json_encode($arr);
    // 打断代码, 后面的所有代码不再执行了
    exit;
  }
  $username = $_POST['username'];
  $password = $_POST['password'];

  / 2. 去数据库比对
  $link = mysqli_connect('localhost', 'root', 'root', 'gp20');

  $sql = "SELECT * FROM `users` WHERE `username`='$username' AND `password`='$password'";
  $res = mysqli_query($link, $sql);

  $data = mysqli_fetch_all($res, MYSQLI_ASSOC);

  / 3. 判断结果
  if (count($data)) {
    $arr = array(
      "message" => "登录成功",
      "code" => 1
    );
  } else {
    $arr = array(
      "message" => "登录失败",
      "code" => 2
    );
  }

  // 返回结果
  echo json_encode($arr);

?>