Jsp技能入门指南【十三】基于 JSTL SQL 标签库实现 MySQL 数据库毗连与数据 ...

打印 上一主题 下一主题

主题 1927|帖子 1927|积分 5781


前言



  • 在上一篇博客中,我们介绍了 JSTL 中 SQL 标签库和自定义标签库 的基础用法。
  • 本文将团结 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
  
一、回顾SQL标签的内容

   我的JSTL SQL标签具体讲解博客链接
Jsp技能入门指南【十一】SQL标签库
https://blog.csdn.net/2402_83322742/article/details/147838670
Jsp技能入门指南【九】具体讲解JSTL
https://blog.csdn.net/2402_83322742/article/details/147312023
  1. 什么是JSTL SQL标签?

首先,我们需要知道两个关键词:JSTLSQL标签


  • JSTL:全称是 JSP Standard Tag Library(JSP标准标签库),是官方提供的一套现成的“标签工具”,专门用来简化JSP页面的开辟。用它可以少写很多Java代码,让页面更干净、更易读。
  • SQL标签:是JSTL里专门用来操作数据库的一组标签,比如毗连数据库、实行SQL语句、处理惩罚查询结果等。
2.为什么要用SQL标签?

假设你不用标签,直接在JSP里写Java代码连数据库,会像这样(非常麻烦):
  1. <%
  2. Class.forName("com.mysql.cj.jdbc.Driver");
  3. Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123456");
  4. Statement stmt = conn.createStatement();
  5. ResultSet rs = stmt.executeQuery("SELECT * FROM users");
  6. // 然后循环取数据...
  7. rs.close(); stmt.close(); conn.close();
  8. %>
复制代码
而用 SQL标签,只需要几行标签代码就能搞定,不用写复杂的Java毗连逻辑,对新手更友好!
3.第一步:引入SQL标签库

要使用SQL标签,必须先在JSP页面顶部“告诉欣赏器”:我要用这个标签库!
添加一行代码(固定格式,记着就行):
  1. <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
复制代码


  • prefix="sql":给标签库起个简称,后面用标签时都以 <sql:XXX> 情势调用(比如 <sql:setDataSource>)。
  • uri:标签库的“地址”,固定值,直接复制就行
4. SQL标签的核心功能:毗连数据库

毗连数据库是操作数据的第一步,SQL标签里用 <sql:setDataSource> 标签 来设置数据库信息,就像“告诉标签库你的数据库在哪、怎么登录”。
标签常用属性:

属性名作用示例值(以MySQL为例)driver数据库驱动类(必须写对!)com.mysql.cj.jdbc.Driverurl数据库地址(格式固定)jdbc:mysql://localhost:3306/数据库名user数据库用户名rootpassword数据库密码123456 示例代码(毗连到名为“test”的数据库):

  1. <sql:setDataSource
  2.     driver="com.mysql.cj.jdbc.Driver"
  3.     url="jdbc:mysql://localhost:3306/test"
  4.     user="root"
  5.     password="123456"
  6.     var="dbConn"  <!-- 给这个连接起个变量名,后面用 -->
  7. />
复制代码


  • 注意:需要提前把MySQL的JDBC驱动包(比如 mysql-connector-java-8.0.28.jar)放到项目的 WEB-INF/lib 目录下,否则会报错!
二、实例演示

接下来我们来实战一下




  • 标题要求创建一张HTML图片上的表,并且利用SQL标签库实现 MySQL 数据库毗连,将数据库表中的信息打印到显示器上
第一步:到场驱动包



  • 首先我们按照之前的那样到场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>
  8.         <dependency>
  9.             <groupId>javax.servlet.jsp</groupId>
  10.             <artifactId>javax.servlet.jsp-api</artifactId>
  11.             <version>2.3.3</version>
  12.             <scope>provided</scope>
  13.         </dependency>
  14.         <dependency>
  15.             <groupId>mysql</groupId>
  16.             <artifactId>mysql-connector-java</artifactId>
  17.             <version>8.0.33</version>
  18.         </dependency>
  19.         <!-- jstl表达式依赖-->
  20.         <dependency>
  21.             <groupId>javax.servlet.jsp.jstl</groupId>
  22.             <artifactId>jstl-api</artifactId>
  23.             <version>1.2</version>
  24.         </dependency>
  25.         <!-- taglibs 标签库依赖-->
  26.         <dependency>
  27.             <groupId>taglibs</groupId>
  28.             <artifactId>standard</artifactId>
  29.             <version>1.1.2</version>
  30.         </dependency>
  31.     </dependencies>
复制代码

第二步:设置maven



  • 接着我们需要设置好自己的maven情况
  • maven情况必须是全英文,不然运行不了
   我的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文件,并导入我们的库文件


第四步:导入jsp文件



  • 首先创建jsp文件

-


  • 导入我们的HTML代码

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: DELL
  4.   Date: 2025/5/13
  5.   Time: 20:34
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <!DOCTYPE html>
  10. <html lang="zh-CN">
  11. <head>
  12.   <meta charset="UTF-8">
  13.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14.   <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
  15.   <title>pha-Admin</title>
  16.   <link rel="stylesheet" href="css/bootstrap.min.css"/>
  17.   <link rel="stylesheet" href="css/bootstrap-maizi.css"/>
  18.   <link rel="stylesheet" href="css/content-style.css"/>
  19.   <link rel="stylesheet" href="css/mricode.pagination.css"/>
  20.   <link rel="stylesheet" href="css/jquery.fancybox.css"/>
  21.   <link rel="stylesheet" href="css/sweetalert.css"/>
  22. </head>
  23. <body>
  24. <!--导航-->
  25. <nav class="navbar navbar-inverse navbar-fixed-top">
  26.   <div class="container">
  27.     <!--小屏幕导航按钮和logo-->
  28.     <div class="navbar-header">
  29.       <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  30.         <span class="icon-bar"></span>
  31.         <span class="icon-bar"></span>
  32.         <span class="icon-bar"></span>
  33.       </button>
  34.       <a href="index.html" class="navbar-brand"> pha-Admin</a>
  35.     </div>
  36.     <!--小屏幕导航按钮和logo-->
  37.     <!--导航-->
  38.     <div class="navbar-collapse collapse">
  39.       <ul class="nav navbar-nav">
  40.         <li><a href="index.html"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页</a></li>
  41.         <li><a href="user.html"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
  42.         <li class="active"><a href="machine.html"><span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;机器管理</a></li>
  43.         <li><a href="service.html"><span class="glyphicon glyphicon-tasks"></span>&nbsp;&nbsp;服务管理</a></li>
  44.         <li><a href="log.html"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;日志管理</a></li>
  45.         <li><a href="wiki.html"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;使用文档</a></li>
  46.       </ul>
  47.       <ul class="nav navbar-nav navbar-right">
  48.         <li class="dropdown">
  49.           <a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  50.             admin
  51.             <span class="caret"></span>
  52.           </a>
  53.           <ul class="dropdown-menu" aria-labelledby="dLabel">
  54.             <li><a href="index.html"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
  55.           </ul>
  56.         </li>
  57.         <li><a href="#bbs"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
  58.       </ul>
  59.     </div>
  60.     <!--导航-->
  61.   </div>
  62. </nav>
  63. <!--导航-->
  64. <div class="container">
  65.   <div class="row">
  66.     <div class="col-md-12">
  67.       <div class="panel-body" style="padding: 15px 0;">
  68.         <ul class="nav nav-tabs">
  69.           <li class="active"><a href="#list" aria-controls="machine" role="tab" data-toggle="tab">机器列表</a></li>
  70.           <li><a href="#form" aria-controls="machine" role="tab" data-toggle="tab">添加机器</a></li>
  71.         </ul>
  72.       </div>
  73.       <div class="tab-content">
  74.         <div role="tabpanel" class="tab-pane active" id="list">
  75.           <div class="panel-body">
  76.             <div class="row">
  77.               <form>
  78.                 <div class="col-md-3 col-lg-offset-9">
  79.                   <div class="input-group">
  80.                     <input class="form-control" type="text" value="" placeholder="用户名" name="keyword">
  81.                     <span class="input-group-btn">
  82.                     <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
  83.                   </span>
  84.                   </div>
  85.                 </div>
  86.               </form>
  87.             </div>
  88.           </div>
  89.           <div class="panel panel-default">
  90.             <div class="table-responsive">
  91.               <table class="table table-bordered">
  92.                 <thead>
  93.                 <tr>
  94.                   <th class="w8p">id</th>
  95.                   <th class="w18p">域名</th>
  96.                   <th class="w18p">ip</th>
  97.                   <th class="w13p">sphinx路径</th>
  98.                   <th class="w10p">备注</th>
  99.                   <th class="w15p">创建时间</th>
  100.                   <th class="w15p">操作</th>
  101.                 </tr>
  102.                 </thead>
  103.                 <tbody>
  104.                 <tr>
  105.                   <td class="center">1</td>
  106.                   <td>sphinx.test.com.cn</td>
  107.                   <td>192.168.128.12</td>
  108.                   <td>/usr/local/sphinx</td>
  109.                   <td class="center">主机</td>
  110.                   <td class="center">2017-03-28 12:21:09</td>
  111.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要删除吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  112.                 </tr>
  113.                 <tr>
  114.                   <td class="center">2</td>
  115.                   <td>sphinx.test.com.cn</td>
  116.                   <td>192.168.128.13</td>
  117.                   <td>/usr/local/sphinx</td>
  118.                   <td class="center">备机</td>
  119.                   <td class="center">2017-03-28 12:21:09</td>
  120.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  121.                 </tr>
  122.                 <tr>
  123.                   <td class="center">3</td>
  124.                   <td>sphinx.video.com.cn</td>
  125.                   <td>192.168.158.13</td>
  126.                   <td>/usr/local/sphinx</td>
  127.                   <td class="center">主机</td>
  128.                   <td class="center">2017-03-28 12:21:09</td>
  129.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  130.                 </tr>
  131.                 <tr>
  132.                   <td class="center">4</td>
  133.                   <td>sphinx.test.com.cn</td>
  134.                   <td>192.168.158.14</td>
  135.                   <td>/usr/local/sphinx</td>
  136.                   <td class="center">备机</td>
  137.                   <td class="center">2017-03-28 12:21:09</td>
  138.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  139.                 </tr>
  140.                 </tbody>
  141.               </table>
  142.             </div>
  143.             <div class="panel-footer">
  144.               <div class="row">
  145.                 <div class="col-md-8 m-pagination" id="paginator">
  146.                 </div>
  147.               </div>
  148.             </div>
  149.           </div>
  150.         </div>
  151.         <div role="tabpanel" class="tab-pane" id="form">
  152.           <div class="panel-body">
  153.             <form class="form-horizontal">
  154.               <div class="form-group">
  155.                 <label class="col-sm-1 control-label"><span class="text-danger"></span>域名</label>
  156.                 <div class="col-sm-4">
  157.                   <input type="text" name="username" class="form-control" placeholder="机器域名" required>
  158.                 </div>
  159.               </div>
  160.               <div class="form-group">
  161.                 <label class="col-sm-1 control-label"><span class="text-danger"> * </span>IP</label>
  162.                 <div class="col-sm-4">
  163.                   <input type="email" name="email" class="form-control" placeholder="机器ip" required>
  164.                 </div>
  165.               </div>
  166.               <div class="form-group">
  167.                 <label class="col-sm-1 control-label"><span class="text-danger"> * </span>Sphinx<br>安装目录</label>
  168.                 <div class="col-sm-4">
  169.                   <input type="text" name="sphinx_path" class="form-control" placeholder="sphinx安装目录">
  170.                 </div>
  171.               </div>
  172.               <div class="form-group">
  173.                 <label class="col-sm-1 control-label"><span class="text-danger"></span>备注信息</label>
  174.                 <div class="col-sm-4">
  175.                   <input type="text" class="form-control" placeholder="备注" required>
  176.                 </div>
  177.               </div>
  178.               <div class="form-group">
  179.                 <div class="col-sm-offset-1 col-sm-10">
  180.                   <button type="submit" onclick="" class="btn btn-success">保存</button>
  181.                 </div>
  182.               </div>
  183.             </form>
  184.             <hr>
  185.           </div>
  186.         </div>
  187.       </div>
  188.     </div>
  189.   </div>
  190. </div>
  191. <!--footer-->
  192. <footer>
  193.   <div class="container">
  194.     <div class="row">
  195.       <div class="col-md-12">
  196.         <p class="text-muted center">
  197.           Copyright&nbsp;©&nbsp;2017-2018&nbsp;&nbsp;phachon@163.com&nbsp;&nbsp;
  198.         </p>
  199.       </div>
  200.     </div>
  201.   </div>
  202. </footer>
  203. <!--footer-->
  204. <script src="js/plugins/jquery/jquery.js"></script>
  205. <script src="js/bootstrap.min.js"></script>
  206. <script src="js/plugins/pagination/mricode.pagination.js"></script>
  207. <script src="js/plugins/fancybox/jquery.fancybox.js"></script>
  208. <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
  209. <script src="js/common/common.js"></script>
  210. <script src="js/module/account.js"></script>
  211. <script type="text/javascript">
  212.   var pageData = [];
  213.   pageData.push({'pageSize': '10', 'total': '1000', 'pageIndex': '2'});
  214.   Common.paginator("#paginator", pageData);
  215.   Account.bindFancyBox();
  216. </script>
  217. </body>
  218. </html>
复制代码


  • 可以看到HTML中
  1. <table class="table table-bordered">
  2.                 <thead>
  3.                 <tr>
  4.                   <th class="w8p">id</th>
  5.                   <th class="w18p">域名</th>
  6.                   <th class="w18p">ip</th>
  7.                   <th class="w13p">sphinx路径</th>
  8.                   <th class="w10p">备注</th>
  9.                   <th class="w15p">创建时间</th>
  10.                   <th class="w15p">操作</th>
  11.                 </tr>
  12.                 </thead>
  13.                 <tbody>
  14.                 <tr>
  15.                   <td class="center">1</td>
  16.                   <td>sphinx.test.com.cn</td>
  17.                   <td>192.168.128.12</td>
  18.                   <td>/usr/local/sphinx</td>
  19.                   <td class="center">主机</td>
  20.                   <td class="center">2017-03-28 12:21:09</td>
  21.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要删除吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  22.                 </tr>
  23.                 <tr>
  24.                   <td class="center">2</td>
  25.                   <td>sphinx.test.com.cn</td>
  26.                   <td>192.168.128.13</td>
  27.                   <td>/usr/local/sphinx</td>
  28.                   <td class="center">备机</td>
  29.                   <td class="center">2017-03-28 12:21:09</td>
  30.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  31.                 </tr>
  32.                 <tr>
  33.                   <td class="center">3</td>
  34.                   <td>sphinx.video.com.cn</td>
  35.                   <td>192.168.158.13</td>
  36.                   <td>/usr/local/sphinx</td>
  37.                   <td class="center">主机</td>
  38.                   <td class="center">2017-03-28 12:21:09</td>
  39.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  40.                 </tr>
  41.                 <tr>
  42.                   <td class="center">4</td>
  43.                   <td>sphinx.test.com.cn</td>
  44.                   <td>192.168.158.14</td>
  45.                   <td>/usr/local/sphinx</td>
  46.                   <td class="center">备机</td>
  47.                   <td class="center">2017-03-28 12:21:09</td>
  48.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  49.                 </tr>
  50.                 </tbody>
  51.               </table>
复制代码

只能是静态的,接下来我们需要将这里的代码修改为与数据库毗连,并遍历打印数据库里面表的信息
第五步:根据jsp文件格式创建数据库



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

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

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

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


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

  1. CREATE TABLE sphinx_info (
  2.     id INT AUTO_INCREMENT PRIMARY KEY,
  3.     domain VARCHAR(255) NOT NULL,
  4.     ip VARCHAR(45) NOT NULL,
  5.     sphinx_path VARCHAR(255) NOT NULL,
  6.     remark VARCHAR(255) NOT NULL,
  7.     create_time DATETIME NOT NULL,
  8.     operation VARCHAR(20)
  9. );
复制代码


  • 然后到场数据
  1. INSERT INTO sphinx_info (domain, ip, sphinx_path, remark, create_time, operation)
  2. VALUES
  3. ('sphinx.demo1.com', '192.168.100.1', '/usr/local/sphinx', '主机', '2025-05-13 09:30:00', '✖删除'),
  4. ('sphinx.demo2.net', '192.168.100.2', '/usr/local/sphinx', '备机', '2025-05-13 09:35:00', '✖删除'),
  5. ('sphinx.demo3.org', '192.168.100.3', '/usr/local/sphinx', '主机', '2025-05-13 09:40:00', '✖删除'),
  6. ('sphinx.demo4.cn', '192.168.100.4', '/usr/local/sphinx', '备机', '2025-05-13 09:45:00', '✖删除'),
  7. ('sphinx.demo5.io', '192.168.100.5', '/usr/local/sphinx', '主机', '2025-05-13 09:50:00', '✖删除');
复制代码

第六步:利用SQL标签库实现MySQL数据库毗连



  • 首先在表头添加
  1. <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>//核心标签声明<c:forEach>属于 JSTL 核心标签库,必须显式声明才能使用。若缺少此声明,会导致标签无法剖析,数据无法遍历显示
复制代码


  • 然后找到我们的jsp文件,将里面需要修改的代码
  1. <tbody>
  2.                 <tr>
  3.                   <td class="center">1</td>
  4.                   <td>sphinx.test.com.cn</td>
  5.                   <td>192.168.128.12</td>
  6.                   <td>/usr/local/sphinx</td>
  7.                   <td class="center">主机</td>
  8.                   <td class="center">2017-03-28 12:21:09</td>
  9.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要删除吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  10.                 </tr>
  11.                 <tr>
  12.                   <td class="center">2</td>
  13.                   <td>sphinx.test.com.cn</td>
  14.                   <td>192.168.128.13</td>
  15.                   <td>/usr/local/sphinx</td>
  16.                   <td class="center">备机</td>
  17.                   <td class="center">2017-03-28 12:21:09</td>
  18.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  19.                 </tr>
  20.                 <tr>
  21.                   <td class="center">3</td>
  22.                   <td>sphinx.video.com.cn</td>
  23.                   <td>192.168.158.13</td>
  24.                   <td>/usr/local/sphinx</td>
  25.                   <td class="center">主机</td>
  26.                   <td class="center">2017-03-28 12:21:09</td>
  27.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  28.                 </tr>
  29.                 <tr>
  30.                   <td class="center">4</td>
  31.                   <td>sphinx.test.com.cn</td>
  32.                   <td>192.168.158.14</td>
  33.                   <td>/usr/local/sphinx</td>
  34.                   <td class="center">备机</td>
  35.                   <td class="center">2017-03-28 12:21:09</td>
  36.                   <td class="center"><a name="remove" onclick="Common.confirm('确认要屏蔽吗?')"><i class="glyphicon glyphicon-remove"></i>删除</a></td>
  37.                 </tr>
  38.                 </tbody>
复制代码


  • 修改为我们的 SQL 标签库实现 的代码
  1. <tbody>
  2.                 <!-- 配置数据源 -->
  3.                 <sql:setDataSource
  4.                         var="dbConn"
  5.                         driver="com.mysql.cj.jdbc.Driver"
  6.                         url="jdbc:mysql://localhost:3306/2023se3"
  7.                         user="root"
  8.                         password="123456"
  9.                 />
  10.                 <!-- 执行查询 -->
  11.                 <sql:query dataSource="${dbConn}" var="sphinxRs">
  12.                   SELECT id, domain, ip, sphinx_path, remark, create_time, operation
  13.                   FROM sphinx_info
  14.                 </sql:query>
  15.                 <!-- 遍历结果 -->
  16.                 <c:forEach items="${sphinxRs.rows}" var="row">
  17.                   <tr>
  18.                     <td class="center">${row.id}</td>
  19.                     <td>${row.domain}</td>
  20.                     <td>${row.ip}</td>
  21.                     <td>${row.sphinx_path}</td>
  22.                     <td class="center">${row.remark}</td>
  23.                     <td class="center">${row.create_time}</td>
  24.                     <td class="center">
  25.                       <a href="deleteSphinx.jsp?id=${row.id}" onclick="return confirm('确认要删除吗?')">
  26.                         <i class="glyphicon glyphicon-remove"></i>${row.operation}
  27.                       </a>
  28.                     </td>
  29.                   </tr>
  30.                 </c:forEach>
  31.                 </tbody>
复制代码


  • 下面我们来具体讲解一下代码
  1. <sql:setDataSource
  2.     var="dbConn"
  3.     driver="com.mysql.cj.jdbc.Driver"
  4.     url="jdbc:mysql://localhost:3306/2023se3"
  5.     user="root"
  6.     password="123456"
  7. />
复制代码


  • 借助 <sql:setDataSource> 标签,创建了一个名为 dbConn 的数据源对象。
  • 该对象使用 MySQL 驱动步伐,毗连到本地 3306 端口的 2023se3 数据库,登录用户为 root,密码是 123456。
  1. <sql:query dataSource="${dbConn}" var="sphinxRs">
  2.     SELECT id, domain, ip, sphinx_path, remark, create_time, operation
  3.     FROM sphinx_info
  4. </sql:query>
复制代码


  • 利用 <sql:query> 标签实行 SQL 查询操作。
  • 从 sphinx_info 表中选取 7 个字段的数据。
  • 查询结果会存放在 sphinxRs 变量里,这个变量是一个包罗多行数据的聚集。
  1. <c:forEach items="${sphinxRs.rows}" var="row">
  2.     <tr>
  3.         <td class="center">${row.id}</td>
  4.         <td>${row.domain}</td>
  5.         <td>${row.ip}</td>
  6.         <td>${row.sphinx_path}</td>
  7.         <td class="center">${row.remark}</td>
  8.         <td class="center">${row.create_time}</td>
  9.         <td class="center">
  10.             <a href="deleteSphinx.jsp?id=${row.id}" onclick="return confirm('确认要删除吗?')">
  11.                 <i class="glyphicon glyphicon-remove"></i>${row.operation}
  12.             </a>
  13.         </td>
  14.     </tr>
  15. </c:forEach>
复制代码


  • <c:forEach> 标签会遍历结果集里的每一行数据。
  • 针对每一行数据,都会生成一个 <tr>(表格行)。
  • 每个 <td>(表格单元格)会显示对应字段的值,像 ID、域名、IP 等。
  • 末了一列是操作列,包罗一个删除链接,点击该链接会调用 deleteSphinx.jsp 并附带当前行的 ID。
  • onclick 事件会弹出确认对话框,防止用户误操作。
  • 然后点击运行

  • 可以看到我们的数据库信息成功打印到屏幕上了


以上就是这篇博客的全部内容,下一篇我们将继续探索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企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

商道如狼道

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表