前 言 PHP 學習了好久的PHP，今天做一個可以後臺交互的登錄頁和註冊頁，沒做什麼判斷，簡單的瞭解一下。 具體的內容分析如下： ① PHP中的數據傳輸-->>由註冊頁傳輸給註冊頁後臺-->>註冊頁後臺經過轉碼保存實例化的文件 ② 在登錄頁輸入賬戶密碼，點擊登錄時，獲得觸發函數：獲得由後臺傳輸過來的 ...
前 言
PHP
學習了好久的PHP，今天做一個可以後臺交互的登錄頁和註冊頁，沒做什麼判斷，簡單的瞭解一下。
具體的內容分析如下：
① PHP中的數據傳輸-->>由註冊頁傳輸給註冊頁後臺-->>註冊頁後臺經過轉碼保存實例化的文件
② 在登錄頁輸入賬戶密碼，點擊登錄時，獲得觸發函數：獲得由後臺傳輸過來的true或者false---轉換頁面或者彈出輸入錯誤。
登錄頁後臺獲取保存賬戶密碼的實例化文件，通過轉碼，if判斷之後傳輸給前臺登錄頁TURE或者FALSE。
總共總共8個文件：
其中07_file與libs同一級別 代碼植入請看具體內容。
代碼註釋裡面有很詳細的解析，如有需要請仔細閱讀。（希望可以幫助到你）
| 1、 效果圖 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用戶登錄</title> 6 <link rel="stylesheet" type="text/css" href="../../libs/bootstrap.css"/> 7 <style type="text/css"> 8 body{ 9 margin: 0px; 10 padding: 0px; 11 background-color: #CCCCCC; 12 } 13 .panel{ 14 width: 380px; 15 height: 280px; 16 position: absolute; 17 left: 50%; 18 margin-left: -190px; 19 top: 50%; 20 margin-top: -140px; 21 } 22 .form-horizontal{ 23 padding: 10px 20px; 24 } 25 .btns{ 26 display: flex; 27 justify-content: center; 28 } 29 </style> 30 </head> 31 32 <!--簡單的樣式表--> 33 <body> 34 <div class="panel panel-primary"> 35 <div class="panel-heading"> 36 <div class="panel-title">用戶登錄</div> 37 </div> 38 <div class="panel-body"> 39 <form class="form-horizontal"> 40 <div class="form-group"> 41 <label>用戶名</label> 42 <input type="text" class="form-control" name="userName"/> 43 </div> 44 <div class="form-group"> 45 <label>密碼</label> 46 <input type="password" class="form-control" name="pwd"/> 47 </div> 48 49 <div class="form-group btns"> 50 <input type="button" class="btn btn-primary" value="登錄系統" id="submit"/> 51 52 <a type="button" class="btn btn-success" href="reg.php"/>註冊賬號</a> 53 </div> 54 55 </form> 56 </div> 57 </div> 58 </body> 59 60 <script src="../../libs/jquery-3.1.1.js"></script> 61 <script type="text/javascript"> 62 $(function(){ 63 //↓定位id：submit事件綁定，click點擊時候觸犯function函數 64 $("#submit").on("click",function(){ 65 //↓創建一個變數str = 選取form表單，通過serialize()創建以標準 URL 編碼表示的文本字元串 66 var str = $("form").serialize(); 67 //↓列印出來看看是什麼個樣子的，傳輸給後臺才好操作。 68 console.log(str); //具體樣子：userName=value&pwd=value 69 /*通過ajax中的post方法，給後臺doLogin.php傳輸數據，給變數str(url文件類型)添加名字“formData”， 70 * 函數function是接受後臺返回的預設值也就是echo輸出的值*/ 71 $.post("doLogin.php",{"formData":str},function(data){ 72 //↓列印後臺echo輸出的值，查看類型 73 //↑console.log(data); 74 75 //↓判斷函數如果返回的是true，則通過location打開新的頁面，同是在頁面後面加?name+你輸入的用戶名，用來給主頁傳值（主頁獲得用戶名） 76 if(data=="true"){ 77 location = "index.php?name="+$("input[name='userName']").val(); 78 //↓傳回其他輸出則彈出"用戶名或密碼錯誤！！！"視窗 79 }else{ 80 alert("用戶名或密碼錯誤！！！"); 81 } 82 }); 83 }); 84 }); 85 </script> 86 </html>iogin.php行內代碼--登錄頁面
1 <?php 2 3 header("Content-Type:text/html;charset=utf-8"); 4 5 //↓定義str一個變數，通過post方法獲得前臺傳輸過來的數據。$_POST["fieldname"] 6 $str = $_POST["formData"]; 7 8 //↓列印從前臺收到的數據，通過列印傳輸會前臺，具體內容通過形參data表示 9 //echo $str; 10 //↑列印$str時↓（下方）必須全部註釋，輸出的具體樣子：userName=value&pwd=value 11 12 /* php中的數組，先通過數組explode方法-把數據內容通過$分為數組， 13 ↓再定義第一個數組內容（用戶名的value）為$userName。["userName=value"，"pwd=value"]*/ 14 list($userName) = explode("&", $str); 15 16 /* php中的數組，先通過數組explode方法-把數據內容通過$分為數組， 17 ↓再定義二個數組內容（用戶名的value）為$userName。["userName=value"，"pwd=value"]*/ 18 list(,$pwd) = explode("&", $str); 19 20 //定義一個變數users,通過php中的文件函數file_get_contents，讀取01_lx文件下的user.txt文件內容中的字元串。 21 $users = file_get_contents("user.txt");//這一步就是從文件中讀取賬號，密碼。 22 //↑具體的文件內容大概：userName=111&pwd=111&rePwd=111[;]userName=222&pwd=222&rePwd=222[;] 23 //↑通過上面的文件內容可以知道每個賬號密碼後面都有一個[;] 24 25 //↓定義一個變數userArr，通過explode函數把用變數users內容用[;]分為數組 ["userName=value"，"pwd=value"] 26 $userArr = explode("[;]", $users); 27 28 //通過foreach遍歷整個$userArr數組 29 foreach ($userArr as $user) { 30 31 //每一組$user分別為userName=value(111)&pwd=value(111)&rePwd=value(111) 32 //↓每一組都分別再通過explode函數分為數組，定義變數$realName為第一個數組名。 33 list($realName) = explode("&", $user);//具體內容為$realName=userName=value(111) 34 //↓每一組都分別再通過explode函數分為數組，定義變數$realPwd為第二個數組名。 35 list(,$realPwd) = explode("&", $user);//具體內容為$realPwd=pwd=value(111) 36 //↓每一組都分別判斷一次，當變數$userName==變數$realName同時滿足變數$pwd==變數$realPwd 37 if($userName==$realName&&$pwd==$realPwd){ 38 //php中的輸出echo 內容為true 39 echo "true"; 40 die(); 41 } 42 } 43 //↓如果賬戶或密碼沒有輸入則，返回false 44 echo "false";doLogin行內代碼--登錄頁面後臺
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用戶註冊</title> 6 <link rel="stylesheet" type="text/css" href="../../libs/bootstrap.css"/> 7 <style type="text/css"> 8 body{ 9 margin: 0px; 10 padding: 0px; 11 background-color: #CCCCCC; 12 } 13 .panel{ 14 width: 380px; 15 height: 350px; 16 position: absolute; 17 left: 50%; 18 margin-left: -190px; 19 top: 50%; 20 margin-top: -175px; 21 } 22 .form-horizontal{ 23 padding: 10px 20px; 24 } 25 .btns{ 26 display: flex; 27 justify-content: center; 28 } 29 </style> 30 </head> 31 32 33 <body> 34 <div class="panel panel-primary"> 35 <div class="panel-heading"> 36 <div class="panel-title">用戶註冊</div> 37 </div> 38 <div class="panel-body"> 39 <form class="form-horizontal"> 40 <div class="form-group"> 41 <label>用戶名</label> 42 <input type="text" class="form-control" name="userName"/> 43 </div> 44 <div class="form-group"> 45 <label>密碼</label> 46 <input type="password" class="form-control" name="pwd" /> 47 </div> 48 <div class="form-group"> 49 <label>確認密碼</label> 50 <input type="password" class="form-control" name="rePwd" /> 51 </div> 52 53 <div class="form-group btns"> 54 <input type="button" class="btn btn-primary" value="確定註冊" id="submit"/> 55 56 <a type="button" class="btn btn-success" href="login.php"/>返回登錄</a> 57 </div> 58 59 </form> 60 </div> 61 </div> 62 </body> 63 64 <script src="../../libs/jquery-3.1.1.js"></script> 65 //↑jquery插入代碼 66 <script type="text/javascript"> 67 $(function(){ 68 //↓捕捉idsubmit綁定click事件，function為發生事件時的函數。 69 $("#submit").on("click",function(){ 70 //↓創建一個變數str，選取form表單，通過serialize()創建以標準 URL 編碼表示的文本字元串 71 var str = $("form").serialize(); 72 //↓列印出來看看是什麼個樣子的，傳輸給後臺才好操作。 73 console.log(str); 74 75 /*↓通過ajax中的post方法，給後臺doReg.php傳輸數據，給變數str(url文件類型)添加名字“formData”， 76 函數function是接受後臺返回的預設值也就是echo輸出的值*/ 77 $.post("doReg.php",{"formData":str},function(data){ 78 //↓列印後臺echo輸出的值，查看類型 79 //↑console.log(data); 80 81 //↓判斷函數如果返回的是true，則彈窗提示創建成功，通過location跳轉到login.php(登錄頁面)。 82 if(data=="true"){ 83 alert("註冊成功！即將跳轉登陸頁！"); 84 location = "login.php"; 85 //返回其他值，則彈窗提示 "註冊失敗！因為啥我不知道！" 86 }else{ 87 alert("註冊失敗！因為啥我不知道！"); 88 } 89 }); 90 }); 91 }); 92 </script> 93 </html>reg行內代碼--註冊頁面
1 <?php 2 3 header("Content-Type:text/html;charset=utf-8"); 4 5 /*↓定義str一個變數，通過post方法獲得前臺傳輸過來的數據， 6 並且在每個數據後方加入一個[;]——>用以分隔每個新數據*/ 7 $str = $_POST["formData"]."[;]"; 8 9 //定義一個變數$num,通過php中的文件函數file_put_contents把每個str數據追加到01_lx文件下麵的"user.txt"文件中。 10 $num = file_put_contents("user.txt", $str,FILE_APPEND);//user.txt文件沒有的話會創建新的user.txt文件 11 //↑FILE_APPEND是追加到文件中，保證每個數據都會追加到"user.txt"文件中。 12 13 //↓簡單的判斷，不做過多的闡述。 14 if($num>0){ 15 //輸出語句，內容為後臺返回前臺$.post中的function的形參。 16 echo "true"; 17 }else{ 18 //輸出語句，內容為後臺返回前臺$.post中的function的形參。 19 echo "false"; 20 }doReg--註冊頁面後臺 use.txt由文件doReg.php自動在文件夾01_lx中生成。
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 </head> 9 <body> 10 歡迎您，<span style='color:red;'><?php echo $_GET["name"]; ?></span><br> 11 我是主頁！ 12 13 </body> 14 </html>index.php--主頁代碼
、
