---

前言

• 在前序的 JSP 基礎教程中，我們已經掌握了動態頁面的核心語法、請求響應處理及基礎標簽的使用方法，初步構建了基于 JSP 的 Web 開發認知。
• 但在實際項目中，動態頁面的價值往往需要與數據庫結合才能充分釋放 ——如何讓 JSP 頁面 “活” 起來？關鍵在于讓頁面能夠動態讀取并展示數據庫中的實時數據。

本次實戰教程將聚焦 “數據可視化展示” 這一核心場景，帶領讀者打通 “IDEA 開發環境→MySQL 數據庫→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

---

一、JDBC 核心接口和類：數據庫連接的“工具箱”

JDBC（Java Database Connectivity）是一套讓 Java 程序能夠連接和操作數據庫的工具，就像一個“工具箱”。你用它來和數據庫打交道，就像用鑰匙開門一樣。

1. 常用的 2 個“關鍵類”

這兩個類就像是“工具箱”里的“常用工具”：

• DriverManager：這個類的作用是幫助我們建立數據庫連接。它就像是一個“中介”，幫你找到合適的鑰匙（驅動程序）來打開數據庫的門。
• Connection：這個類代表了和數據庫的連接。一旦連接建立，你就可以通過它和數據庫進行通信，比如發送指令（SQL 語句）。

2. 必須掌握的 5 個“核心接口”

接口可以理解為一種“規范”，規定了某些功能的實現方式。這 5 個接口是 JDBC 的核心：

• Driver：定義了數據庫驅動程序需要實現的功能，比如如何連接到數據庫。
• Connection：表示和數據庫的連接，你可以通過它發送 SQL 語句和接收結果。
• Statement：用來執行 SQL 語句的接口。你可以通過它發送查詢或更新數據庫的指令。
• ResultSet：用來接收查詢結果的接口。當你執行查詢操作后，結果會以表格的形式存儲在這個對象里。
• PreparedStatement：這是一個特殊的 Statement，可以預編譯 SQL 語句，提高執行效率，還可以防止 SQL 注入攻擊。

二、創建 JDBC 程序的步驟

創建一個 JDBC 程序，就像按照步驟組裝一個玩具。以下是詳細的步驟：

1. 第一步：加載數據庫驅動

這一步就像是告訴 Java 程序，你準備用哪種“鑰匙”去開門。你需要加載數據庫驅動程序，讓 Java 知道如何連接到數據庫。
代碼示例：

Class.forName("com.mysql.cj.jdbc.Driver");

這里 com.mysql.cj.jdbc.Driver 是 MySQL 數據庫驅動的類名。

2. 第二步：定義數據庫連接地址

這一步是告訴 Java 程序，數據庫在哪里。連接地址包括數據庫的類型、服務器地址、數據庫名稱等信息。
例如：

String url = "jdbc:mysql://localhost:3306/mydatabase";

這里 jdbc:mysql:// 表示使用 MySQL 數據庫，localhost:3306 是數據庫服務器的地址和端口，mydatabase 是數據庫名稱。

3. 第三步：建立連接

這一步是用 DriverManager 類，根據前面定義的連接地址和用戶名、密碼，建立和數據庫的連接。
代碼示例：

Connection conn = DriverManager.getConnection(url, "username", "password");

這里 username 和 password 是登錄數據庫的用戶名和密碼。

4. 第四步：創建 Statement

這一步是創建一個 Statement 對象，用來執行 SQL 語句。
代碼示例：

Statement stmt = conn.createStatement();

5. 第五步：執行 SQL 查詢

這一步是通過 Statement 對象發送 SQL 語句到數據庫。例如，查詢數據庫中的數據：

String sql = "SELECT * FROM mytable";
ResultSet rs = stmt.executeQuery(sql);

這里 mytable 是表名，SELECT * FROM mytable 是 SQL 查詢語句。

6. 第六步：處理結果集

這一步是處理返回的結果集（ResultSet）。你可以通過循環遍歷結果集，獲取每一行的數據。
代碼示例：

while (rs.next()) {String column1 = rs.getString("column1");int column2 = rs.getInt("column2");System.out.println(column1 + ", " + column2);
}

這里 column1 和 column2 是表中的列名。

7. 第七步：關閉資源

這一步非常重要，是為了釋放數據庫連接和資源，避免浪費。
代碼示例：

rs.close();
stmt.close();
conn.close();

完整代碼示例

以下是一個完整的 JDBC 程序示例，結合了上述所有步驟：

import java.sql.*;public class JdbcExample {public static void main(String[] args) {try {// 第一步：加載數據庫驅動Class.forName("com.mysql.cj.jdbc.Driver");// 第二步：定義數據庫連接地址String url = "jdbc:mysql://localhost:3306/mydatabase";String user = "username";String password = "password";// 第三步：建立連接Connection conn = DriverManager.getConnection(url, user, password);// 第四步：創建StatementStatement stmt = conn.createStatement();// 第五步：執行SQL查詢String sql = "SELECT * FROM mytable";ResultSet rs = stmt.executeQuery(sql);// 第六步：處理結果集while (rs.next()) {String column1 = rs.getString("column1");int column2 = rs.getInt("column2");System.out.println(column1 + ", " + column2);}// 第七步：關閉資源rs.close();stmt.close();conn.close();} catch (ClassNotFoundException e) {System.out.println("數據庫驅動未找到！");e.printStackTrace();} catch (SQLException e) {System.out.println("數據庫連接或操作失敗！");e.printStackTrace();}}
}

下面我們來實際操作一下

三、實際操作教程

題目要求

• 使用 IntelliJ IDEA 開發環境，通過 JDBC 連接關系型數據庫（如 MySQL），查詢指定表中的數據，并將數據以結構化形式（如表格）動態渲染到 JSP 頁面的用戶界面中，實現數據的可視化展示

第一步、導入數據庫maven

• 首先我們需要配置好自己的maven環境
• maven環境必須是全英文，不然運行不了

我的jsp環境搭建博客https://blog.csdn.net/2402_83322742/article/details/146980845?spm=1001.2014.3001.5501

• 接著需要在maven的網站里找到數據庫jdbc的依賴項
  這里我直接將jdbc的依賴項放出來
• maven官方網站https://maven.apache.org/

<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version>
</dependency>

• 同時我們還需要導入jsp-api依賴項和javax.servlet-api依賴項

 <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>

• 最后由于需要用到jstl，我們需要加入jstl和taglibs的依賴項

<!-- 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>

• 導入之后的樣子

• 配置好外部庫
  

• 然后單擊我們的SE1，新建一個模板
  

第二步、創建并導入web庫

• 我們新建了一個MySQLtest的模塊，在里面單擊右鍵，打開模板設置
  
• 在MySQLtest里面添加web文件
  
  
• 然后在工件里，找到web應用程序展開型，找到我們剛剛添加的MySQLweb文件
  
• 在web-INF文件里創建一個lib文件，并導入我們的庫文件
  
  

第三步、連接本地數據庫的java代碼

• 首先新建三個java類UserListServlet，User，DBConnection
  
  
• 接著在java類里面添加以下代碼

user類

package org.example;// 表示用戶信息的實體類
public class User {private int id; // 用戶IDprivate String username; // 用戶名private String email; // 用戶郵箱private String phone; // 用戶電話private String role; // 用戶角色private String createTime; // 用戶創建時間// 構造函數，參數順序和類型要與查詢結果列對應public User(int id, String username, String email, String phone, String role, String createTime) {this.id = id;this.username = username;this.email = email;this.phone = phone;this.role = role;this.createTime = createTime;}// 獲取用戶IDpublic int getId() { return id; }// 獲取用戶名public String getUsername() { return username; }// 獲取用戶郵箱public String getEmail() { return email; }// 獲取用戶電話public String getPhone() { return phone; }// 獲取用戶角色public String getRole() { return role; }// 獲取用戶創建時間public String getCreateTime() { return createTime; }
}

UserListServlet類

package org.example;import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;// 處理用戶列表請求的 Servlet
@WebServlet("/UserListServlet")
public class UserListServlet extends HttpServlet {// 處理 GET 請求protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {List<User> userList = new ArrayList<>();String sql = "SELECT id, user_name, email, phone, role, create_time FROM users";// 從數據庫查詢用戶信息try (Connection conn = DBConnection.getConnection();PreparedStatement pstmt = conn.prepareStatement(sql);ResultSet rs = pstmt.executeQuery()) {while (rs.next()) {int id = rs.getInt("id");String userName = rs.getString("user_name");String email = rs.getString("email");String phone = rs.getString("phone");String role = rs.getString("role");String createTime = rs.getString("create_time");User user = new User(id, userName, email, phone, role, createTime);userList.add(user);}} catch (SQLException e) {// 發生數據庫操作異常時，向客戶端發送錯誤響應response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);response.getWriter().println("Database error occurred. Please try again later.");return;}// 將用戶列表存入會話HttpSession requestSession = request.getSession(true);requestSession.setAttribute("userList", userList);// 轉發請求到 JSP 頁面request.getRequestDispatcher("user.jsp").forward(request, response);}
}    

第四步、創建數據庫

• 完成上面的代碼之后，我們接著創建一個數據庫，點擊數據庫按鈕
  

• 然后找到加號，點擊數據源，找到MySQL
  

• 在里面輸入我們的密碼和用戶名
  

• 找到部署架構，里面就有我們的數據庫文件
  
  

• 連接數據庫的代碼名字要求與我們的數據庫匹配一致，這里我連接了2023se3
  

• SQL查詢語句要查詢具體的表文件，這里我查詢了user文件
  

• 然后點擊運行按鈕，如果在終端顯示數據庫連接成功，則代表環境搭建成功
  

• 然后構建我們的數據庫
  

第五步、在JSP代碼中獲取session

• 接下來我們準備好我們的jsp文件
  
• 然后在jsp文件添加以下代碼

<tbody><c:forEach items="${sessionScope.userList}" var="user"><tr><td class="center">${user.id}</td><td>${user.username}</td><td>${user.email}</td><td>${user.phone}</td><td class="center">${user.role}</td><td class="center">${user.createTime}</td><td class="center"><a name="remove" onclick="Common.confirm('確認要屏蔽嗎？')"><i class="glyphicon glyphicon-remove"></i>屏蔽</a></td></tr></c:forEach>
</tbody>

• 然后在jsp文件開頭加入以下文件獲取我們userlistservletsession獲得的數據庫的值

<li><a href="/UserListServlet"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用戶管理</a></li>

第六步、編譯運行環境

• 找到最上面的編輯配置
  
  在里面配置好Tomcat服務器

• 啟動環境
  
• 然后點擊用戶管理刷新頁面

• 這樣我們的數據庫的信息便打印到屏幕上了

三、本文所有代碼

User類

package org.example;
public class User {private int id;private String username;private String email;private String phone;private String role;private String createTime;// 構造函數參數順序、類型必須與查詢結果列順序、類型一致public User(int id, String username, String email, String phone, String role, String createTime) {this.id = id;this.username = username;this.email = email;this.phone = phone;this.role = role;this.createTime = createTime;}// 確保所有屬性都有對應的 getter 方法public int getId() { return id; }public String getUsername() { return username; }public String getEmail() { return email; }public String getPhone() { return phone; }public String getRole() { return role; }public String getCreateTime() { return createTime; }
}

UserListServlet類

package org.example;import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;// 處理用戶列表請求的 Servlet
@WebServlet("/UserListServlet")
public class UserListServlet extends HttpServlet {// 處理 GET 請求protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {List<User> userList = new ArrayList<>();String sql = "SELECT id, user_name, email, phone, role, create_time FROM users";// 從數據庫查詢用戶信息try (Connection conn = DBConnection.getConnection();PreparedStatement pstmt = conn.prepareStatement(sql);ResultSet rs = pstmt.executeQuery()) {while (rs.next()) {int id = rs.getInt("id");String userName = rs.getString("user_name");String email = rs.getString("email");String phone = rs.getString("phone");String role = rs.getString("role");String createTime = rs.getString("create_time");User user = new User(id, userName, email, phone, role, createTime);userList.add(user);}} catch (SQLException e) {// 發生數據庫操作異常時，向客戶端發送錯誤響應response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);response.getWriter().println("Database error occurred. Please try again later.");return;}// 將用戶列表存入會話HttpSession requestSession = request.getSession(true);requestSession.setAttribute("userList", userList);// 轉發請求到 JSP 頁面request.getRequestDispatcher("user.jsp").forward(request, response);}
}

DBConnection類

package org.example;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;public class DBConnection {private static final String URL = "jdbc:mysql://localhost:3306/2023se3";private static final String USER = "root";private static final String PASSWORD = "123456";public static Connection getConnection() {try {Class.forName("com.mysql.cj.jdbc.Driver");Connection conn = DriverManager.getConnection(URL, USER, PASSWORD);System.out.println("數據庫連接成功");return conn;} catch (ClassNotFoundException | SQLException e) {throw new RuntimeException("數據庫連接失敗", e);}}public static void main(String[] args) {DBConnection.getConnection();}
}

pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>SE1</artifactId><version>1.0-SNAPSHOT</version><packaging>pom</packaging><modules><module>MySQLtest</module></modules><properties><maven.compiler.source>17</maven.compiler.source><maven.compiler.target>17</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><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></project>

user.jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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 , user-scalable=no"><title>pha-Admin</title><link rel="stylesheet" href="css/bootstrap.min.css"/><link rel="stylesheet" href="css/bootstrap-maizi.css"/><link rel="stylesheet" href="css/content-style.css"/><link rel="stylesheet" href="css/mricode.pagination.css"/><link rel="stylesheet" href="css/jquery.fancybox.css"/><link rel="stylesheet" href="css/sweetalert.css"/>
</head>
<body>
<!--導航-->
<nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><!--小屏幕導航按鈕和logo--><div class="navbar-header"><button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.jsp" class="navbar-brand"> pha-Admin</a></div><!--小屏幕導航按鈕和logo--><!--導航--><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href=""><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后臺首頁</a></li><li><a href="/UserListServlet"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用戶管理</a></li><li><a href="machine.jsp"><span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;機器管理</a></li><li><a href="service.jsp"><span class="glyphicon glyphicon-tasks"></span>&nbsp;&nbsp;服務管理</a></li><li><a href="log.jsp"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;日志管理</a></li><li><a href="wiki.jsp"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;使用文檔</a></li></ul><ul class="nav navbar-nav navbar-right"><li class="dropdown"><a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><%String username = (String) session.getAttribute("username");if (username != null) {out.print(username);} else {out.print("admin");}%><span class="caret"></span></a><ul class="dropdown-menu" aria-labelledby="dLabel"><li><a href="index.jsp"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;個人設置</a></li></ul></li><li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li></ul></div><!--導航--></div>
</nav>
<!--導航-->
<div class="container"><div class="row"><div class="col-md-12"><div class="panel-body" style="padding: 15px 0;"><ul class="nav nav-tabs"><li class="active"><a href="user.jsp">用戶列表</a></li><li class=""><a href="user_form.jsp">添加用戶</a></li></ul></div><div class="panel-body"><div class="row"><form><div class="col-md-3 col-lg-offset-9"><div class="input-group"><input class="form-control" type="text" value="" placeholder="用戶名" name="keyword"><span class="input-group-btn"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button></span></div></div></form></div></div><div class="panel panel-default"><div class="table-responsive"><table class="table table-bordered"><thead><tr><th class="w8p">id</th><th class="w18p">用戶名</th><th class="w18p">郵箱</th><th class="w13p">手機</th><th class="w10p">角色</th><th class="w15p">創建時間</th><th class="w15p">操作</th></tr></thead><tbody><c:forEach items="${sessionScope.userList}" var="user"><tr><td class="center">${user.id}</td><td>${user.username}</td><td>${user.email}</td><td>${user.phone}</td><td class="center">${user.role}</td><td class="center">${user.createTime}</td><td class="center"><a name="remove" onclick="Common.confirm('確認要屏蔽嗎？')"><i class="glyphicon glyphicon-remove"></i>屏蔽</a></td></tr></c:forEach></tbody></table></div><div class="panel-footer"><div class="row"><div class="col-md-8 m-pagination" id="paginator"></div></div></div></div></div></div>
</div>
<!--footer-->
<footer><div class="container"><div class="row"><div class="col-md-12"><p class="text-muted center">Copyright&nbsp;?&nbsp;2017-2018&nbsp;&nbsp;phachon@163.com&nbsp;&nbsp;</p></div></div></div>
</footer>
<!--footer-->
<script src="js/plugins/jquery/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/pagination/mricode.pagination.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/common/common.js"></script>
<script src="js/module/account.js"></script>
<script type="text/javascript">var pageData = [];pageData.push({'pageSize': '10', 'total': '1000', 'pageIndex': '2'});Common.paginator("#paginator", pageData);Account.bindFancyBox();
</script>
</body>
</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

非常感謝您的閱讀，喜歡的話記得三連哦