session + cookie 实现登录功能

前端部分代码实现

<div id="mainCp">
        <div class="postForm">
          <p>
            <label>用户账号：</label>
            <input name="oldpwd" type="text" id="username" class="intxt" />
          </p>
          <p class="cellBg">
            <label>用户密码：</label>
            <input name="userpwd" type="password" id="userpwd" class="intxt" />
            <span id="_userpwdok"></span>
          </p>
          <p class="cellBg">
            <label>重复密码：</label>
            <input name="userpwd" type="password" id="reuserpwd" class="intxt" />
            <span id="_userpwdok"></span>
          </p>
   
          <p class="cellBg">
            <label>验证码号：</label>
                  <input name="vdcode" type="text" id="vdcode" class="intxt" />
           <img id="code" src="" align="absmiddle" alt="看不清？点击更换" style="cursor:pointer;" onclick="getCode()">
          </p>

          <p>
            <button class="button2" type="button" id="login">登录账号</button>
            <button class="button2 ml10" type="reset">重新填写</button>
          </p>
        </div>
      </div>

<style>
  #out{
    position: fixed;
    top:0;
    left:0;
    z-index: 10000;
    background: rgba(0,0,0,0.7);
    display:flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width:0px;
    height:0px;
  }
  #in{
    margin: 200px auto;
    width:300px;
    height:100px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#fff;
    border-radius: 14px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
<div id="out">
  <div id="in"></div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="/public/static/js/StrPlay.class.js"></script>
    <script src="/public/static/js/Ele.class.js"></script>
    <script src="/public/static/js/loginCheck.js"></script>
    <script>
      // ------ 获取验证码
      function getCode() {
        var imgCode = find('#code');
        imgCode.src = 'http://0609.cn/Config/image/imgcode.php?num=6&y=34&x=150' + "&time=" + new Date().getTime();
      }
      // ------ 初始化
      function init() {
        loop("input",function(item) {
          item.value = "";
        })
      }
      // ------ 遍历输入框
      function loop(str,fn) {
        find(str).forEach((item,index)=> {
          fn(item);
        });
      }
      // ------ 代码运行时长
      function runLen(fn) {
        window.addEventListener('load',function(){
            console.group("程序运行时长:");
            console.time();
            fn();
            console.timeEnd();
            console.groupEnd();
        });      
      }
      // ------ 输入检测
      function inputCheck(e) {
        e.username('username');
        e.password('userpwd');
        e.repassword('reuserpwd','userpwd');
      }
      // ------ 点击登录，获取表单信息，检查数据是否合格，请求服务端检测程序
      function goLogin() {
        show("正在处理，请稍后 . . . .");
        var param = {};
        param.username = find('#username').value;
        param.password = find('#userpwd').value;
        param.code = find('#vdcode').value;
        $.post('http://0609.cn/public/index.php/check',param,function(data) {
            data = data.split(",").map(item => {
              return item.split("=>");
            })
            let mdata = new Map(data);
            find('#in').innerHTML = mdata.get('login');
        });
      }
      // ------ DOM效果展示
      function show(tip) {
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        if (typeof pageWidth != "number"){
            if (document.compatMode == "CSS1Compat"){
                  pageWidth = document.documentElement.clientWidth;
                  pageHeight = document.documentElement.clientHeight;
            } else {
                  pageWidth = document.body.clientWidth;
                  pageHeight = document.body.clientHeight;     
            }
        } 
        find('#out').style.cssText = "display:block;" + pageWidth + "px;height:" + pageHeight +"px";
        find('#in').innerHTML = tip;
        find('#out').addEventListener("click",function(){
          find('#out').style.cssText = "display:none;";
        },true);
      }
      // ------ 通过选择器，获取DOM元素
      function find(str) {
        return str.charAt(0) === "#" ? 
        document.querySelector(str) : document.querySelectorAll(str);
      }
      // ------ 错误异常检测
      function errorCheck() {
        window.addEventListener('error',function(error){
                if(error.filename){return false;}else{
                    console.log(error.target+"资源加载失败"+":");
                    console.log(error.target);}
            },true);
        window.onerror = function(message, source, lineno, colno, error) {
                console.log("程序运行出错:"+message+" at "+lineno+":"+colno);
                return true;
            }
        window.addEventListener('unhandledrejection',function(event){
            event && event.preventDefault();
            console.log("数据接口请求失败");
        },true);     
      }
      
      // ------ 开始运行程序
      runLen(function() {
        var e = new Check();
        init();
        inputCheck(e);
        getCode();
        loop("input",function(item){
          item.addEventListener('blur',function() {
            if(!Object.values(e.fit).includes(false)){
              find('#login').addEventListener('click',goLogin,true);
            }else{
              find('#login').removeEventListener('click',goLogin,true);
            }
          },true);
        });
        errorCheck();
      });
      
    </script>

服务端代码实现

namespace appindexcontroller;
use appindexmodelData as MD;
class Checklogin
{
    public function __construct()
    {
        // parent::__construct();
    }
    public function check()
    {   
        header('Content-type:text/html;charset=utf-8;');
        $code=strtolower($this->checkcode());
        $username=$this->userlist()->username;
        $password=$this->userlist()->password;
        sleep(3);
        if($_REQUEST['code'] != $code)
        {
            echo "login=>验证码错误";
            exit;
        }
        if($_REQUEST['username'] != $username)
        {
            echo "login=>用户名或密码错误";
            exit;
        }
        if($_REQUEST['password'] != $password)
        {
            echo "login=>用户名或密码错误";
            exit;
        }
        $str="";
        foreach($this->userlist() as $k=>$v){
            $str .= $k."=>".$v.",";
        }
        echo $str."login=>登录成功";
        exit;
    }
    public function checkcode(){
        session_start();
        return $_SESSION['code'];
    }
    public function userlist(){
        $user = new stdClass();
        $user->username = "username";
        $user->password = "123456";
        $user->name = "Tom json";
        $user->age = "50";
        $user->sex = "man";
        $user->vip = "是";
        return $user;
    }
}