需要工具：
MySQL数据库、vscode上的php插件PHP Server等
项目结构：
login
| --backend
| --database.sql
|--login.php
|--welcome.php
|--index.html
|--script.js
|--style.css
项目开展
index.html：
首先需要一个静态网页，在前面已经讲了很多有关的代码，这里也是常规的，但是这里我们需要post到一个php页面，请注意。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h1>登录</h1>
<form action="backend/login.php" method="post">
<div class="input-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">密码:</label>
<div class="input-group-password">
<input type="password" id="password" name="password" required>
<button type="button" id="toggle-password" aria-label="显示/隐藏密码"></button>
</div>
<div id="message"></div>
</div>
<div class="input-group">
<button type="submit">Login</button>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>script.js ：
js主要用来实现表单提交、记住用户名等内容，不是本次重点，有问题可以参考之前邮箱注册提交那一篇。
document.addEventListener('DOMContentLoaded', function () {
const loginForm = document.querySelector('form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const messageElement = document.getElementById('message'); // 使用已有的消息显示元素
// 表单提交事件
loginForm.addEventListener('submit', function (event) {
if (usernameInput.value.trim() === '' || passwordInput.value.trim() === '') {
event.preventDefault(); // 阻止表单提交
messageElement.textContent = '用户名和密码不能为空';
return false;
}
// 清除之前的消息
messageElement.textContent = '';
});
// 记住用户名
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
}
usernameInput.addEventListener('change', function () {
localStorage.setItem('username', usernameInput.value);
});
});
style.css：
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: linear-gradient(to right, #f7f7f7, #d6d6d6);
}
.login-container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 350px;
text-align: center;
transition: box-shadow 0.3s ease;
}
.login-container:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.login-container h1 {
color: #333;
font-size: 26px;
margin-bottom: 25px;
letter-spacing: 1px;
}
.input-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.input-group-password {
position: relative; /* 保持输入框和按钮在同一容器中 */
width: 100%;
}
input[type="password"] {
width: 10%;
padding: 0px;
padding-right: 0px; /* 为显示密码按钮预留更多空间 */
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
color: #333;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="password"]:focus {
outline: none;
border-color: #5c67fb;
box-shadow: 0 0 10px rgba(92, 103, 251, 0.5);
}
#toggle-password {
position: absolute;
right: 10px; /* 调整为紧贴输入框的右侧 */
top: 50%; /* 使按钮垂直居中 */
transform: translateY(-50%);
/* background-color: transparent; */
border: none;
cursor: pointer;
font-size: 18px; /* 图标大小 */
color: #5c67fb;
padding: 0;
}
input[type="text"], /* 确保点击显示图标后，输入框正常切换为 text 类型 */
input[type="password"] {
width: 100%;
padding: 12px;
padding-right: 40px; /* 为按钮留出更多空间 */
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
color: #333;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
button {
width: 100%;
padding: 14px;
background-color: #5c67fb;
border: none;
color: white;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 15px;
}
button:hover {
background-color: #4a54e1;
}
button:active {
background-color: #3c45b9;
}
button:focus {
outline: none;
box-shadow: 0 0 5px rgba(92, 103, 251, 0.5);
}
#message {
color: red;
font-size: 14px;
margin-top: 10px;
text-align: left;
}
@media (max-width: 768px) {
.login-container {
width: 85%;
padding: 20px;
}
}
@media (max-width: 600px) {
.login-container {
width: 90%;
padding: 15px;
}
}
login.php：
php是这次的重点，首先需要连接数据库，这个就需要下载vscode中的MySQL插件，下载完成之后在左边就会有图标：
点击就可以创建连接，输入你的MySQL账号密码：
连接成功后，输入下面的代码，注意把username和password改成你自己的：
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "mydatabase";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取表单数据
$username = $_POST['username'];
$password = $_POST['password'];
// 防止 SQL 注入
$username = $conn->real_escape_string($username);
$password = $conn->real_escape_string($password);
// 哈希用户输入的密码
// $hashed_password = password_hash($password, PASSWORD_DEFAULT);
// 验证用户
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出信息
echo "Login successful!";
// 这里可以添加登录成功后的代码，例如设置 session
session_start();
$_SESSION['username'] = $username;
// 重定向到欢迎页面
header("Location: welcome.php");
} else {
echo "账号或密码错误";
}
$conn->close();
?>这里如果php.ini设置不好可能会出现问题，找不到mysqli这个拓展，需要手动处理一下，当然这里不赘述。并且加密的过程被我注释掉了，防止新手搞不明白密码。
数据库需要自己先创建，这里提供一个简单的数据库创建方案database.sql：
CREATE DATABASE IF NOT EXISTS mydatabase;
USE mydatabase;
CREATE TABLE IF NOT EXISTS `users` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`username` VARCHAR(50) NOT NULL,
`password` VARCHAR(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `users` (`username`, `password`) VALUES ('admin', '123456');最后登陆成功我们给一个非常简单的weicome.php：
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: login.html");
exit;
}
echo "Welcome, " . $_SESSION['username'] . "!";
?>至此，所有的代码运行之后应该可以实现输入账号密码，与数据库比对，重定向到欢迎界面这样的过程，可以将这个代码放在任何一个需要登录的网页中（自夸一下），当然还有很多很多的内容需要补充，留给你们自己发挥~
![[图形学]在半球面上均匀采样和cos加权采样](https://i-blog.csdnimg.cn/direct/697a6bc872cc4a1ba613228fdb56bef9.png#pic_center)
