js实现登录注册功能

JavaScript 实现登录注册功能涉及前端和后端的交互。以下是一个基本的实现思路，包括前端和后端的代码示例。

基础概念

前端：用户界面，负责收集用户输入并展示结果。
后端：服务器端逻辑，负责处理业务逻辑和数据存储。
API：应用程序接口，前端通过 API 与后端进行通信。

优势

用户体验：实时反馈，用户可以立即知道输入是否有效。
安全性：通过后端验证，防止恶意用户绕过前端验证。
可扩展性：前后端分离，便于维护和扩展。

类型

表单验证：在前端进行基本的输入验证。
服务器验证：在后端进行更严格的验证和处理。

应用场景

Web 应用：任何需要用户认证的系统。
移动应用：通过 API 与后端进行交互。

实现步骤

前端部分（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Register</title>
</head>
<body>
    <h2>Login</h2>
    <form id="loginForm">
        <input type="text" id="loginUsername" placeholder="Username" required>
        <input type="password" id="loginPassword" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>

    <h2>Register</h2>
    <form id="registerForm">
        <input type="text" id="registerUsername" placeholder="Username" required>
        <input type="password" id="registerPassword" placeholder="Password" required>
        <button type="submit">Register</button>
    </form>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            fetch('/api/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!');
                } else {
                    alert('Login failed: ' + data.message);
                }
            });
        });

        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            fetch('/api/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Registration successful!');
                } else {
                    alert('Registration failed: ' + data.message);
                }
            });
        });
    </script>
</body>
</html>

后端部分（Node.js + Express）

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());

let users = {}; // 模拟用户数据库

app.post('/api/register', (req, res) => {
    const { username, password } = req.body;
    if (users[username]) {
        return res.json({ success: false, message: 'Username already exists' });
    }
    users[username] = password;
    res.json({ success: true, message: 'Registration successful' });
});

app.post('/api/login', (req, res) => {
    const { username, password } = req.body;
    if (users[username] === password) {
        return res.json({ success: true, message: 'Login successful' });
    }
    res.json({ success: false, message: 'Invalid username or password' });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});