基於原生的 html css js php ajax做的一個 web登錄和注冊系統(帶發郵件功能)

完整代碼下載： 百度網盤地址 https://pan.baidu.com/s/1D1gqHSyjgfoOtYCZm7ofJg

提取碼 ：nf0b

永久有效

注意：

1 如果要正常運行此示例， 本地需要搭建服務器 和 php 環境，不懂的自行百度啊

2 在此示例中的register.php/sendMail()函數中，發送郵件的發件人填的是我自己已經開通smtp服務后的qq郵箱號(如果想開通 smtp服務， 請看我的其它博客開通smtp服務)

3 如果你要把發郵件的郵箱號改成自己的， 需要登錄郵箱並開通smtp服務(免費開通的，只需要你手機驗證), 不然你的郵箱號是發送不了郵件的

4 你可以在郵箱正文中填寫並發送html格式的內容， 如果必須要郵箱驗證才能注冊帳號成功，那么你要有一個虛擬機 或 服務器來接收這個驗證信息

5 此示例中， 大部分信息驗證都在 服務器語言php中進行的，當然js也可以勝任，但不安全 

6 在等成功后進入index主頁面的時候， 輸出的是一個意料之外的用戶信息， 因為我懶，所以沒改就上傳了

有疑問可以給我發郵件：[e-mail] || [e-mail]

 

 用到的類:

"use strict"

/*
    創建Ajax請求:
    obj = {
        url:    必須, 請求路徑
        method:    可選, post 或 get請求， 默認post請求
        data:    可選, 要發送的數據, 默認為""
        asy:    可選, 是否異步執行, 默認為true
        success:可選, 成功回調
        error:    可選, 失敗回調
        run:    可選, 請求中回調
    }
*/
class Ajax{
    
    constructor(obj){
        let o = obj || {}
        this.url = o.url || null;
        this.method = o.method || "post";
        this.data = o.data || "";
        this.asy = o.asy || true;
        this.callback_suc = o.success || function (){};
        this.callback_err = o.error || function (){};
        this.callback_run = o.run || function (){};
        this.request();
    }
    
    request(){
        if(!this.url){this.callback_err(); return;}
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = (e)=>{
            if(e.target.readyState === 4 && e.target.status === 200){
                this.callback_suc(e.target.responseText);
                return;
            }
            this.callback_run(e);
        }
        xhr.onerror = (e)=>{
            this.callback_err(e);
        }
        if(this.method == "get"){
            xhr.open(this.method, this.url, this.asy);
            xhr.send();
            return;
        }
        xhr.open(this.method, this.url, this.asy);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(this.data);
    }
    
}
/*
    xhr.readyState:
    0: 請求未初始化
    1: 服務器連接已建立
    2: 請求已接收
    3: 請求處理中
    4: 請求已完成，且響應已就緒
    xhr.status:
    200: "OK"
    404: 未找到頁面
*/


/*
    視圖類
*/
class View{
    
    constructor(){
        if(!this.client){View.prototype.client = this.getClient();}
    }
    
    //創建html元素
    add(fel, elemName, id, cls){
        //創建一個元素
        let el = document.createElement(elemName);
        //設置el id 和 class
        if(id){el.setAttribute('id',id);}
        if(cls){el.className = cls;}
        //把el添加到fel並顯示（渲染el）
        if(fel){fel.appendChild(el);}
        return el;
    }

    //刪除html元素
    remove(){
        let k, arg = arguments, err = [];
        for(k = 0; k < arg.length; k++){
            if(this.isEl(arg[k]) === false){err.push(arg[k]); continue;}
            arg[k].parentNode.removeChild(arg[k]);
        }
        if(err.length > 0){return {err:'這里有一些刪除失敗的元素', arr:err};}
        return true;
    }

    //id獲取html元素
    get(id){
        return document.getElementById(id);
    }
    
    //獲取可視寬高
    getClient(){
        return {
            w:document.documentElement.clientWidth || document.body.clientWidth, 
            h:document.documentElement.clientHeight || document.body.clientHeight
        };
    }
    
    //通過parentNode檢查元素是否存在於頁面中
    isEl(el){
        if(typeof(el) !== 'object'){return false;}
        //被刪除之后的html元素object的 parentNode等於null
        if(!el.parentNode){return false;}
        return true;
    }
    
    //元素綁定事件
    addEvent(target, ev, callback){
        target.addEventListener(ev, function(e){if(callback){callback(e);}}, false);
    }

}

//webSocket object
class webSocket{
    
    constructor(){
        // 連接socket
        this.ws = new WebSocket('ws://127.0.0.1:8080');

        // 接受服務器端數據
        this.ws.onmessage = function(evt){
            this.message = evt.data;
            console.log(this.serverMessage);
        }
        
        // 打開連接
        this.ws.onopen = function(evt){}
        
        // 異常接受數據
        this.ws.onerror = function(evt){}

        // 關閉事件
        this.ws.onclose = function(evt){}

    }
    
    send(data){//發送
        this.ws.send(data);
    }
    
    close(){//關閉
        closeWebSocket();
    }
    
}

 

1 注冊

(function (){
    
    //if(sessionStorage.getItem("user") !== null){location.href = "index.php"; return;}
    //實例化視圖類
    let v = new View();
    
    //創建一個用戶信息對象(相當於 空模板)
    let user = {
        UserName:null,
        Sex:null,
        Email:null,
        Password:null,
        Like:[]
    }
    
    //設置boxId視圖
    v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定義寬高
    
    //設置loginBoxId視圖
    let lid = v.get("loginBoxId");
    let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
    let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
    lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中
    
    //ajax驗證
    //當用戶抬起鍵盤時 會執行此方法，
    //並把用戶輸入的信息通過ajax發送到register.php進行驗證是否正確
    //register.php 返回 1 或 true 或 0 或 false
    let isTrue = (tar, val)=>{
        if(!tar || !val){return;}
        
        new Ajax({
            url:"./register.php", 
            data:"data="+JSON.stringify({tar:tar, val:val}), 
            success:(d)=>{
                let data = JSON.parse(d);
                if(data.tar === "Submit"){
                    console.log(data); 
                    if(data.isTrue){location.href = "../index.php";}
                    return;
                }
                let ta = data.tar || tar, mes = v.get(ta + "_mes");
                if(data.isTrue){
                    user[ta] = data.val;
                    mes.style = "color:green;";
                    mes.innerHTML = "√";
                }else{
                    user[ta] = null;
                    mes.style = "color:red;";
                    mes.innerHTML = "X";
                }
            }
        });
    }
    
    //綁定事件
    v.addEvent(v.get("UserNameId"), "keyup", (e)=>{isTrue("UserName", e.target.value);});
    v.addEvent(v.get("SexId"), "click", (e)=>{if(e.target.name === "Sex"){user.Sex = e.target.value;}});
    v.addEvent(v.get("EmailId"), "keyup", (e)=>{isTrue("Email", e.target.value);});
    v.addEvent(v.get("PasswordId"), "keyup", (e)=>{isTrue("Password", e.target.value);});
    v.addEvent(v.get("LikeId"), "change", (e)=>{
        if(e.target.name !== "Like"){return;}
        let key = user.Like.indexOf(e.target.value);
        if(key !== -1){user.Like.splice(key, 1);}
        if(e.target.checked === true){user.Like.push(e.target.value);}
    });
    
    //返回按鈕
    v.addEvent(v.get("BackId"), "click", (e)=>{
        history.back();
    });
    
    //郵箱驗證 完成注冊 按鈕
    v.addEvent(v.get("DoneId"), "click", (e)=>{
        
        //獲取html元素對象
        let mes_e = v.get("errorId"), mes_s = v.get("Sex_mes"), mes_l = v.get("Like_mes");
        
        //驗證並更新提示視圖
        if(!user.UserName || !user.Email || !user.Password){
            mes_e.innerHTML = "Illegal user name or email or password!";
            return;
        }else{
            mes_e.innerHTML = "";
        }
        if(!user.Sex){
            mes_s.style = "color:red;";
            mes_s.innerHTML = "X"; 
            return;
        }else{
            mes_s.style = "color:green;";
            mes_s.innerHTML = "√"; 
        }
        if(user.Like.length === 0){
            mes_l.style = "color:red;";
            mes_l.innerHTML = "X";
            return;
        }else{
            mes_l.style = "color:green;";
            mes_l.innerHTML = "√"; 
        }
        
        //輸入信息完成， 把user對象發送給register.php
        isTrue("Submit", user);
        
    });
})()

<?php
header("content-type:text/html; charset=utf-8");
require_once "../php/sendMail/Smtp.class.php";//導入發送郵件類

/*
    注冊信息驗證
*/

class Register{
    
    //驗證用戶名(格式是否正確)
    function isUserName($data){
        $isData = preg_match('/[\x80-\xff\w\-]+/', $data->val);
        $data->isTrue = $isData;
        return $data;//返回 1 或 0
    }
    
    //驗證郵箱(格式是否正確)
    function isEmail($data){
        $isData = preg_match_all('/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/', $data->val);
        $data->isTrue = $isData;
        return $data;//返回 1 或 0
    }
    
    //驗證密碼(格式是否正確)
    function isPassword($data){
        $isData = preg_match("/^(\w){6,18}$/", $data->val);
        $data->isTrue = $isData;
        return $data;//返回 1 或 0
    }
    
    //發送郵件(驗證郵箱地址的真實性)
    function sendMail($target, $title, $value){
        //防止郵件注入
        $target = filter_var($target, FILTER_SANITIZE_EMAIL);
        if(!filter_var($target, FILTER_VALIDATE_EMAIL)){return false;}
        //郵件配置
        $smtpserver = "smtp.qq.com";//郵箱服務器地址, 如果是[e-mail]郵箱， 此處請更換成 smtp.163.com
        $smtpserverport = 25;//郵箱服務器地址 端口號
        $smtpusermail = "[e-mail]";//發件人的郵箱地址
        $smtpemailto = $target;//收件人的郵箱地址
        $smtpuser = "3247940050";//發件人的郵箱帳號，qq郵箱就直接填qq號
        $smtppass = "nkcdmbuvtqbldcbj";//授權碼(在開通smtp服務的時候獲取的授權碼)
        $mailtitle = $title;//郵件標題
        $mailcontent = $value;//郵件內容（正文）
        $mailtype = "HTML";//內容格式，填 TEXT 或 HTML
        $smtp = new Smtp($smtpserver, $smtpserverport, true, $smtpuser, $smtppass);//連接 郵箱服務器地址
        $smtp->debug = false;//是否顯示連接信息
        return $smtp->sendmail($smtpemailto, $smtpusermail, $mailtitle, $mailcontent, $mailtype);//發送郵件
    }
    
    //驗證郵箱地址(驗證郵箱地址是否已經被注冊)
    function sel($data){
        $arr = file("../json/users.json");//把文件每行轉為數組例:array("文件的第一行", "文件第二行", ...)
        foreach($arr as $v){//遍歷數組, 如果郵箱名已存在結束並返回fase
            if(json_decode($v)->val->Email === $data->val->Email){return false;}
        }
        //return json_decode(file_get_contents("../json/users.json"));
        return true;
    }
    
    /*
        $data->isTrue
        后台把驗證的結果(false 或 true 和 0 或 1)賦給data對象下的istrue屬性
        前台js主要是通過 data對象下的istrue屬性 來判斷是否驗證成功
    */
    function isSubmit($data){
        $data->isTrue = $this->sel($data);//驗證郵件
        /* if($data->isTrue === true){//發送郵件驗證(調試中,暫時注釋掉發送郵件函數,以免過多發送沒必要的垃圾郵件)
            $data->isTrue = $this->sendMail($data->val->Email, "注冊驗證", "<a href='https://github.com/'>點擊完成驗證</a>");
        } */
        if($data->isTrue === true){//保存用戶
            if(file_put_contents("../json/users.json", json_encode($data)."\n", FILE_APPEND | LOCK_EX) === false){$data->isTrue = false;}
        }
        if($data->isTrue === true){//開啟會話, 記錄登錄信息對象
            session_start(); $_SESSION['user'] = $data;
        }
        return $data;
    }

}

//創建一個isTrue = false對象， 用作意料之外的返回數據
class O{public $isTrue = false;}
$err = json_encode(new O);

//實例化 Register 類
$reg = new Register;

//如果data對象下的 val屬性 等於 "[e-mail]%0ACc:[e-mail]"之類的字符串時 
//在解析json的時候會拋出致命錯誤(已解決)
$dedata = json_decode(isset($_POST["data"]) ? $_POST["data"] : "");
//if(gettype($dedata) !== "object"){echo $err; return;}//gettype()函數性能不好， 用is_object()替代吧
if(!is_object($dedata)){echo $err; return;}
switch($dedata->tar){
    case "UserName" : echo json_encode($reg->isUserName($dedata)); break;
    case "Email" : echo json_encode($reg->isEmail($dedata)); break;
    case "Password" : echo json_encode($reg->isPassword($dedata)); break;
    case "Submit" : echo json_encode($reg->isSubmit($dedata)); break;//此條件為 用戶輸入完成的執行方法
    define : echo $err; break;
}

 

show

2 登錄

(function (){
    
    //if(sessionStorage.getItem("user") !== null){location.href = "index.php"; return;}
    
    let v = new View();
    
    //boxId
    v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定義寬高
    
    //loginBoxId
    let lid = v.get("loginBoxId");
    let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
    let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
    lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中顯示
    
    //綁定事件
    v.addEvent(v.get("loginBoxId"), "click", (e)=>{
        let id = e.target.id;
        
        if(id === "BackId"){//返回按鈕
            history.back();
            
        }else if(id === "RegisterId"){//注冊按鈕
            location.href = "../register/view.php";
            
        }else if(id === "LoginId"){//登錄按鈕
            let el_err = v.get("errorId"), el_e = v.get("EmailId"), el_p = v.get("PasswordId");
            if(!el_e.value || !el_p.value){el_err.innerHTML = "Please fill in email address and password!"; return;}
            //把 用填寫的郵箱地址和密碼發送給login.php進行驗證返回true 或false
            new Ajax({
                url:"./login.php", 
                data:"data="+JSON.stringify([el_e.value, el_p.value]), 
                success:(data)=>{
                    if(JSON.parse(data) === true){
                        location.href = "../index.php";
                        return;
                    }
                    el_err.innerHTML = "Illegal email or password!";
                }
            });
        }
    });

})()

<?php
header("content-type:text/html; charset=utf-8");
/*
    登錄信息驗證
    返回 true 或 false
*/

function sel($arr){
    $file = @fopen("../json/users.json", "r");//打開文件 只讀模式
    while(!feof($file)){//遍歷文件
        $str = fgets($file);
        if(!$str){continue;}
        $o = json_decode($str);
        if($o->val->Email === $arr[0] && $o->val->Password === $arr[1]){
            return $o;
        }
    }
    fclose($file);//關閉文件
    return false;
}

//給前端js 返回 驗證結果
function PM($data){
    echo json_encode($data);
}

//接收一個長度為2的登錄信息數組示例:array("郵箱地址", "密碼")
$data = isset($_POST["data"]) ? $_POST["data"] : "";
if($data == ""){PM(false);}

$user = sel(json_decode($data));//驗證查詢 是否有此郵箱地址和對應的密碼是否正確返回布爾值
if($user){//驗證成功
    session_start();//開啟會話
    $_SESSION['user'] = $user;//記錄 用戶登錄信息對象
    PM(true);
}else{//驗證失敗
    PM(false);
}

show

3 主頁

"use strict"

//加載js文件
loadFile(["js/func.js"], main);

//主要程序
function main(){
    //創建一個ajax請求, 前往index.php驗證用戶是否已登錄
    //如果Ajax返回的是false說明用戶還沒有登錄成功，並前往 view.php, 
    //否則ajax返回用戶信息對象
    new Ajax({
        url:"./php/index.php",
        method:"get",
        success:(data)=>{
            let d = JSON.parse(data);
            if(d === false){
                location.href = "./login/view.php";
                return;
            }
            showIndex(d.val, new View());
        }
    });

}

//創建登錄成功后的主頁內容
function showIndex(user, v){
    
    v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";
    
    let lid = v.get("loginBoxId");
    
    create(v, lid, "你好: " + user.UserName);
    create(v, lid, "我知道你的郵箱是: " + user.Email);
    switch(user.Like.length){
        case 1 : 
            create(v, lid, "我知道你喜歡: " + user.Like[0]); 
            break;
        case 2 : 
            create(v, lid, "我知道你喜歡: " + user.Like[0]); 
            create(v, lid, "還有: " + user.Like[1]); 
            break;
        case 3 : 
            create(v, lid, "我知道你喜歡: " + user.Like[0]); 
            create(v, lid, "還有: " + user.Like[1]); 
            create(v, lid, "還有: " + user.Like[2]); 
            break;
        default : break;
    }
    
    //lid居中顯示
    let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
    let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
    lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";
    
}

//創建html p元素
function create(v, fel, content){
    let p = v.add(fel, "p");
    p.innerHTML = content || "";
    return p;
}

<?php
header("content-type:text/html; charset=utf-8");
session_start();//開啟會話

/*
    驗證 $_SESSION["user"]會話 記錄 是否存在
    返回布爾值
*/


//如果$_SESSION["user"]為未定義說明用戶還未登錄成功， 返回false
//否則返回 $_SESSION["user"](保存了用戶信息對象)
function get(){
    if(isset($_SESSION["user"])){return $_SESSION["user"];}else{return false;}
}
echo json_encode(get());

show