学前端这么久,登陆过程也简单的练过(完全凭借自己的想象,然后成功了)
上周抽时间在网络上学习了一下别人是如何做的。我觉得人家做的最好的一点就是函数的封装。这样就省去了很多重复的代码,以后用到类似的功能就可以直接调用就好了。
下面说一下登录过程的前前后后。
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();
//清空cookie
if(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">
<?php
if (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中的值。
他的效果是这样的:
到这里登陆过程应该介绍的比较完整了。
不足就是因为函数封装的便利造成了函数分散在各个文件,引用来引用去在这里介绍的时候就很零散,没有一个整体的概念。