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

Ne0inhk

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

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

前言

  • 在之前的博客中，我们详细探讨了 JSTL 中 SQL 标签库和自定义标签库的基础用法，并展示了如何利用这些标签库实现 MySQL 数据库连接以及数据分页展示功能。
  • 本文将继续深入，介绍如何基于 MySQL 数据库实现用户登录验证功能，包括登录界面设计、用户身份验证以及登录成功 / 失败后的页面跳转处理。
我的个人主页，欢迎来阅读我的其他文章
https://blog.ZEEKLOG.net/2402_83322742?spm=1011.2415.3001.5343
我的JSP知识文章专栏
欢迎来阅读指出不足
https://blog.ZEEKLOG.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><!-- jstl表达式依赖--><dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl-api</artifactId><version>1.2</version></dependency><!-- taglibs 标签库依赖--><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.ZEEKLOG.net/2402_83322742/article/details/146980845?spm=1001.2014.3001.5501
Java-servlet-Web环境搭建（下）详细讲解利用maven和tomcat搭建Java-servlet环境
https://blog.ZEEKLOG.net/2402_83322742/article/details/145998804
在这里插入图片描述

第二步、创建并导入web库

在web-INF文件里创建一个lib文件，并导入我们的库文件

在这里插入图片描述


在这里插入图片描述

然后在工件里，找到web应用程序展开型，找到我们刚刚添加的MySQLweb文件

在这里插入图片描述

在MySQLtest里面添加web文件

在这里插入图片描述


在这里插入图片描述

我们新建了一个MySQLtest的模块，在里面单击右键，打开模板设置

在这里插入图片描述

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

  • 接着在java类里面添加以下代码

首先新建一个java类LoginServlet

在这里插入图片描述


在这里插入图片描述

LoginServlet类

packageorg.example;importjava.io.IOException;importjava.io.Serial;importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.PreparedStatement;importjava.sql.ResultSet;importjava.sql.SQLException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;@WebServlet("/LoginServlet")publicclassLoginServletextendsHttpServlet{@Serialprivatestaticfinallong serialVersionUID =1L;protectedvoiddoPost(HttpServletRequest request,HttpServletResponse response)throwsServletException,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中(不推荐，后续会讲原因)
  1. SQL查询与防注入
String sql ="SELECT * FROM userspasswd WHERE username = ? AND password = ?"; stmt = conn.prepareStatement(sql); stmt.setString(1, username); stmt.setString(2, password);
  • 使用预编译语句(PreparedStatement)防止SQL注入
  • 通过参数化查询提高安全性
  1. 结果处理
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存储用户信息
  • 使用重定向和转发实现页面跳转
  1. 资源管理
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

第四步、创建数据库

  • 连接数据库的代码名字要求与我们的数据库匹配一致，这里我连接了2023se3

找到部署架构，里面就有我们的数据库文件

在这里插入图片描述


在这里插入图片描述

在里面输入我们的密码和用户名

在这里插入图片描述

然后找到加号，点击数据源，找到MySQL

在这里插入图片描述

完成上面的代码之后，我们接着创建一个数据库，点击数据库按钮

在这里插入图片描述
在这里插入图片描述
  • 单击右键
  • 在数据库里根据我们的HTML表格格式创建一张表
  • 新建查询语句
在这里插入图片描述
CREATETABLE`userpasswd`(`username`VARCHAR(255)NOTNULL,`password`VARCHAR(255)NOTNULL,PRIMARYKEY(`username`))ENGINE=InnoDBDEFAULTCHARSET= utf8mb4;
  • 然后加入数据
INSERTINTO`userpasswd`(username, password)VALUES('1','123'),('root','123456'),
在这里插入图片描述

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

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

  • 然后在里面加入我们的HTML文件
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content=""><title>Sphinx - Login</title><linkhref="css/bootstrap.min.css"rel="stylesheet"><linkhref="css/login.css"rel="stylesheet"><linkhref="font-awesome/css/font-awesome.min.css"rel="stylesheet"type="text/css"><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body><divclass="container"><divclass="row login"><divclass="col-md-4 col-md-offset-4"><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title text-center login-title"> pha-Admin 登录 </h4></div><divclass="panel-body"><formaction="LoginServlet"method="post"role="form"><fieldset><divclass="form-group"><divclass="input-group"><spanclass="input-group-addon"id="username"><iclass="glyphicon glyphicon-user"></i></span><inputtype="text"class="form-control"name="username"placeholder="用户名"aria-describedby="username"></div></div><divclass="form-group"><divclass="input-group"><spanclass="input-group-addon"id="password"><iclass="glyphicon glyphicon-lock"></i></span><inputtype="password"class="form-control"name="password"placeholder="密码"aria-describedby="password"></div></div><divclass="checkbox"><labelclass="login-remember"><inputname="remember"type="checkbox"value="Remember Me"> 记住我 </label></div><inputtype="submit"class="btn btn-success btn-block"value="登录"></fieldset></form></div></div></div></div></div><scriptsrc="js/jquery.js"></script><scriptsrc="js/bootstrap.min.js"></script></body></html>
在这里插入图片描述
  • 修改HTML里面from表单文件，连接我们的LoginServlet类
在这里插入图片描述
<formrole="form">
<formaction="LoginServlet"method="post"role="form">

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

在这里插入图片描述
在这里插入图片描述
  • 将HTML文件提交按钮改为<input type="submit">，点击后会将表单数据（用户名和密码）发送到LoginServlet进行处理
在这里插入图片描述
在这里插入图片描述


最后运行项目

在这里插入图片描述

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

以上就是这篇博客的全部内容，下一篇我们将继续探索JSP的更多精彩内容。

我的个人主页，欢迎来阅读我的其他文章
https://blog.ZEEKLOG.net/2402_83322742?spm=1011.2415.3001.5343
我的JSP知识文章专栏
欢迎来阅读指出不足
https://blog.ZEEKLOG.net/2402_83322742/category_12950980.html?spm=1001.2014.3001.5482
非常感谢您的阅读，喜欢的话记得三连哦
在这里插入图片描述

Read more

Re：从零开始的 C++ 入門篇（十一）：全站最全面的C/C++内存管理的底层剖析与硬核指南

Re：从零开始的 C++ 入門篇（十一）：全站最全面的C/C++内存管理的底层剖析与硬核指南

◆ 博主名称： 晓此方-ZEEKLOG博客 大家好，欢迎来到晓此方的博客。 ⭐️C++系列个人专栏： Re：从零开始的C++_晓此方的博客-ZEEKLOG博客  ⭐️踏破千山志未空，拨开云雾见晴虹。 人生何必叹萧瑟，心在凌霄第一峰 目录 0.1概要&序論 一，布局模型与常见误区解析 1.1C/C++内存布局 1.2内存布局易误解点 二，复习C语言的内存管理方法 2.1malloc 2.2calloc 2.3relloc 2.4free 2.5罗列常见的内存管理错误 三，C++内存管理方法 3.1new/delete管理体系 3.1.1开辟单个空间与释放 3.1.2开辟多个连续的空间与释放

By Ne0inhk
【C++】C++新增特性解析：Lambda表达式、包装器与绑定的应用

【C++】C++新增特性解析：Lambda表达式、包装器与绑定的应用

C++语法相关知识点可以通过点击以下链接进行学习一起加油！命名空间缺省参数与函数重载C++相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C++内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与QueuePriority Queue与仿函数模板进阶-模板特化面向对象三大特性-继承机制面向对象三大特性-多态机制STL 树形结构容器二叉搜索树AVL树红黑树红黑树封装map/set哈希-开篇闭散列-模拟实现哈希哈希桶-模拟实现哈希哈希表封装 unordered_map 和 unordered_setC++11 新特性：序章右值引用、移动语义、万能引用实现完美转发可变参数模板与emplace系列 大家好，我是店小二。在这篇文章中，我们将深入探讨C++11的新特性——Lambda表达式、包装器与绑定的应用。如果在阅读过程中有不清楚的地方或发现任何错误，欢迎随时私信交流探讨。 🌈个人主页：是店小二呀 🌈C语言专栏：C语言 🌈C++专栏： C++ 🌈初阶数据结构专栏： 初阶数据结构

By Ne0inhk
C++波澜壮阔40年|类和对象篇：拷贝构造与赋值重载的演进与实现

C++波澜壮阔40年|类和对象篇：拷贝构造与赋值重载的演进与实现

🔥@雾忱星： 个人主页 👀专栏：《数据结构与算法入门指南》、《C++学习之旅》 💪学习阶段：C/C++、数据结构与算法 ⏳“人理解迭代，神理解递归。” 文章目录 * 引言 * 一、拷贝构造函数 * 1.1 解析：拷贝构造特点 * 1.2 关键：拷贝构造的调用 * 二、赋值运算符重载 * 2.1 铺垫：运算符重载特点 * 2.1.1 核心：理解运算符重载 * 2.2 进阶：赋值运算符重载特点 * 2.2 核心：理解赋值运算符重载 * 总结 引言 在C++面向对象编程中，对象的复制操作无处不在。无论是函数传参、返回值传递，

By Ne0inhk
初学者：《C++ STL容器入门：手把手教你使用常用容器》

初学者：《C++ STL容器入门：手把手教你使用常用容器》

🎬 博主名称：个人主页 🔥 个人专栏: 《算法通关》，《Java讲解》 ⛺️心简单，世界就简单 目录 序言 vector 倍增思想： 一，初始化 常用函数 遍历方式 黑科技 pair 定义方式 取出元素方式 构造一个pair 用来干嘛 string 常用函数 操作 queue队列 priority_queue优先队列 常用函数 如何构造小根堆 stack 栈 常用函数 deque 双端队列 set，multiset 常用函数 map，multimap unordered_set,  unordered_map,   unordered_multiset,  unordered_multimap 序言 我们今天来讲一下 vector

By Ne0inhk