网页制作
本帖最后由 豪在这学python 于 2024-4-25 11:32 编辑求一个登录的页面，需要有前端代码，后端技术，网页需要有登录，注册，游客登录，网页主要是用来制作网页论坛登录页面，注册的账号需要保存在MySQL的表中用于登录时检录，所有的账号都保存在mysql中用于后台数据
@fish 好的，我们可以先从前端代码开始。
HTML部分：
<!DOCTYPE html>
<html>
<head>
<title>论坛登录页面</title>
</head>
<body>
<h2>论坛登录</h2>
<form action="login.php" method="POST">
<label>用户名:</label>
<input type="text" name="username" required><br><br>
<label>密码:</label>
<input type="password" name="password" required><br><br>
<input type="submit" value="登录">
</form>
<h2>注册账号</h2>
<form action="register.php" method="POST">
<label>用户名:</label>
<input type="text" name="username" required><br><br>
<label>密码:</label>
<input type="password" name="password" required><br><br>
<input type="submit" value="注册">
</form>
<h2>游客登录</h2>
<form action="guest_login.php" method="POST">
<input type="submit" value="游客登录">
</form>
</body>
</html>
这是一个简单的HTML页面，包含了论坛登录、注册和游客登录的表单。
接下来，我们使用PHP作为后端技术处理这些表单数据，将用户注册的账号保存到MySQL中，并实现登录功能。
login.php文件：
<?php
// 获取登录表单数据
$username = $_POST["username"];
$password = $_POST["password"];
// 在这里进行验证用户名和密码的逻辑判断
// ...
// 连接数据库
$servername = "localhost";
$dbusername = "your_username";
$dbpassword = "your_password";
$dbname = "your_database_name";
$conn = new mysqli($servername, $dbusername, $dbpassword, $dbname);
// 检查数据库连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 查询数据库中是否存在该用户名和密码
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "登录成功！";
} else {
echo "用户名或密码错误！";
}
$conn->close();
?>
register.php文件：
<?php
// 获取注册表单数据
$username = $_POST["username"];
$password = $_POST["password"];
// 连接数据库
$servername = "localhost";
$dbusername = "your_username";
$dbpassword = "your_password";
$dbname = "your_database_name";
$conn = new mysqli($servername, $dbusername, $dbpassword, $dbname);
// 检查数据库连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 将新用户的账号信息插入数据库
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
if ($conn->query($sql) === TRUE) {
echo "注册成功！";
} else {
echo "注册失败！" . $conn->error;
}
$conn->close();
?>
guest_login.php文件：
<?php
echo "以游客身份登录成功！";
?>
在以上代码中，需要将`your_username`、`your_password`和`your_database_name`替换为你自己的数据库信息。
请注意，以上代码只是一个简单的示例，没有包含对输入数据的验证和安全性处理。在实际项目中，需要对用户输入的数据进行严格的验证和防止SQL注入等安全问题的处理。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-4-25 11:33
好的，我们可以先从前端代码开始。
HTML部分：
后端采用js
豪在这学python 发表于 2024-04-25 11:43
后端采用js
好的，那我们使用JavaScript作为后端技术处理表单数据。以下是一个基本的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>论坛登录页面</title>
</head>
<body>
<h1>论坛登录页面</h1>
<!-- 登录表单 -->
<form id="loginForm">
<h2>论坛登录</h2>
<label for="loginUsername">用户名:</label>
<input type="text" id="loginUsername" required><br>
<label for="loginPassword">密码:</label>
<input type="password" id="loginPassword" required><br>
<button type="submit">登录</button>
</form>
<!-- 注册表单 -->
<form id="registerForm">
<h2>注册账号</h2>
<label for="registerUsername">用户名:</label>
<input type="text" id="registerUsername" required><br>
<label for="registerPassword">密码:</label>
<input type="password" id="registerPassword" required><br>
<button type="submit">注册</button>
</form>
<!-- 游客登录 -->
<button id="guestLogin">游客登录</button>
<script>
// 处理登录表单提交
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单输入的用户名和密码
var username = document.getElementById("loginUsername").value;
var password = document.getElementById("loginPassword").value;
// 进行登录验证的逻辑处理，这里只是简单示例
// 可以使用Ajax发送请求到后端验证用户名和密码是否匹配
alert("登录成功！"); // 暂时使用弹窗显示登录成功
});
// 处理注册表单提交
document.getElementById("registerForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单输入的用户名和密码
var username = document.getElementById("registerUsername").value;
var password = document.getElementById("registerPassword").value;
// 进行账号注册的逻辑处理，这里只是简单示例
// 可以使用Ajax发送请求到后端将用户名和密码保存到数据库
alert("注册成功！"); // 暂时使用弹窗显示注册成功
});
// 处理游客登录按钮点击事件
document.getElementById("guestLogin").addEventListener("click", function() {
// 游客登录的逻辑处理，可以直接跳转到论坛首页或者其他操作
alert("游客登录成功！"); // 暂时使用弹窗显示登录成功
});
</script>
</body>
</html>
这段代码通过JavaScript处理了登录、注册和游客登录的逻辑。你可以根据具体需求来完善这些功能，并使用Ajax发送请求到后端进行登录验证、注册账号和保存数据到数据库的操作。
需要注意的是，由于JavaScript是运行在浏览器端的，而后端技术通常使用的是服务器端编程语言（如PHP、Python等），所以在实际开发中，需要将前端代码和后端代码分别放置在不同的文件中，并通过服务器进行交互。这里我们为了简单起见，在同一个HTML文件中使用了JavaScript作为后端技术处理表单数据。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-4-25 11:43
好的，那我们使用JavaScript作为后端技术处理表单数据。以下是一个基本的示例代码：
后端用node.js wp231957 发表于 2024-04-25 13:54
后端用node.js
好的，既然你想使用Node.js作为后端技术，我们可以使用Express框架来创建一个简单的服务器，并处理表单数据。以下是一个基本的示例代码：
首先，确保你已经安装了Node.js和Express框架。
创建一个名为`server.js`的文件，并在其中添加如下代码：
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
// 设置静态资源目录，这里设置为当前目录下的public文件夹
app.use(express.static(__dirname + '/public'));
// 解析表单数据
app.use(bodyParser.urlencoded({ extended: true }));
// 处理登录表单提交
app.post('/login', function(req, res) {
const username = req.body.username;
const password = req.body.password;
// 进行登录验证的逻辑处理，这里只是简单示例
// 可以连接到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...');
});
在同级目录下创建一个名为`public`的文件夹，并在其中创建一个名为`index.html`的文件，添加前端代码，与之前提供的示例相同。
现在，在命令行中进入到文件所在目录，执行以下命令以启动服务器：
node server.js
服务器将在本地的3000端口上启动。你可以在浏览器中访问`http://localhost:3000`来查看效果，并测试登录、注册和游客登录的功能。
请注意，此示例仅用于演示目的，实际应用中需要进行更多的错误处理、数据库连接等操作。你可以根据自己的需求进行修改和扩展。同时，为了真正保存用户数据，你还需要安装和配置相应的MySQL数据库，并使用适当的库来与数据库进行交互。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-4-25 13:55
好的，既然你想使用Node.js作为后端技术，我们可以使用Express框架来创建一个简单的服务器，并处理表单 ...
@fishc 豪在这学python 发表于 2024-06-17 18:06
@fishc
你好！我是FishC的计算机教育专家，有什么编程上的问题可以帮你解答的吗？无论是Python、C++还是其他语言，都可以尽管问哦！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-6-17 18:06
你好！我是FishC的计算机教育专家，有什么编程上的问题可以帮你解答的吗？无论是Python、C++还是其他语 ...
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<%@ page import="DAO.DBUtil" %>
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].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;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<h2>登录</h2>
<form name="loginForm" action="login.jsp" method="post" onsubmit="return validateForm()">
用户名: <br>
<input type="text" name="username" required> <br>
密码: <br>
<input type="password" name="password" required> <br>
<input type="submit" value="登录">
</form>
<div class="message">
<a href="register.jsp">没有账号？点击注册</a>
</div>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
if (username != null && password != null) {
boolean validInput = true;
StringBuilder errorMessage = new StringBuilder();
if (username == null || username.length() < 3 || username.length() > 20) {
validInput = false;
errorMessage.append("用户名需在 3 到 20 个字符之间。");
}
if (password == null || password.length() < 6 || password.length() > 20) {
validInput = false;
errorMessage.append("密码需在 6 到 20 个字符之间。");
}
if (validInput) {
try {
Connection conn = DBUtil.getConnection();
String loginQuery = "SELECT * FROM users WHERE username = ? AND password = ?";
PreparedStatement ps = conn.prepareStatement(loginQuery);
ps.setString(1, username);
ps.setString(2, password);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
response.sendRedirect("Forum/forum.jsp"); // 登录成功后跳转到论坛页面
} else {
out.println("<p>用户名或密码错误！</p>");
}
conn.close();
} catch (SQLException e) {
e.printStackTrace();
out.println("<p>登录失败，发生SQL错误：" + e.getMessage() + "</p>");
} catch (Exception e) {
e.printStackTrace();
out.println("<p>登录失败，发生未知错误：" + e.getMessage() + "</p>");
}
} else {
out.println("<p>" + errorMessage.toString() + "</p>");
}
}
%>
</div>
</body>
</html>
在这个登录页面添加验证码 豪在这学python 发表于 2024-06-17 18:07
登录
function validateForm()...
好的，我们可以在你的登录页面中添加验证码。为了简化，我们使用一个简单的数字验证码，并使用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
然后在命令行中进入到文件所在目录，执行以下命令以启动服务器：
node server.js
现在，在浏览器中访问 `http://localhost:3000`，你会看到更新后的登录页面并且可以测试包含验证码的登录功能。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-6-17 18:08
好的，我们可以在你的登录页面中添加验证码。为了简化，我们使用一个简单的数字验证码，并使用Node.js ...
这里我只使用了mysql和jsp 豪在这学python 发表于 2024-06-17 18:10
这里我只使用了mysql和jsp
明白了，我们将使用JSP进行前端显示和JavaScript进行表单验证，后端采用JSP与MySQL交互来处理用户登录和注册。同时添加验证码功能。
### 1. 前端 (index.jsp)
首先是`index.jsp`文件，用于显示登录和注册页面，并添加简单的验证码功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<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 captcha = document.getElementById("captcha").innerText;
if (captcha !== captchaInput) {
alert("验证码错误！");
return false;
}
return true;
}
function refreshCaptcha() {
var captcha = Math.floor(1000 + Math.random() * 9000).toString(); // 生成四位数的验证码
document.getElementById("captcha").innerText = captcha;
}
window.onload = refreshCaptcha;
</script>
</head>
<body>
<h2>登录</h2>
<form action="login.jsp" method="post" onsubmit="return validateForm();">
用户名: <input type="text" id="username" name="username"><br><br>
密码: <input type="password" id="password" name="password"><br><br>
验证码: <span id="captcha"></span>
<input type="text" id="captchaInput" name="captcha"><br><br>
<button type="button" onclick="refreshCaptcha()">刷新验证码</button><br><br>
<input type="submit" value="登录">
</form>
<p>没有账号？<a href="register.jsp">点击注册</a></p>
</body>
</html>
### 2. 后端代码 (使用JSP和MySQL)
确保你的MySQL数据库中有一个`users`表来存储用户信息。
`register.jsp`：
<%@ page import="java.sql.*" %>
<%
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
Connection conn = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/yourdbname", "yourusername", "yourpassword");
String insertSQL = "INSERT INTO users (username, password) VALUES (?, ?)";
ps = conn.prepareStatement(insertSQL);
ps.setString(1, username);
ps.setString(2, password);
int result = ps.executeUpdate();
if (result > 0) {
out.println("注册成功！");
} else {
out.println("注册失败！");
}
} catch (Exception e) {
e.printStackTrace();
out.println("注册失败，发生错误：" + e.getMessage());
} finally {
if (ps != null) ps.close();
if (conn != null) conn.close();
}
%>
<a href="index.jsp">返回登录</a>
`login.jsp`：
<%@ page import="java.sql.*" %>
<%
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String captcha = request.getParameter("captcha");
String sessionCaptcha = (String) session.getAttribute("captcha");
if (!captcha.equals(sessionCaptcha)) {
out.println("验证码错误！");
return;
}
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/yourdbname", "yourusername", "yourpassword");
String loginQuery = "SELECT * FROM users WHERE username = ? AND password = ?";
ps = conn.prepareStatement(loginQuery);
ps.setString(1, username);
ps.setString(2, password);
rs = ps.executeQuery();
if (rs.next()) {
response.sendRedirect("forum.jsp"); // 登录成功后跳转到论坛页面
} else {
out.println("用户名或密码错误！");
}
} catch (Exception e) {
e.printStackTrace();
out.println("登录失败，发生错误：" + e.getMessage());
} finally {
if (rs != null) rs.close();
if (ps != null) ps.close();
if (conn != null) conn.close();
}
%>
<a href="index.jsp">返回登录</a>
上面的代码实现了基本的登录和注册功能，并添加了简单的验证码。你可以根据需要扩展和优化这些功能。确保替换`yourdbname`、`yourusername`和`yourpassword`为你的实际数据库信息。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-6-17 18:11
明白了，我们将使用JSP进行前端显示和JavaScript进行表单验证，后端采用JSP与MySQL交互来处理用户登录 ...
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<%@ page import="DAO.DBUtil" %>
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript">
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].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;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<h2>登录</h2>
<form name="loginForm" action="login.jsp" method="post" onsubmit="return validateForm()">
用户名: <br>
<input type="text" name="username" required> <br>
密码: <br>
<input type="password" name="password" required> <br>
<input type="submit" value="登录">
</form>
<div class="message">
<a href="register.jsp">没有账号？点击注册</a>
</div>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
if (username != null && password != null) {
boolean validInput = true;
StringBuilder errorMessage = new StringBuilder();
if (username == null || username.length() < 3 || username.length() > 20) {
validInput = false;
errorMessage.append("用户名需在 3 到 20 个字符之间。");
}
if (password == null || password.length() < 6 || password.length() > 20) {
validInput = false;
errorMessage.append("密码需在 6 到 20 个字符之间。");
}
if (validInput) {
try {
Connection conn = DBUtil.getConnection();
String loginQuery = "SELECT * FROM users WHERE username = ? AND password = ?";
PreparedStatement ps = conn.prepareStatement(loginQuery);
ps.setString(1, username);
ps.setString(2, password);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
response.sendRedirect("Forum/forum.jsp"); // 登录成功后跳转到论坛页面
} else {
out.println("<p>用户名或密码错误！</p>");
}
conn.close();
} catch (SQLException e) {
e.printStackTrace();
out.println("<p>登录失败，发生SQL错误：" + e.getMessage() + "</p>");
} catch (Exception e) {
e.printStackTrace();
out.println("<p>登录失败，发生未知错误：" + e.getMessage() + "</p>");
}
} else {
out.println("<p>" + errorMessage.toString() + "</p>");
}
}
%>
</div>
</body>
</html>
只需在这个代码中用jsp做一个简单的验证码就行 豪在这学python 发表于 2024-06-17 18:23
登录
function validateForm()...
明白了，我们将在现有的代码中添加一个简单的验证码功能。我们会生成一个随机的四位数验证码，并在表单提交时进行验证。
### 1. 前端 (index.jsp)
首先更新你的 `index.jsp` 文件，用于显示登录页面并包含验证码部分：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<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 captcha = document.getElementById("captcha").innerText;
if (captcha !== captchaInput) {
alert("验证码错误！");
return false;
}
return true;
}
function refreshCaptcha() {
var captcha = Math.floor(1000 + Math.random() * 9000).toString(); // 生成四位数的验证码
document.getElementById("captcha").innerText = captcha;
}
window.onload = refreshCaptcha;
</script>
</head>
<body>
<h2>登录</h2>
<form action="login.jsp" method="post" onsubmit="return validateForm()">
用户名: <input type="text" id="username" name="username"><br>
密码: <input type="password" id="password" name="password"><br>
验证码: <span id="captcha"></span> <button type="button" onclick="refreshCaptcha()">刷新验证码</button><br>
请输入验证码: <input type="text" id="captchaInput" name="captcha"><br>
<input type="submit" value="登录">
</form>
<p>没有账号？<a href="register.jsp">点击注册</a></p>
</body>
</html>
### 2. 后端代码 (使用JSP和MySQL)
接下来，我们编写 `login.jsp` 文件来处理登录逻辑并验证验证码：
<%@ page import="java.sql.*, java.io.*" %>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
String captcha = request.getParameter("captcha");
String sessionCaptcha = request.getSession().getAttribute("captcha").toString();
if (!captcha.equals(sessionCaptcha)) {
out.println("验证码错误！");
} else {
boolean validInput = true;
StringBuilder errorMessage = new StringBuilder();
if (username == null || username.length() < 3 || username.length() > 20) {
validInput = false;
errorMessage.append("用户名需在 3 到 20 个字符之间。");
}
if (password == null || password.length() < 6 || password.length() > 20) {
validInput = false;
errorMessage.append("密码需在 6 到 20 个字符之间。");
}
if (validInput) {
Connection conn = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/yourdbname", "yourusername", "yourpassword"); // 请替换数据库信息
String loginQuery = "SELECT * FROM users WHERE username = ? AND password = ?";
ps = conn.prepareStatement(loginQuery);
ps.setString(1, username);
ps.setString(2, password);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
response.sendRedirect("Forum/forum.jsp"); // 登录成功后跳转到论坛页面
} else {
out.println("用户名或密码错误！");
}
} catch (SQLException | ClassNotFoundException e) {
e.printStackTrace();
out.println("登录失败，发生SQL错误：" + e.getMessage() + "");
} finally {
if (ps != null) ps.close();
if (conn != null) conn.close();
}
} else {
out.println("" + errorMessage.toString() + "");
}
}
%>
此外，还需要在表单加载时将验证码存储在会话（session）中，以便在提交时进行验证。可以将以下代码添加到 `index.jsp` 页面的脚本部分：
<%
String generatedCaptcha = String.valueOf((int)(Math.random() * 9000) + 1000); // 生成四位数的验证码
session.setAttribute("captcha", generatedCaptcha);
%>
并在HTML部分显示此验证码：
验证码: <span id="captcha"><%= session.getAttribute("captcha") %></span> <button type="button" onclick="refreshCaptcha()">刷新验证码</button><br>
最后，你的 `index.jsp` 文件应如下所示：
### 完整版 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
<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 captcha = document.getElementById("captcha").innerText;
if (captcha !== captchaInput) {
alert("验证码错误！");
return false;
}
return true;
}
function refreshCaptcha() {
var captcha = Math.floor(1000 + Math.random() * 9000).toString(); // 生成四位数的验证码
document.getElementById("captcha").innerText = captcha;
}
window.onload = refreshCaptcha;
</script>
</head>
<body>
<h2>登录</h2>
<form action="login.jsp" method="post" onsubmit="return validateForm()">
用户名: <input type="text" id="username" name="username"><br>
密码: <input type="password" id="password" name="password"><br>
<%
String generatedCaptcha = String.valueOf((int)(Math.random() * 9000) + 1000); // 生成四位数的验证码
session.setAttribute("captcha", generatedCaptcha);
%>
验证码: <span id="captcha"><%= session.getAttribute("captcha") %></span> <button type="button" onclick="refreshCaptcha()">刷新验证码</button><br>
请输入验证码: <input type="text" id="captchaInput" name="captcha"><br>
<input type="submit" value="登录">
</form>
<p>没有账号？<a href="register.jsp">点击注册</a></p>
</body>
</html>
这样就实现了一个简单的登录页面，包含用户名、密码和验证码验证功能。请根据实际需求和安全性要求进行进一步调整。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-6-17 18:24
明白了，我们将在现有的代码中添加一个简单的验证码功能。我们会生成一个随机的四位数验证码，并在表单 ...
为这个index页面编写一个css，使其美观 豪在这学python 发表于 2024-06-17 18:30
为这个index页面编写一个css，使其美观
当然可以！我们来为你的 `index.jsp` 页面添加一些 CSS，使其更加美观。我们将使用内部样式表（即将 CSS 写在 JSP 文件的 `<style>` 标签内），当然你也可以将这些样式放到一个独立的 CSS 文件中以便管理。
### 完整版 index.jsp 带有 CSS 样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h2 {
text-align: center;
color: #333;
}
label {
display: block;
margin-top: 10px;
color: #555;
}
input,
input {
width: calc(100% - 22px);
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.button-container {
display: flex;
justify-content: space-between;
align-items: center;
}
button,
.refresh-btn {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover,
.refresh-btn:hover {
background-color: #0056b3;
}
.register-link {
display: block;
text-align: center;
margin-top: 20px;
color: #007bff;
text-decoration: none;
}
.register-link:hover {
text-decoration: underline;
}
.captcha-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.captcha-code {
font-size: 18px;
font-weight: bold;
background-color: #e9ecf2;
padding: 10px;
border-radius: 5px;
margin-right: 10px;
}
</style>
<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 captcha = document.getElementById("captcha").innerText;
if (captcha !== captchaInput) {
alert("验证码错误！");
return false;
}
return true;
}
function refreshCaptcha() {
var captcha = Math.floor(1000 + Math.random() * 9000).toString(); // 生成四位数的验证码
document.getElementById("captcha").innerText = captcha;
}
window.onload = refreshCaptcha;
</script>
</head>
<body>
<div class="container">
<h2>登录</h2>
<form action="login.jsp" method="post" onsubmit="return validateForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<div class="captcha-container">
<span id="captcha" class="captcha-code"></span>
<button type="button" class="refresh-btn" onclick="refreshCaptcha()">刷新验证码</button>
</div>
<label for="captchaInput">请输入验证码:</label>
<input type="text" id="captchaInput" name="captchaInput" required>
<div class="button-container">
<button type="submit">登录</button>
</div>
</form>
<a href="register.jsp" class="register-link">没有账号？点击注册</a>
</div>
</body>
</html>
以上代码包含了基本的CSS样式，以使页面更美观。它将登录表单居中显示，并添加了一些阴影、边距和颜色，使其看起来更现代。你可以根据自己的需求进一步调整样式。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2024-6-17 18:30
当然可以！我们来为你的 `index.jsp` 页面添加一些 CSS，使其更加美观。我们将使用内部样式表（即将 CS ...
？
在？
页:
[1]