实现登录注册
时间: 2023-07-11 07:10:04 浏览: 52
实现登录注册需要前后端配合完成,下面是一个简单的示例:
前端代码(HTML + JavaScript):
```html
<html>
<head>
<title>登录注册示例</title>
</head>
<body>
<h1>登录</h1>
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" required><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password" required><br>
<input type="submit" value="登录">
</form>
<h1>注册</h1>
<form id="register-form">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" required><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password" required><br>
<input type="submit" value="注册">
</form>
<script>
// 登录表单提交事件
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
var form = event.target;
var username = form.username.value;
var password = form.password.value;
// 向后端发送登录请求
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: password
})
})
.then(function(response) {
if (response.ok) {
console.log('登录成功');
// TODO: 跳转到主页
} else {
console.error('登录失败');
// TODO: 显示错误信息
}
})
.catch(function(error) {
console.error('登录出错', error);
// TODO: 显示错误信息
});
});
// 注册表单提交事件
document.getElementById('register-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
var form = event.target;
var username = form.username.value;
var password = form.password.value;
// 向后端发送注册请求
fetch('/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: password
})
})
.then(function(response) {
if (response.ok) {
console.log('注册成功');
// TODO: 跳转到主页
} else {
console.error('注册失败');
// TODO: 显示错误信息
}
})
.catch(function(error) {
console.error('注册出错', error);
// TODO: 显示错误信息
});
});
</script>
</body>
</html>
```
后端代码(Node.js + Express.js + MongoDB):
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');
const app = express();
// 连接 MongoDB 数据库
mongoose.connect('mongodb://localhost/myapp', {
useNewUrlParser: true,
useUnifiedTopology: true
});
// 定义用户数据模型
const User = mongoose.model('User', {
username: String,
password: String
});
// 解析请求体中的 JSON 数据
app.use(bodyParser.json());
// 处理登录请求
app.post('/api/login', async (req, res) => {
const { username, password } = req.body;
// 查找用户
const user = await User.findOne({ username });
if (!user) {
// 用户不存在
res.status(401).send('用户名或密码错误');
return;
}
// 验证密码
const match = await bcrypt.compare(password, user.password);
if (!match) {
// 密码不正确
res.status(401).send('用户名或密码错误');
return;
}
// 登录成功
res.send('登录成功');
});
// 处理注册请求
app.post('/api/register', async (req, res) => {
const { username, password } = req.body;
// 查找用户
const user = await User.findOne({ username });
if (user) {
// 用户已存在
res.status(400).send('用户名已存在');
return;
}
// 密码加密
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(password, salt);
// 创建新用户
const newUser = new User({
username,
password: hashedPassword
});
await newUser.save();
// 注册成功
res.send('注册成功');
});
app.listen(3000, () => {
console.log('服务器已启动');
});
```
需要注意的是,以上代码仅供参考,实际应用中需要根据具体情况进行修改和完善。另外,为了保证安全性,建议在生产环境中使用 HTTPS 协议进行通信,并对密码进行加密处理。