基于原生的 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主頁面的時候，輸出的是一個意料之外的用戶資訊，因為我懶，所以沒改就上傳了

有疑問可以給我發郵件：[email protected] || [email protected]

用到的類:

  1 "use strict"
  2 
  3 /*
  4     創建Ajax請求:
  5     obj = {
  6         url:    必須, 請求路徑
  7         method:    可選, post 或 get請求， 默認post請求
  8         data:    可選, 要發送的資料, 默認為""
  9         asy:    可選, 是否異步執行, 默認為true
 10         success:可選, 成功回呼
 11         error:    可選, 失敗回呼
 12         run:    可選, 請求中回呼
 13     }
 14 */
 15 class Ajax{
 16     
 17     constructor(obj){
 18         let o = obj || {}
 19         this.url = o.url || null;
 20         this.method = o.method || "post";
 21         this.data = https://www.cnblogs.com/weihexinCode/p/o.data ||"";
 22         this.asy = o.asy || true;
 23         this.callback_suc = o.success || function (){};
 24         this.callback_err = o.error || function (){};
 25         this.callback_run = o.run || function (){};
 26         this.request();
 27     }
 28     
 29     request(){
 30         if(!this.url){this.callback_err(); return;}
 31         let xhr = new XMLHttpRequest();
 32         xhr.onreadystatechange = (e)=>{
 33             if(e.target.readyState === 4 && e.target.status === 200){
 34                 this.callback_suc(e.target.responseText);
 35                 return;
 36             }
 37             this.callback_run(e);
 38         }
 39         xhr.onerror = (e)=>{
 40             this.callback_err(e);
 41         }
 42         if(this.method == "get"){
 43             xhr.open(this.method, this.url, this.asy);
 44             xhr.send();
 45             return;
 46         }
 47         xhr.open(this.method, this.url, this.asy);
 48         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 49         xhr.send(this.data);
 50     }
 51     
 52 }
 53 /*
 54     xhr.readyState:
 55     0: 請求未初始化
 56     1: 服務器連接已建立
 57     2: 請求已接收
 58     3: 請求處理中
 59     4: 請求已完成，且回應已就緒
 60     xhr.status:
 61     200: "OK"
 62     404: 未找到頁面
 63 */
 64 
 65 
 66 /*
 67     視圖類
 68 */
 69 class View{
 70     
 71     constructor(){
 72         if(!this.client){View.prototype.client = this.getClient();}
 73     }
 74     
 75     //創建html元素
 76     add(fel, elemName, id, cls){
 77         //創建一個元素
 78         let el = document.createElement(elemName);
 79         //設定el id 和 class
 80         if(id){el.setAttribute('id',id);}
 81         if(cls){el.className = cls;}
 82         //把el添加到fel并顯示（渲染el）
 83         if(fel){fel.appendChild(el);}
 84         return el;
 85     }
 86 
 87     //洗掉html元素
 88     remove(){
 89         let k, arg = arguments, err = [];
 90         for(k = 0; k < arg.length; k++){
 91             if(this.isEl(arg[k]) === false){err.push(arg[k]); continue;}
 92             arg[k].parentNode.removeChild(arg[k]);
 93         }
 94         if(err.length > 0){return {err:'這里有一些洗掉失敗的元素', arr:err};}
 95         return true;
 96     }
 97 
 98     //id獲取html元素
 99     get(id){
100         return document.getElementById(id);
101     }
102     
103     //獲取可視寬高
104     getClient(){
105         return {
106             w:document.documentElement.clientWidth || document.body.clientWidth, 
107             h:document.documentElement.clientHeight || document.body.clientHeight
108         };
109     }
110     
111     //通過parentNode檢查元素是否存在于頁面中
112     isEl(el){
113         if(typeof(el) !== 'object'){return false;}
114         //被洗掉之后的html元素object的 parentNode等于null
115         if(!el.parentNode){return false;}
116         return true;
117     }
118     
119     //元素系結事件
120     addEvent(target, ev, callback){
121         target.addEventListener(ev, function(e){if(callback){callback(e);}}, false);
122     }
123 
124 }
125 
126 //webSocket object
127 class webSocket{
128     
129     constructor(){
130         // 連接socket
131         this.ws = new WebSocket('ws://127.0.0.1:8080');
132 
133         // 接受服務器端資料
134         this.ws.onmessage = function(evt){
135             this.message = evt.data;
136             console.log(this.serverMessage);
137         }
138         
139         // 打開連接
140         this.ws.onopen = function(evt){}
141         
142         // 例外接受資料
143         this.ws.onerror = function(evt){}
144 
145         // 關閉事件
146         this.ws.onclose = function(evt){}
147 
148     }
149     
150     send(data){//發送
151         this.ws.send(data);
152     }
153     
154     close(){//關閉
155         closeWebSocket();
156     }
157     
158 }

func.js

1 注冊

  1 (function (){
  2     
  3     //if(sessionStorage.getItem("user") !== null){location.href = "https://www.cnblogs.com/weihexinCode/p/index.php"; return;}
  4     //實體化視圖類
  5     let v = new View();
  6     
  7     //創建一個用戶資訊物件(相當于 空模板)
  8     let user = {
  9         UserName:null,
 10         Sex:null,
 11         Email:null,
 12         Password:null,
 13         Like:[]
 14     }
 15     
 16     //設定boxId視圖
 17     v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定義寬高
 18     
 19     //設定loginBoxId視圖
 20     let lid = v.get("loginBoxId");
 21     let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
 22     let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
 23     lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中
 24     
 25     //ajax驗證
 26     //當用戶抬起鍵盤時 會執行此方法，
 27     //并把用戶輸入的資訊通過ajax發送到register.php進行驗證是否正確
 28     //register.php 回傳 1 或 true 或 0 或 false
 29     let isTrue = (tar, val)=>{
 30         if(!tar || !val){return;}
 31         
 32         new Ajax({
 33             url:"./register.php", 
 34             data:"data="https://www.cnblogs.com/weihexinCode/p/+JSON.stringify({tar:tar, val:val}), 
 35             success:(d)=>{
 36                 let data =https://www.cnblogs.com/weihexinCode/p/ JSON.parse(d);
 37                 if(data.tar === "Submit"){
 38                     console.log(data); 
 39                     if(data.isTrue){location.href = "https://www.cnblogs.com/weihexinCode/index.php";}
 40                     return;
 41                 }
 42                 let ta = data.tar || tar, mes = v.get(ta + "_mes");
 43                 if(data.isTrue){
 44                     user[ta] = data.val;
 45                     mes.style = "color:green;";
 46                     mes.innerHTML = "√";
 47                 }else{
 48                     user[ta] = null;
 49                     mes.style = "color:red;";
 50                     mes.innerHTML = "X";
 51                 }
 52             }
 53         });
 54     }
 55     
 56     //系結事件
 57     v.addEvent(v.get("UserNameId"), "keyup", (e)=>{isTrue("UserName", e.target.value);});
 58     v.addEvent(v.get("SexId"), "click", (e)=>{if(e.target.name === "Sex"){user.Sex = e.target.value;}});
 59     v.addEvent(v.get("EmailId"), "keyup", (e)=>{isTrue("Email", e.target.value);});
 60     v.addEvent(v.get("PasswordId"), "keyup", (e)=>{isTrue("Password", e.target.value);});
 61     v.addEvent(v.get("LikeId"), "change", (e)=>{
 62         if(e.target.name !== "Like"){return;}
 63         let key = user.Like.indexOf(e.target.value);
 64         if(key !== -1){user.Like.splice(key, 1);}
 65         if(e.target.checked === true){user.Like.push(e.target.value);}
 66     });
 67     
 68     //回傳按鈕
 69     v.addEvent(v.get("BackId"), "click", (e)=>{
 70         history.back();
 71     });
 72     
 73     //郵箱驗證 完成注冊 按鈕
 74     v.addEvent(v.get("DoneId"), "click", (e)=>{
 75         
 76         //獲取html元素物件
 77         let mes_e = v.get("errorId"), mes_s = v.get("Sex_mes"), mes_l = v.get("Like_mes");
 78         
 79         //驗證并更新提示視圖
 80         if(!user.UserName || !user.Email || !user.Password){
 81             mes_e.innerHTML = "Illegal user name or email or password!";
 82             return;
 83         }else{
 84             mes_e.innerHTML = "";
 85         }
 86         if(!user.Sex){
 87             mes_s.style = "color:red;";
 88             mes_s.innerHTML = "X"; 
 89             return;
 90         }else{
 91             mes_s.style = "color:green;";
 92             mes_s.innerHTML = "√"; 
 93         }
 94         if(user.Like.length === 0){
 95             mes_l.style = "color:red;";
 96             mes_l.innerHTML = "X";
 97             return;
 98         }else{
 99             mes_l.style = "color:green;";
100             mes_l.innerHTML = "√"; 
101         }
102         
103         //輸入資訊完成， 把user物件發送給register.php
104         isTrue("Submit", user);
105         
106     });
107 })()

  1 <?php
  2 header("content-type:text/html; charset=utf-8");
  3 require_once "../php/sendMail/Smtp.class.php";//匯入發送郵件類
  4 
  5 /*
  6     注冊資訊驗證
  7 */
  8 
  9 class Register{
 10     
 11     //驗證用戶名(格式是否正確)
 12     function isUserName($data){
 13         $isData = preg_match('/[\x80-\xff\w\-]+/', $data->val);
 14         $data->isTrue = $isData;
 15         return $data;//回傳 1 或 0
 16     }
 17     
 18     //驗證郵箱(格式是否正確)
 19     function isEmail($data){
 20         $isData = preg_match_all('/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/', $data->val);
 21         $data->isTrue = $isData;
 22         return $data;//回傳 1 或 0
 23     }
 24     
 25     //驗證密碼(格式是否正確)
 26     function isPassword($data){
 27         $isData = preg_match("/^(\w){6,18}$/", $data->val);
 28         $data->isTrue = $isData;
 29         return $data;//回傳 1 或 0
 30     }
 31     
 32     //發送郵件(驗證郵箱地址的真實性)
 33     function sendMail($target, $title, $value){
 34         //防止郵件注入
 35         $target = filter_var($target, FILTER_SANITIZE_EMAIL);
 36         if(!filter_var($target, FILTER_VALIDATE_EMAIL)){return false;}
 37         //郵件配置
 38         $smtpserver = "smtp.qq.com";//郵箱服務器地址, 如果是[email protected]郵箱， 此處請更換成 smtp.163.com
 39         $smtpserverport = 25;//郵箱服務器地址 埠號
 40         $smtpusermail = "[email protected]";//發件人的郵箱地址
 41         $smtpemailto = $target;//收件人的郵箱地址
 42         $smtpuser = "3247940050";//發件人的郵箱帳號，qq郵箱就直接填qq號
 43         $smtppass = "nkcdmbuvtqbldcbj";//授權碼(在開通smtp服務的時候獲取的授權碼)
 44         $mailtitle = $title;//郵件標題
 45         $mailcontent = $value;//郵件內容（正文）
 46         $mailtype = "HTML";//內容格式，填 TEXT 或 HTML
 47         $smtp = new Smtp($smtpserver, $smtpserverport, true, $smtpuser, $smtppass);//連接 郵箱服務器地址
 48         $smtp->debug = false;//是否顯示連接資訊
 49         return $smtp->sendmail($smtpemailto, $smtpusermail, $mailtitle, $mailcontent, $mailtype);//發送郵件
 50     }
 51     
 52     //驗證郵箱地址(驗證郵箱地址是否已經被注冊)
 53     function sel($data){
 54         $arr = file("../json/users.json");//把檔案每行轉為陣列例:array("檔案的第一行", "檔案第二行", ...)
 55         foreach($arr as $v){//遍歷陣列, 如果郵箱名已存在結束并回傳fase
 56             if(json_decode($v)->val->Email === $data->val->Email){return false;}
 57         }
 58         //return json_decode(file_get_contents("../json/users.json"));
 59         return true;
 60     }
 61     
 62     /*
 63         $data->isTrue
 64         后臺把驗證的結果(false 或 true 和 0 或 1)賦給data物件下的istrue屬性
 65         前臺js主要是通過 data物件下的istrue屬性 來判斷是否驗證成功
 66     */
 67     function isSubmit($data){
 68         $data->isTrue = $this->sel($data);//驗證郵件
 69         /* if($data->isTrue === true){//發送郵件驗證(除錯中,暫時注釋掉發送郵件函式,以免過多發送沒必要的垃圾郵件)
 70             $data->isTrue = $this->sendMail($data->val->Email, "注冊驗證", "<a href='https://github.com/'>點擊完成驗證</a>");
 71         } */
 72         if($data->isTrue === true){//保存用戶
 73             if(file_put_contents("../json/users.json", json_encode($data)."\n", FILE_APPEND | LOCK_EX) === false){$data->isTrue = false;}
 74         }
 75         if($data->isTrue === true){//開啟會話, 記錄登錄資訊物件
 76             session_start(); $_SESSION['user'] = $data;
 77         }
 78         return $data;
 79     }
 80 
 81 }
 82 
 83 //創建一個isTrue = false物件， 用作意料之外的回傳資料
 84 class O{public $isTrue = false;}
 85 $err = json_encode(new O);
 86 
 87 //實體化 Register 類
 88 $reg = new Register;
 89 
 90 //如果data物件下的 val屬性 等于 "[email protected]%0ACc:[email protected]"之類的字串時 
 91 //在決議json的時候會拋出致命錯誤(已解決)
 92 $dedata = json_decode(isset($_POST["data"]) ? $_POST["data"] : "");
 93 //if(gettype($dedata) !== "object"){echo $err; return;}//gettype()函式性能不好， 用is_object()替代吧
 94 if(!is_object($dedata)){echo $err; return;}
 95 switch($dedata->tar){
 96     case "UserName" : echo json_encode($reg->isUserName($dedata)); break;
 97     case "Email" : echo json_encode($reg->isEmail($dedata)); break;
 98     case "Password" : echo json_encode($reg->isPassword($dedata)); break;
 99     case "Submit" : echo json_encode($reg->isSubmit($dedata)); break;//此條件為 用戶輸入完成的執行方法
100     define : echo $err; break;
101 }

show

2 登錄

 1 (function (){
 2     
 3     //if(sessionStorage.getItem("user") !== null){location.href = "https://www.cnblogs.com/weihexinCode/p/index.php"; return;}
 4     
 5     let v = new View();
 6     
 7     //boxId
 8     v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";//定義寬高
 9     
10     //loginBoxId
11     let lid = v.get("loginBoxId");
12     let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
13     let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
14     lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中顯示
15     
16     //系結事件
17     v.addEvent(v.get("loginBoxId"), "click", (e)=>{
18         let id = e.target.id;
19         
20         if(id === "BackId"){//回傳按鈕
21             history.back();
22             
23         }else if(id === "RegisterId"){//注冊按鈕
24             location.href = "https://www.cnblogs.com/weihexinCode/register/view.php";
25             
26         }else if(id === "LoginId"){//登錄按鈕
27             let el_err = v.get("errorId"), el_e = v.get("EmailId"), el_p = v.get("PasswordId");
28             if(!el_e.value || !el_p.value){el_err.innerHTML = "Please fill in email address and password!"; return;}
29             //把 用填寫的郵箱地址和密碼發送給login.php進行驗證回傳true 或false
30             new Ajax({
31                 url:"./login.php", 
32                 data:"data="https://www.cnblogs.com/weihexinCode/p/+JSON.stringify([el_e.value, el_p.value]), 
33                 success:(data)=>{
34                     if(JSON.parse(data) === true){
35                         location.href = "https://www.cnblogs.com/weihexinCode/index.php";
36                         return;
37                     }
38                     el_err.innerHTML = "Illegal email or password!";
39                 }
40             });
41         }
42     });
43 
44 })()

 1 <?php
 2 header("content-type:text/html; charset=utf-8");
 3 /*
 4     登錄資訊驗證
 5     回傳 true 或 false
 6 */
 7 
 8 function sel($arr){
 9     $file = @fopen("../json/users.json", "r");//打開檔案 只讀模式
10     while(!feof($file)){//遍歷檔案
11         $str = fgets($file);
12         if(!$str){continue;}
13         $o = json_decode($str);
14         if($o->val->Email === $arr[0] && $o->val->Password === $arr[1]){
15             return $o;
16         }
17     }
18     fclose($file);//關閉檔案
19     return false;
20 }
21 
22 //給前端js 回傳 驗證結果
23 function PM($data){
24     echo json_encode($data);
25 }
26 
27 //接收一個長度為2的登錄資訊陣列示例:array("郵箱地址", "密碼")
28 $data = isset($_POST["data"]) ? $_POST["data"] : "";
29 if($data == ""){PM(false);}
30 
31 $user = sel(json_decode($data));//驗證查詢 是否有此郵箱地址和對應的密碼是否正確回傳布林值
32 if($user){//驗證成功
33     session_start();//開啟會話
34     $_SESSION['user'] = $user;//記錄 用戶登錄資訊物件
35     PM(true);
36 }else{//驗證失敗
37     PM(false);
38 }

show

3 主頁

 1 "use strict"
 2 
 3 //加載js檔案
 4 loadFile(["js/func.js"], main);
 5 
 6 //主要程式
 7 function main(){
 8     //創建一個ajax請求, 前往index.php驗證用戶是否已登錄
 9     //如果Ajax回傳的是false說明用戶還沒有登錄成功，并前往 view.php, 
10     //否則ajax回傳用戶資訊物件
11     new Ajax({
12         url:"./php/index.php",
13         method:"get",
14         success:(data)=>{
15             let d = JSON.parse(data);
16             if(d === false){
17                 location.href = "https://www.cnblogs.com/weihexinCode/p/login/view.php";
18                 return;
19             }
20             showIndex(d.val, new View());
21         }
22     });
23 
24 }
25 
26 //創建登錄成功后的主頁內容
27 function showIndex(user, v){
28     
29     v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";
30     
31     let lid = v.get("loginBoxId");
32     
33     create(v, lid, "你好: " + user.UserName);
34     create(v, lid, "我知道你的郵箱是: " + user.Email);
35     switch(user.Like.length){
36         case 1 : 
37             create(v, lid, "我知道你喜歡: " + user.Like[0]); 
38             break;
39         case 2 : 
40             create(v, lid, "我知道你喜歡: " + user.Like[0]); 
41             create(v, lid, "還有: " + user.Like[1]); 
42             break;
43         case 3 : 
44             create(v, lid, "我知道你喜歡: " + user.Like[0]); 
45             create(v, lid, "還有: " + user.Like[1]); 
46             create(v, lid, "還有: " + user.Like[2]); 
47             break;
48         default : break;
49     }
50     
51     //lid居中顯示
52     let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
53     let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
54     lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";
55     
56 }
57 
58 //創建html p元素
59 function create(v, fel, content){
60     let p = v.add(fel, "p");
61     p.innerHTML = content || "";
62     return p;
63 }

index.js

 1 <?php
 2 header("content-type:text/html; charset=utf-8");
 3 session_start();//開啟會話
 4 
 5 /*
 6     驗證 $_SESSION["user"]會話 記錄 是否存在
 7     回傳布林值
 8 */
 9 
10 
11 //如果$_SESSION["user"]為未定義說明用戶還未登錄成功， 回傳false
12 //否則回傳 $_SESSION["user"](保存了用戶資訊物件)
13 function get(){
14     if(isset($_SESSION["user"])){return $_SESSION["user"];}else{return false;}
15 }
16 echo json_encode(get());

./php/index.php

show

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72073.html

標籤：Html/Css

上一篇：學習了解CSS3發展方向和CSS樣式與優先級

下一篇：學習css常用基本層級偽類屬性選擇器