编程题:设计并实现拼多多登录页面,单击“登录”按钮到Servlet页面进行交互处理。创建Servlet类,如果帐户和密码不能为空并且正确,重定向到testWeclome.jsp,否则重定向到拼多多登录页面。
时间: 2024-12-15 18:20:10 浏览: 23
在设计拼多多登录页面的编程任务中,你需要按照以下步骤进行:
1. HTML 页面设计:
创建一个名为`login.html`的文件,包含基本的登录表单元素,如用户名输入框(`<input type="text" id="username">`)、密码输入框(`<input type="password" id="password">`) 和登录按钮(`<button id="loginBtn">登录</button>`)。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>拼多多登录</title>
</head>
<body>
<form action="LoginServlet" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button id="loginBtn">登录</button>
</form>
<!-- 异常提示区域 -->
<div id="errorMsg"></div>
</body>
</html>
```
2. Servlet 类编写 (LoginServlet.java):
创建一个名为`LoginServlet`的Java Servlet,它将接收表单数据,验证用户信息,并根据结果重定向。
```java
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
// 验证用户信息
if (username.isEmpty() || password.isEmpty()) {
// 如果用户名或密码为空,重定向回登录页并显示错误信息
response.sendRedirect("login.html?errorMsg=账号或密码不能为空");
return;
}
// 模拟数据库验证,这里仅做示例,实际应用中应连接数据库检查
if (!isValidUser(username, password)) {
// 密码错误,同样重定向回登录页并显示错误信息
response.sendRedirect("login.html?errorMsg=账户或密码不正确");
return;
} else {
// 用户名和密码验证通过,重定向到success页面
response.sendRedirect("testWelcome.jsp");
}
}
private boolean isValidUser(String username, String password) {
// 这里仅用于演示,真实环境中需要替换为实际的用户认证逻辑
// 例如:从数据库查询用户是否存在和密码是否匹配
// return false; // 返回验证失败
return true; // 返回验证成功
}
}
```
3. 异常处理:
在HTML页面中,检查URL是否有错误信息参数,如果有,则显示相应的错误消息。
```html
<script>
window.onload = function () {
const errMsgDiv = document.getElementById('errorMsg');
if (window.location.search.includes('errorMsg')) {
errMsgDiv.innerHTML = '?' + window.location.search.substring(window.location.search.indexOf('=') + 1);
}
};
</script>
```
4. 相关问题--
阅读全文