PHP實現用戶登陸註冊功能

初學php作了一些比較常見且有用的頁面，放在上面記錄一下咯
我是用了bootstrap框架裏面的模態框作註冊登錄頁面，這樣頁面比較美觀
頁面效果：


註冊成功條件/功能：
1）用戶名不能衝突

2）兩次密碼必須相同

3）用戶註冊數據添加進數據庫
4）註冊/登陸成功以後，用戶自動登陸

HTML代碼：

<link rel="stylesheet" href="css/bootstrap.css">
    <li class="toggle"><a data-toggle="modal" href="#loginer">登陸</a></li>
    <li class="toggle"><a data-toggle="modal" href="#register">註冊</a></li>
    <li class="toggle hidden"><a id="nicheng" href="##"></a></li>
    <li class="toggle hidden"><a id="logout" href="##">註銷</a></li>
//登陸模態框
<div id="loginer" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">請登陸</h4>
            </div>
            <form id="form_login" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="zh1">用戶名：</label>
                        <div class="col-sm-9 require">
                            <input type="text" class="form-control" name="username" id="zh1"
                                   pattern="\w{6,10}" required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="pw1">密碼：</label>
                        <div class="col-sm-9 require">
                            <input type="password" pattern="\w{6,10}" class="form-control" name="pwd" id="pw1"
                                   required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="yzm">驗證碼：</label>
                        <div class="col-sm-5 require">
                            <input type="text" pattern="\d{4}" class="form-control" name="yzm" id="yzm"
                                   required>
                        </div>
                        <div class="col-sm-4">
                            <img src="php/idcode.php" alt="">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label id="info" class="col-sm-4 control-label pull-left"></label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">登陸</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                </div>
            </form>
        </div>
    </div>
</div>
//註冊模態框
<div id="register" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">請註冊</h4>
            </div>
            <form id="form_regist" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="zh2">用戶名：</label>
                        <div class="col-sm-9 require">
                            <input type="text" class="form-control" name="username" id="zh2"
                                   pattern="\w{6,10}" required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="pw2">密碼：</label>
                        <div class="col-sm-9 require">
                            <input type="password" pattern="\w{6,10}" class="form-control" name="pwd" id="pw2">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="pw3">確認密碼：</label>
                        <div class="col-sm-9 require">
                            <input type="password" pattern="\w{6,10}" class="form-control" name="repwd" id="pw3">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-3 control-label" for="lc">暱稱：</label>
                        <div class="col-sm-9 require">
                            <input type="text" pattern="\S{2,10}" class="form-control" name="nc" id="lc">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label id="wanner" class="col-sm-4 control-label pull-left"></label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">註冊</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                </div>
            </form>
        </div>
    </div>
</div>

JS代碼：

<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    function toggle(){
        $.getJSON("php/get.php",function (res) {
            //獲取當前用戶是否登陸
            if(res['flag']){//用戶已經登陸，顯示暱稱和註銷選項
                $('li.toggle').toggleClass('hidden');
                $('#nicheng').html(res['nc'])
            }
        });
    }
    $('#form_login').submit(function (e) {/*登陸*/
        e.preventDefault();/*阻止表單默認事件，頁面全局刷新*/
        var data=$('#form_login').serialize();/*將表單裏的數據包裝起來*/
        $.getJSON('php/login.php',data,function (res) {
            /*data：將表單裏的數據傳給php，回調函數接受php返回來的值*/
            if(res==3){//用戶名、密碼、驗證碼都輸入正確
                toggle();/*修改首頁選項菜單*/
                $('#loginer').modal('hide');/*關閉模態框*/
            }else if(res==2){
                $('#info').html('用戶名或密碼有誤')
            }else {
                $('#info').html('驗證碼有誤')
            }
        })
    });
    $('#logout').click(function () {
        confirm('肯定要註銷？');
        $.getJSON('php/logout.php',function (res) {
            if(res)toggle();
        })
    })
    $('#form_regist').submit(function (e) {
        e.preventDefault();
        var data=$('#form_regist').serialize();
        $.getJSON('php/regist.php',data,function (res) {
            if(res==3){
                toggle();
                $('#register').modal('hide');
            }else if (res==2) {
                $('#wanner').html('兩次密碼不一致，請重試！')
            }else if (res==1) {
                $('#wanner').html('用戶名衝突，請重試！')
            }
        })
    });

connect.php(鏈接數據庫)：

<?php
$link=new PDO("mysql:host=localhost;port=3306;dbname=db","root","");
$link->query("set names utf8");

get.php(判斷登陸狀態)：未登陸顯示登陸註冊選項，用戶登錄後切換顯示成暱稱和註銷選項

<?php
include_once ("connect.php");
session_start();/*開啓會話*/
if (isset($_SESSION['username'])){
   /* 判斷用戶會話裏用戶名是否存在，即用戶是否登陸*/
    $json['nc']=$_SESSION['nc'];/*把暱稱存起來，一會返回給首頁*/
    $json['flag']=true;/*用戶已經登陸，標誌flag爲true*/
}else
    $json['flag']=false;/*用戶已經登陸，標誌flag爲true*/
echo json_encode($json);/*返回json*/

regist.php(註冊)：根據設置標誌flag的值判斷註冊的三種狀態

<?php
include_once ("connect.php");
$user=$_GET['username'];//獲取表單提交的數據
$pwd=$_GET['pwd'];
$repwd=$_GET['repwd'];
$nc=$_GET['nc'];
$row=$link->query("select * from `user` where username='$user'");
/*查詢數據庫中是否存在用戶名相同的用戶*/
if ($row->rowCount()){
    $flag=1;/*存在用戶名相同，即用戶名衝突*/
}else if ($pwd!=$repwd){
   $flag=2;/*兩次密碼不相同*/
}else{/*插入數據進數據庫*/
    $row=$link->exec("insert into`user`( `username`,  `pwd`，`nc`) values ('$user','$pwd','$nc')");
    session_start();/*打開會話，將用戶名和暱稱存起來*/
    $_SESSION['username']=$user;
    $_SESSION['nc']=$nc;
    $flag=3;/*註冊成功標誌*/
}
echo $flag;

login.php(登陸)：根據標誌flag判斷登陸操做是否成功或哪裏出錯

<?php
include_once ("connect.php");
session_start();/*開啓會話*/
$user=$_GET['username'];/*獲取登陸表單提交過來的數據*/
$pwd=$_GET['pwd'];
$yzm=$_GET['yzm'];
if($yzm==$_SESSION['vCode']){/*當用戶輸入的驗證碼和圖片驗證碼相同時*/
    $result=$link->query("select * from `user` where username='$user' and pwd='$pwd'");
    $link = null;
    $row = $result->fetch();/*讀取從數據庫獲取的數據*/
    if ($row) {/*若是數據存在，即用戶登陸成功*/
        $_SESSION['username'] = $row['username'];
        /*將用戶名和暱稱存在服務器，能夠多個頁面使用*/
        $_SESSION['nc'] = $row['nc'];
        $flag=3;
    }else{/*用戶名或密碼錯誤*/
        $flag=2;
    }
}else{/*驗證碼輸入錯誤*/
    $flag=1;
}
echo $flag;

logout.php(註銷登陸)：直接銷燬會話變量，而後get.php裏面獲取不到username和nc即判斷用戶已註銷

<?php
session_start();
unset($_SESSION['username']);//銷燬用戶名
unset($_SESSION['nc']);//銷燬暱稱
echo json_encode(true);//返回結果

登陸頁面的自動生成驗證碼代碼，在個人另外一篇文裏
http://www.javashuo.com/article/p-nxrdphtb-hm.html