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;width:" + 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 app\index\controller;
 use app\index\model\Data 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;
     }
 }