Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示，实现前后端交互_idea如何实现数据可视化

Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示，实现前后端交互

• 前言
• 一、JDBC 核心接口和类：数据库连接的“工具箱”
• • 1. 常用的 2 个“关键类”
  • 2. 必须掌握的 5 个“核心接口”
• 二、创建 JDBC 程序的步骤
• • 1. 第一步：加载数据库驱动
  • 2. 第二步：定义数据库连接地址
  • 3. 第三步：建立连接
  • 4. 第四步：创建 Statement
  • 5. 第五步：执行 SQL 查询
  • 6. 第六步：处理结果集
  • 7. 第七步：关闭资源
  • 完整代码示例
• 三、实际操作教程
• • 第一步、导入数据库maven
  • 第二步、创建并导入web库
  • 第三步、连接本地数据库的java代码
  • 第四步、创建数据库
  • 第五步、在JSP代码中获取session
  • 第六步、编译运行环境
• 三、本文所有代码
• • User类
  • UserListServlet类
  • DBConnection类
  • pom.xml文件
  • user.jsp文件

前言

• 在前序的 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); // 第四步：创建Statement Statement 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的依赖项

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

• 导入之后的样子

• 配置好外部库
  

• 然后单击我们的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; // 用户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; } // 获取用户ID 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); }} 

第四步、创建数据库

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

• 然后找到加号，点击数据源，找到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>  用户管理</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文件

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

user.jsp文件

<!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\">  <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>   <div class=\"navbar-collapse collapse\"> <ul class=\"nav navbar-nav\"> <li class=\"active\"><a href=\"\"><span class=\"glyphicon glyphicon-home\"></span>  后台首页</a></li> <li><a href=\"/UserListServlet\"><span class=\"glyphicon glyphicon-user\"></span>  用户管理</a></li> <li><a href=\"machine.jsp\"><span class=\"glyphicon glyphicon-expand\"></span>  机器管理</a></li> <li><a href=\"service.jsp\"><span class=\"glyphicon glyphicon-tasks\"></span>  服务管理</a></li> <li><a href=\"log.jsp\"><span class=\"glyphicon glyphicon-list-alt\"></span>  日志管理</a></li> <li><a href=\"wiki.jsp\"><span class=\"glyphicon glyphicon-book\"></span>  使用文档</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\">  <span class=\"caret\"></span> </a> <ul class=\"dropdown-menu\" aria-labelledby=\"dLabel\"> <li><a href=\"index.jsp\"><span class=\"glyphicon glyphicon-cog\"></span>  个人设置</a></li> </ul> </li> <li><a href=\"#bbs\"><span class=\"glyphicon glyphicon-off\"></span>  退出</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> <div class=\"container\"> <div class=\"row\"> <div class=\"col-md-12\"> <p class=\"text-muted center\"> Copyright © 2017-2018  phachon@163.com   </p> </div> </div> </div></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

蚕丝被品牌