用PHP和HTML做登录注册操作数据库Mysql

两个HTML页面，两个PHP,两个css,两张图片，源码+资源在上方。

HTML页面

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><link rel="stylesheet" href="../../css/office/login.css">
</head>
<body><div class="loginCard"><div class="logo"><img src="../../assets/images/logo.png" alt="" srcset=""></div><form action="../../controllers/office/login.php" method="post"><label for="">昵称：</label><input type="text" name="username" id="" placeholder="请输入昵称"><br><br><label for="">密码：</label><input type="password" name="password" id="" placeholder="请输入密码"><br><br><a href="register.html">我没有账号，去注册</a><button type="submit">登录</button></form></div>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../../css/office/register.css">
</head>
<body><div class="loginCard"><div class="logo"><img src="../../assets/images/logo.png" alt="" srcset=""></div><form action="../../controllers/office/register.php" method="post"">用户名：<input type="text" name="username" id="" ><br>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id=""><br>性&nbsp;&nbsp;&nbsp;别：<select name="gender" id=""><option value="0">女</option><option value="1">男</option></select><br>简&nbsp;&nbsp;&nbsp;介：<input type="text" name="brief" id=""><br><a href="login.html">我已有账号，去登录</a><input type="submit" name="" id="" value="注冊"></form>
</div>
</body>
</html>

php页面

login.php

<?php
header('content-type:text/html;charset=utf-8');
$host = "localhost";
$user = "root";
$password = "";
$db = "mydb";
$mysqli =new mysqli($host, $user, $password, $db);
if ($mysqli->connect_errno) {echo "连接失败" . $mysqli->connect_error;
}
$mysqli->set_charset("utf8");$username=$_POST['username'];
$password=$_POST['password'];$sql = "SELECT user_Name,user_Pwd FROM user WHERE user_Name='$username' AND user_Pwd='$password'";
$mysqli_stmt=$mysqli->query($sql);
if ($mysqli_stmt->num_rows > 0) {echo "登录成功";
}else{echo "<script>alert('登录失败');window.location.href='../../views/office/login.html'</script>";
}
$mysqli_stmt->free_result();
$mysqli->close();?>

register.php

<?php
header('content-type:text/html;charset=utf-8');
$host = "localhost";
$use = "root";
$pass = "";
$db = "mydb";
$mysqli = mysqli_connect($host, $use, $pass, $db);
if (mysqli_connect_errno()) {echo "连接失败" . mysqli_connect_error();
}
$mysqli->set_charset("utf8");//执行读取用户列表
//select($mysqli);//注册
insert($mysqli);$mysqli->close();//自定义函数function
function insert($mysqli)
{$sql = "INSERT INTO user(user_Name,user_Pwd,gender,brief)VALUES(?,?,?,?)";$mysqli_stmt = $mysqli->prepare($sql);$username = $_POST["username"];$password = $_POST["password"];$gender = $_POST["gender"];$brief = $_POST["brief"];//ssis代表四个字符串，s字符串,i整数类型$mysqli_stmt->bind_param("ssis", $username, $password, $gender, $brief);if ($mysqli_stmt->execute()) {echo PHP_EOL;echo "<script>alert('恭喜您，注册成功');window.location.href='../../views/office/login.html'</script>";} else {echo "失败" . $mysqli_stmt->errno;}//释放结果集$mysqli_stmt->free_result();$mysqli_stmt->close();
};//自定义函数function
function select($mysqli)
{$sql = "SELECT uid,username,password,age,gender FROM demo";$mysqli_stmt = $mysqli->prepare($sql);$uid=null;$username = null;$password = null;$age = null;$gender = null;if ($mysqli_stmt->execute()) {$mysqli_stmt->bind_result($uid,$username, $password, $age, $gender);while ($mysqli_stmt->fetch()) {echo "编号" . $uid . "<br>";echo "姓名" . $username . "<br>";echo "密码" . $password . "<br>";echo "年龄" . $age . "<br>";$gender = $gender == 1 ? "男" : "女";echo "性别" . $gender . "<br>";}}else{echo"查询失败";}//释放结果集$mysqli_stmt->free_result();$mysqli_stmt->close();
};?>

css页面

login.css

body{background-image: url(../../assets/images/login_beijing.jpg);/* 平铺图片 */background-size: cover;
}
.loginCard{/* 自适应 */width: fit-content;/* 上右下左边距 */padding: 12px 24px;/* 边框 */border: 1px solid red;/* 外边距 */margin: 200px auto;box-shadow: 2px 2px 10px 1px #adadb3;border-radius: 4px;background-color: rgb(255, 255, 255,0.5);
}
.loginCard .logo{margin: 0 auto;width: 60px;height: 60px;transform: translateY(-40px);border: 1px solid coral;border-radius: 50px;background-color: #F6F6F6;box-shadow: 2px 2px 10px 1px #adadb3;
}
.loginCard .logo img{width: 70%;padding: 9px;
}

register

body{background-image: url(../../assets/images/login_beijing.jpg);/* 平铺图片 */background-size: cover;
}
.loginCard{/* 自适应 */width: fit-content;/* 上右下左边距 */padding: 12px 24px;/* 边框 */border: 1px solid red;/* 外边距 */margin: 200px auto;box-shadow: 2px 2px 10px 1px #adadb3;border-radius: 4px;background-color: rgb(255, 255, 255,0.5);
}
.loginCard .logo{margin: 0 auto;width: 60px;height: 60px;transform: translateY(-40px);border: 1px solid coral;border-radius: 50px;background-color: #F6F6F6;box-shadow: 2px 2px 10px 1px #adadb3;
}
.loginCard .logo img{width: 70%;padding: 9px;
}

图片素材

在这里插入图片描述

数据库

DROP TABLE IF EXISTS `user`;
CREATE TABLE IF NOT EXISTS `user` (`user_Id` int NOT NULL AUTO_INCREMENT COMMENT '用户编号',`user_Name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '用户姓名',`user_Pwd` varchar(16) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL COMMENT '用户密码',`gender` int DEFAULT NULL COMMENT '性别',`brief` text CHARACTER SET utf8mb4 COLLATE utf8mb4_bin COMMENT '简介',PRIMARY KEY (`user_Id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;