网页的用户登录功能

  首先要在网页的前端html页面上，创建一个用户的登录表单。

<form class="login" id="loginStatus" method="post" action="/login">
    <div class="login_info">手机:
        <input type="tel" id="phoneNumber" name="phoneNumber" autocomplete="current-phone" required/>
    </div>
    <div class="login_info">密码:
        <input type="password" id="password" name="password" autocomplete="current-password" required/>
    </div>
    <div class="login_subout">
        <button class="login_sub" type="submit"><a href="#">登录</a></button>
        <div class="login_sub" ><a href="#">重置</a></div>
    </div>
</form>

这就是一个登录表单，但是它并没有提交到任何地方。可以添加一个后端服务来处理登录请求，然后将表单的提交地址设置为该服务的URL。这通常是通过在标签中设置action属性来实现的。
  此外，需要修改按钮的类型为submit，以便在用户点击按钮时提交表单。也需要移除onclick属性，因为表单会自动处理点击事件。这是一个基本的示例，展示了如何修改表单以提交到一个名为/login的后端服务。请注意，这只是一个基本的示例。在实际应用中，需要考虑更多的安全性问题，例如使用HTTPS来保护密码，以及在后端服务中正确地处理密码。
  现在有了前端的html用户表单，还需要增加javascripts。

document.getElementById('loginStatus').addEventListener('submit', function(event) {
    // 阻止表单的默认提交行为
    event.preventDefault();

    // 获取用户输入的电话号码和密码
    var phoneNumber = document.getElementById('phoneNumber').value;
    var password = document.getElementById('password').value;
    
    // 发送POST请求到后端的/login端点
    fetch('/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ phoneNumber: phoneNumber, password: password })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // 登录成功，更新页面
            console.log('恭喜你，登录成功');
            var loginStatusContainer = document.getElementById('loginStatus');
            var profileLink = '<a href="user_center.html">用户中心</a>';
            loginStatusContainer.innerHTML = profileLink;
        } else {
            // 登录失败，显示错误消息
            console.error('登录失败');
        }
    })
    .catch(error => {
        // 处理请求错误
        console.error('Error:', error);
    });
});

它从HTML表单中获取电话号码和密码，然后发送一个POST请求到服务器的/login端点。然后，它处理服务器的响应，如果登录成功，它会更新页面的某个元素。这里有一些可能的改进：

• 错误处理：在.catch块中，你只是打印出了错误。你可能想要向用户显示一些有关错误的反馈。例如，你可以添加一个在页面上显示错误消息的函数。
• 输入验证：在发送请求之前，你可能想要验证输入。例如，你可以检查电话号码是否有10位，密码是否有足够的长度等。
• 密码安全性：虽然这个示例中没有明确显示，但是你应该确保在发送到服务器之前对密码进行哈希处理。这是一个重要的安全最佳实践，可以防止在网络上明文传输密码。
• 登录失败的反馈：在处理服务器响应的.then块中，如果登录失败，你没有做任何事情。你可能想要向用户显示一些反馈，例如一个错误消息。
    需要实现后端的/login功能，对数据库中的数据进行核验。

app.post('/login', (req, res) => {

    const phoneNumber = req.body.phoneNumber;
    const password = req.body.password;

    // Query the database to check if the user exists with the provided credentials
    const query = 'SELECT * FROM users WHERE phoneNumber = ? AND password = ?';
    connection.query(query, [phoneNumber, password], (err, results) => {
        if (err) {
            console.error('MySQL query error:', err);
            res.json({ success: false, message: 'Internal server error' });
        } else {
            if (results.length > 0) {
                // User exists with the provided credentials, login successful
                res.json({ success: true, message: 'Login successful' });
            } else {
                // No user found with the provided credentials
                res.json({ success: false, message: 'Invalid credentials' });
            }
        }
    });

    connection.end();
});