html+css+php+mysql 简单的页面登录与注册(数据库的交互)

这是一个简单的小项目，但对于我这小白来说，也是写了好几天才完成，中间心态炸裂n次，但最后还是搞定了！！！

说了那麽多，还是分享一下吧！

主页面(登录页面)

先上图

有点简单了。

下面是源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {background-size: cover;min-width: 1000px;background-image:url(https://s1.ax1x.com/2020/08/23/d0t8ln.jpg);font-size:14px;
}
#main {width:360px;height:320px;background:#fff;border:1px solid #ddd;position:absolute;top:50%;left:50%;margin-left:-180px;margin-top:-160px;background-size: cover;background-image:url(https://s1.ax1x.com/2020/07/31/alzGMn.jpg);
}
#main .title {height: 48px;line-height: 48px;color:#333;font-size:16px;font-weight:bold;text-indent:30px;border-bottom:1px dashed #eee;}
#main form {width:300px;margin:20px 0 0 40px;
}
#main form label {margin:20px 0 0 40px;display:block;
}
#main form label input.text {width:200px;height:25px;
}#main form label input.submit {width:200px;display:block;height:35px;cursor:pointer;margin:20px 0 0 2px;
}
</style>
</head>
<body><div id="main"><div class="title">欢迎使用，请登录</div><form  action="login.php" method="post" onsubmit="return enter()"><label><input class="text" type="text"  placeholder="用户名" name="username" /></label><label><input class="text" type="password"  placeholder="密码" name="password" /></label><label><input class="submit" type="submit" name="submit" value="登录" /></label><a href="register.html" target="_self"  style="position: absolute; bottom: 10px; right: 10px;">没有账号，先注册</a></form></div></body>
</html>

主要就是对登录页面的背景，颜色，登录框背景，颜色，字体大小等等的设置，这也没啥技术含量，都是html知识的简单运用，我就不多说了。

登录页面的后台操作

直接上源码:

<?php
error_reporting(0);
//第一次登陆的时候，通过用户输入的信息来确认用户if ( (($_POST['username']))!=NULL && (($_POST['password'])!=NULL)) {$userName = $_POST['username'];$password = $_POST['password'];//从db获取用户信息//PS：数据库连接信息改成自己的 分别为主机 数据库用户名 密码$conn = mysqli_connect('localhost:3306','root','root');mysqli_select_db($conn,'test');$sql = "select username,password from user where username = '$userName' and password='$password'";$res = mysqli_query($conn,$sql);$row = mysqli_fetch_array($res);if ($row['username']!=$userName) {echo '不能登陆!';header('Location:index.html');}else if($row['username']==$userName&&$row['password']!=$password){echo '不能登陆!!';header('Location:index.html');}else if($row['username']!=$userName&&$row['password']!=$password) {echo '不能登陆!!!';header('Location:index.html');}else if($row['username']==$userName&&$row['password'] ==$password) {//如果密码验证通过，设置一个cookies，把用户名保存在客户端setcookie('username',$userName,time()+3600);//设置一个小时//最后跳转到登录后的欢迎页面/*echo '登陆成功!';header('Location:https://y.qq.com/n/yqq/mv/v/o0013f4q6uz.html');//跳转到最后的欢迎页面*/echo "<script>alert('登陆成功！！');location.href='https://pan.baidu.com/s/1qK_KopZzMZIKfT7jkZ1FVQ';</script>";}}else {echo '登陆失败';header('Location:index.html');//跳转到失败页面}if ( (($_COOKIE['username']) != null)  && (($_COOKIE['password']) != null) ) {$userName = $_COOKIE['username'];$password = $_COOKIE['password'];//从db获取用户信息//PS：数据库连接信息改成自己的 分别为主机 数据库用户名 密码$conn = mysqli_connect('localhost','root','password','test');$res = mysqli_query($conn,"select * from user where username =  '$userName' ");$row = mysqli_fetch_assoc($res);if ($row['password'] == $password) {//验证通过后跳转到登录后的欢迎页面header('Location: https://pan.baidu.com/s/1qK_KopZzMZIKfT7jkZ1FVQ' . "?username=$userName");}
}
else {echo "<script>alert('用户名或密码错误');location.href='index.html';</script>";
}?>

代码开头的error_reporting(0);是为了关闭错误报告，如果没有error_reporting(0) 那么$userName = $_POST['username'];会报错。

还有就是sql语句的构造，我构造了n次才正常运行，到这个才能与数据库的账号，密码比对。

然后就是你输入账号，密码与数据库里已有比对，来判断你是否可以登录。

如果比对正确，那么就会先存一个时间为一小时的cookie，然后跳转到登录成功页面，我在这放了一个百度云盘链接，登陆成功可以直接访问。

cookie就是将你的信息存储在本地，下次登录到同样的页面，直接读取cookie里的信息，方便下次访问。

登录成功是一段哲理视频。

注册页面

从登录页面里，选择注册跳转到注册页面。

注册页面太简单了，本来想弄个二次密码验证和验证码注册验证，但因为是本地搭建，也没有人恶意攻击我们，就不需要了。

源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body {min-width: 500px;background-image:url(https://s1.ax1x.com/2020/07/31/alz3xs.jpg);font-size:14px;
}
#main {width:360px;height:320px;background:#fff;border:1px solid #ddd;position:absolute;top:50%;left:50%;margin-left:-180px;margin-top:-160px;background-size: cover;background-image:url(https://s1.ax1x.com/2020/07/31/alzGMn.jpg);
}
#main .title {height: 48px;line-height: 48px;color:#333;font-size:16px;font-weight:bold;text-indent:30px;border-bottom:1px dashed #eee;}
#main form {width:300px;margin:20px 0 0 40px;
}
#main form label {margin:20px 0 0 40px;display:block;
}
#main form label input.text {width:200px;height:25px;
}#main form label input.submit {width:200px;display:block;height:35px;cursor:pointer;margin:20px 0 0 2px;
}
error_reporting(0);
</style>
</head>
<body><div id="main"><div class="title">注册</div><form  action="register.php" method="post" onsubmit="return enter()"><label><input class="text" type="text"  placeholder="用户名" name="username" /></label><label><input class="text" type="password"  placeholder="密码" name="password" /></label><label><input class="submit" type="submit" name="submit" value="注册" /></label></form></div></body>
</html>

注册页面与登录页面相比，没有做出太大的更改。换了个图片也就没啥了。

注册页面的后台操作

源码：

<?phperror_reporting(0);$username = ($_POST['username']);$password = trim($_POST['password']);$conn = mysqli_connect('localhost', 'root', 'root');      //如果有错误，存在错误号
if (mysqli_errno($conn)) {echo mysqli_error($conn);exit;
}mysqli_select_db($conn, 'test');   //选择数据库mysqli_set_charset($conn, 'utf8');   //选择字符集$sql = "insert into user ( username,password)  values ('$username','$password' )";$result = mysqli_query($conn,$sql);//针对user这个数据库进行查询, 查询是否存在有这个用户$row = mysqli_num_rows($result);//输出查询结果，传给$rowif($_POST['username']==NULL){echo "<script>alert('用户名不能为空');location.href='register.html';</script>";
}
else if($_POST['password']== NULL){echo "<script>alert('密码不能为空');location.href='register.html';</script>";
}
else{if($row){echo "<script>alert('用户名已存在');location.href='register.html';</script>";}else{$sql1 ="insert into user(username,password) values('".$username."','" .$password."')";//PHP MySQL 插入数据$result = mysqli_query($sql1);//判断插入数据是否成功if($row){echo "<script>alert('注册失败！');location.href='register.html';</script>";}else{echo "<script>alert('注册成功！');location.href='index.html';</script>";}}
}mysqli_close($conn);?>

按照流程，先连接数据库，将你的输入的信息传到后台，判断用户名，密码不能为空，再将用户名与数据库对比，若不存在，注册成功，跳转到登陆页面；若已经存在，会报错: 用户名已经存在。

再将你的信息插入到数据库。

最难的也是sql语句的构造，起初是用户名为空，密码却可以正常传入；但是将$usename改为自己的用户名，却可以正常传入。就猜想为用户名传入过程出现了错误，就检查了注册页面的用户名提交方式，发现也没错误。

最终还是回到了register.php页面检查，修修改改才写成现在的语句。

想想太不容易了，心态炸了n次。

与团队内的其他大佬比，我可能写的太简单了，但还是要记录一下！