赞
踩
login.jsp
,输入用户名和密码后,跳转到登录处理页面doLogin.jsp
进行业务逻辑处理,登录成功,跳转到登录成功页面success.jsp
,否则跳转到登录失败页面failure.jsp
。Java Enterprise
项目,添加Web Application
功能LoginDemo01
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户登录</title> </head> <body> <h3 style="text-align: center">用户登录</h3> <form action="doLogin.jsp" method="post"> <table border="1" cellpadding="10" style="margin: 0px auto"> <tr> <td align="center">账号</td> <td><input type="text" name="username"/></td> </tr> <tr> <td align="center">密码</td> <td><input type="password" name="password"/></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="登录"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html>
doLogin.jsp
<%
// 获取登录表单数据
String username = request.getParameter("username");
String password = request.getParameter("password");
// 判断登录是否成功
if (username.equals("无心剑") && password.equals("903213")) {
// 跳转到登录成功页面,传递用户名
response.sendRedirect("success.jsp?username=" + username);
} else {
// 跳转到登录失败页面,传递用户名
response.sendRedirect("failure.jsp?username=" + username);
}
%>
success.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录成功</title>
</head>
<body>
<h3 style="text-align: center">恭喜,<%=request.getParameter("username")%>,登录成功!</h3>
</body>
</html>
failure.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录失败</title>
</head>
<body>
<h3 style="text-align: center">遗憾,<%=request.getParameter("username")%>,登录失败!</h3>
</body>
</html>
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
</head>
<body>
<h1 style="color: red; text-align: center">纯JSP方式实现用户登录功能</h1>
<h3 style="text-align: center"><a href="login.jsp">跳转到登录页面</a></h3>
</body>
</html>
启动服务器,显示首页
单击【跳转到登录页面】超链接
输入正确的用户名和密码(无心剑:903213)
单击【登录】按钮,跳转到登录成功页面
返回登录页面,输入错误的用户名或密码
单击【登录】按钮,跳转到登录失败页面
操作录屏
login.jsp
,输入用户名和密码后,跳转到登录处理程序LoginServlet
进行业务逻辑处理,登录成功,跳转到登录成功页面success.jsp
,否则跳转到登录失败页面failure.jsp
。Jakarta EE
项目,添加Web Application
功能login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户登录</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <h1>用户登录</h1> <form action="login" method="POST" accept-charset="UTF-8"> <input type="text" id="username" name="username" required placeholder="请输入用户名"> <input type="password" id="password" name="password" required placeholder="请输入密码"> <button type="submit">登录</button> <button type="reset">重置</button> </form> </div> </body> </html>
css
目录,在里面创建styles.css
样式文件* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; } .container { max-width: 400px; margin: 50px auto; background-color: #ffffff; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } form { display: flex; flex-direction: column; } label { margin-top: 10px; } input[type="text"], input[type="password"] { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 3px; } button { width: 100%; padding: 10px; margin-top: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; } button:hover { background-color: #45a049; } button[type="reset"] { background-color: #f44336; } button[type="reset"]:hover { background-color: #d32f2f; }
HelloServlet
类,在包里创建LoginServlet
类package net.huawei.logindemo02; /** * 功能:用户登录处理类 * 作者:华卫 * 日期:2023年12月19日 */ import jakarta.servlet.*; import jakarta.servlet.http.*; import jakarta.servlet.annotation.*; import java.io.IOException; import java.net.URLEncoder; @WebServlet(name = "LoginServlet", urlPatterns = "/login") public class LoginServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求对象的字母编码 request.setCharacterEncoding("utf-8"); // 获取登录表单提交的数据(用户名和密码) String username = request.getParameter("username"); String password = request.getParameter("password"); // 判断登录是否成功 if (username.equals("酒城") && password.equals("903213")) { // 跳转到登录成功页面,传递用户名 response.sendRedirect("success.jsp?username=" + URLEncoder.encode(username, "utf-8")); } else { // 跳转到登录失败页面,传递用户名 response.sendRedirect("failure.jsp?username=" + URLEncoder.encode(username, "utf-8")); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
success.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录成功</title>
</head>
<body>
<h3 style="text-align: center">恭喜,<%=request.getParameter("username")%>,登录成功!</h3>
</body>
</html>
failure.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录失败</title>
</head>
<body>
<h3 style="text-align: center">遗憾,<%=request.getParameter("username")%>,登录失败!</h3>
</body>
</html>
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
</head>
<body>
<h1 style="color: red; text-align: center">JSP+Servlet方式实现用户登录功能</h1>
<h3 style="text-align: center"><a href="login.jsp">跳转到登录页面</a></h3>
</body>
</html>
test
CREATE TABLE `t_user` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
`username` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '用户名',
`password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '用户密码',
`telephone` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '联系电话',
`register_time` timestamp(0) NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '注册时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
INSERT INTO `t_user` VALUES (1, '无心剑', '12345', '15888781123', '2023-01-06 07:20:46'),
(2, '陈燕文', '11111', '13990901140', '2023-02-06 11:40:49'),
(3, '郑素平', '22222', '15845678907', '2023-05-01 08:30:53');
创建Jakarta EE
项目,设置项目名称 - LoginDemo03
、位置、添加Web Application
模板、设置服务器、语言、构建系统、组名、构件名以及JDK版本
单击【Next】按钮,然后选择Jakarta EE 10
版本,添加Servlet
依赖
单击【Create】按钮,创建的LoginDemo03
项目
大家可以看到,部署在Tomcat服务器上构件名是LoginDemo03:war exploded
,跟项目名LoginDemo03
不一致,看着不舒服,所以我们来修改项目的构件名,使之与项目名称保持一致。
在项目结构窗口里修改构件名 - LoginDemo03
编辑Tomcat
服务器配置,重新部署项目
看到URL - http://localhost:8080/LoginDemo03_war_exploded/
切换到【Deployment】选项卡,此时Applicaiton context依然是/LoginDemo03_war_exploded
重新部署项目 - LoginDemo03
此时,切换到【Server】选项卡,你会发现URL变成http://localhost:8080/LoginDemo03/
,可以设置首选浏览器 - Chrome
net.huawei.logindem03.bean
包,然后在包里创建User
类,跟用户表(t_user)对应,简称ORM(Object Relation Mapping),它是一种编程技术,用于将对象模型与关系数据库表进行映射,实现数据的无缝转换和操作。t_user
表,有5个字段(field),对应的User实体类就有5个属性(property)register_time
,此时,实体属性名要按照Java标识符的驼峰命名法设置为registerTime
(变量名和方法名,第一个单词小写,从第二个单词开始,首字母大写;类名,首字母全部大写)package net.huawei.bean; import java.util.Date; /** * 功能:用户实体类 * 作者:华卫 * 日期:2023年05月19日 */ public class User { private int id; private String username; private String password; private String telephone; private Date registerTime; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getTelephone() { return telephone; } public void setTelephone(String telephone) { this.telephone = telephone; } public Date getRegisterTime() { return registerTime; } public void setRegisterTime(Date registerTime) { this.registerTime = registerTime; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '\'' + ", password='" + password + '\'' + ", telephone='" + telephone + '\'' + ", registerTime=" + registerTime + '}'; } }
mysql-connector-java.jar
)。然后将这个JAR文件添加到项目的类路径中(例如放在项目的lib
目录下)。在代码中,通过Class.forName()
加载驱动,然后使用 DriverManager.getConnection()
方法建立数据库连接,进行数据操作。WEB-INF
目录下创建lib
目录,添加数据库驱动程序net.huawei.dbutils
包,在包里创建ConnectionManager
类package net.huawei.dbutils; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; /** * 功能:数据库连接管理类 * 作者:华卫 * 日期:2023年05月19日 */ public class ConnectionManager { private static final String DRIVER = "com.mysql.jdbc.Driver"; // 数据库驱动程序 private static final String URL = "jdbc:mysql://localhost:3306/test?useSSL=false&useUnicode=true&characterEncoding=utf8"; // 数据库统一资源标识符 private static final String USER = "root"; // 数据库用户 private static final String PASSWORD = "903213"; // 数据库密码(记住改成自己的数据库密码) // 私有化构造方法,拒绝实例化 private ConnectionManager() { } // 获取数据库连接静态方法 public static Connection getConnection() { // 定义数据库连接 Connection conn = null; try { // 安装数据库驱动程序 Class.forName(DRIVER); // 获取数据库连接 conn = DriverManager.getConnection(URL, USER, PASSWORD); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException e) { e.printStackTrace(); } // 返回数据库连接 return conn; } // 关闭数据连接静态方法 public static void closeConnection(Connection conn) { // 判断数据库连接是否非空 if (conn != null) { try { // 判断连接是否未关闭 if (!conn.isClosed()) { // 关闭数据库连接 conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } } public static void main(String[] args) { // 获取数据库连接 Connection conn = getConnection(); // 判断数据库连接是否成功 if (conn != null) { System.out.println("恭喜,数据库连接成功~"); } else { System.out.println("遗憾,数据库连接失败~"); } // 关闭数据库连接 closeConnection(conn); System.out.println("数据库连接已经关闭~"); } }
net.huawei
根包里创建dao
子包,然后在子包里创建UserDao
类package net.huawei.dao; import net.huawei.bean.User; import net.huawei.dbutils.ConnectionManager; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; /** * 功能:用户数据访问类 * 作者:华卫 * 日期:2023年05月19日 */ public class UserDao { /** * 用户登录方法 * @param username * @param password * @return 用户对象(非空:登录成功,否则登录失败) */ public User login(String username, String password) { // 声明用户对象 User user = null; // 获取数据库连接 Connection conn = ConnectionManager.getConnection(); try { // 定义SQL字符串 String strSQL = "SELECT * FROM t_user WHERE username = ? AND password = ?"; // 创建预备语句对象 PreparedStatement pstmt = conn.prepareStatement(strSQL); // 设置占位符 pstmt.setString(1, username); pstmt.setString(2, password); // 执行查询,返回结果集 ResultSet rs = pstmt.executeQuery(); // 判断结果集是否为空 if (rs.next()) { // 创建用户对象 user = new User(); // 利用当前记录字段值来设置用户对象属性 user.setId(rs.getInt("id")); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setTelephone(rs.getString("telephone")); user.setRegisterTime(rs.getTimestamp("register_time")); } } catch (SQLException e) { System.err.println(e.getMessage()); } finally { // 关闭数据库连接 ConnectionManager.closeConnection(conn); } // 返回用户对象 return user; } }
test/java
下创建net.huawei.logindemo03.dao
包,然后在包里创建TestUserDao
类package net.huawei.logindemo03.dao; import net.huawei.logindemo03.bean.User; import org.junit.jupiter.api.Test; /** * 功能:测试用户数据访问类 * 作者:华卫 * 日期:2023年12月23日 */ public class TestUserDao { // 创建用户访问对象 private UserDao userDao = new UserDao(); /** * 测试用户登录方法 */ @Test public void testLogin() { // 定义用户名和密码 String username = "无心剑"; String password = "12345"; // 调用用户数据访问对象的登录方法,返回用户对象 User user = userDao.login(username, password); // 判断用户是否登录成功 if (user != null) { // 成功 System.out.println("恭喜,用户[" + username + "]登录成功~"); } else { // 失败 System.err.println("遗憾,用户[" + username + "]登录失败~"); } } }
运行程序,查看结果
修改用户名和密码,再次运行程序,提示登录失败
net.huawei.logindemo03
根包里创建service
子包,在子包里创建UserService
类package net.huawei.logindemo03.service; import net.huawei.logindemo03.bean.User; import net.huawei.logindemo03.dao.UserDao; /** * 功能:用户服务类 * 作者:华卫 * 日期:2023年12月23日 */ public class UserService { // 创建用户数据访问对象 private UserDao userDao = new UserDao(); public User login(String username, String password) { return userDao.login(username, password); } }
HelloServlet
类net.huawei.logindemo03
根包里创建servlet
子包,在子包里创建LoginServlet
类package net.huawei.logindemo03.servlet; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import net.huawei.logindemo03.bean.User; import net.huawei.logindemo03.service.UserService; import java.io.IOException; import java.net.URLEncoder; /** * 功能:登录处理程序 * 作者:华卫 * 日期:2023年12月23日 */ @WebServlet(name = "loginServlet", value = "/login") public class LoginServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { // 设置请求对象字符编码格式 request.setCharacterEncoding("utf-8"); // 获取登录表单数据 String username = request.getParameter("username"); String password = request.getParameter("password"); // 创建用户服务对象 UserService us = new UserService(); // 调用登录方法,返回用户对象 User user = us.login(username, password); // 判断登录是否成功 if (user != null) { // 跳转到登录成功页面,传递用户名 response.sendRedirect("success.jsp?username=" + URLEncoder.encode(username, "utf-8")); } else { // 跳转到登录失败页面,传递用户名 response.sendRedirect("failure.jsp?username=" + URLEncoder.encode(username, "utf-8")); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
webapp
目录创建登录页面 - login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户登录</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <h1>用户登录</h1> <form action="login" method="POST" accept-charset="UTF-8"> <input type="text" id="username" name="username" required placeholder="请输入用户名"> <input type="password" id="password" name="password" required placeholder="请输入密码"> <button type="submit">登录</button> <button type="reset">重置</button> </form> </div> </body> </html>
webapp
目录创建css
子目录,在子目录里创建styles.css
样式文件* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; } .container { max-width: 400px; margin: 50px auto; background-color: #ffffff; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } form { display: flex; flex-direction: column; } label { margin-top: 10px; } input[type="text"], input[type="password"] { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 3px; } button { width: 100%; padding: 10px; margin-top: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; } button:hover { background-color: #45a049; } button[type="reset"] { background-color: #f44336; } button[type="reset"]:hover { background-color: #d32f2f; }
request.getParameter
方法从请求中获取并动态显示。整体设计简洁明了,旨在告知用户登录状态并提供良好的用户体验。webapp
目录创建登录成功页面 - success.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录成功</title>
</head>
<body>
<h3 style="text-align: center">恭喜,<%= request.getParameter("username")%>,登录成功!</h3>
</body>
</html>
webapp
目录里创建登录失败页面 - failure.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录失败</title>
</head>
<body>
<h3 style="text-align: center">遗憾,<%= request.getParameter("username")%>,登录失败!</h3>
</body>
</html>
webapp
目录里编辑项目首页 - index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
</head>
<body>
<h1 style="color: red; text-align: center">JSP+Servlet+DB方式实现用户登录功能</h1>
<h3 style="text-align: center"><a href="login.jsp">跳转到登录页面</a></h3>
</body>
</html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。