用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>密 碼：<input type="password" name="password" id=""><br>性 別：<select name="gender" id=""><option value="0">女</option><option value="1">男</option></select><br>簡 介：<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;
啟動
http://localhost/static/views/office/login.html
http://localhost/static/views/office/register.html
效果
![[Java][JDK5]可變參數](http://pic.xiahunao.cn/[Java][JDK5]可變參數)
