首页 > > 网页制作 > css >

基于原生的 html css js php ajax做的一个 web登…

2020-02-21 16:01:13来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

基于原生的 html css js php ajax做的一个 web登录和注册系统

完整代码下载： 百度网盘地址 https://pan.baidu.com/s/1qFsRoODkccF1VkEsGLsQTw

提取码 ：p4zr

永久有效

注意：

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

2 在此示例中的register.php/sendMail()函数中，发送邮件的发件人填的是我自己已经开通smtp服务后的qq邮箱号

3 如果你要把发邮件的邮箱号改成自己的， 需要登录邮箱并开通smtp服务(免费开通的，只需要你手机验证), 不然你的邮箱号是发送不了邮件的

4 你可以在邮箱正文中填写并发送html格式的内容， 如果必须要邮箱验证才能注册帐号成功，那么你要有一个虚拟机 或 服务器来接收这个验证信息

5 此示例中， 大部分信息验证都在 服务器语言php中进行的，当然js也可以胜任，但不安全 

6 在等成功后进入index主页面的时候， 输出的是一个意料之外的用户信息， 因为我懒，所以没改就上传了

7 还嫌我不够罗嗦的，可以给我邮件啊， 听我继续啰嗦！！！

有疑问可以给我发邮件：3247940050@qq.com || weihexin123@qq.com

1 注册页面

register.js

  1 (function (){
  2     
  3     //if(sessionStorage.getItem("user") !== null){location.href = "index.html"; 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             "./register.php", 
 34             "post", 
 35             "data="+JSON.stringify({tar:tar, val:val}), 
 36             (e)=>{
 37                 let data = JSON.parse(e.target.responseText);
 38                 if(data.tar === "Submit"){
 39                     console.log(data); 
 40                     if(data.isTrue){location.href = "../index.html";}
 41                     return;
 42                 }
 43                 let ta = data.tar || tar, mes = v.get(ta + "_mes");
 44                 if(data.isTrue){
 45                     user[ta] = data.val;
 46                     mes.style = "color:green;";
 47                     mes.innerHTML = "√";
 48                 }else{
 49                     user[ta] = null;
 50                     mes.style = "color:red;";
 51                     mes.innerHTML = "X";
 52                 }
 53             }
 54         );
 55     }
 56     
 57     //绑定事件
 58     v.addEvent(v.get("UserNameId"), "keyup", (e)=>{isTrue("UserName", e.target.value);});
 59     v.addEvent(v.get("SexId"), "click", (e)=>{if(e.target.name === "Sex"){user.Sex = e.target.value;}});
 60     v.addEvent(v.get("EmailId"), "keyup", (e)=>{isTrue("Email", e.target.value);});
 61     v.addEvent(v.get("PasswordId"), "keyup", (e)=>{isTrue("Password", e.target.value);});
 62     v.addEvent(v.get("LikeId"), "change", (e)=>{
 63         if(e.target.name !== "Like"){return;}
 64         let key = user.Like.indexOf(e.target.value);
 65         if(key !== -1){user.Like.splice(key, 1);}
 66         if(e.target.checked === true){user.Like.push(e.target.value);}
 67     });
 68     
 69     //返回按钮
 70     v.addEvent(v.get("BackId"), "click", (e)=>{
 71         history.back();
 72     });
 73     
 74     //邮箱验证 完成注册 按钮
 75     v.addEvent(v.get("DoneId"), "click", (e)=>{
 76         
 77         //获取html元素对象
 78         let mes_e = v.get("errorId"), mes_s = v.get("Sex_mes"), mes_l = v.get("Like_mes");
 79         
 80         //验证并更新提示视图
 81         if(!user.UserName || !user.Email || !user.Password){
 82             mes_e.innerHTML = "Illegal user name or email or password!";
 83             return;
 84         }else{
 85             mes_e.innerHTML = "";
 86         }
 87         if(!user.Sex){
 88             mes_s.style = "color:red;";
 89             mes_s.innerHTML = "X"; 
 90             return;
 91         }else{
 92             mes_s.style = "color:green;";
 93             mes_s.innerHTML = "√"; 
 94         }
 95         if(user.Like.length === 0){
 96             mes_l.style = "color:red;";
 97             mes_l.innerHTML = "X";
 98             return;
 99         }else{
100             mes_l.style = "color:green;";
101             mes_l.innerHTML = "√"; 
102         }
103         
104         //输入信息完成， 把user对象发送给register.php
105         isTrue("Submit", user);
106         
107     });
108 })()

register.php

  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     //验证邮件_1
 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";//邮箱服务器地址, 如果是xxx@163.com邮箱， 此处请更换成 smtp.163.com
 39         $smtpserverport = 25;//邮箱服务器地址 端口号
 40         $smtpusermail = "3247940050@qq.com";//发件人的邮箱地址
 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     //验证邮件_2
 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属性 等于 "someone@example.com%0ACc:person2@example.com"之类的字符串时 
 91 //在解析json的时候会抛出致命错误(已解决)
 92 $dedata = json_decode(isset($_POST["data"]) ? $_POST["data"] : "");
 93 if(gettype($dedata) !== "object"){echo $err; return;}
 94 switch($dedata->tar){
 95     case "UserName" : echo json_encode($reg->isUserName($dedata)); break;
 96     case "Email" : echo json_encode($reg->isEmail($dedata)); break;
 97     case "Password" : echo json_encode($reg->isPassword($dedata)); break;
 98     case "Submit" : echo json_encode($reg->isSubmit($dedata)); break;//此条件为 用户输入完成的执行方法
 99     define : echo $err; break;
100 }

视图

 

 

2 登录页面

login.js

 1 (function (){
 2     
 3     //if(sessionStorage.getItem("user") !== null){location.href = "index.html"; 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 = "../register/register.html";
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("./login.php", null,
31                 "data="+JSON.stringify([el_e.value, el_p.value]), 
32                 (e)=>{
33                     if(JSON.parse(e.target.responseText) === true){
34                         location.href = "../index.html";
35                         return;
36                     }
37                     el_err.innerHTML = "Illegal email or password!";
38                 }
39             );
40         }
41     });
42 
43 })()

login.php

<?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);
}

视图

 

3 登录成功主页

index.js

 1 "use strict"
 2 
 3 //加载js文件
 4 loadFile(["js/func.js"], main);
 5 
 6 //主要程序
 7 function main(){
 8     //创建一个ajax请求, 前往index.php验证用户是否已登录
 9     //如果Ajax返回的是false说明用户还没有登录成功，并前往login.html, 
10     //否则ajax返回用户信息对象
11     new Ajax("./php/index.php", null, null, (e)=>{
12         let data = JSON.parse(e.target.responseText);
13         if(data === false){
14             location.href = "./login/login.html";
15             return;
16         }
17         showIndex(data.val, new View());
18     });
19     
20 }
21 
22 //创建登录成功后的主页内容
23 function showIndex(user, v){
24     v.get("boxId").style = "width:"+v.client.w+"px; height:"+v.client.h+"px;";
25     let lid = v.get("loginBoxId");
26     let x = Math.round((v.client.w/2) - (lid.offsetWidth/2));
27     let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16;
28     lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;";//位置居中
29     
30     create(v, lid, "你好: " + user.UserName);
31     create(v, lid, "我知道你的邮箱是: " + user.Email);
32     switch(user.Like.length){
33         case 1 : 
34             create(v, lid, "我知道你喜欢: " + user.Like[0]); 
35             break;
36         case 2 : 
37             create(v, lid, "我知道你喜欢: " + user.Like[0]); 
38             create(v, lid, "还有: " + user.Like[1]); 
39             break;
40         case 3 : 
41             create(v, lid, "我知道你喜欢: " + user.Like[0]); 
42             create(v, lid, "还有: " + user.Like[1]); 
43             create(v, lid, "还有: " + user.Like[2]); 
44             break;
45         default : break;
46     }
47 }
48 
49 //创建html p元素
50 function create(v, fel, content){
51     let p = v.add(fel, "p");
52     p.innerHTML = content || "";
53     return p;
54 }

index.php

<?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());

视图

<?phpheader("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}//验证邮件_1function 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";//邮箱服务器地址, 如果是xxx@163.com邮箱， 此处请更换成 smtp.163.com$smtpserverport = 25;//邮箱服务器地址 端口号$smtpusermail = "3247940050@qq.com";//发件人的邮箱地址$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);//发送邮件}//验证邮件_2function sel($data){$arr = file("../json/users.json");//把文件每行转为数组例:array("文件的第一行", "文件第二行", ...)foreach($arr as $v){//遍历数组, 如果邮箱名已存在结束并返回faseif(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属性 等于 "someone@example.com%0ACc:person2@example.com"之类的字符串时 //在解析json的时候会抛出致命错误(已解决)$dedata = json_decode(isset($_POST["data"]) ? $_POST["data"] : "");if(gettype($dedata) !== "object"){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;}











原文链接:https://www.cnblogs.com/weihexinCode/p/12340033.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：如何利用border书写三角形，建议考虑正方形

下一篇：flex布局小结

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签