Jsp技术入门指南【十四】实现基于MySQL+JDBC+JSP数据库验证的登录界面与登 ...

---

前言

• 在之前的博客中，我们详细探讨了 JSTL 中 SQL 标签库和自界说标签库的底子用法，并展示了如何使用这些标签库实现 MySQL 数据库毗连以及数据分页展示功能。
  
• 本文将继续深入，先容如何基于 MySQL 数据库实现用户登录验证功能，包罗登录界面设计、用户身份验证以及登录成功 / 失败后的页面跳转处置惩罚。
  

   我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的JSP知识文章专栏
欢迎来阅读指出不敷
https://blog.csdn.net/2402_83322742/category_12950980.html?spm=1001.2014.3001.5482
  

---

标题要求

• 使用MySQL+JSP+JDBC内容，完成前后端毗连，实现基于MySQL数据库验证的登录界面与登录跳转功能
  
• 当用户输入数据库里面的用户名和密码时，才可举行跳转
  

下面我们来实际操作一下

第一步：加入驱动包与Maven

• 起首我们按照之前的那样加入jsp，jdbc的驱动包来构建环境
  

1. <dependencies>
2.         <dependency>
3.             <groupId>javax.servlet</groupId>
4.             <artifactId>javax.servlet-api</artifactId>
5.             <version>3.1.0</version>
6.             <scope>provided</scope>
7.         </dependency>
9.         <dependency>
10.             <groupId>javax.servlet.jsp</groupId>
11.             <artifactId>javax.servlet.jsp-api</artifactId>
12.             <version>2.3.3</version>
13.             <scope>provided</scope>
14.         </dependency>
16.         <dependency>
17.             <groupId>mysql</groupId>
18.             <artifactId>mysql-connector-java</artifactId>
19.             <version>8.0.33</version>
20.         </dependency>
21.         <!-- jstl表达式依赖-->
22.         <dependency>
23.             <groupId>javax.servlet.jsp.jstl</groupId>
24.             <artifactId>jstl-api</artifactId>
25.             <version>1.2</version>
26.         </dependency>
27.         <!-- taglibs 标签库依赖-->
28.         <dependency>
29.             <groupId>taglibs</groupId>
30.             <artifactId>standard</artifactId>
31.             <version>1.1.2</version>
32.         </dependency>
33.     </dependencies>

复制代码

• 接着我们必要设置好自己的maven环境
  
• maven环境必须是全英文，否则运行不了
  maven官方网站https://maven.apache.org/
  

   我的jsp环境搭建博客
JSP技术入门指南【一】使用IDEA从零开始搭建你的第一个JSP系统
https://blog.csdn.net/2402_83322742/article/details/146980845?spm=1001.2014.3001.5501
Java-servlet-Web环境搭建（下）详细解说使用maven和tomcat搭建Java-servlet环境
https://blog.csdn.net/2402_83322742/article/details/145998804
  

第二步、创建并导入web库

• 我们新建了一个MySQLtest的模块，在里面单击右键，打开模板设置
  
  
  
  
• 在MySQLtest里面添加web文件
  
  
  
  
  
  
  
• 然后在工件里，找到web应用步伐睁开型，找到我们刚刚添加的MySQLweb文件
  
  
  
  
• 在web-INF文件里创建一个lib文件，并导入我们的库文件
  
  
  
  
  
  
  

第三步、毗连本地数据库的java代码

• 起首新建一个java类LoginServlet
  
  
  
  
  
  
  
• 接着在java类里面添加以下代码
  

LoginServlet类

1. package org.example;
3. import java.io.IOException;
4. import java.io.Serial;
5. import java.sql.Connection;
6. import java.sql.DriverManager;
7. import java.sql.PreparedStatement;
8. import java.sql.ResultSet;
9. import java.sql.SQLException;
11. import javax.servlet.ServletException;
12. import javax.servlet.annotation.WebServlet;
13. import javax.servlet.http.HttpServlet;
14. import javax.servlet.http.HttpServletRequest;
15. import javax.servlet.http.HttpServletResponse;
17. @WebServlet("/LoginServlet")
18. public class LoginServlet extends HttpServlet {
19.     @Serial
20.     private static final long serialVersionUID = 1L;
22.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
23.             throws ServletException, IOException {
24.         String username = request.getParameter("username");
25.         String password = request.getParameter("password");
27.         // 数据库连接信息
28.         String url = "jdbc:mysql://localhost:3306/2023se3";
29.         String dbUsername = "root";
30.         String dbPassword = "123456";
32.         Connection conn = null;
33.         PreparedStatement stmt = null;
34.         ResultSet rs = null;
36.         try {
37.             // 加载数据库驱动
38.             Class.forName("com.mysql.cj.jdbc.Driver");
39.             // 建立数据库连接
40.             conn = DriverManager.getConnection(url, dbUsername, dbPassword);
42.             // 查询用户信息
43.             String sql = "SELECT * FROM userspasswd WHERE username = ? AND password = ?";
44.             stmt = conn.prepareStatement(sql);
45.             stmt.setString(1, username);
46.             stmt.setString(2, password);
47.             rs = stmt.executeQuery();
49.             if (rs.next()) {
50.                 String displayName = rs.getString("username"); // 获取数据库中的显示名
51.                 request.getSession().setAttribute("displayName", displayName); // 存入会话
52.                 response.sendRedirect("index.jsp");
53.             } else {
54.                 // 登录失败，返回登录页并给出提示
55.                 request.setAttribute("error", "用户名或密码错误");
56.                 request.getRequestDispatcher("login.jsp").forward(request, response);
57.             }
58.         } catch (ClassNotFoundException | SQLException e) {
59.             e.printStackTrace();
60.             // 数据库连接或查询出错，返回登录页并给出提示
61.             request.setAttribute("error", "数据库连接出错，请稍后再试");
62.             request.getRequestDispatcher("login.jsp").forward(request, response);
63.         } finally {
64.             // 关闭数据库连接和资源
65.             try {
66.                 if (rs != null) rs.close();
67.                 if (stmt != null) stmt.close();
68.                 if (conn != null) conn.close();
69.             } catch (SQLException e) {
70.                 e.printStackTrace();
71.             }
72.         }
73.     }
74. }
75.    

复制代码

核心代码解说

• 数据库连担当理
  

1. // 加载数据库驱动
2. Class.forName("com.mysql.cj.jdbc.Driver");
3. // 建立数据库连接
4. conn = DriverManager.getConnection(url, dbUsername, dbPassword);

复制代码

• 使用JDBC毗连MySQL数据库
  
• 数据库毗连信息硬编码在Servlet中(不保举，后续会讲缘故原由)
  

• SQL查询与防注入
  

1. String sql = "SELECT * FROM userspasswd WHERE username = ? AND password = ?";
2. stmt = conn.prepareStatement(sql);
3. stmt.setString(1, username);
4. stmt.setString(2, password);

复制代码

• 使用预编译语句(PreparedStatement)防止SQL注入
  
• 通过参数化查询提高安全性
  

• 效果处置惩罚
  

1. if (rs.next()) {
2.     String displayName = rs.getString("username");
3.     request.getSession().setAttribute("displayName", displayName);
4.     response.sendRedirect("index.jsp");
5. } else {
6.     request.setAttribute("error", "用户名或密码错误");
7.     request.getRequestDispatcher("login.jsp").forward(request, response);
8. }

复制代码

• 通过ResultSet判定是否查询到用户记载
  
• 使用Session存储用户信息
  
• 使用重定向和转发实现页面跳转
  

• 资源管理
  

1. finally {
2.     try {
3.         if (rs != null) rs.close();
4.         if (stmt != null) stmt.close();
5.         if (conn != null) conn.close();
6.     } catch (SQLException e) {
7.         e.printStackTrace();
8.     }
9. }

复制代码

• 在finally块中关闭数据库资源
  
• 按逆序关闭ResultSet、Statement和Connection
  

第四步、创建数据库

• 完成上面的代码之后，我们接着创建一个数据库，点击数据库按钮
  
  
  
  
• 然后找到加号，点击数据源，找到MySQL
  
  
  
  
• 在里面输入我们的密码和用户名
  
  
  
  
• 找到摆设架构，里面就有我们的数据库文件
  
  
  
  
  
  
  
• 毗连数据库的代码名字要求与我们的数据库匹配一致，这里我毗连了2023se3
  

• 单击右键
  
• 在数据库里根据我们的HTML表格格式创建一张表
  
• 新建查询语句
  

1. CREATE TABLE `userpasswd` (
2.     `username` VARCHAR(255) NOT NULL,
3.     `password` VARCHAR(255) NOT NULL,
4.     PRIMARY KEY (`username`)
5. ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4;

复制代码

• 然后加入数据
  

1. INSERT INTO `userpasswd` (username, password) VALUES
2. ('1', '123'),
3. ('root', '123456'),

复制代码

第五步、导入并修改JSP登录文件

• 在web下，我们单击右键新建一个jsp文件，名字为login.jsp
  

• 然后在里面加入我们的HTML文件
  

1. <!DOCTYPE html>
2. <html lang="zh-CN">
3. <head>
4.     <meta charset="utf-8">
5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     <meta name="viewport" content="width=device-width, initial-scale=1">
7.     <meta name="description" content="">
8.     <meta name="author" content="">
9.     <title>Sphinx - Login</title>
10.     <link href="css/bootstrap.min.css" rel="stylesheet">
11.     <link href="css/login.css" rel="stylesheet">
12.     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
13.     <!--[if lt IE 9]>
14.     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
15.     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
16.     <![endif]-->
17. </head>
18. <body>
19. <div class="container">
20.     <div class="row login">
21.         <div class="col-md-4 col-md-offset-4">
22.             <div class="panel panel-default">
23.                 <div class="panel-heading">
24.                     <h4 class="panel-title text-center login-title"> pha-Admin 登录 </h4>
25.                 </div>
26.                 <div class="panel-body">
27.                     <form action="LoginServlet" method="post" role="form">
28.                         <fieldset>
29.                             <div class="form-group">
30.                                 <div class="input-group">
31.                                     <span class="input-group-addon" id="username"><i
32.                                             class="glyphicon glyphicon-user"></i></span>
33.                                     <input type="text" class="form-control" name="username" placeholder="用户名"
34.                                            aria-describedby="username">
35.                                 </div>
36.                             </div>
37.                             <div class="form-group">
38.                                 <div class="input-group">
39.                                     <span class="input-group-addon" id="password"><i
40.                                             class="glyphicon glyphicon-lock"></i></span>
41.                                     <input type="password" class="form-control" name="password" placeholder="密码"
42.                                            aria-describedby="password">
43.                                 </div>
44.                             </div>
45.                             <div class="checkbox">
46.                                 <label class="login-remember">
47.                                     <input name="remember" type="checkbox" value="Remember Me"> 记住我
48.                                 </label>
49.                             </div>
50.                             <input type="submit" class="btn btn-success btn-block" value="登录">
51.                         </fieldset>
52.                     </form>
53.                 </div>
54.             </div>
55.         </div>
56.     </div>
57. </div>
58. <script src="js/jquery.js"></script>
59. <script src="js/bootstrap.min.js"></script>
60. </body>
61. </html>

复制代码

• 修改HTML里面from表单文件，毗连我们的LoginServlet类
  

1. <form role="form">

复制代码

1. <form action="LoginServlet" method="post" role="form">

复制代码

• 在HTML里面的input输入字段加入name="username"和name="password"，这些数据会被提交到服务器
  
  
  
  

• 将HTML文件提交按钮改为<input type="submit">，点击后会将表单数据（用户名和密码）发送到LoginServlet举行处置惩罚
  

末了运行项目

我们的HTML文件就只有数据库里面的用户和密码才气举行登录跳转了

---

以上就是这篇博客的全部内容，下一篇我们将继续探索JSP的更多精彩内容。
   我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343
我的JSP知识文章专栏
欢迎来阅读指出不敷
https://blog.csdn.net/2402_83322742/category_12950980.html?spm=1001.2014.3001.5482
  

非常感谢您的阅读，喜欢的话记得三连哦

[table][/table]

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。