构建大学综合门户中的登录功能

智慧校园解决方案

小明: 嘿，小红，我最近在做一个大学综合门户项目，想加入一个登录功能，你觉得应该怎么实现呢？

小红: 登录功能是门户的核心部分之一。首先我们需要设计一个简单的HTML表单来收集用户的用户名和密码。

小明: 好的，那我先写一个基本的HTML表单吧。

<form id="loginForm">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" required><br>
      
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" required><br>
      
      <button type="submit">登录</button>
    </form>

小红: 很好！接下来我们需要处理表单提交的数据。我们可以使用JavaScript来拦截表单提交，并发送异步请求到服务器。

document.getElementById('loginForm').addEventListener('submit', function(event) {
      event.preventDefault();
      
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').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('登录成功！');
          // 可以跳转到主页或其他页面
        } else {
          alert('登录失败，请检查您的用户名或密码');
        }
      })
      .catch(error => console.error('Error:', error));
    });

小明: 这样前端就完成了，那么后端应该怎么处理呢？

小红: 后端需要验证用户提供的信息是否正确。假设我们使用Node.js和Express框架，可以这样写：

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

    app.use(bodyParser.json());

    let users = [
      { id: 1, username: 'admin', password: 'admin123' }
    ];

    app.post('/api/login', (req, res) => {
      const { username, password } = req.body;

      const user = users.find(u => u.username === username && u.password === password);
      if (user) {
        res.status(200).json({ success: true });
      } else {
        res.status(401).json({ success: false, message: 'Invalid credentials' });
      }
    });

    app.listen(3000, () => console.log('Server running on port 3000'));

小明: 明白了，这就是整个流程。前端通过表单获取输入并发送数据到后端，后端验证数据后返回结果给前端。

小红: 对的，不过实际应用中还需要考虑安全性问题，比如使用HTTPS加密传输，以及对密码进行哈希存储等。

]]>