仿qq邮箱实现php+mysql动态用户登录

仿qq邮箱实现php+mysql动态用户登录

1、大体思路

在前端输入用户名密码通过form表单提交到后台进性判断,如果数据库中该用户名和密码,则进行转跳,否者将该用户名密码插入数据库然后再进行转跳。

2、代码

前端:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>登录qq邮箱</title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    body{
        font-size:12px;
    }
    .header{
        height:60px;
        width:100%;
        line-height:60px;
        background: #eff4fa;
        border-bottom:1px solid #d6dfea;
    }
    .header img{
        width:200px;
        height:56px;
        margin-left:20px;
    }
    .header nav{
        text-align: right;
        margin-top:-80px;
        margin-right:40px;
        letter-spacing: 0.5px;
    }
    .header nav a{
        color:#1d5494;
        text-decoration: none;
    }
    .header nav a:hover{
        text-decoration: underline;
    }

    .content{
        width:1100px;
        height:500px;
        margin:auto;
        margin-top:80px;
    }

    .content .text{
        float:left;
        margin-top:40px;
        margin-left:70px;
        line-height: 200%;
    }
    .content .text h1{
        color:#1d5494;
        margin-bottom:20px;
    }
    .content .text p{
        font-size:13px;
    }
    .content .pic{
        float:left;
        margin-top:25px;
        margin-right:60px;
    }
    .content .login{
        float:left;
        width:350px;
        height:400px;
        border:1px solid #1d5494;
    }
    .content .login .sidebar{
        border-bottom:1px solid #1d5494;
        height:50px;
        line-height: 50px;
    }
    .content .login ul li{
        list-style-type: none;
        display:block;
        height:50px;
        font-size:16px;
        font-family: "微软雅黑";
        color:gray;
    }
    .content .login ul .tab1{
        float:left;
        margin-left:45px;
        cursor: pointer;
    }
    .content .login ul .tab2{
        float:right;
        margin-right:45px;
        cursor: pointer;
    }
    .content .login .acount{
        margin-top:40px;
        margin-left:27px;
        width:280px;
        height:35px;
        font-family: "微软雅黑";
    }
    .content .login .password{
        margin-top:15px;
        margin-left:27px;
        width:280px;
        height:35px;
        font-family: "微软雅黑";
    }
    .content .login .checkbox{
        float:left;
        margin-top:30px;
        margin-left:30px;
        width:20px;
        height:20px;
        border:1px solid black;
        background:white;
    }
    .content .login p{
        margin-top:30px;
        float:left;
    }
    .content .login .submit{
        margin-left:27px;
        margin-top:10px;
        width:280px;
        height:40px;
        background:cornflowerblue;
        border:1px solid cornflowerblue;
        font-size:16px;
        color:white;
        font-family:"微软雅黑";
        cursor: pointer;
    }
    .content .login .code{
        margin-top:10px;
        margin-left:130px;
        color:#1d5494;
        cursor: pointer;
        font-size:13px;
    }
    .content .login .forget{
        float:left;
        margin-top:80px;
        margin-left:30px;
    }
    .content .login .new{
        float:right;
        margin-top:80px;
        margin-right:30px;
    }
    .content .login a{
        color:#1d5494;
        text-decoration: none;
    }
    .content .login a:hover{
        text-decoration: underline;
    }

    .footer{
        position: fixed;
        bottom:0;
        left:0;
        right:0;
        height:40px;
        line-height:40px;
        border-top:1px solid #d6dfea;
        background:#eff4fa;
        text-align: center;
        color:#b6b6b6;
        letter-spacing: 0.5px;
    }
    .footer a{
        color:#1d5494;
        text-decoration: none;
    }
    .footer a:hover{
        text-decoration: underline;
    }
</style>
<body>
<div class="header">
    <img src="qq1.PNG">
    <nav>
        <a href="#">基本版</a> |
        <a href="#">English</a> |
        <a href="#">手机版</a> |
        <a href="#">企业邮箱</a>
    </nav>
</div>
<div class="content">
    <div class="text">
        <h1>QQ邮箱,常联系!</h1>
        <p>到头来,</p>
        <p>我们记住的,</p>
        <p>不是敌人的攻击,</p>
        <p>而是朋友的沉默。</p>
        <p>——马丁·路德·金</p>
        <p>插画来自丑丑(两岁)</p>
    </div>
    <div class="pic">
        <img src="qq2.PNG" width="320" height="360">
    </div>
    <div class="login">
        <ul class="sidebar">
            <li class="tab1">微信登录</li>
            <li class="tab2">QQ登陆</li>
        </ul>
        <form action="php/1.php" method="post">
        <input type="text" placeholder="  支持QQ号/邮箱/手机号登录" class="acount"  name="username"/><br>
        <input type="password" placeholder="  QQ密码" class="password" name="password"/><br>
        <input type="checkbox" class="checkbox" />
        <p>下次自动登录</p><br>
        <input type="submit" value="登 录" class="submit">
        </form>
        <nav>
            <a href="#" class="forget">忘了密码?</a>
            <a href="#" class="new">注册新账号</a>
        </nav>
    </div>
</div>
<div class="footer">
    <p><a href="#">关于腾讯</a> | <a href="#">服务条款</a> | <a href="#">隐私政策</a> | <a href="#">客服中心</a> | <a href="#">联系我们</a> | <a href="#">帮助中心</a> | ©1998 - 2019 Tencent Inc. All Rights Reserved.</p>
</div>
</body>
</html>

效果如图:仿qq邮箱实现php+mysql动态用户登录_第1张图片
后台代码:


/**
 * Created by PhpStorm.
 * User: zhangduokuo
 * Date: 2020/5/13
 * Time: 12:40
 */
$a=$_GET["username"];
$b=$_GET["password"];
$c=$_POST["username"];
$d=$_POST["password"];
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "emp";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
$check_user="select * from userforP where Uname='$c' and Upassword='$d'";
$result = $conn->query($check_user);
if ($result->num_rows > 0) {
    echo "";
} else {
    $sql = "INSERT INTO userforp (Uname, Upassword)
     VALUES ('$c','$d')";
    //echo $d;
    if ($conn->query($sql) === TRUE) {
        echo "";
    } else {
        echo "Error: " . $sql . "
"
. $conn->error; } } $conn->close(); ?>

你可能感兴趣的:(仿qq邮箱实现php+mysql动态用户登录)