一个真实可用的登录界面！

需要工具：

MySQL数据库、vscode上的php插件PHP Server等

项目结构：

| --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主要用来实现表单提交、记住用户名等内容，不是本次重点，有问题可以参考之前邮箱注册提交那一篇。

javascript">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"><?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!";// 这里可以添加登录成功后的代码，例如设置 sessionsession_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"><?php
session_start();if (!isset($_SESSION['username'])) {header("Location: login.html");exit;
}echo "Welcome, " . $_SESSION['username'] . "!";
?>

至此，所有的代码运行之后应该可以实现输入账号密码，与数据库比对，重定向到欢迎界面这样的过程，可以将这个代码放在任何一个需要登录的网页中（自夸一下），当然还有很多很多的内容需要补充，留给你们自己发挥~