用户登录验证简单案例

文档说明（图片）：

1.Connect.php

<?php
namespace demo_MVC;
//数据库参数
class Connect{
   private $param =[
        'DB_HOST'=>'localhost',
        'DB_TYPE'=>'mysql',
        'DB_NAME'=>'my_user',
        'DB_PASSWORD'=>'root123',
        'DB_USER'=>'root',
        'DB_CHARSET'=>'utf8',
        'DB_PORT'=>'3306'
    ];
    // public $dsn = "mysql:host=localhost;dbname=my_user;charset=utf8";
    //连接数据
    public  function link(){
        try{
            //连接数据款
           return $pdo = new \PDO("mysql:host=localhost;dbname=my_user;charset=utf8",$this->param['DB_USER'],$this->param['DB_PASSWORD']);
        } catch(\PDOException $e){
            //捕捉特定于数据库信息的PDOEXCEPTION 异常
            echo  $e->getMessage();
        } catch(\Throwable $e){
            //捕捉拥有Throwable接口的错误或者其他异常
            echo $e->getMessage();
        }
    }
}

2.Model.php

<?php 
namespace demo_MVC;
//加载数据库连接
require "./connect.php";
//开启session会话
session_start();
class Model extends Connect
{
    //验证
    public function checked($data){
        $pdo = parent::link();
        $sql = "SELECT * FROM  `mu_user` WHERE `username`=?";
        $stm = $pdo ->prepare($sql);
        $stm ->bindParam(1,$data['username']);
        $stm ->execute();
        $result = $stm ->fetch();
        if($result && $result['password'] == md5($data['password'])){
            $arr['status'] =200;
            $arr['msg'] ="登录成功";
        }else{
            $arr['status'] =100;
            $arr['msg'] ="账号或密码有误";
        }
        return $arr;
    }
}
if(strtolower($_POST['code']) == strtolower($_SESSION['codenum'])){
    $model = new Model();
    $res  = $model->checked($_POST);
}else{
    $res['status'] = 100; 
    $res['msg'] = '验证码有误'; 
}
echo json_encode($res);

3.code.php

<?php
require_once __DIR__.'/composer/vendor/autoload.php';
use Gregwar\Captcha\CaptchaBuilder;
//开启session会话
session_start();
//获取验证图片
$captcha = new CaptchaBuilder;
$captcha->build()->save('out.jpg');
$_SESSION["codenum"] = $captcha ->getPhrase();
$data['code'] = $captcha ->inline();
echo json_encode($data);

4.login.html

<?php
  require "./code.php";
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
  </head>
  <style>
    h2 {
      text-align: center;
    }
    form {
      width: 350px;
      border: 1px solid;
      margin-left: 38%;
      background-color: beige;
    }
    form div {
      margin: 15px 15px;
      display: flex;
      flex-direction: column;
    }
    form div input {
      margin: 10px 0px;
    }
    img {
      width: 200px;
    }
    img:hover {
      cursor: pointer;
    }
    button:hover {
      cursor: pointer;
    }
    span {
      font-size: 1.5rem;
    }
    .reslut {
      width: 350px;
      margin-left: 38%;
      margin-top: 20px;
      background-color: rgb(147, 197, 193);
    }
    .reslut > span:nth-of-type(2) {
      color: chocolate;
    }
  </style>
  <body>
    <h2>登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</h2>
    <form action="" method="POST" onsubmit="return false">
      <div>
        <label for="username">账号：</label>
        <input type="text" name="username" id="username" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" />
      </div>
      <div>
        <label for="code">验证码：</label>
        <input type="text" name="code" id="code" />
        <img src="" onclick="getcode()" id="codeimg" />
      </div>
      <div>
        <button>登录</button>
      </div>
    </form>
    <div class="reslut">
      <span>登录结果:</span>
      <span></span>
    </div>
  </body>
  <script type="text/javascript">
    //立即调用函数
    (function () {
      getcode();
    })();
    //ajax--GET请求方式获取验证码图片
    function getcode() {
      //创建ajax对象
      var xhr = new XMLHttpRequest();
      //监听请求
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          // // xhr.responseText:保存请求成功后的文本数据，是个json字符串，必须用JSON.parse()转换js对象
          var data = JSON.parse(xhr.responseText);
          document.getElementById("codeimg").src = data["code"];
        }
      };
      //初始化请求参数
      xhr.open("GET", "code.php");
      //发送请求
      xhr.send(null);
    }
    //ajax--POST请求方式验证登录
    var btn = document.querySelector("form button");
    var form = document.querySelector("form");
    btn.addEventListener("click", function () {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          // // xhr.responseText:保存请求成功后的文本数据，是个json字符串，必须用JSON.parse()转换js对象
          var obj = JSON.parse(xhr.responseText);
          var reslut = document.querySelector(".reslut");
          reslut.children[1].innerText = obj["msg"];
        }
      };
      // 初始化请求参数
      xhr.open("POST", "Model.php");
      // 使用FormData来组织数据,最终仍是以表单数据方式发送
      var data = new FormData(form);
      //发送请求
      xhr.send(data);
    });
  </script>
</html>

效果图：

用户登录验证简单案例

用户登录验证简单案例

相关文章