使用js、html写一个前后端交互登陆注册页面
时间: 2023-12-10 08:42:46 浏览: 26
这里提供一个基本的前后端交互登陆注册页面的示例,使用了jQuery和Node.js:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="login_div">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username"><br>
<input type="password" id="password" placeholder="Password"><br>
<button onclick="login()">Login</button>
</div>
<div id="register_div">
<h2>Register</h2>
<input type="text" id="reg_username" placeholder="Username"><br>
<input type="password" id="reg_password" placeholder="Password"><br>
<input type="password" id="reg_confirm_password" placeholder="Confirm Password"><br>
<button onclick="register()">Register</button>
</div>
<script>
//显示登录界面,隐藏注册界面
$(document).ready(function() {
$("#login_div").show();
$("#register_div").hide();
});
//切换到登录界面
function show_login() {
$("#login_div").show();
$("#register_div").hide();
}
//切换到注册界面
function show_register() {
$("#login_div").hide();
$("#register_div").show();
}
//发送登录请求
function login() {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/login",
type: "POST",
data: {
username: username,
password: password
},
success: function(response) {
if (response == "success") {
alert("Login successful!");
window.location.href = "/home";
}
else {
alert("Login failed. Please try again.");
}
}
});
}
//发送注册请求
function register() {
var username = $("#reg_username").val();
var password = $("#reg_password").val();
var confirm_password = $("#reg_confirm_password").val();
if (password != confirm_password) {
alert("Passwords do not match. Please try again.");
return;
}
$.ajax({
url: "/register",
type: "POST",
data: {
username: username,
password: password
},
success: function(response) {
if (response == "success") {
alert("Registration successful!");
show_login();
}
else {
alert("Registration failed. Please try again.");
}
}
});
}
</script>
</body>
</html>
```
这里有一个包含两个div的页面,一个用于登录,一个用于注册。当用户点击“Login”按钮时,会向后端发送一个POST请求,请求的数据包含用户名和密码。后端验证用户名密码是否正确,如果正确返回“success”,否则返回错误信息。当用户点击“Register”按钮时,会向后端发送一个POST请求,请求的数据包含新用户的用户名和密码。后端验证用户名是否已经存在,如果不存在则创建新用户并返回“success”,否则返回错误信息。
Node.js后端代码:
```
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
var users = [];
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
//登录页面
app.get("/", function(req, res) {
res.sendFile(__dirname + "/login.html");
});
//处理登录请求
app.post("/login", function(req, res) {
var username = req.body.username;
var password = req.body.password;
for (var i = 0; i < users.length; i++) {
if (users[i].username == username && users[i].password == password) {
res.send("success");
return;
}
}
res.status(401).send("Invalid username or password.");
});
//处理注册请求
app.post("/register", function(req, res) {
var username = req.body.username;
var password = req.body.password;
for (var i = 0; i < users.length; i++) {
if (users[i].username == username) {
res.status(401).send("Username already exists.");
return;
}
}
users.push({ username: username, password: password });
res.send("success");
});
//启动服务器
app.listen(3000, function() {
console.log("Server started on port 3000");
});
```
这里使用了Express框架处理HTTP请求,并且使用了body-parser中间件来解析POST请求的数据。当用户向“/login”发送POST请求时,后端会遍历已注册的用户,如果找到对应的用户名密码则返回“success”,否则返回错误信息。当用户向“/register”发送POST请求时,后端会遍历已注册的用户,如果找到对应的用户名则返回错误信息,否则创建新用户并返回“success”。在这个示例中,用户信息只保存在内存中,如果关闭服务器则所有用户信息都会丢失。在实际应用中,通常需要把用户信息保存在数据库中以便持久化。