Jsp技术入门指南【十四】实现基于MySQL+JDBC+JSP数据库验证的登录界面与登录跳转功能_jdbc servlet mysql实现登录

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

• 前言
• 第一步：加入驱动包与Maven
• 第二步、创建并导入web库
• 第三步、连接本地数据库的java代码
• • 核心代码讲解
• 第四步、创建数据库
• 第五步、导入并修改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的驱动包来构建环境

<dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.3</version> <scope>provided</scope> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency>  <dependency> <groupId>javax.servlet.jsp.jstl</groupId> <artifactId>jstl-api</artifactId> <version>1.2</version> </dependency>  <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> </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类

package org.example;import java.io.IOException;import java.io.Serial;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet(\"/LoginServlet\")public class LoginServlet extends HttpServlet { @Serial private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter(\"username\"); String password = request.getParameter(\"password\"); // 数据库连接信息 String url = \"jdbc:mysql://localhost:3306/2023se3\"; String dbUsername = \"root\"; String dbPassword = \"123456\"; Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { // 加载数据库驱动 Class.forName(\"com.mysql.cj.jdbc.Driver\"); // 建立数据库连接 conn = DriverManager.getConnection(url, dbUsername, dbPassword); // 查询用户信息 String sql = \"SELECT * FROM userspasswd WHERE username = ? AND password = ?\"; stmt = conn.prepareStatement(sql); stmt.setString(1, username); stmt.setString(2, password); rs = stmt.executeQuery(); if (rs.next()) { String displayName = rs.getString(\"username\"); // 获取数据库中的显示名 request.getSession().setAttribute(\"displayName\", displayName); // 存入会话 response.sendRedirect(\"index.jsp\"); } else { // 登录失败，返回登录页并给出提示 request.setAttribute(\"error\", \"用户名或密码错误\"); request.getRequestDispatcher(\"login.jsp\").forward(request, response); } } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); // 数据库连接或查询出错，返回登录页并给出提示 request.setAttribute(\"error\", \"数据库连接出错，请稍后再试\"); request.getRequestDispatcher(\"login.jsp\").forward(request, response); } finally { // 关闭数据库连接和资源 try { if (rs != null) rs.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); } } }} 

核心代码讲解

1. 数据库连接管理

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

• 使用JDBC连接MySQL数据库
• 数据库连接信息硬编码在Servlet中(不推荐，后续会讲原因)

2. SQL查询与防注入

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

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

3. 结果处理

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

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

4. 资源管理

finally { try { if (rs != null) rs.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); }}

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

第四步、创建数据库

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

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

CREATE TABLE `userpasswd` ( `username` VARCHAR(255) NOT NULL, `password` VARCHAR(255) NOT NULL, PRIMARY KEY (`username`)) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4;

• 然后加入数据

INSERT INTO `userpasswd` (username, password) VALUES(\'1\', \'123\'),(\'root\', \'123456\'),

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

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

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

<!DOCTYPE html><html lang=\"zh-CN\"><head> <meta charset=\"utf-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <meta name=\"description\" content=\"\"> <meta name=\"author\" content=\"\"> <title>Sphinx - Login</title> <link href=\"css/bootstrap.min.css\" rel=\"stylesheet\"> <link href=\"css/login.css\" rel=\"stylesheet\"> <link href=\"font-awesome/css/font-awesome.min.css\" rel=\"stylesheet\" type=\"text/css\"> </head><body><div class=\"container\"> <div class=\"row login\"> <div class=\"col-md-4 col-md-offset-4\"> <div class=\"panel panel-default\"> <div class=\"panel-heading\">  <h4 class=\"panel-title text-center login-title\"> pha-Admin 登录 </h4> </div> <div class=\"panel-body\">  <form action=\"LoginServlet\" method=\"post\" role=\"form\"> <fieldset> <div class=\"form-group\"> <div class=\"input-group\">  <span class=\"input-group-addon\" id=\"username\"><iclass=\"glyphicon glyphicon-user\"></i></span>  <input type=\"text\" class=\"form-control\" name=\"username\" placeholder=\"用户名\"  aria-describedby=\"username\"> </div> </div> <div class=\"form-group\"> <div class=\"input-group\">  <span class=\"input-group-addon\" id=\"password\"><iclass=\"glyphicon glyphicon-lock\"></i></span>  <input type=\"password\" class=\"form-control\" name=\"password\" placeholder=\"密码\"  aria-describedby=\"password\"> </div> </div> <div class=\"checkbox\"> <label class=\"login-remember\">  <input name=\"remember\" type=\"checkbox\" value=\"Remember Me\"> 记住我 </label> </div> <input type=\"submit\" class=\"btn btn-success btn-block\" value=\"登录\"> </fieldset>  </form> </div> </div> </div> </div></div><script src=\"js/jquery.js\"></script><script src=\"js/bootstrap.min.js\"></script></body></html>

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

<form role=\"form\">

 <form action=\"LoginServlet\" method=\"post\" role=\"form\">

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

• 将HTML文件提交按钮改为，点击后会将表单数据（用户名和密码）发送到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