PHP实现登录注册-LAMP示例

谁借莪１个温暖的怀抱￠ 2022-12-25 14:50 140阅读 0赞

### 文章目录 ###

*  效果演示
 *  login.html
 *  login.php
 *  register.php
 *  源码
 *  番外

--------------------

基础的环境搭建参考：  
[Apache安装配置(Windows和Linux)-有手就行][Apache_Windows_Linux_-]  
[PHP安装配置(Windows和Linux)-一篇就够了][PHP_Windows_Linux_-]  
[PHP连接MySQL-踩坑总结][PHP_MySQL-]

# 效果演示 #

--------------------

[网页：http://123.56.47.42/UIUE/login.html][http_123.56.47.42_UIUE_login.html]

[PHP实现登录注册效果演示][PHP]

PHP实现登录注册效果演示

# login.html #

--------------------

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页</title>
        <link href="favicon.ico" rel="shortcut icon" />
        <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
        <link type="text/css" href="css/animatemin.css" rel="stylesheet"/>
        <link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
        <link type="text/css" href="css/TGTool.css" rel="stylesheet"/>
        <link type="text/css" href="css/model.css" rel="stylesheet"/>
        <link type="text/css" href="css/verify.css" rel="stylesheet"/>
        <link type="text/css" href="css/login.css" rel="stylesheet"/>
        <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/verify.js"></script>
        <script type="text/javascript" src="js/TGTool.js"></script>
        <style type="text/css">body{ background:url(images/loginBg.jpg);background-size: 100% 100%;}</style>
    </head>
    <body>
    
    <div id="modal-container">
        <div class="modal-background">
            <div class="modal">
                <h4 class="modal-title" id="myModalLabel">用户注册</h4>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name_add_input" class="col-md-3 control-label">用户名</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="name" id="name_add_input" placeholder="name">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password_add_input" class="col-md-3 control-label">密码</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="password" id="password_add_input" placeholder="password">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password2_add_input" class="col-md-3 control-label" style="padding:0px 0px">确认密码</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="password2" id="password2_add_input" placeholder="password again">
                                <span class="help-block"></span>
                            </div>
                        </div>
    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="user_save_btn">注册</button>
                        <button type="reset" class="btn btn-reset">重置</button>
                        <button type="button" class="btn btn-default" id="closeBtn">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div id="container">
        
        <div class="col-md-4" style="font-size:30px">
    	<span class="label label-warning">
    		<span class="glyphicon glyphicon-time" aria-hidden="true">
    		<span id="time"><script type="text/javascript"> showTime();</script></span>
    		</span>
    	</span>
        </div>
        
        <div class="col-md-6 col-md-offset-6" style="top:20px">
            <p style="font-size:75px;color: #e76f51;font-family: 楷体"><img src="images/logo.png"height="18%" width="18%"><B>&nbsp宿心</B></p>
        </div>
        <div class="col-md-4 col-md-offset-6" style="top:20px">
            <I><p style="font-size:33px;color: #f4a261;font-family: 仿宋">天地之大，四海为家！</p></I>
        </div>
        
        <div id="content"class="animate__animated animate__zoomIn animate__delay-0.6s">
            <div class="form-group"style="margin-top: -10px;color: #f4a261">
                <h3 class="col-sm-5"><B>用户名:</B></h3>
                <input type="text" class="form-control input-lg" id="user_login_name" name="loginid" placeholder="请输入用户名"/>
            </div>
            <div class="form-group"style="margin-top: -10px;color: #f4a261">
                <h3 class="col-sm-4"><B>密码:</B></h3>
                <input type="password" class="form-control input-lg" id="user_login_password" name="password" placeholder="请输入密码" />
            </div>
            <I><div class="form-group" id="mpanel1" style="font-size: 18px;color: #5e5e5e;margin-top: 35px"></div></I>
            <div class="row">
                <div class="col-md-5 "style="margin-top: 20px;margin-left: 13px">
                    <button class="btnn"id="user_register_btn"><span>注册</span></button>
                </div>
                <div class="col-md-5 "style="margin-top: 20px;margin-left:12px">
                    <button class="btnn"id="user_login_btn"><span>登录</span></button>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <ul>
            <li class="weixin">
                <div class="weixin-logo"></div>
            </li>
            <li class="idea"></li>
            <li class="app">
                <div class="app-logo"></div>
            </li>
        </ul>
    </div>
    <script type="text/javascript"> var verify=false; let tg = TGTool(); $('#mpanel1').slideVerify({ type : 1, success : function() { verify=true; }, error : function(){ verify=false; } }); $("#user_login_btn").on("click", function() { var id=$("#user_login_name").val(); var pwd=$("#user_login_password").val(); if(id=="") tg.warning("请输入用户名！"); else if(pwd=="") tg.warning("请输入密码！"); else if(verify==false) tg.warning("请完成验证！"); else{ //发送登录请求 $.ajax({ url:"login.php", type:"POST", data:{ username:$("#user_login_name").val(),password:$("#user_login_password").val()}, success:function (result) { if(result==100){ tg.success("登录成功！"); setTimeout(function(){ window.location.reload(); },3100); } else{ tg.error("用户名或密码错误！"); setTimeout(function(){ window.location.reload(); },3100); } } }); } }) //点击注册按钮弹出模态框 $("#user_register_btn").click(function(){ //清除表单数据（表单重置） show_validate_msg("#name_add_input","",""); show_validate_msg("#password_add_input","",""); show_validate_msg("#password2_add_input","",""); $("#name_add_input").val(""); $("#password_add_input").val(""); $("#password2_add_input").val(""); //弹出模态框 $('#modal-container').removeAttr('class').addClass('one'); $('body').addClass('modal-active'); }); //显示校验提示 function show_validate_msg(ele,status,msg){ //首先清空当前元素 $(ele).parent().removeClass("has-success has-error"); $(ele).next("span").text(""); if ("success" == status) { $(ele).parent().addClass("has-success"); $(ele).next("span").text(msg); }else if ("error"==status) { $(ele).parent().addClass("has-error"); $(ele).next("span").text(msg); } } //校验表单数据 function validate_add_form(){ var rtn=true; //1.拿到要校验的数据，使用jquery正则表达式 var userName = $("#name_add_input").val(); var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/; if (!regName.test(userName)) { show_validate_msg("#name_add_input","error","×:2-5中文或3-16英文数字"); rtn= false; } else { show_validate_msg("#name_add_input","success","√"); } //2.密码校验（两次一样且不为空） var password1=$("#password_add_input").val(); var password2=$("#password2_add_input").val(); if(password1==""){ show_validate_msg("#password_add_input","error","×:密码不能为空"); rtn= false; } else{ show_validate_msg("#password_add_input","success","√"); } if(password2==""){ show_validate_msg("#password2_add_input","error","×:请再次输入密码"); rtn= false; } else if(password1!=password2){ show_validate_msg("#password2_add_input","error","×:输入的两次密码不相同"); rtn= false; } else{ show_validate_msg("#password2_add_input","success","√"); } return rtn; } //点击保存，注册用户 $("#user_save_btn").click(function(){ //1.前端校验表单数据 if(!validate_add_form()){ tg.error("注册失败！"); return false; } //2.发送ajax请求注册用户 $.ajax({ url:"register.php", type:"POST", data:{ username:$("#name_add_input").val(),password:$("#password2_add_input").val()}, success:function (result) { if(result==200){ tg.error("注册失败！"); show_validate_msg("#name_add_input","error","×:该用户名已存在"); }else{ tg.success("注册成功!"); $("#user_login_name").val($("#name_add_input").val()); $("#modal-container").addClass('out'); $('body').removeClass('modal-active'); } } }); }); //显示实时时间 function showTime(){ var time = new Date(); nowTime = (time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); document.getElementById("time").innerHTML = nowTime; } //点击关闭模态框 setInterval("showTime()",1000); $('#closeBtn').click(function(){ $("#modal-container").addClass('out'); $('body').removeClass('modal-active'); }); </script>
    </body>
    </html>

> （插播反爬信息 ）博主CSDN地址：[https://wzlodq.blog.csdn.net/][https_wzlodq.blog.csdn.net]

# login.php #

--------------------

<?php
    error_reporting(0);
    header("Content-Type: text/html;charset=utf-8");
    //建立连接
    
    $conn = mysqli_connect('localhost','root','改成你的密码');
    if($conn){ 
        //数据库连接成功
        $select = mysqli_select_db($conn,"uiue");	//选择数据库
        if($select){ 
            //数据库选择成功
            $user = $_POST["username"];
            $pass = $_POST["password"];
            //sql语句
            $sql_select = "select id,pwd from user where id = '$user' and pwd = '$pass'";
            //设置编码
            mysqli_query($conn,'SET NAMES UTF8');
            //执行sql语句
            $ret = mysqli_query($conn,$sql_select);
            $row = mysqli_fetch_array($ret);
            //用户密码正确
            if($row!=null&&$row!=null&&$user == $row['id']&&$pass == $row['pwd']){ 
                echo 100;
            }else{ 
                echo 200;
            }
        }
        //关闭数据库
        mysqli_close($conn);
    }else{ 
        //连接错误处理
        die('Could not connect:'.mysqli_error());
    }
    
    ?>

# register.php #

--------------------

<?php
    error_reporting(0);
    header("Content-Type: text/html;charset=utf-8");
    //建立连接
    $servername = "localhost";
    $username = "root";
    $password = "改成你的密码";
    
    $conn = mysqli_connect($servername, $username, $password, 'uiue');
    if($conn){ 
        //数据库连接成功
        $select = mysqli_select_db($conn,"uiue");		//选择数据库
    
        $user = $_POST["username"];
        $pass = $_POST["password"];
    
        mysqli_set_charset($conn,'utf8');	//设置编码
        //sql语句
        $sql_select = "select id from user where id = '$user'";
        //sql语句执行
        $result = mysqli_query($conn,$sql_select);
        //判断用户名是否已存在
        $num = mysqli_num_rows($result);
        if($num){ 
            //用户名已存在
            echo 200;
        }else{ 
            //用户名不存在
            $sql_insert = "insert into user(id,pwd) values('$user','$pass')";
            //插入数据
            $ret = mysqli_query($conn,$sql_insert);
            $row = mysqli_fetch_array($ret);
            echo 100;
    
        }
        //关闭数据库
        mysqli_close($conn);
    }else{ 
        //连接错误处理
        die('Could not connect:'.mysqli_error($conn));
    }
    ?>

# 源码 #

--------------------

[GitHub][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70]

# 番外 #

--------------------

最近事情越来越多了，比赛、实验、大作业、项目、考试，已经很难挤出时间写博客了，十一月产量也不高，但是我会更的(咕咕咕)。

![在这里插入图片描述][20201202132559556.png]

> **原创不易，请勿转载**（本不富裕的访问量雪上加霜 ）  
> 博主首页：[https://wzlodq.blog.csdn.net/][https_wzlodq.blog.csdn.net]  
> 微信公众号：`仄lo咚锵`  
> *如果文章对你有帮助，记得一键三连❤*

[Apache_Windows_Linux_-]: https://wzlodq.blog.csdn.net/article/details/108565486
[PHP_Windows_Linux_-]: https://wzlodq.blog.csdn.net/article/details/108542598
[PHP_MySQL-]: https://wzlodq.blog.csdn.net/article/details/109826844
[http_123.56.47.42_UIUE_login.html]: http://123.56.47.42/UIUE/login.html
[PHP]: https://www.bilibili.com/video/BV19K4y1j72M/
[https_wzlodq.blog.csdn.net]: https://wzlodq.blog.csdn.net/
[GitHub]: https://github.com/wuzelong/CSDNBLOG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70]: /images/20221120/a89b040857134f76b08f2e200b28b0b9.png
[20201202132559556.png]: /images/20221120/ef6580b5558e47e3ab6ce948b5202c3f.png