【云+社区年度征文】PHP实现登录注册-LMAP示例

发布于

基础的环境搭建参考：

Apache安装配置(Windows和Linux)-有手就行

PHP安装配置(Windows和Linux)-一篇就够了

PHP连接MySQL-踩坑总结

效果演示

***

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

PHP实现登录注册效果演示

login.html

***

代码语言：txt
复制
<!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>

            &lt;/div&gt;
            &lt;div class=&#34;modal-footer&#34;&gt;
                &lt;button type=&#34;button&#34; class=&#34;btn btn-primary&#34; id=&#34;user_save_btn&#34;&gt;注册&lt;/button&gt;
                &lt;button type=&#34;reset&#34; class=&#34;btn btn-reset&#34;&gt;重置&lt;/button&gt;
                &lt;button type=&#34;button&#34; class=&#34;btn btn-default&#34; id=&#34;closeBtn&#34;&gt;关闭&lt;/button&gt;
            &lt;/div&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;



</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;

}

});


$(&#34;#user_login_btn&#34;).on(&#34;click&#34;, function() {
    var id=$(&#34;#user_login_name&#34;).val();
    var pwd=$(&#34;#user_login_password&#34;).val();
    if(id==&#34;&#34;)
        tg.warning(&#34;请输入用户名！&#34;);
    else if(pwd==&#34;&#34;)
        tg.warning(&#34;请输入密码！&#34;);
    else if(verify==false)
        tg.warning(&#34;请完成验证！&#34;);
    else{
        //发送登录请求
        $.ajax({
            url:&#34;login.php&#34;,
            type:&#34;POST&#34;,
            data:{username:$(&#34;#user_login_name&#34;).val(),password:$(&#34;#user_login_password&#34;).val()},
            success:function (result) {
                if(result==100){
                    tg.success(&#34;登录成功！&#34;);
                    setTimeout(function(){
                        window.location.reload();
                    },3100);
                }
                else{
                    tg.error(&#34;用户名或密码错误！&#34;);
                    setTimeout(function(){
                        window.location.reload();
                    },3100);
                }
            }
        });
    }
})

//点击注册按钮弹出模态框
$(&#34;#user_register_btn&#34;).click(function(){
    //清除表单数据（表单重置）
    show_validate_msg(&#34;#name_add_input&#34;,&#34;&#34;,&#34;&#34;);
    show_validate_msg(&#34;#password_add_input&#34;,&#34;&#34;,&#34;&#34;);
    show_validate_msg(&#34;#password2_add_input&#34;,&#34;&#34;,&#34;&#34;);
    $(&#34;#name_add_input&#34;).val(&#34;&#34;);
    $(&#34;#password_add_input&#34;).val(&#34;&#34;);
    $(&#34;#password2_add_input&#34;).val(&#34;&#34;);
    //弹出模态框
    $(&#39;#modal-container&#39;).removeAttr(&#39;class&#39;).addClass(&#39;one&#39;);
    $(&#39;body&#39;).addClass(&#39;modal-active&#39;);
});

//显示校验提示
function show_validate_msg(ele,status,msg){
    //首先清空当前元素
    $(ele).parent().removeClass(&#34;has-success has-error&#34;);
    $(ele).next(&#34;span&#34;).text(&#34;&#34;);
    if (&#34;success&#34; == status) {
        $(ele).parent().addClass(&#34;has-success&#34;);
        $(ele).next(&#34;span&#34;).text(msg);
    }else if (&#34;error&#34;==status) {
        $(ele).parent().addClass(&#34;has-error&#34;);
        $(ele).next(&#34;span&#34;).text(msg);
    }
}
//校验表单数据
function validate_add_form(){
    var rtn=true;
    //1.拿到要校验的数据，使用jquery正则表达式
    var userName = $(&#34;#name_add_input&#34;).val();
    var regName = /(^[a-zA-Z0-9_-]{3,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
    if (!regName.test(userName)) {
        show_validate_msg(&#34;#name_add_input&#34;,&#34;error&#34;,&#34;×:2-5中文或3-16英文数字&#34;);
        rtn= false;
    }
    else {
        show_validate_msg(&#34;#name_add_input&#34;,&#34;success&#34;,&#34;√&#34;);
    }
    //2.密码校验（两次一样且不为空）
    var password1=$(&#34;#password_add_input&#34;).val();
    var password2=$(&#34;#password2_add_input&#34;).val();
    if(password1==&#34;&#34;){
        show_validate_msg(&#34;#password_add_input&#34;,&#34;error&#34;,&#34;×:密码不能为空&#34;);
        rtn= false;
    }
    else{
        show_validate_msg(&#34;#password_add_input&#34;,&#34;success&#34;,&#34;√&#34;);
    }
    if(password2==&#34;&#34;){
        show_validate_msg(&#34;#password2_add_input&#34;,&#34;error&#34;,&#34;×:请再次输入密码&#34;);
        rtn= false;
    }
    else if(password1!=password2){
        show_validate_msg(&#34;#password2_add_input&#34;,&#34;error&#34;,&#34;×:输入的两次密码不相同&#34;);
        rtn= false;
    }
    else{
        show_validate_msg(&#34;#password2_add_input&#34;,&#34;success&#34;,&#34;√&#34;);
    }
    return rtn;
}


//点击保存，注册用户
$(&#34;#user_save_btn&#34;).click(function(){
    //1.前端校验表单数据
    if(!validate_add_form()){
        tg.error(&#34;注册失败！&#34;);
        return false;
    }
    //2.发送ajax请求注册用户
    $.ajax({
        url:&#34;register.php&#34;,
        type:&#34;POST&#34;,
        data:{username:$(&#34;#name_add_input&#34;).val(),password:$(&#34;#password2_add_input&#34;).val()},
        success:function (result) {
            if(result==200){
                tg.error(&#34;注册失败！&#34;);
                show_validate_msg(&#34;#name_add_input&#34;,&#34;error&#34;,&#34;×:该用户名已存在&#34;);
            }else{
                tg.success(&#34;注册成功!&#34;);
                $(&#34;#user_login_name&#34;).val($(&#34;#name_add_input&#34;).val());
                $(&#34;#modal-container&#34;).addClass(&#39;out&#39;);
                $(&#39;body&#39;).removeClass(&#39;modal-active&#39;);
            }
        }
    });
});
//显示实时时间
function showTime(){
    var time = new Date();
    nowTime = (time.getMonth()+1)+&#34;-&#34;+time.getDate()+&#34; &#34;+time.getHours()+&#34;:&#34;+time.getMinutes()+&#34;:&#34;+time.getSeconds();
    document.getElementById(&#34;time&#34;).innerHTML = nowTime;
}
//点击关闭模态框
setInterval(&#34;showTime()&#34;,1000);
$(&#39;#closeBtn&#39;).click(function(){
    $(&#34;#modal-container&#34;).addClass(&#39;out&#39;);
    $(&#39;body&#39;).removeClass(&#39;modal-active&#39;);
});



</script>

</body>

</html>

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

login.php

***

代码语言：txt
复制
<?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 = &#34;select id,pwd from user where id = &#39;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&amp;&amp;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

***

代码语言：txt
复制
<?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[&#34;username&#34;];
$pass = $_POST[&#34;password&#34;];

mysqli_set_charset($conn,&#39;utf8&#39;);	//设置编码
//sql语句
$sql_select = &#34;select id from user where id = &#39;$user&#39;&#34;;
//sql语句执行
$result = mysqli_query($conn,$sql_select);
//判断用户名是否已存在
$num = mysqli_num_rows($result);
if($num){
    //用户名已存在
    echo 200;
}else{
    //用户名不存在
    $sql_insert = &#34;insert into user(id,pwd) values(&#39;$user&#39;,&#39;$pass&#39;)&#34;;
    //插入数据
    $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咚锵

如果文章对你有帮助，记得一键三连❤

#php#lamp#apache#云数据库 SQL Server#linux