學前端這么久，登陸過程也簡單的練過（完全憑借自己的想象，然后成功了）

上周抽時間在網絡上學習了一下別人是如何做的。我覺得人家做的最好的一點就是函數的封裝。這樣就省去了很多重復的代碼，以后用到類似的功能就可以直接調用就好了。

下面說一下登錄過程的前前后后。

1 前端頁面

首先，登陸界面長什么樣子。就是給用戶一個輸用戶名密碼的地方。我給他寫成了這樣：

這里有登陸必須的三個元素：用戶名口令驗證碼。先說一下這是怎么寫的吧。

就是三個input，要注意的是他們的name值，這個是要傳到后臺進行驗證的。將它們放在表單中，通過post方式提交到后臺。

<div class="login_cotent"><form action="doLogin.php" method="post"><ul class="login"><li class="notice">郵箱/用戶名/手機號</li><li class="mb_10"><input type="text"class="login_input" name="username" placeholder="請輸入用戶名"></li><li class="notice">密碼</li><li class="mb_10"><input type="password" class="login_input" name="password" placeholder="請輸入密碼"></li><li class="notice">驗證碼</li><li class="mb_10"><input type="text" class="login_input" name="verify" placeholder="請輸入驗證碼"></li><img src="admin/getVerify.php"><li class="auto_login"><input type="checkbox" id="a1" class="checked" name="autoFlag" ><label for="a1">自動登錄</label></li><li><input type="submit" value="" class="login_btn" ></li></ul></form> </div>

注意到驗證碼。這里調用了另外一個頁面“getVerify.php”，下面來介紹一下驗證碼是怎么生成的。

2 驗證碼

驗證碼的原理就是，后臺產生一個字符串，然后把他畫成圖，呈現給用戶看。用戶識別后，填入自己認為正確的結果，提交給后臺，與后臺產生的驗證碼字符串進行對比，如果匹配，就驗證成功。這里做驗證碼的設計主要是為了區分人機（本科畢業論文就是寫的這個方面），是一個值得研究的領域。

那么一步一步來，首先后臺產生字符串。

（再插一句，我說覺得教程好的地方是函數封裝，這里就是把與字符串相關的操作封裝在一個“string.func.php”的頁面中。相應的，還有數據庫操作相關的“mysql.func.php”，圖像相關的“image.func.php”，分頁相關的“page.func.php”等等）

<?php function buildRandomString( $type=1,$length=4){if ($type==1) {$chars=join("",range(0,9));}elseif($type==2){$chars=join("",array_merge(range("a", "z"),range("A", "Z")));}elseif ($type==3) {$chars=join("",array_merge(range("a", "z"),range("A","Z"),range(0, 9)));}if ($length>strlen($chars)) {exit("字符串長度不夠");}$chars=str_shuffle($chars); //打亂字符串return substr($chars,0,$length); } ?>

解釋一下，這里是產生一個隨機字符串，函數名命名為buildRandomString，這里產生了三種類型的字符串，一種是只有數字，一種是只有字母（大小寫），還有一種是大小寫和數字都有的。將類型作為參數，在調用函數的時候可選。字符串的長度也是可選的。記得要把產生的字符串打亂。

接下來就用產生的這個字符串畫驗證碼圖片。這里用到的是GD庫，這是php處理圖像的一個庫。這些擴展庫默認是關閉的，要在php.ini里開啟才可以使用。

<?php require_once('string.func.php'); //通過GD庫做驗證碼 function verifyImage($type=1 ,$length=4, $pixel=5,$line=3,$sess_name="verify"){session_start(); //創建畫布$width=80;$height=28;$image=imagecreatetruecolor($width,$height);$white=imagecolorallocate($image, 255, 255, 255);$black=imagecolorallocate($image, 0, 0, 0);//用填充矩形填充畫布imagefilledrectangle($image, 1, 1, $width-2, $height-2, $white);$chars=buildRandomString($type,$length);//因為要驗證，所以放在session中$_SESSION[$sess_name]=$chars;$fontfiles=array("msyh.ttf","msyhbd.ttf","segoesc.ttf","segoescb.ttf","STLITI.TTF","STXIHEI.TTF","STXINWEI.TTF");for ($i=0; $i < $length ; $i++) {$size=mt_rand(14,18); //隨機大小$angle=mt_rand(-15,15); //隨機角度$x=5+$i*$size;$y=mt_rand(20,26);$fontfile="../fonts/".$fontfiles[mt_rand(0,count($fontfiles)-1)];$color = imagecolorallocate($image, mt_rand(50,90),mt_rand(80,200), mt_rand(90,180));$text=substr($chars, $i,1);imagettftext($image, $size, $angle, $x, $y, $color, $fontfile, $text);}//干擾元素if ($pixel) {for ($i=0; $i <$pixel ; $i++) { imagesetpixel($image, mt_rand(0,$width-1), mt_rand(0,$height-1), $black);}}if ($line) {for ($i=0; $i < $line ; $i++) { $color = imagecolorallocate($image, mt_rand(50,90),mt_rand(80,200), mt_rand(90,180));imageline($image, mt_rand(0,$width-1), mt_rand(0,$height-1),mt_rand(0,$width-1), mt_rand(0,$height-1), $color);}}header("content-type:image/gif");imagegif($image);imagedestroy($image); }?>
首先引入之前產生字符串的文件，然后開啟session。

創建一個畫布，定義長寬，定義黑色白色，然后用矩形填充畫布。

這時候把寫好的字符串拿過來用，要記得放在session中，用來驗證。

字體文件，把要包含的字體放在一個數組里。

現在開始畫，第一個字符，選擇大小，角度，字體，顏色，位置。imagettftext函數用來把字變成圖。

再加一些干擾元素。pixel是點，line是線，隨機產生多少也是你說了算。

這樣一個驗證碼圖片就畫好了。

那么怎么用呢，在前端代碼里就是getVerify.php，其實它里面就是調用了驗證碼的函數（記得要包含之前的庫文件）。

這樣就可以在指定的位置顯示我們自己畫出來的驗證碼了。

3 驗證過程

驗證過程當然是在后臺機進行，說白了就是把用戶提交的信息與后臺數據庫中用戶的信息進行對比，對上了就證明你是真實用戶，對不上你就是冒充的唄（當然也有可能忘密碼了）。那來看一下驗證過程。

<?php require_once ('include.php'); session_start(); $username = $_POST['username']; $password = md5($_POST['password']); $verify = $_POST['verify']; $verify_sess = $_SESSION['verify']; $autoFlag = $_POST['autoFlag'];if ($verify==$verify_sess) {$sql = "select * from user where username = '{$username}' and password = '{$password}' ";$row = checkAdmin($sql);if ($row) {if ($autoFlag) {setcookie("adminId",$row['id'],time()+7*24*3600);setcookie("adminName",$row['username'],time()+7*24*3600);}$_SESSION['adminName'] = $row['username'];header("location:index.php");}else{alertMes("登陸失敗","login.php");} }else{alertMes("驗證碼錯誤","login.php"); } ?>

首先接收POST過來的參數。這里的密碼要進行加密。然后最先對比的是驗證碼，驗證碼正確之后再來看用戶名密碼。

這里要去數據庫找相對應的這條用戶信息，就用到了數據庫查詢。這里他把數據庫的內容也封裝了。

function checkAdmin($sql){return fetchOne($sql); }

而fetchOne函數是在另一個文件中封裝的，其實就是數據庫查詢語句

<?php mysql_connect("localhost","root","test123") or die("數據庫連接失敗Error:".mysql_errno().":".mysql_error()); mysql_set_charset("utf8"); mysql_select_db("shop") or die("指定數據庫打開失敗");<pre name="code" class="php">function fetchOne($sql){$result = mysql_query($sql);$row = mysql_fetch_array($result);return $row; }

查到了對比正確就可以登陸成功。

4 設置自動登錄

自動登錄的核心就是cookie。在驗證用戶信息的時候設置cookie。時間設置為一周。

看到了一個alertMes函數，就是在輸入錯誤或者驗證失敗的時候彈出提示，并跳轉到另一個頁面。

<?php function alertMes($mes,$url){echo "<script>alert('{$mes}');</script>";echo "<script>window.location='{$url}';</script>"; }

5 退出

退出就是在點擊“退出”之后執行一個退出的操作。他這里是這樣操作的：

<a href="doAction.php?act=logout">[退出]</a>

退出按鈕是這樣的 ，他跳轉到一個操作的頁面，帶一個logout參數。操作頁面：

<?php require_once('include.php'); $act=$_REQUEST['act']; if ($act=="logout") {logout(); }

而logout函數是在另一個文件中，

function logout(){//清空session$_SESSION = array();//清空cookieif(isset($_COOKIE[session_name()])){setcookie(session_name(),"",time()-1);}if (isset($_COOKIE['adminId'])) {setcookie("adminId","",time()-1);}if (isset($_COOKIE['adminName'])) {setcookie("adminName","",time()-1);}session_destroy();header("location:login.php"); }

主要干了兩件事，就是清空session和cookie。

6 小細節

注意到有的網站，他登陸之后就有“美少女，歡迎你來京東”。可是他怎么知道你叫美少女呢。這里我們在登陸的時候就把session中的username傳給前端頁面，顯示出來。

在主頁，可以這樣寫：

<div class="rightArea"><?phpif (isset($_SESSION['adminName'])) {echo $_SESSION['adminName']." ";}elseif (isset($_COOKIE['adminName'])) {echo $_COOKIE['adminName'];}?>歡迎來來到慕課網!<a href="login.php">[登陸]</a><a href="register.php">[免費注冊]</a><a href="doAction.php?act=logout">[退出]</a></div>

就是說如果在session中取到值，就用這個，如果cookie中設置了值，就用cookie中的值。

他的效果是這樣的：

到這里登陸過程應該介紹的比較完整了。

不足就是因為函數封裝的便利造成了函數分散在各個文件，引用來引用去在這里介紹的時候就很零散，沒有一個整體的概念。

總結

以上是生活随笔為你收集整理的web登陆过程总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。