CSS(style.css):
css
body {font-family: Arial, sans-serif;background-color: f5f5f5;
}.container {max-width: 400px;margin: 0 auto;padding: 20px;text-align: center;
}h1.title {margin-top: 0;margin-bottom: 20px;
}form {width: 100%;
}label {display: block;margin-bottom: 5px;
}input {width: 100%;padding: 8px;margin-bottom: 10px;border: 1px solid ccc;
}input[type="submit"] {background-color: 007bff;color: white;padding: 8px 20px;border: none;border-radius: 4px;
}JavaScript(script.js):
js
const form = document.getElementById("login-form");form.addEventListener("submit", (e) => {e.preventDefault();// 检查用户名和密码const username = document.getElementById("username").value;const password = document.getElementById("password").value;// 向服务器发送登录请求fetch("/login", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({ username, password }),}).then((res) => res.json()).then((data) => {// 检查登录是否成功if (data.success) {// 登录成功,跳转到主页window.location.href = "/home";} else {// 登录失败,显示错误信息alert(data.message);}}).catch((err) => {// 发生错误,显示错误信息alert("抱歉,登录失败。");});
});