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

Q_w7742

于 2024-10-05 19:58:52 发布

阅读量486

点赞数 14

文章标签： html5 网站登录 javascript php mysql

本文链接：https://blog.csdn.net/Q_w7742/article/details/142718033

版权

需要工具：

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

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'] . "!";
?>

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