帮我生成登录页面,页面要炫酷,并且可以和后端交互,给出代码和演示
时间: 2023-09-05 16:15:05 浏览: 41
好的,我可以为您提供一个简单的登录页面示例,使用HTML、CSS和JavaScript构建。这个页面可以使用AJAX与后端交互。
HTML代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
<div id="message"></div>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS代码:
```
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin: 0 auto;
max-width: 400px;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
form {
display: inline-block;
text-align: left;
}
label {
display: block;
font-size: 16px;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
border: none;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
display: block;
font-size: 16px;
margin-bottom: 20px;
padding: 10px;
width: 100%;
}
button[type="submit"] {
background-color: #333;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
width: 100%;
}
button[type="submit"]:hover {
background-color: #555;
}
#message {
color: red;
margin-top: 20px;
}
```
JavaScript代码:
```
const form = document.getElementById('login-form');
const message = document.getElementById('message');
form.addEventListener('submit', function(event) {
event.preventDefault();
const username = form.elements.username.value;
const password = form.elements.password.value;
const xhr = new XMLHttpRequest();
xhr.open('POST', '/login');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
window.location.href = '/dashboard';
} else {
message.textContent = 'Invalid username or password';
}
};
xhr.send(JSON.stringify({username: username, password: password}));
});
```
这个示例使用AJAX通过POST请求将用户名和密码发送到后端的 '/login' 路由,并在成功登录时重定向到 '/dashboard' 页面。如果用户名或密码无效,则会向用户显示错误消息。
当然,这只是一个示例,您需要根据实际情况进行修改。希望对您有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)