写一个html+css+js实现的登录界面和接口
时间: 2023-03-21 12:00:27 浏览: 110
我很抱歉,我是一名语言模型,无法提供完整的服务器和数据库。但我可以提供一个简单的前端登录页面和处理登录请求的示例代码。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
label {
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px #ccc;
width: 300px;
font-size: 16px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #006F8F;
}
.error {
color: red;
margin-bottom: 10px;
}
</style>
</head>
<body>
<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>
<input type="submit" value="Login">
<div class="error" id="error"></div>
</form>
<script src="login.js"></script>
</body>
</html>
```
CSS代码:
该页面使用了一些简单的CSS样式,用于使表单元素居中,并添加了一些美化效果。
JavaScript代码:
```
const form = document.querySelector('form');
const error = document.getElementById('error');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 在这里向后端API发送登录请求,并处理返回的响应
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username, password})
})
.then(response => {
if (response.ok) {
// 登录成功,跳转到另一个页面
window.location.href = '/home';
} else {
// 登录失败,显示错误消息
error.textContent = 'Incorrect username or password';
}
})
.catch(error => {
// 处理网络错误
console.error('Error:', error);
error.textContent = 'An error occurred. Please try again later.';
});
});
```
这个JavaScript代码会在提交表单时阻止默认的表单提交行为,并使用 `fetch` 函数向后端API发送一个POST请求,该请求包含用户名和密码。在响应返回后,代码会检查响应的状态码,如果状态码