首先要在网页的前端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 credentialsconst 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 successfulres.json({ success: true, message: 'Login successful' });} else {// No user found with the provided credentialsres.json({ success: false, message: 'Invalid credentials' });}}});connection.end();
});
详细教程)
