上传文件至 'LoginManager/js'

LoginManager/js/LoginManager.js

@@ -0,0 +1,40 @@
+class LoginManager {
+    constructor(apiUrl) {
+        this.apiUrl = apiUrl; // 存储API的URL
+    }
+
+    validateInput(username, password) {
+        const invalidChars = /[^a-zA-Z0-9]/; // 定义一个正则表达式，匹配非法字符
+        if (invalidChars.test(username) || invalidChars.test(password)) {
+            return false; // 如果输入包含非法字符，则验证失败
+        }
+        return true; // 否则验证成功
+    }
+
+    async login(username, password) {
+        if (!this.validateInput(username, password)) {
+            alert("用户名和密码只能包含字母和数字！"); // 验证失败时弹出提示
+            return;
+        }
+
+        try {
+            const response = await fetch(this.apiUrl, { // 发送POST请求到服务器
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json' // 设置请求头部为JSON格式
+                },
+                body: JSON.stringify({ username, password }) // 将用户名和密码转换为JSON字符串
+            });
+            if (response.ok) {
+                const data = await response.json(); // 如果请求成功，解析JSON数据
+                return data; // 返回数据
+            } else {
+                throw new Error('登录失败！'); // 如果响应不成功，抛出错误
+            }
+        } catch (error) {
+            console.error('登录请求失败:', error); // 捕获错误并在控制台输出
+        }
+    }
+}
+
+export default LoginManager; // 导出LoginManager类

LoginManager/js/app.js

@@ -0,0 +1,19 @@
+import LoginManager from './LoginManager.js'; // 导入LoginManager模块
+
+// 获取登录表单元素并添加事件监听器处理表单提交
+document.getElementById('loginForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // 阻止表单的默认提交行为
+    const username = document.getElementById('username').value; // 读取用户名
+    const password = document.getElementById('password').value; // 读取密码
+
+    const loginManager = new LoginManager('https://example.com/api/login'); // 实例化登录管理器
+    loginManager.login(username, password) // 调用登录函数
+        .then(data => {
+            if (data) {
+                console.log('登录成功，接收到的数据:', data); // 登录成功时在控制台输出数据
+            }
+        })
+        .catch(error => {
+            console.error('处理登录时发生错误:', error); // 错误处理
+        });
+});

LoginManager/js/server.js

@@ -0,0 +1,36 @@
+// 导入Express框架
+const express = require('express');
+// 导入body-parser中间件，用于解析请求体中的JSON数据
+const bodyParser = require('body-parser');
+
+// 创建Express应用
+const app = express();
+// 定义端口号
+const PORT = 3000;
+
+// 使用body-parser中间件解析JSON格式的请求体
+app.use(bodyParser.json());
+
+// 定义登录凭据，实际开发中这些应存储在数据库中，并且密码应进行加密处理
+const users = {
+    'admin': 'password123' // 这里简单使用静态用户名和密码
+};
+
+// 创建登录路由处理POST请求
+app.post('/api/login', (req, res) => {
+    const { username, password } = req.body; // 从请求体中解构用户名和密码
+
+    // 验证用户名和密码是否匹配预设的凭据
+    if (users[username] && users[username] === password) {
+        // 如果匹配，返回登录成功的消息和状态码200
+        res.status(200).send({ message: '登录成功' });
+    } else {
+        // 如果不匹配，返回错误消息和状态码401
+        res.status(401).send({ message: '用户名或密码错误' });
+    }
+});
+
+// 启动服务器，监听指定端口
+app.listen(PORT, () => {
+    console.log(`服务器运行在 http://localhost:${PORT}`);
+});