单元3 购物网站商品展示与查询模块设计（JSP+Servlet+JDBC）

单元3购物网站商品展示与查询模块设计（JSP+Servlet+JDBC）

对于一个基于数据库开发的Web应用系统，通常将系统相关的数据存放在后台的数据库中，Web页面都需要访问数据库，即从数据表中读取数据，向数据表中新增记录或者修改、删除数据表中的数据记录。 JavaWeb应用程序访问数据库，首先需要实现JSP应用程序与数据库的连接，JDBC（JavaDataBaseConnectivity，数据库连接）是Java程序连接关系数据库的标准，由一组用Java语言编写的类和接口组成。

对Java程序开发者来说，JDBC是一套用于执行SQL语句的JavaAPI，通过调用JDBC就可以在独立于后台数据库的基础上完成对数据库的操作；对数据库厂商而言，JDBC只是接口模型，数据库厂商开发相应的JDBC驱动程序，就可以使数据库通过Java语言进行操作了。【知识梳理】1．JDBC的实现原理 JDBC主要通过java.sql包提供的API供Java程序开发者使用，驱动程序厂商则通过实现这些接口封装各种对数据库的操作。 JDBC为多种关系数据库提供了统一访问接口，它可以向相应数据库发送SQL调用，将Java语言和JDBC结合起来，程序员只需编写一次程序就可以让它在任何平台上运行。 JDBC可以说是Java程序开发者和数据库厂商之间的桥梁，Java程序开发者和数据库厂商可以在统一的JDBC标准之下，负责各自的工作范围。

同时，任何一方的改变对另一方都不会造成显著的影响。 JDBC的作用概括起来包括以下几方面：

①建立与数据库的连接；

②向数据库发出查询请求；

③处理数据库的返回结果。2．使用JDBC访问数据库（1）注册与加载连接数据库的驱动程序（2）创建与数据库的连接（3）通过连接对象获取指令对象（4）使用指令对象执行SQL语句（5）获取结果集，且对结果集做相应处理（6）释放资源3．JDBC的DriverManager类 DriverManager类是java.sql包中用于管理数据库驱动程序的类，根据数据库的不同，注册、装载相应的JDBC驱动程序，JDBC驱动程序负责直接连接相应的数据库。

在DriverManager类中存有已注册的驱动程序清单，当调用DriverManager类的方法getConnection时，它将检查清单中的所有驱动程序，一直找到可与URL中指定的数据库进行连接的驱动程序为止。只要加载了合适的驱动程序，DriverManager对象就开始管理连接。4．JDBC的Connection接口 Connection接口负责连接数据库并完成传送数据的任务，与特定数据源建立连接是进行数据库访问操作的前提。

一个Connection对象代表与数据库的一个连接。

连接过程包括执行的SQL语句和在该连接上所返回的结果。

只有在成功建立连接的前提下，SQL语句才可能被传递到数据库，最终被执行并返回结果。 Connection接口的主要方法如下所示。

①StatementcreateStatement()：创建一个Statement对象。

②StatementcreateStatement(intresultSetType,intresultSetConcurrency)：创建一个Statement对象，它将生成具有特定类型和并发性的结果集。

③voidcommit()：提交对数据库的改变并释放当前持有的数据库的锁。

④voidrollback()：回滚当前事务中所有改变并释放当前连接持有的数据库的锁。

⑤booleanisClose()：判断连接是否已关闭。

⑥booleanisReadOnly()：判断连接是否为只读模式。

⑦voidsetReadOnly()：设置连接的只读模式。

⑧voidclearWarning()：清除连接的所有警告信息。

⑨voidclose()：立即释放连接对象的数据库和JDBC资源。5．JDBC的Statement接口 Statement接口由Connection接口产生，用于在已经建立的连接的基础上向数据库发送SQL语句，包括查询、新增、修改和删除等操作。 Statement接口提供了3种执行SQL语句的方法：executeQuery、executeUpdate和execute。

使用哪一个方法由SQL语句所产生的内容决定。（1）ResultSetexecuteQuery(StringstrSql)

这种方法的执行结果将返回单个结果集，主要用于在Statement对象中执行SQL查询语句，并返回该查询生成的ResultSet对象。（2）intexecuteUpdate(StringstrSql)

这种方法用于执行Insert、Update、Delete和SQLDDL（数据定义语言）语句，返回一个整数值，表示执行SQL语句影响的数据行数。（3）booleanexecute(Stringsql)

这种方法是执行SQL语句调用的一般方法，允许用户执行SQL数据定义命令，然后获取一个布尔值，显示是否返回了ResultSet对象。用于执行返回多个结果集、多个更新结果或两者组合的语句。6．JDBC的ResultSet接口 ResultSet接口负责保存Statement执行后返回的查询结果。 ResultSet对象实际上是一个由查询结果数据构成的表，在ResultSet中隐含着一个指针，利用这个指针移动数据行，可以取得所要的数据，或者对数据进行简单的操作。 ResultSet接口的常用方法如下所示。（1）voidfirst()：将记录指针移动到记录集的第一行。（2）voidlast()：将记录指针移动到记录集的最后一行。（3）voidprevious()：将记录指针从当前位置向前移动一行。（4）voidnext()：将记录指针从当前位置向后移动一行。（5）voidbeforeFistr()：将记录指针移动到记录集的第一行之前。（6）voidafterLast()：将记录指针移动到记录集的最后一行之后。（7）booleanabsolute(introw)：将记录指针移动到记录集中给定编号的行。（8）booleanisFirst()：如果记录指针位于记录集的第一行，则返回true，否则返回false。（9）booleanisLast()：如果记录指针位于记录集的最后一行，则返回true，否则返回false。（10）booleanisBeforFirst()：如果记录指针位于记录集的第一行之前，则返回true。（11）booleanisAfterLast()：如果记录指针位于记录集的最后一行之后，则返回true。（12）intgetRow()：获取当前行的编号。7．JDBC的PreparedStatement接口 PreparedStatement接口继承自Statement接口，PreparedStatement实例包含已编译的SQL语句，其执行速度要快于Statement对象。8．EL表达式语言简介 EL（ExpressionLanguage，EL）表达式语言是JSP2.0中引入的一种计算和输出Java对象的简单语言，可以简化在JSP开发中对对象的引用，从而规范页面代码，增强程序的可读性和可维护性。

如今EL表达式是一项成熟、标准的技术，只要安装的Web服务器能够支持Servlet2.4/JSP2.0，就可以在JSP页面中直接使用EL表达式。9．OGNL（对象图导航语言）简介 OGNL（Object-GraphNavigationLanguage，对象图导航语言），它是一种功能强大的表达式语言（ExpressionLanguage，EL），通过它简单一致的表达式语法，可以存取对象的任意属性，调用对象的方法，遍历整个对象的结构图，实现字段类型转化等功能。

它使用相同的表达式去存取对象的属性，这样可以更好地取得数据。 OGNL是通常要结合Struts2的标签一起使用，主要是#、%和$这3个符号的使用。（1）#符号 #符号的用途一般有以下3种。

①访问OGNL上下文和Action上下文，#相当于ActionContext.getContext()，#session.msg表达式相当于ActionContext.getContext().getSession().getAttribute("msg")。 ActionContext常用的属性如下所示： parameters包含当前HTTP请求参数的Map，#parameters.id[0]相当于request.getParameter

("id").get(0)。 request包含当前HttpServletRequest的属性的Map，#request.userName相当于request.get

Attribute("userName")。 session包含当前HttpSession的属性的Map，#session.userName相当于session.getAttribute

("userName")。 application包含当前应用的ServletContext的属性的Map，#application.userName相当于application.getAttribute("userName")。

②用于过滤和投影（projecting）集合，如persons.{?#this.age>25}，persons.{?#=='

pla1'}.{age}[0]。

③用来构造Map，如#{'foo1':'bar1','foo2':'bar2'}。（2）%符号 %符号的用途是在标志的属性为字符串类型时，计算OGNL表达式的值，这个类似js中的eval。（3）$符号 $符号主要有两个方面的用途。

其一是在国际化资源文件中，引用OGNL

表达式，例如，国际化资源文件中的代码：reg.agerange=年龄必须在${min}同${max}之

间。其二是在Struts2框架的配置文件中引用OGNL表达式。【应用技巧】

本单元的应用技巧如下所示。

①使用JDBC访问数据库。

②EL表达式的正确使用。

③实体对象及其方法的正确使用。【环境创设】 ①下载并安装数据库管理系统SQLServer2008。

②下载MicrosoftSQLServer2008JDBCDriver，即sqljdbc4.jar。

③准备开发Web应用程序所需的图片文件和JavaScript文件。

④在MicrosoftSQLServer2008中创建数据库eshop，并在该数据库中创建“商品数据表”、“商品类型表”和“用户表”，其结构信息分别如表3-1、表3-2和表3-3所示。字段名数据类型字段名数据类型商品IDint售出数量int商品编码nvarchar(10)图片地址nvarchar(100)商品名称nvarchar(100)大图片地址nvarchar(100)型号参数nvarchar(100)上架时间smalldatetime价格money是否推荐bit优惠价格money商品类型int库存数量int表3-1“商品数据表”的结构信息字段名数据类型字段名数据类型类型IDint层次int类型名称nvarchar(20)父类IDint表3-2“商品类型表”的结构信息字段名数据类型字段名数据类型用户IDintEmailnvarchar(50)用户名nvarchar(30)用户类型nvarchar(20)密码nvarchar(10)头像nvarchar(50)表3-3“用户表”的结构信息

⑤在计算机的【资源管理器】中创建文件夹unit03。

⑥启动Eclipse，设置工作空间为unit03，然后进入Eclipse的开发环境。

⑦在Eclipse集成开发环境中配置与启动Tomcat服务器。

⑧在Eclipse集成开发环境中新建动态Web项目project03。

⑨将文件sqljdbc4.jar拷贝到Web项目project03的文件夹“WebContent\WEB-INF\lib”下，并在Eclipse集成开发环境的“项目资源管理器”刷新Web项目project03。

⑩在Eclipse集成开发环境中创建包package03。【任务描述】【任务3-1】创建JSP页面task3-1.jsp，并在页面中动态显示商品数据

①在Web项目project03中创建JSP页面task3-1.jsp。

②在JSP页面中通过JDBC连接SQLServer2008数据库“eshop”。

③将“商品数据表”中前5条记录的商品名称、型号参数、价格及图片显示在页面中。【任务3-2】使用JSP+Servlet+JavaBean获取数据，并在页面中动态显示商品数据

①创建名为“GoodsInfo”的类，该类是一个JavaBean，在该类定义多个属性及相应的getXXX()与setXXX()方法。

②创建名为“ConnDB”的类，该类主要用于连接数据库，执行数据查询和关闭数据库的连接。

③创建名为“GoodsServlet”的Servlet类，该类主要实现查询操作，从数据表中获取所需的数据。

④创建JSP页面goodsSearch3-2.jsp，在该页面主要用于输出从数据表查询获取的商品数据。

⑤创建JSP页面task3-2.jsp，该页面用于重定向到Servlet映射地址GoodsServlet，并传递keywords参数。图3-1在页面goodsSearch3-2中动态显示商品数据的流程【任务实施】【网页结构设计】

本单元将会创建多个网页，其主体结构的HTML代码如表3-4所示。行号HTML代码010203040506070809101112<divid="filterPage"><!--公用头部导航--><navclass="navnav-subprw"></nav><!--用于取出搜索关键字--><divclass="search-boxw"style="position:relative;top:0;margin-top:10px;"></div><divid="resultMsg"class="wf14search-result"></div><divclass="search-listw"><ulclass="my-order-listpro-listlist-ui-c"id="productList"><li><divclass="wbox"><divclass="pro-img"></div><divclass="pro-info"></div>表3-4单元3网页主体结构的HTML代码行号HTML代码1314151617181920212223242526

</div><spanclass="arrow"></span></li></ul></div><divid="more_loadw"></div><divid="BottomSearchDiv"class="search-boxwmt10"></div><!--公用尾部--><footerclass="footerw"><divclass="tr"></div><ulclass="list-ui-afoot-listtc"></ul><divclass="tccopyright"></div></footer></div>续表【网页CSS设计】

在DreamweaverCS6开发环境中创建两个CSS文件：base.css和view.css，base.css文件中主要的CSS代码如表3-5所示，view.css文件中主要的CSS代码如表3-6所示。

这两个CSS文件具体的代码见本书提供的电子资源。【静态网页设计】行号CSS代码行号CSS代码0102030405060708091011121314151617181920212223242526.search-box{position:absolute;height:29px;width:100%;top:4px;}.search-boxinput[type="search"]{height:29px!important;line-height:27px;font-size:14px;border-radius:29px;padding:030px05px;width:90%!important;margin:0auto;border:1pxsolid#fff;border-bottom:none;background:#fff;color:#999;-webkit-box-sizing:border-box;overflow:hidden;position:absolute;left:5%;z-index:10;}.search-box.search-btn{position:absolute;3637383940414243444546474849505152535455565758596061.list-ui-cli{border-bottom:1pxsolid#ccc;padding:2px0;}.list-ui-clip{margin:2px0;}.wbox{display:-webkit-box;}.pro-list{font-size:14px;}.pro-listli{position:relative;padding:10px0;}.pro-listli.pro-img{margin-right:10px;}.pro-listli.pro-imga{display:block;height:100%;}表3-5

base.css文件的主要CSS代码行号CSS代码行号CSS代码272829303132333435

width:17px;height:17px;right:22px;top:6px;background:url(../images/seacher.png)no-repeat00;z-index:11;background-size:contain;}626364656667686970.pro-listli.pro-info{overflow:hidden;-webkit-box-flex:1;}.pro-listli.pro-infop{margin-bottom:5px;width:90%;}续表行号CSS代码行号CSS代码010203040506070809101112#filterPage{box-shadow:5px05px#ccc;position:relative;z-index:100;}.search-result{height:29px;line-height:29px;text-indent:10;text-align:center;display:block;}131415161718192021222324.pro-listli.arrow{display:block;position:absolute;right:0px;top:52px;width:12px;height:15px;background-size:contain;background-image:url(../images/arrow1.png);background-repeat:no-repeat;}表3-6

view.css文件的主要CSS代码图3-2网页unit03.html的浏览效果【网页功能实现】【任务3-1】创建JSP页面task3-1.jsp，并在页面中动态显示商品数据（1）创建JSP页面task3-1.jsp

在项目project03中创建一个JSP页面task3-1.jsp。（2）引入必要的包及相关类

首先编写以下代码引入必要的包及相关类：<%@pageimport="java.sql.Connection"%><%@pageimport="java.sql.*"%>（3）引入所需的CSS样式文件

在JSP页面task3-1.jsp中<head>和</head>之间编写代码，引入所需的CSS样式文件和JavaScript文件。（4）编写代码连接与访问数据库

在JSP页面task3-1.jsp中编写连接与访问数据库的JSP代码，代码如表3-11所示。（5）编写代码显示从数据表获取的商品数据（6）运行程序输出结果行号JSP代码01020304050607