【小小白】简单实现网页登录（HTML+CSS+PHP）

编程知识行业动态更新时间:2024-06-13 00:22:51

环境配置

1、PHPstorm（不建议升级最新版，每次都会提醒输入密钥，超烦人！）
2、MySQL8.0
3、Navicat 15 for mysql
4、phpstudy也很好用
参考配置：https://blog.csdn/weixin_46336128/article/details/106496405（这篇博客讲的很详细，强推！）

一、前端：模仿B站上的写的

https://www.bilibili/video/BV1ta4y1W7wu

1.HTML：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" href="iconfont.css" />  <!--插入图标的文件-->
	<title>Login</title>
</head>
<body>
<form action="1.php" method="post">
	<div id="bigBox">
		<h1>LOGIN</h1>
		<div class="inputBox">
			<div class="inputText">
				<span class="iconfont icon-nickname"></span>  <!--图标的插入，相应网站上有它的格式-->
				<input type="text"  name="username" placeholder="Username" /> <!--input插入输入?-->
			</div>
			<div class="inputText">
				<span class="iconfont icon-visible"></span>
				<input type="password"  name="password"  placeholder="Password" />
			</div>
		</div>
		<input class="loginButton" type="submit" name="login" value="Login"/>
	</div>
</form>
</body>
</html>

2.CSS：

body
{
	margin: 0;
	padding: 0;
	background-image: url(begin.jpg);	/* 背景图片 */
	background-repeat: no-repeat;	/* 背景图片不重复 */
}

#bigBox
{
	margin: 0 auto;	/* login框剧中 */
	margin-top: 200px; /* login框与顶部的距离 */
	padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */
	background-color: #00000090;	/* login框背景颜色和透明度 */
	width: 400px;
	height: 300px;
	border-radius: 10px;	/* 圆角边 */
	text-align: center;	/* 框内所有内容剧中 */
}

#bigBox h1
{
	color: white;	/* LOGIN字体颜色 */
}

#bigBox .inputBox
{
	margin-top: 50px;	/* 输入框顶部与LOGIN标题的间距 */
}

#bigBox .inputBox .inputText
{
	margin-top: 20px;	/* 输入框之间的距离 */
}

#bigBox .inputBox .inputText
{
	color: white;	/*图标的颜色  */
}

#bigBox .inputBox .inputText input
{
	border: 0;	/* 删除输入框边框 */
	padding: 10px 10px;	/* 输入框内的间距 */
	border-bottom: 1px solid white;	/* 输入框白色下划线 */
	background-color: #00000000;	/* 输入框透明 */
	color: white;	/* 输入字体的颜色 */
}

#bigBox .loginButton
{
	margin-top: 30px;	/* 按钮顶部与输入框的距离 */
	width: 150px;
	height: 25px;
	color: white;	
	border: 0; /* 删除按钮边框 */
	border-radius: 20px;	/* 按钮圆角边 */
	background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);	/* 按钮颜色 */
}
a
{
color: white;
}

强调：这几个文件要放在同一目录下，且放在phpstudy的www文件里面

3.效果图：

二、后端：推荐上菜鸟教程学习PHP语法，特别要注意使用的PHP版本，之前因为没有注意PHP的版本问题，花了很多时间纠结

1.数据库的建立

（1）配置好mysql后先通过cmd打开服务，注意一定要以管理员的身份打开！！！而且要在mysql安装的磁盘下执行命令（cd即可）

net start mysql

（2）打开mysql服务后打开Navicat，创建新的数据库，创建的数据库名字最好为英文

点击左上角的连接即可创建新的数据库

新建一个表

2.PHP文件

<?php
$username='root';
$password='   ';
$host='localhost';
$database='wangye';
//创建连接
$conn=mysqli_connect($host,$username,$password,$database);
if (mysqli_connect_errno())
{
    echo "连接失败: " . mysqli_connect_error();
}else {
    echo "连接成功<br>";
}
$name=$_POST['username'];
$pwd=$_POST['password'];
$qury=mysqli_query($conn,"select id from  login where username='$name' and password='$pwd' ");//查询数据库
$result=mysqli_num_rows($qury);//返回行数
if ($result==0){
    echo "登录失败！";
}else{
    echo  "登录成功！";
}
?>