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

最新推荐文章于 2024-06-18 23:11:49 发布

m0_67392811

最新推荐文章于 2024-06-18 23:11:49 发布

阅读量4.2k

点赞数 21

分类专栏：前端 html 文章标签： php html css

本文链接：https://blog.csdn.net/m0_67392811/article/details/123422033

版权

前端同时被 2 个专栏收录

34 篇文章 3 订阅

订阅专栏

html

34 篇文章 1 订阅

订阅专栏

这是一个简单的小项目，但对于我这小白来说，也是写了好几天才完成，中间心态炸裂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>

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

注册页面的后台操作

源码：

<?php


error_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);//输出查询结果，传给$row



if($_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次。

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

m0_67392811

关注

21
点赞
踩
105

收藏

觉得还不错? 一键收藏
1
评论
html+css+php+mysql 简单的页面登录与注册(数据库的交互)

这是一个简单的小项目，但对于我这小白来说，也是写了好几天才完成，中间心态炸裂n次，但最后还是搞定了！！！说了那麽多，还是分享一下吧！目录主页面(登录页面)登录页面的后台操作注册页面注册页面的后台操作实验环境是phpstudy2018。在phpstudy的www目录里，创建一个新文件夹test。文件里有：index.php 主页面(登陆页面)login.php 登录页面的后台操作register.html 注册页面register.php 注册页面的后台操作
复制链接

扫一扫