今天我們來學習如何編寫一個基于HTML的后臺管理系統。先了解一下什么是后臺管理系統，它通常用于數據的管理、修改和更新，主要通過登錄授權來限制對數據的訪問。下面我們將會用HTML代碼和JavaScript實現一個基本的后臺管理系統，并將數據存儲在數據庫中。
首先，我們需要創建一個登錄頁面。我們可以使用HTML的表單元素來創建一個包含用戶名和密碼的登錄表單。代碼如下：
<form>
<p><label>用戶名：</label> <input type="text" name="username"></p>
<p><label>密碼：</label> <input type="password" name="password"></p>
<p><input type="submit" value="登錄"></p>
</form>let xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let response = xhr.responseText;
if (response == "success") {
// 登錄成功跳轉到后臺管理頁面
window.location.href = "admin.html";
} else {
alert("用戶名或密碼錯誤！");
}
}
}
let username = document.getElementsByName("username")[0].value;
let password = document.getElementsByName("password")[0].value;
let data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
xhr.send(data);<html>
<head>
<title>后臺管理系統</title>
</head>
<body>
<div id="header">
<h1>后臺管理系統</h1>
</div>
<div id="menu">
<a href="#">數據管理</a> | <a href="#">修改密碼</a> | <a href="#">退出登錄</a>
</div>
<div id="content">
<h2>歡迎使用后臺管理系統！</h2>
</div>
</body>
</html>CREATE DATABASE backend;
USE backend;
CREATE TABLE user (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(30),
password VARCHAR(30)
);<?php
// 連接數據庫
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "backend";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接失敗：" . $conn->connect_error);
}
// 獲取用戶輸入的用戶名和密碼
$username = $_POST["username"];
$password = $_POST["password"];
// 驗證用戶身份
$sql = "SELECT * FROM user WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows >0) {
echo "success";
} else {
echo "fail";
}
$conn->close();
?>