html+js+后端 实现用户注册登录系统 案例 代码
时间: 2024-05-01 15:23:34 浏览: 11
以下是一个基于HTML、JS和Node.js后端的用户注册登录系统的示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册登录系统</title>
</head>
<body>
<h1>用户注册登录系统</h1>
<div id="register">
<h2>注册</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="注册" onclick="register()">
</form>
</div>
<div id="login">
<h2>登录</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="登录" onclick="login()">
</form>
</div>
<div id="message"></div>
<script src="app.js"></script>
</body>
</html>
```
JS代码:
```
// 注册函数
function register() {
var username = document.getElementById('register').getElementsByTagName('input')[0].value;
var password = document.getElementById('register').getElementsByTagName('input')[1].value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('message').innerHTML = xhr.responseText;
}
};
xhr.open('POST', '/register', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({username: username, password: password}));
}
// 登录函数
function login() {
var username = document.getElementById('login').getElementsByTagName('input')[0].value;
var password = document.getElementById('login').getElementsByTagName('input')[1].value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('message').innerHTML = xhr.responseText;
}
};
xhr.open('POST', '/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({username: username, password: password}));
}
```
Node.js后端代码:
```
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
// 定义用户列表
var users = [];
// 解析请求体
app.use(bodyParser.json());
// 注册接口
app.post('/register', function(req, res) {
var username = req.body.username;
var password = req.body.password;
// 检查用户名是否已存在
if (users.some(function(user) { return user.username === username; })) {
res.status(400).send('用户名已存在');
} else {
users.push({username: username, password: password});
res.send('注册成功');
}
});
// 登录接口
app.post('/login', function(req, res) {
var username = req.body.username;
var password = req.body.password;
// 检查用户名和密码是否匹配
var matchedUsers = users.filter(function(user) {
return user.username === username && user.password === password;
});
if (matchedUsers.length === 0) {
res.status(401).send('用户名或密码错误');
} else {
res.send('登录成功');
}
});
app.listen(3000);
console.log('服务已启动');
```
这个示例代码包含了一个简单的HTML页面,两个JS函数(一个用于注册,一个用于登录),以及一个Node.js后端服务。用户在页面上输入用户名和密码,通过JS函数将其发送到后端服务进行注册或登录。后端服务将用户列表存储在内存中,以JSON格式接收和返回数据。