web简单登录页面实现代码
时间: 2024-06-17 18:06:51 浏览: 97
web简单登录页面实现代码通常分为前端和后端两部分。
前端部分需要实现一个包含用户名和密码输入框、登录按钮和注册链接的HTML页面。可以使用HTML和CSS实现样式和布局,使用JavaScript实现表单验证和登录请求的发送。
后端部分需要使用一种服务器端编程语言(如PHP、Python、Java等)实现登录验证和用户信息管理的功能。通常会将用户信息存储在数据库中,使用SQL语句进行查询和更新。后端代码需要接收前端发送的请求,进行验证并返回相应的结果。
以下是一个简单的Web登录页面实现代码示例:
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
form {
margin: 50px auto;
width: 300px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px;
margin: 5px 0 15px 0;
border: none;
background: #f1f1f1;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form>
<div>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
</div>
<div>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
</div>
<button type="submit">Login</button>
<div style="clear:both;"></div>
<div style="text-align:center;">
<a href="#">Register</a>
</div>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = form.username.value.trim();
const password = form.password.value.trim();
if (!username || !password) {
alert('Please enter username and password!');
return;
}
// 发送登录请求
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username, password})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Login successful!');
window.location.href = '/home'; // 跳转到首页
} else {
alert('Login failed!');
}
})
.catch(error => console.error(error));
});
</script>
</body>
</html>
```
后端代码(使用Node.js和Express框架实现):
```javascript
const express = require('express');
const app = express();
app.use(express.json()); // 解析请求体中的JSON数据
// 处理登录请求
app.post('/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === '123456') {
res.json({ success: true });
} else {
res.json({ success: false });
}
});
app.listen(3000, () => console.log('Server started at http://localhost:3000'));
```
请注意,这只是一个简单的示例代码,实际项目中需要进行更多的安全性和错误处理。