Web网站实现简单的登录功能（php+mysql）

最新推荐文章于 2024-05-13 22:57:29 发布

小wal

最新推荐文章于 2024-05-13 22:57:29 发布

阅读量4.8k

点赞数 11

分类专栏： Web前端文章标签： web网页登录实现 php_mysql php实现登录功能

本文链接：https://blog.csdn.net/qq_41106517/article/details/101083066

版权

Web前端专栏收录该内容

5 篇文章 9 订阅

订阅专栏

1.效果图——自我感觉还不算太难看hhhhh

2.完整代码

Index.php：

<!DOCTYPE html>
<html>
<head>
	<meta name="content-type"; charset="UTF-8">
    <title>校园-监督人 登录</title>
	<link rel="stylesheet" type="text/css" href="css/login.css"/>
    <script src="js/jquery-3.3.1.js"></script>
    
<!--/背景的雪花动态样式-->
    <script src="js/xuehua.js"></script>
    <script>
    $(document).ready(function(e){     
    	$(".yonghuming").click(function(){
    		$("#fanhuizhi").hide();
    	});
    	$(".mima").click(function(){
    		$("#fanhuizhi").hide();
    	});      
    });
    </script>
</head>
<body>
	<!--登录块开始-->
	<form id="loginform" action="denglu/loginaction.php" 
	autocomplete="off"  method="post">
    <img src="image/dump.svg" id="img_denglu"/>
    <div class="login_div1"> 
    	<!--用户名块开始-->      
    	<div class="yonghuming">
    		<input type="text" id="name" class="input_yhm" 
    		name="username" required="required"
    		placeholder="用户名"
            value="<?php echo isset($_COOKIE["test"])?$_COOKIE["test"]:"";?>">
    	    <img class="img_yhm" src="zhuce/yonghu.svg"/>
    	</div>
    	<div class="mima">
    		<input type="password" id="password" 
    		placeholder="密码" 
    		class="input_mima" name="password">
    		<img class="img_mima" src="zhuce/mima.svg"/>
    	</div>
    	
    	<input type="submit" id="login" class="submit_login" name="login" value="登录">
    		<!--返回登录状态-->
    		<div id="fanhuizhi">    
            <?php
                $err=isset($_GET["err"])?$_GET["err"]:"";
                switch($err){
                    case 1:
                    echo "用户名或密码错误！";
                    break;
                    case 2:
                    echo "用户名或密码不能为空！";
                    break;
                }
            ?>
            </div>
            <div id="huanying">
            	校园"监督人"&nbsp;&nbsp;欢迎你
            </div>
            <a href="zhuce/register.php">
            	<span id="zhucewenzi">注册</span>
            </a>
    </div>
    </form>
</body>
</html>

login.css:

html{
	font-size: 62.5%;
}
*{
	margin: 0rem;
	padding: 0rem;
}
body{
	background-color: #1ABD9D;
}
.snow{
	position:fixed;
	top:0;
	color:#fff;
	z-index:99999999;
}
#img_denglu{
	position: absolute;
	width: 55vw;
	height: 400px;
	left: 6vw;
	top: 150px;
}
.login_div1{
	border-radius: 5px;
	position: absolute;
	top: 160px;
	background-color: white;
	left: 60vw;
	width: 30vw;
	height:360px;
	box-shadow: #009688 0px 0px 30px;
}
.yonghuming{
	top: 50px;
	border-radius: 5px;
	margin: 0 auto;
	background-color: white;
	width: 26vw;
	height: 50px;
	position: relative;
	/*overflow: hidden;*/
}
.input_yhm{
	position: absolute;
	border: 0;
	width: 21vw;
	height: 48px;
	left: 4vw;
	border-radius: 5px;
	margin: 0 auto;
	outline: none;
	color: gray;
	font-size: 20px;
	border: 1px solid gainsboro;
}
input {  filter: none !important;  } 
.img_yhm{
	top: 1px;
	left: 0.5vw;
	position: absolute;
	width: 40px;
	height: 50px;
}

/*密码*/
.mima{
	top: 80px;
	border-radius: 5px;
	margin: 0 auto;
	background-color: white;
	width: 26vw;
	height: 50px;
	position: relative;
	/*overflow: hidden;*/
}
.input_mima{
	position: absolute;
	/*box-shadow: 0 0 20px 10px #fff inset;*/
	border: 0;
	width: 21vw;
	left: 4vw;
	height: 48px;
	border-radius: 5px;
	margin: 0 auto;
	outline: none;
	font-size: 20px;
	color: gray;
    border: 1px solid gainsboro;
}
.img_mima{
	top: 1px;
	left: 0.5vw;
	position: absolute;
	width: 40px;
	height: 50px;
}

/*登录*/
.submit_login{
	position: absolute;
	margin: 0 auto;
	height: 50px;
	width: 22vw;
	top: 240px;
	left: 4vw;
	outline: none;
	background-color: #1ABD9D;
	border:0;
	font-size: 20px;
	border-radius: 5px;
	transition: 0.3s;
	color: white;
}
.submit_login:hover{
	color: black;
	font-weight: 500;
	transition: 0.3s;
	cursor:pointer;
	background-color: gainsboro;
}
#fanhuizhi{
	width: 30vw;
	height: 40px;
	position: relative;
	top: 90px;
	text-align: center;
	font-size:15px;
	line-height: 40px;
	color:#F04D4E;
	background-color: white;
}

#huanying{
	position: absolute;
	width: 30vw;
	height: 40px;
	top: 310px;
	line-height: 40px;
	text-align: center;
	color:gainsboro;
	font-size: 14px;
}

#fangxiang{
	position: absolute;
	width: 50px;
	height: 70px;
	left: 31vw;
	top: 340px;
}
#zhucewenzi{
	top: 320px;
	left: 26vw;
	width: 40px;
	height: 30px;
	font-size: 14px;
	position: absolute;
	color: gainsboro;
}
#zhucewenzi:hover{
	color: #1ABD9D;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

shujuku.php:

<?php
ini_set("error_reporting","E_ALL & ~E_NOTICE");
header("Content-Type: text/html;charset=utf-8");

//连接数据库
$conn = mysqli_connect('localhost:3306','root','root','test');
?>

loginanction.php:

<?php
    include_once("../shujuku.php");
    ini_set("error_reporting","E_ALL & ~E_NOTICE");
    header("Content-Type: text/html;charset=utf-8");
    //声明变量
    $username = isset($_POST['username'])?$_POST['username']:"";
    $password = isset($_POST['password'])?$_POST['password']:"";

    //判断用户名和密码是否为空
    if(!empty($username)&&!empty($password)) 
    {
        //准备SQL语句
        $sql_select = "SELECT  id,username,password FROM user WHERE username = '$username' AND password = '$password'";
        //执行SQL语句
        $ret = mysqli_query($conn,$sql_select);
        $row = mysqli_fetch_array($ret);
        //判断用户名或密码是否正确
        if($username==$row['username']&&$password==$row['password']) 
        {
            //开启session
            session_start();
            //创建session
            $_SESSION['user']=$username;
			$_SESSION['id'] = $row['id'];
            //写入日志
            $ip = $_SERVER['REMOTE_ADDR'];
            $date = date('Y-m-d H:m:s');
			
            //跳转到登录成功所展示的页面
            header("Location:../zhuye/zhuye.php");
            //关闭数据库
            mysqli_close($conn);
        }
        else
        {
            //用户名或密码错误，赋值err为1
            header("Location:../index.php?err=1");
        }
    }
    else 
    {
        //用户名或密码为空，赋值err为2
        header("Location:../index.php?err=2");
    }

?>

数据库：

数据库名：test

表名：user

各属性值：

小wal

关注

11
点赞
踩
73

收藏

觉得还不错? 一键收藏
打赏
3
评论
Web网站实现简单的登录功能（php+mysql）

1.效果图——自我感觉还不算太难看hhhhh2.完整代码Index.php：<!DOCTYPE html><html><head> <meta name="content-type"; charset="UTF-8"> <title>校园-监督人登录</title> <link rel...
复制链接

扫一扫