使用JSP实现用户登录

时间:2023-03-09 19:36:47
使用JSP实现用户登录

本文讲述使用JSP实现用户登录,包括用户登录、注册和退出功能等。

1.系统用例图

使用JSP实现用户登录

2.页面流程图

使用JSP实现用户登录

3.数据库设计

本例使用oracle数据库

创建用户表

包括id,username,password和email,共4个字段

  1. -- Create table
  2. create table P_USER
  3. (
  4. id       VARCHAR2(50) not null,
  5. username VARCHAR2(20),
  6. password VARCHAR2(20),
  7. email    VARCHAR2(50)
  8. )
  9. tablespace USERS
  10. pctfree 10
  11. initrans 1
  12. maxtrans 255
  13. storage
  14. (
  15. initial 64
  16. minextents 1
  17. maxextents unlimited
  18. );
  19. -- Add comments to the table
  20. comment on table P_USER
  21. is '用户表';
  22. -- Add comments to the columns
  23. comment on column P_USER.id
  24. is 'id';
  25. comment on column P_USER.username
  26. is '用户名';
  27. comment on column P_USER.password
  28. is '密码';
  29. comment on column P_USER.email
  30. is 'email';

4.页面设计

4.1登录页面

login.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>登录页面</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <!--
  17. <link rel="stylesheet" type="text/css" href="styles.css">
  18. -->
  19. </head>
  20. <body>
  21. <form action="login_action.jsp" method="post">
  22. <table>
  23. <tr>
  24. <td colspan="2">登录窗口</td>
  25. </tr>
  26. <tr>
  27. <td>用户名:</td>
  28. <td><input type="text" name="username" />
  29. </td>
  30. </tr>
  31. <tr>
  32. <td>密码:</td>
  33. <td><input type="password" name="password" />
  34. </td>
  35. </tr>
  36. <tr>
  37. <td colspan="2"><input type="submit" value="登录" /> <a href="register.jsp">注册</a>
  38. </td>
  39. </tr>
  40. </table>
  41. </form>
  42. </body>
  43. </html>

页面效果

使用JSP实现用户登录

3.2登录逻辑处理页面

login_action.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%@ page import="java.sql.*" %>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>
  7. <%
  8. String username = request.getParameter("username");
  9. String password = request.getParameter("password");
  10. if(username==null||"".equals(username.trim())||password==null||"".equals(password.trim())){
  11. //out.write("用户名或密码不能为空!");
  12. System.out.println("用户名或密码不能为空!");
  13. response.sendRedirect("login.jsp");
  14. return;
  15. //request.getRequestDispatcher("login.jsp").forward(request, response);
  16. }
  17. boolean isValid = false;
  18. Connection con = null;// 创建一个数据库连接
  19. PreparedStatement pre = null;// 创建预编译语句对象,一般都是用这个而不用Statement
  20. ResultSet result = null;// 创建一个结果集对象
  21. try
  22. {
  23. Class.forName("oracle.jdbc.driver.OracleDriver");// 加载Oracle驱动程序
  24. //System.out.println("开始尝试连接数据库!");
  25. String url = "jdbc:oracle:" + "thin:@127.0.0.1 :1521:orcl";// 127.0.0.1是本机地址,orcl是Oracle的默认数据库名
  26. String user = "scott";// 用户名,系统默认的账户名
  27. String pwd = "tiger";// 你安装时选设置的密码
  28. con = DriverManager.getConnection(url, user, pwd);// 获取连接
  29. // System.out.println("连接成功!");
  30. String sql = "select * from p_user where username=? and password=?";// 预编译语句,“?”代表参数
  31. pre = con.prepareStatement(sql);// 实例化预编译语句
  32. pre.setString(1, username);// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  33. pre.setString(2, password);// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  34. result = pre.executeQuery();// 执行查询,注意括号中不需要再加参数
  35. if (result.next()){
  36. isValid = true;
  37. }
  38. }
  39. catch (Exception e)
  40. {
  41. e.printStackTrace();
  42. }
  43. finally
  44. {
  45. try
  46. {
  47. // 逐一将上面的几个对象关闭,因为不关闭的话会影响性能、并且占用资源
  48. // 注意关闭的顺序,最后使用的最先关闭
  49. if (result != null)
  50. result.close();
  51. if (pre != null)
  52. pre.close();
  53. if (con != null)
  54. con.close();
  55. //System.out.println("数据库连接已关闭!");
  56. }
  57. catch (Exception e)
  58. {
  59. e.printStackTrace();
  60. }
  61. }
  62. if(isValid){
  63. System.out.println("登录成功!");
  64. session.setAttribute("username", username);
  65. response.sendRedirect("welcome.jsp");
  66. return;
  67. }else{
  68. System.out.println("登录失败!");
  69. response.sendRedirect("login.jsp");
  70. return;
  71. }
  72. %>

使用JDBC连接数据库,如果用户名或密码为空时,还是跳转到登录页面login.jsp

如果用户名和密码不为空,进行连接数据库查询用户表,如果能够查询到记录,表示登录成功,将用户信息保存到session,跳转到欢迎页面welcome.jsp

如果根据用户名和密码查询不到记录,表示登录失败,重新跳转到登录页面login.jsp

3.3欢迎页面

welcome.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>My JSP 'welcom.jsp' starting page</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <!--
  17. <link rel="stylesheet" type="text/css" href="styles.css">
  18. -->
  19. </head>
  20. <body>
  21. <table>
  22. <tr>
  23. <td><img src="data:images/logo4.png" />
  24. </td>
  25. <td><img src="data:images/logo2.png" height="90" />
  26. </td>
  27. </tr>
  28. <tr>
  29. <td colspan="2"><hr />
  30. </td>
  31. </tr>
  32. <tr>
  33. <td>
  34. <table>
  35. <tr>
  36. <td><a>Main</a>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td><a>Menu1</a>
  41. </td>
  42. </tr>
  43. <tr>
  44. <td><a>Menu2</a>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td><a>Menu3</a>
  49. </td>
  50. </tr>
  51. <tr>
  52. <td><a>Menu4</a>
  53. </td>
  54. </tr>
  55. <tr>
  56. <td><a>Menu5</a>
  57. </td>
  58. </tr>
  59. <tr>
  60. <td><a>Menu6</a>
  61. </td>
  62. </tr>
  63. <tr>
  64. <td><a>Menu7</a>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td><a>Menu8</a>
  69. </td>
  70. </tr>
  71. </table></td>
  72. <td>
  73. <form action="loginout.jsp" method="post">
  74. <table>
  75. <tr>
  76. <td colspan="2">登录成功!</td>
  77. </tr>
  78. <tr>
  79. <td>欢迎你,</td>
  80. <td>${username }</td>
  81. </tr>
  82. <tr>
  83. <td colspan="2"><input type="submit" value="退出" /></td>
  84. </tr>
  85. </table>
  86. </form></td>
  87. </tr>
  88. </table>
  89. </body>
  90. </html>

使用EL表达式展示用户信息

效果

使用JSP实现用户登录

3.4欢迎页退出逻辑处理页面

loginout.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>My JSP 'loginout.jsp' starting page</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <!--
  17. <link rel="stylesheet" type="text/css" href="styles.css">
  18. -->
  19. </head>
  20. <body>
  21. <%
  22. session.removeAttribute("username");
  23. response.sendRedirect("login.jsp");
  24. %>
  25. </body>
  26. </html>

将session的用户信息移除,跳转到登录页面login.jsp

3.5注册页面

register.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>注册页面</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <!--
  17. <link rel="stylesheet" type="text/css" href="styles.css">
  18. -->
  19. </head>
  20. <body>
  21. <form action="register_action.jsp" method="post">
  22. <table>
  23. <tr>
  24. <td colspan="2">注册窗口</td>
  25. </tr>
  26. <tr>
  27. <td>用户名:</td>
  28. <td><input type="text" name="username" /></td>
  29. </tr>
  30. <tr>
  31. <td>密码:</td>
  32. <td><input type="password" name="password1" /></td>
  33. </tr>
  34. <tr>
  35. <td>确认密码:</td>
  36. <td><input type="password" name="password2" /></td>
  37. </tr>
  38. <tr>
  39. <td>email:</td>
  40. <td><input type="text" name="email" /></td>
  41. </tr>
  42. <tr>
  43. <td colspan="2"><input type="submit" value="注册" /> <a href="login.jsp">返回</a></td>
  44. </tr>
  45. </table>
  46. </form>
  47. </body>
  48. </html>

当在登录页面点击“注册“时打开用户注册页面

效果

使用JSP实现用户登录

3.6注册逻辑处理页面

register_action.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ page import="java.sql.*" %>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>
  7. <%
  8. String username = request.getParameter("username");
  9. String password1 = request.getParameter("password1");
  10. String password2 = request.getParameter("password2");
  11. String email = request.getParameter("email");
  12. if(username==null||"".equals(username.trim())||password1==null||"".equals(password1.trim())||password2==null||"".equals(password2.trim())||!password1.equals(password2)){
  13. //out.write("用户名或密码不能为空!");
  14. System.out.println("用户名或密码不能为空!");
  15. response.sendRedirect("register.jsp");
  16. return;
  17. //request.getRequestDispatcher("login.jsp").forward(request, response);
  18. }
  19. boolean isValid = false;
  20. Connection con = null;// 创建一个数据库连接
  21. PreparedStatement pre = null;// 创建预编译语句对象,一般都是用这个而不用Statement
  22. ResultSet result = null;// 创建一个结果集对象
  23. try
  24. {
  25. Class.forName("oracle.jdbc.driver.OracleDriver");// 加载Oracle驱动程序
  26. //System.out.println("开始尝试连接数据库!");
  27. String url = "jdbc:oracle:" + "thin:@127.0.0.1:1521:orcl";// 127.0.0.1是本机地址,orcl是Oracle的默认数据库名
  28. String user = "scott";// 用户名,系统默认的账户名
  29. String pwd = "tiger";// 你安装时选设置的密码
  30. con = DriverManager.getConnection(url, user, pwd);// 获取连接
  31. //System.out.println("连接成功!");
  32. String sql = "select * from p_user where username=?";// 预编译语句,“?”代表参数
  33. pre = con.prepareStatement(sql);// 实例化预编译语句
  34. pre.setString(1, username);// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  35. result = pre.executeQuery();// 执行查询,注意括号中不需要再加参数
  36. if (!result.next()){
  37. sql = "insert into p_user(id,username,password,email) values(?,?,?,?)";// 预编译语句,“?”代表参数
  38. pre = con.prepareStatement(sql);// 实例化预编译语句
  39. pre.setString(1, System.currentTimeMillis()+"");// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  40. pre.setString(2, username);// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  41. pre.setString(3, password1);// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  42. pre.setString(4, email);// 设置参数,前面的1表示参数的索引,而不是表中列名的索引
  43. pre.executeUpdate();// 执行
  44. isValid = true;
  45. }
  46. }
  47. catch (Exception e)
  48. {
  49. e.printStackTrace();
  50. }
  51. finally
  52. {
  53. try
  54. {
  55. // 逐一将上面的几个对象关闭,因为不关闭的话会影响性能、并且占用资源
  56. // 注意关闭的顺序,最后使用的最先关闭
  57. if (result != null)
  58. result.close();
  59. if (pre != null)
  60. pre.close();
  61. if (con != null)
  62. con.close();
  63. //System.out.println("数据库连接已关闭!");
  64. }
  65. catch (Exception e)
  66. {
  67. e.printStackTrace();
  68. }
  69. }
  70. if(isValid){
  71. System.out.println("注册成功,请登录!");
  72. response.sendRedirect("login.jsp");
  73. return;
  74. }else{
  75. System.out.println("用户名已存在!");
  76. response.sendRedirect("register.jsp");
  77. return;
  78. }
  79. %>

首先判断用户名和密码是否为空,以及密码和确认密码是否一致,如果上述条件不成立时,返回到注册页面register.jsp

如果上述条件成立,就根据用户名到数据库查询,如果能够查询到记录,说明用户名已经存在,返回到注册页面register.jsp

如果查询不到记录,说明此用户名可用来进行注册,使用JDBC向用户表 插入1条记录;之后跳转到登录页面login.jsp

4.总结

本例使用JSP实现用户登录,编写过程中,主要遇到了2个小问题。

一:查询之后,判断记录是否存在,需要使用 if (!result.next()),而不是通常查询中使用的while循环,这一点需要注意,特别是在处理注册时

二:关于JSP页面的编译报错问题

当在JSP小脚本中中使用return时要慎重,很可能会出现编译错误

处理方法是,JSP主页面只使用JSP小脚本,保证return之后没有还需要编译的内容即可

以上即为使用JSP实现用户登录的简单介绍,还需要不断完善。