简单的登录系统
需要的语言:html css php mysql js
登录页面设计
代码片
.
名:1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.id{
margin-top: 150px;
margin-left: 300px;
border:2px solid white;
width: 800px;
height: 500px;
position: relative;
}
p{
font-size: 24px;
text-align: center;
margin-top: 0px;
margin-left: 85px;
position:absolute;
}
#a1{
width:200px;
height: 20px;
}
#a2{
width:200px;
height: 20px;
margin-left: 24px;
}
#a3{
border: 2px solid white ;
border-radius: 20%;
}
#gg{
font-size: 24px;
color: white;
font-family: "Segoe UI Black";
text-align: center;
margin-left:50px;
}
#a3{
margin-left: 200px;
margin-top: 200px;
position: absolute;
}
#a4{
margin-left: 270px;
margin-top: 200px;
position: absolute;
border: 2px solid white ;
border-radius: 20%;
}
#a5{
margin-left: 130px;
margin-top: 200px;
position: absolute;
border: 2px solid white ;
border-radius: 20%;
}
.hh{
margin-left: 100px;
margin-top: 100px;
position: absolute;
}
.hh1{
margin-left: 100px;
margin-top: 130px;
position: absolute;
}
.kk{
width: 500px;
height: 300px;
border: 10px solid rgba(255,255,250,0.5);
background: url("picture/1.png");//图片https://img-blog.csdnimg.cn/20181121194709361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pobDExMTEyMjIy,size_16,color_FFFFFF,t_70)
position: absolute;
margin-left: 150px;
margin-top: 30px;
}
p{
margin-left:150px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="id">
<div class="kk">
<table>
<form action="1.php" method="post" >
<tr class="hh">
<td id="gg">用户名</td>
<td><input type="text" name="user" id="a1"></td>
</tr>
<tr class="hh1">
<td id="gg">密码</td>
<td><input type="password" name="password" id="a2"></td>
</tr>
<input type="button" id="a3" value="注册">
<input type="button" id="a5" value="注销">
<input type="submit" value="登录" name="name" id="a4">
</form>
</table>
</div>
</div>
<script type="text/javascript">
var gh=document.getElementById("a5");
gh.onclick=function () {
location.assign("4.html");//注销
}
var gg=document.getElementById("a3");
gg.onclick=function () {
location.assign("2.html");//注册
}
</script>
</body>
</html>
登录界面的后台处理
名:1.php
<?php
$user=$_POST['user'];
$password=$_POST['password'];
$con=mysqli_connect('localhost','root','123456');//连接数据库
if(!$con)
{
echo "登陆失败";//判断数据库是否连接成功
}
mysqli_set_charset($con,"utf-8");//设置字符
mysqli_select_db($con,'school');//选择数据库
session_start();
$pass= mysqli_query($con,"SELECT password FROM test WHERE password='$password'");//发送SQL语句
$r=mysqli_num_rows($pass);//返回结果集中的行数
echo $r;
$use=mysqli_query($con,"SELECT user FROM test WHERE user='$user'");
$t=mysqli_num_rows($use);
echo $t;
if($t==0)
{
echo "用户名为空 ";
}
if($r==0)
{
echo "密码为空 ";
}
if($r!=0&&$t!=0)
{
echo '{"result":true}';
echo '登录成功';
$_SESSION['user']=$user;
echo '
<script>
setTimeout( function(){window.location.href("3.html");
},2000);//设置跳转时间
</script>';
}
else
{
echo "登录失败";
echo ' <script>
setTimeout( function(){window.location.href("1.html");
},2000);
</script>';
}
mysqli_close($con);
?>
注销页面
名:4.html
<!DOCTYPE html>!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>请输入注销用户名</h1>
<form action="4.php" method="post">
<input type="text" name="name2">
<input type="submit" value="提交" >
<input type="button" value="返回" id="a1">
</form>
<script type="text/javascript">
var gg=document.getElementById("a1");
gg.onclick=function () {
location.assign("1.html");
}
</script>
</body>
</html>
注销页面后台处理
名:4.php
<?php
$hh=$_POST['name2'];
$con=mysqli_connect('localhost','root','123456');
if($con)
{
echo '连接成功';
}
mysqli_set_charset($con,"utf-8");
mysqli_select_db($con,'school');
$sql="select *from test";
$sql="select user from test where user='$hh'";
$res=mysqli_query($con,$sql);
$result=mysqli_num_rows($res);
if($result==0)
{
echo "不存在该用户";
echo "<h1>2s后返回</h1>";
echo '
<script>
setTimeout( function(){window.location.href("4.html")
},2000);
</script>';
}
else
{
$rr="delete from test where user='$hh' ";
mysqli_query($con,$rr);
echo "注销成功";
echo '
<script>
setTimeout( function(){window.location.href("1.html")
},2000);
</script>';
}
mysqli_close($con);
?>
注册页面
名:2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.id{
margin-top: 180px;
margin-left: 460px;
border:2px solid white;
border-radius:2%;
background: url("picture/452.jpg");/图片](https://img-blog.csdnimg.cn/20181121194454742.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pobDExMTEyMjIy,size_16,color_FFFFFF,t_70)
width: 500px;
height: 335px;
position: relative;
}
p{
font-size: 24px;
text-align: center;
margin-top: 0px;
margin-left: 180px;
position:absolute;
}
.kk{
width: 300px;
height: 200px;
position: absolute;
margin-top: 80px;
margin-left: 100px;
}
#gg{
font-size: 24px;
color: white;
}
#gg1{
font-size: 24px;
color: white;
}
#a3
{
position: absolute;
margin-left: 200px;
margin-top: 100px;
width: 60px;
}
#gf{
position: absolute;
margin-left: 100px;
margin-top: 100px;
width: 60px;
}
</style>
</head>
<body>
<div class="id">
<div class="kk">
<table>
<form action="2.php" method="post">
<tr>
<td id="gg">输入用户名</td>
<td><input type="text" name="user" id="a1"></td>
</tr>
<tr>
<td id="gg1">输入密码</td>
<td><input type="password" name="password" id="a2"></td>
</tr>
<input type="button" id="gf" value="返回">
<input type="submit" value="提交" name="name" id="a3">
<script type="text/javascript">
var gff=document.getElementById("gf");
gff.onclick=function () {
location.assign("1.html");
}
</script>
</form>
</table>
</div>
</div>
</body>
</html>
注册页面后台处理
名:2.php
?php>
$password=$_POST['password'];
$user=$_POST['user'];
$connect=mysqli_connect('localhost','root','123456');
if($connect)
{
// echo "连接成功";
}
mysqli_set_charset($connect,'utf-8');
mysqli_select_db($connect,'school');
if($user==""&&$password=="")
{
echo '用户名为空不能注册';
echo "
<script>
setTimeout(function() {
window.location.href='2.html';
},2000);
</script>
";
}
else {
$use = mysqli_query($connect, "SELECT user FROM test WHERE user='$user'");
$t = mysqli_num_rows($use);
if ($t != 0) {
echo "<h1>用户名已被注册,请重新注册</h1>";
echo '<br/>';
echo '<br/>';
echo '<br/>';
echo "
<script>
setTimeout(function() {
window.location.href='2.html';
},2000);
</script>
";
} else {
$res = "select *from test";
$res = "INSERT INTO test(user,password) VALUES('$user','$password')";
$qq = mysqli_query($connect, $res);
if (!$qq) {
echo "错误";
} else {
echo "<h1>注册成功2秒后将返回登陆页面</h1>";
echo "
<script>
setTimeout(function() {
window.location.href='1.html';
},2000);
</script>";
}
}
}
mysqli_close($connect);
?>
登录成功后的界面
名:3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.id{
width: 800px;
height: 60px;
border: 2px solid black;
margin-left: 400px;
}
.id li{
width: 149px;
list-style: none;
text-decoration: none;
float: left;
border-right: dashed gray;
}
.id li a{
text-decoration: none;
line-height: 40px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="id">
<ul>
<li><a href=""> 首页</a></li>
<li><a href=""> 新闻</a></li>
<li><a href=""> 背景</a></li>
<li><a href=""> 首页</a></li>
<li><a href="" >首页</a></li>
</ul>
</div>
<div>
<input type="button" value="修改密码" name="nameg">
<input type="button" value="修改用户名" name="namegg">
<script type="text/javascript">
var gg=document.getElementsByName("nameg")[0];
gg.onclick=function () {
location.assign("5.html");
}
var gg1=document.getElementsByName("namegg")[0]
gg1.onclick=function () {
location.assign("5.html");
}
</script>
</div>
</body>
</html>
可能会发现没有5.html,那是登录进去后的操作,所以没有贴
若有什么错误与不足肯请批评指正,小白一只,谢谢大家。