session + cookie 实现登录功能

Posted 2020-12-16 huangcaijin

前端部分代码实现

 1 <div id="mainCp">
 2         <div class="postForm">
 3           <p>
 4             <label>用户账号：</label>
 5             <input name="oldpwd" type="text" id="username" class="intxt" />
 6           </p>
 7           <p class="cellBg">
 8             <label>用户密码：</label>
 9             <input name="userpwd" type="password" id="userpwd" class="intxt" />
10             <span id="_userpwdok"></span>
11           </p>
12           <p class="cellBg">
13             <label>重复密码：</label>
14             <input name="userpwd" type="password" id="reuserpwd" class="intxt" />
15             <span id="_userpwdok"></span>
16           </p>
17    
18           <p class="cellBg">
19             <label>验证码号：</label>
20                   <input name="vdcode" type="text" id="vdcode" class="intxt" />
21            <img id="code" src="" align="absmiddle" alt="看不清？点击更换" style="cursor:pointer;" onclick="getCode()">
22           </p>
23 
24           <p>
25             <button class="button2" type="button" id="login">登录账号</button>
26             <button class="button2 ml10" type="reset">重新填写</button>
27           </p>
28         </div>
29       </div>

 

  1 <style>
  2   #out{
  3     position: fixed;
  4     top:0;
  5     left:0;
  6     z-index: 10000;
  7     background: rgba(0,0,0,0.7);
  8     display:flex;
  9     align-items: center;
 10     justify-content: center;
 11     overflow: hidden;
 12     width:0px;
 13     height:0px;
 14   }
 15   #in{
 16     margin: 200px auto;
 17     width:300px;
 18     height:100px;
 19     display:flex;
 20     align-items: center;
 21     justify-content: center;
 22     background:#fff;
 23     border-radius: 14px;
 24     font-size: 16px;
 25     font-weight: bold;
 26   }
 27 </style>
 28 <div id="out">
 29   <div id="in"></div>
 30 </div>
 31 <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
 32     <script src="/public/static/js/StrPlay.class.js"></script>
 33     <script src="/public/static/js/Ele.class.js"></script>
 34     <script src="/public/static/js/loginCheck.js"></script>
 35     <script>
 36       // ------ 获取验证码
 37       function getCode() {
 38         var imgCode = find(‘#code‘);
 39         imgCode.src = ‘http://0609.cn/Config/image/imgcode.php?num=6&y=34&x=150‘ + "&time=" + new Date().getTime();
 40       }
 41       // ------ 初始化
 42       function init() {
 43         loop("input",function(item) {
 44           item.value = "";
 45         })
 46       }
 47       // ------ 遍历输入框
 48       function loop(str,fn) {
 49         find(str).forEach((item,index)=> {
 50           fn(item);
 51         });
 52       }
 53       // ------ 代码运行时长
 54       function runLen(fn) {
 55         window.addEventListener(‘load‘,function(){
 56             console.group("程序运行时长:");
 57             console.time();
 58             fn();
 59             console.timeEnd();
 60             console.groupEnd();
 61         });      
 62       }
 63       // ------ 输入检测
 64       function inputCheck(e) {
 65         e.username(‘username‘);
 66         e.password(‘userpwd‘);
 67         e.repassword(‘reuserpwd‘,‘userpwd‘);
 68       }
 69       // ------ 点击登录，获取表单信息，检查数据是否合格，请求服务端检测程序
 70       function goLogin() {
 71         show("正在处理，请稍后 . . . .");
 72         var param = {};
 73         param.username = find(‘#username‘).value;
 74         param.password = find(‘#userpwd‘).value;
 75         param.code = find(‘#vdcode‘).value;
 76         $.post(‘http://0609.cn/public/index.php/check‘,param,function(data) {
 77             data = data.split(",").map(item => {
 78               return item.split("=>");
 79             })
 80             let mdata = new Map(data);
 81             find(‘#in‘).innerhtml = mdata.get(‘login‘);
 82         });
 83       }
 84       // ------ DOM效果展示
 85       function show(tip) {
 86         var pageWidth = window.innerWidth;
 87         var pageHeight = window.innerHeight;
 88         if (typeof pageWidth != "number"){
 89             if (document.compatMode == "CSS1Compat"){
 90                   pageWidth = document.documentElement.clientWidth;
 91                   pageHeight = document.documentElement.clientHeight;
 92             } else {
 93                   pageWidth = document.body.clientWidth;
 94                   pageHeight = document.body.clientHeight;     
 95             }
 96         } 
 97         find(‘#out‘).style.cssText = "display:block;width:" + pageWidth + "px;height:" + pageHeight +"px";
 98         find(‘#in‘).innerHTML = tip;
 99         find(‘#out‘).addEventListener("click",function(){
100           find(‘#out‘).style.cssText = "display:none;";
101         },true);
102       }
103       // ------ 通过选择器，获取DOM元素
104       function find(str) {
105         return str.charAt(0) === "#" ? 
106         document.querySelector(str) : document.querySelectorAll(str);
107       }
108       // ------ 错误异常检测
109       function errorCheck() {
110         window.addEventListener(‘error‘,function(error){
111                 if(error.filename){return false;}else{
112                     console.log(error.target+"资源加载失败"+":");
113                     console.log(error.target);}
114             },true);
115         window.onerror = function(message, source, lineno, colno, error) {
116                 console.log("程序运行出错:"+message+" at "+lineno+":"+colno);
117                 return true;
118             }
119         window.addEventListener(‘unhandledrejection‘,function(event){
120             event && event.preventDefault();
121             console.log("数据接口请求失败");
122         },true);     
123       }
124       
125       // ------ 开始运行程序
126       runLen(function() {
127         var e = new Check();
128         init();
129         inputCheck(e);
130         getCode();
131         loop("input",function(item){
132           item.addEventListener(‘blur‘,function() {
133             if(!Object.values(e.fit).includes(false)){
134               find(‘#login‘).addEventListener(‘click‘,goLogin,true);
135             }else{
136               find(‘#login‘).removeEventListener(‘click‘,goLogin,true);
137             }
138           },true);
139         });
140         errorCheck();
141       });
142       
143     </script>

服务端代码实现

 1 namespace appindexcontroller;
 2 use appindexmodelData as MD;
 3 class Checklogin
 4 {
 5     public function __construct()
 6     {
 7         // parent::__construct();
 8     }
 9     public function check()
10     {   
11         header(‘Content-type:text/html;charset=utf-8;‘);
12         $code=strtolower($this->checkcode());
13         $username=$this->userlist()->username;
14         $password=$this->userlist()->password;
15         sleep(3);
16         if($_REQUEST[‘code‘] != $code)
17         {
18             echo "login=>验证码错误";
19             exit;
20         }
21         if($_REQUEST[‘username‘] != $username)
22         {
23             echo "login=>用户名或密码错误";
24             exit;
25         }
26         if($_REQUEST[‘password‘] != $password)
27         {
28             echo "login=>用户名或密码错误";
29             exit;
30         }
31         $str="";
32         foreach($this->userlist() as $k=>$v){
33             $str .= $k."=>".$v.",";
34         }
35         echo $str."login=>登录成功";
36         exit;
37     }
38     public function checkcode(){
39         session_start();
40         return $_SESSION[‘code‘];
41     }
42     public function userlist(){
43         $user = new stdClass();
44         $user->username = "username";
45         $user->password = "123456";
46         $user->name = "Tom json";
47         $user->age = "50";
48         $user->sex = "man";
49         $user->vip = "是";
50         return $user;
51     }
52 }