JS登录功能实现

前后端不分离式登录功能

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.htmlheader('location: ./home.html');}else{// 表示没有数据, 登录失败
    echo'用户名密码错误!';
    echo'<button><a href="./login.html">跳转</a></button>';}

判断用户有没有登录过

利用cookie和session

login.phpif(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.valueconst password= pwdInp.value/4. 简单的非空验证if(!username||!password)returnalert('完整填写表单')/5. 提交到后端const xhr=newXMLHttpRequest()
      xhr.open('POST','./login.php')
      xhr.onload=function(){// 准备根据后端返回的结果去操作const{ message, code}=JSON.parse(xhr.responseText)if(code===1){// 登录成功
          window.location.href='./index.html'}elseif(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);

    echojson_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);}// 返回结果
  echojson_encode($arr);?>