好的，我们可以在你的登录页面中添加验证码。为了简化，我们使用一个简单的数字验证码，并使用Node.js和Express进行后端处理。
### 前端 HTML & JavaScript 部分
首先，更新你的 `index.html` 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h2>登录</h2>
<form id="loginForm" onsubmit="return validateForm()">
用户名: <input type="text" id="username" name="username"><br><br>
密码: <input type="password" id="password" name="password"><br><br>
验证码: <input type="text" id="captchaInput" name="captcha"><br><br>
<img id="captchaImage" src="/captcha" alt="验证码"><br><br>
<button type="button" onclick="refreshCaptcha()">刷新验证码</button><br><br>
<input type="submit" value="登录">
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var captchaInput = document.getElementById("captchaInput").value;
if (username.length < 3 || username.length > 20) {
alert("用户名需在 3 到 20 个字符之间");
return false;
}
if (password.length < 6 || password.length > 20) {
alert("密码需在 6 到 20 个字符之间");
return false;
}
// 这里应该检查验证码是否正确，通过异步请求发送到后端进行验证
var isValidCaptcha = checkCaptcha(captchaInput);
if (!isValidCaptcha) {
alert("验证码错误！");
return false;
}
return true;
}
function checkCaptcha(captchaInput) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/validate-captcha", false); // false表示同步请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("captcha=" + captchaInput);
if (xhr.status === 200) {
return xhr.responseText === "true";
}
return false;
}
function refreshCaptcha() {
document.getElementById("captchaImage").src = "/captcha?ts=" + Date.now();
}
</script>
</body>
</html>
### 后端 Node.js & Express 部分
然后，更新你的 `server.js` 文件，添加验证码生成和验证逻辑：
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const app = express();
// 设置静态资源目录
app.use(express.static(__dirname + '/public'));
// 解析表单数据
app.use(bodyParser.urlencoded({ extended: true }));
// 使用 session 来存储验证码
app.use(session({
secret: 'your_secret_key',
resave: false,
saveUninitialized: true
}));
// 随机生成验证码
function generateCaptcha() {
return Math.floor(1000 + Math.random() * 9000).toString(); // 生成四位数的验证码
}
// 处理获取验证码图片请求
app.get('/captcha', function(req, res) {
const captcha = generateCaptcha();
req.session.captcha = captcha;
// 这里简单返回验证码文本，你可以使用图像生成库来生成图像验证码
res.type('svg');
res.send(`
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="300">
<text x="50" y="50" font-size="40">${captcha}</text>
</svg>
`);
});
// 验证验证码的接口
app.post('/validate-captcha', function(req, res) {
const userCaptcha = req.body.captcha;
if (req.session.captcha && req.session.captcha === userCaptcha) {
res.send("true");
} else {
res.send("false");
}
});
// 处理登录表单提交
app.post('/login', function(req, res) {
const { username, password, captcha } = req.body;
if (req.session.captcha !== captcha) {
return res.send('验证码错误！');
}
// 进行登录验证的逻辑处理，这里只是简单示例
// 可以连接到MySQL数据库查询用户名和密码是否匹配
res.send('登录成功！');
});
// 处理注册表单提交
app.post('/register', function(req, res) {
const username = req.body.username;
const password = req.body.password;
// 进行账号注册的逻辑处理，这里只是简单示例
// 可以连接到MySQL数据库将用户名和密码保存起来
res.send('注册成功！');
});
// 处理游客登录请求
app.get('/guest-login', function(req, res) {
// 游客登录的逻辑处理，可以直接跳转到论坛首页或者其他操作
res.send('游客登录成功！');
});
// 监听端口3000
app.listen(3000, function() {
console.log('服务器已启动，监听端口3000...');
});
### 运行代码
确保你已经安装了必要的依赖：
npm install express body-parser express-session
然后在命令行中进入到文件所在目录，执行以下命令以启动服务器：
现在，在浏览器中访问 `http://localhost:3000`，你会看到更新后的登录页面并且可以测试包含验证码的登录功能。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2024-4-25 11:30:30
置顶卡
千斤顶
显身卡
发表于 2024-4-25 11:33:03
楼主