PHP实现登录注册-LAMP示例


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

效果演示


网页:http://123.56.47.42/UIUE/login.html

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/

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

在这里插入图片描述

番外


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

在这里插入图片描述

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页