HTML-5移动平台的Java-Web实用项目开课件.ppt

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

2、连接关系数据库的标准，由一组用程序连接关系数据库的标准，由一组用Java语言编写的类和接口组成。语言编写的类和接口组成。 对对Java程序开发者来说，程序开发者来说，JDBC是一是一套用于执行套用于执行SQL语句的语句的Java API，通过，通过调用调用JDBC就可以在独立于后台数据库的就可以在独立于后台数据库的基础上完成对数据库的操作；对数据库基础上完成对数据库的操作；对数据库厂商而言，厂商而言，JDBC只是接口模型，数据库只是接口模型，数据库厂商开发相应的厂商开发相应的JDBC驱动程序，就可以驱动程序，就可以使数据库通过使数据库通过Java语言进行操作了。语言进行操作了。【知识梳理知识梳

3、理】1JDBC的实现原理的实现原理 JDBC主要通过主要通过java.sql包提供的包提供的API供供Java程序开发者使用，驱动程序厂商则程序开发者使用，驱动程序厂商则通过实现这些接口封装各种对数据库的操通过实现这些接口封装各种对数据库的操作。作。 JDBC为多种关系数据库提供了统一为多种关系数据库提供了统一访问接口，它可以向相应数据库发送访问接口，它可以向相应数据库发送SQL调用，将调用，将Java语言和语言和JDBC结合起来，程结合起来，程序员只需编写一次程序就可以让它在任何序员只需编写一次程序就可以让它在任何平台上运行。平台上运行。 JDBC可以说是可以说是Java程序开发者和数程序开

4、发者和数据库厂商之间的桥梁，据库厂商之间的桥梁，Java程序开发者程序开发者和数据库厂商可以在统一的和数据库厂商可以在统一的JDBC标准之标准之下，负责各自的工作范围。下，负责各自的工作范围。 同时，任何一方的改变对另一方都同时，任何一方的改变对另一方都不会造成显著的影响。不会造成显著的影响。 JDBC的作用概括起来包括以下几方的作用概括起来包括以下几方面：面： 建立与数据库的连接；建立与数据库的连接； 向数据库发出查询请求；向数据库发出查询请求； 处理数据库的返回结果。处理数据库的返回结果。（1）注册与加载连接数据库的驱动程序）注册与加载连接数据库的驱动程序（2）创建与数据库的连接）创建与数

5、据库的连接（3）通过连接对象获取指令对象）通过连接对象获取指令对象（4）使用指令对象执行）使用指令对象执行SQL语句语句（5）获取结果集，且对结果集做相应处理）获取结果集，且对结果集做相应处理（6）释放资源）释放资源 DriverManager类是类是java.sql包中用包中用于管理数据库驱动程序的类，根据数据于管理数据库驱动程序的类，根据数据库的不同，注册、装载相应的库的不同，注册、装载相应的JDBC驱动驱动程序，程序，JDBC驱动程序负责直接连接相应驱动程序负责直接连接相应的数据库。的数据库。 在在DriverManager类中存有已注册的驱类中存有已注册的驱动程序清单，当调用动程序清单

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

7、代表与数据库的一对象代表与数据库的一个连接。个连接。 连接过程包括执行的连接过程包括执行的SQL语句和在该连语句和在该连接上所返回的结果。接上所返回的结果。 只有在成功建立连接的前提下，只有在成功建立连接的前提下，SQL语语句才可能被传递到数据库，最终被执行并返句才可能被传递到数据库，最终被执行并返回结果。回结果。 Connection接口的主要方法如下所接口的主要方法如下所示。示。 Statement createStatement()：创建一：创建一个个Statement对象。对象。 Statement createStatement(int resultSetType , int res

8、ultSetConcurrency)：创建一个：创建一个Statement对对象，它将生成具有特定类型和并发性的结果集。象，它将生成具有特定类型和并发性的结果集。 void commit()：提交对数据库的改变并：提交对数据库的改变并释放当前持有的数据库的锁。释放当前持有的数据库的锁。 void rollback()：回滚当前事务中所有改：回滚当前事务中所有改变并释放当前连接持有的数据库的锁。变并释放当前连接持有的数据库的锁。 boolean isClose()：判断连接是否已关：判断连接是否已关闭。闭。 boolean isReadOnly()：判断连接是否：判断连接是否为只读模式。为只读模

9、式。 void setReadOnly()：设置连接的只读：设置连接的只读模式。模式。 void clearWarning()：清除连接的所：清除连接的所有警告信息。有警告信息。 void close()：立即释放连接对象的数：立即释放连接对象的数据库和据库和JDBC资源。资源。 Statement接口由接口由Connection接口产生，接口产生，用于在已经建立的连接的基础上向数据库发用于在已经建立的连接的基础上向数据库发送送SQL语句，包括查询、新增、修改和删除语句，包括查询、新增、修改和删除等操作。等操作。 Statement接口提供了接口提供了3种执行种执行SQL语语句的方法：句的方法

10、：executeQuery、executeUpdate和和execute。 使用哪一个方法由使用哪一个方法由SQL语句所产生的语句所产生的内容决定。内容决定。 （1）ResultSet executeQuery(String strSql) 这种方法的执行结果将返回单个结果这种方法的执行结果将返回单个结果集，主要用于在集，主要用于在Statement对象中执行对象中执行SQL查询语句，并返回该查询生成的查询语句，并返回该查询生成的ResultSet对象。对象。 （2）int executeUpdate(String strSql) 这种方法用于执行这种方法用于执行Insert、Update、D

11、elete和和SQL DDL（数据定义语言）语（数据定义语言）语句，返回一个整数值，表示执行句，返回一个整数值，表示执行SQL语语句影响的数据行数。句影响的数据行数。 （3）boolean execute(String sql) 这种方法是执行这种方法是执行SQL语句调用的一语句调用的一般方法，允许用户执行般方法，允许用户执行SQL数据定义命数据定义命令，然后获取一个布尔值，显示是否返令，然后获取一个布尔值，显示是否返回了回了ResultSet对象。用于执行返回多个对象。用于执行返回多个结果集、多个更新结果或两者组合的语结果集、多个更新结果或两者组合的语句。句。 ResultSet接口负责保存

12、接口负责保存Statement执执行后返回的查询结果。行后返回的查询结果。 ResultSet对象实际上是一个由查询结对象实际上是一个由查询结果数据构成的表，在果数据构成的表，在ResultSet中隐含着一中隐含着一个指针，利用这个指针移动数据行，可以个指针，利用这个指针移动数据行，可以取得所要的数据，或者对数据进行简单的取得所要的数据，或者对数据进行简单的操作。操作。 ResultSet接口的常用方法如下所示。接口的常用方法如下所示。（1）void first()：将记录指针移动到记录集：将记录指针移动到记录集的第一行。的第一行。（2）void last()：将记录指针移动到记录集：将记录指

13、针移动到记录集的最后一行。的最后一行。（3）void previous()：将记录指针从当前位：将记录指针从当前位置向前移动一行。置向前移动一行。（4）void next()：将记录指针从当前位置：将记录指针从当前位置向后移动一行。向后移动一行。（5）void beforeFistr()：将记录指针移动：将记录指针移动到记录集的第一行之前。到记录集的第一行之前。（6）void afterLast()：将记录指针移动到记录：将记录指针移动到记录集的最后一行之后。集的最后一行之后。（7）boolean absolute(int row)：将记录指针移：将记录指针移动到记录集中给定编号的行。动到记录

14、集中给定编号的行。（8）boolean isFirst()：如果记录指针位于记录：如果记录指针位于记录集的第一行，则返回集的第一行，则返回true，否则返回，否则返回false。（9）boolean isLast()：如果记录指针位于记录：如果记录指针位于记录集的最后一行，则返回集的最后一行，则返回true，否则返回，否则返回false。（10）boolean isBeforFirst()：如果记录指针位：如果记录指针位于记录集的第一行之前，则返回于记录集的第一行之前，则返回true。（11）boolean isAfterLast()：如果记录指：如果记录指针位于记录集的最后一行之后，则返回针

15、位于记录集的最后一行之后，则返回true。（12）int getRow()：获取当前行的编号。：获取当前行的编号。 PreparedStatement接口继承自接口继承自Statement接接口，口，PreparedStatement实例包含已编译的实例包含已编译的SQL语句，其执行速度要快于语句，其执行速度要快于Statement对象。对象。 EL（Expression Language，EL）表达）表达式语言是式语言是JSP 2.0中引入的一种计算和输出中引入的一种计算和输出Java对象的简单语言，可以简化在对象的简单语言，可以简化在JSP开发开发中对对象的引用，从而规范页面代码，增强中对

16、对象的引用，从而规范页面代码，增强程序的可读性和可维护性。程序的可读性和可维护性。 如今如今EL表达式是一项成熟、标准的表达式是一项成熟、标准的技术，只要安装的技术，只要安装的Web服务器能够支持服务器能够支持Servlet 2.4/JSP 2.0，就可以在，就可以在JSP页面中页面中直接使用直接使用EL表达式。表达式。 OGNL（Object-Graph Navigation Language，对象图导航语言），它是一，对象图导航语言），它是一种功能强大的表达式语言（种功能强大的表达式语言（Expression Language，EL），通过它简单一致的表），通过它简单一致的表达式语法，可以

17、存取对象的任意属性，达式语法，可以存取对象的任意属性，调用对象的方法，遍历整个对象的结构调用对象的方法，遍历整个对象的结构图，实现字段类型转化等功能。图，实现字段类型转化等功能。 它使用相同的表达式去存取对象的它使用相同的表达式去存取对象的属性，这样可以更好地取得数据。属性，这样可以更好地取得数据。 OGNL是通常要结合是通常要结合Struts 2的标签的标签一起使用，主要是一起使用，主要是#、%和和$这这3个符号的个符号的使用。使用。（1）#符号符号 #符号的用途一般有以下符号的用途一般有以下3种。种。 访问访问OGNL上下文和上下文和Action上下文，上下文，#相当于相当于ActionC

18、ontext.getContext()，#session.msg表达式表达式相当于相当于ActionContext.getContext().getSession(). getAttribute(msg)。 ActionContext常用的属性如下所示：常用的属性如下所示：parameters包含当前包含当前HTTP请求参数的请求参数的Map，#parameters.id0相当于相当于request.getParameter(id).get(0)。 request包含当前包含当前HttpServletRequest的属性的属性的的Map，#request.userName相当于相当于reque

19、st.getAttribute(userName)。 session包含当前包含当前HttpSession的属性的的属性的Map，#session.userName相当于相当于session.getAttribute(userName)。 application包含当前应用的包含当前应用的ServletContext的属性的的属性的Map，#application.userName相当于相当于application.getAttribute(userName)。 用于过滤和投影（用于过滤和投影（projecting）集合，如）集合，如persons.?#this.age25，persons.?

20、#this.name=pla1.age0。 用来构造用来构造Map，如，如#foo1:bar1,foo2:bar2。 %符号的用途是在标志的属性为字符符号的用途是在标志的属性为字符串类型时，计算串类型时，计算OGNL表达式的值，这个表达式的值，这个类似类似js中的中的eval。 $符号主要有两个方面的用途。符号主要有两个方面的用途。 其一是在国际化资源文件中，引用其一是在国际化资源文件中，引用OGNL表达式，例如，国际化资源文件中的代码：表达式，例如，国际化资源文件中的代码：reg.agerange=年龄必须在年龄必须在$min同同$max之之间。其二是在间。其二是在Struts 2框架的配置

21、文件中引用框架的配置文件中引用OGNL表达式。表达式。【应用技巧应用技巧】 本单元的应用技巧如下所示。本单元的应用技巧如下所示。 使用使用JDBC访问数据库。访问数据库。 EL表达式的正确使用。表达式的正确使用。 实体对象及其方法的正确使用。实体对象及其方法的正确使用。【环境创设环境创设】 下载并安装数据库管理系统下载并安装数据库管理系统SQL Server 2008。 下载下载Microsoft SQL Server 2008 JDBC Driver，即，即sqljdbc4.jar。 准备开发准备开发Web应用程序所需的图片文应用程序所需的图片文件和件和JavaScript文件。文件。 在在

22、Microsoft SQL Server 2008中创建中创建数据库数据库eshop，并在该数据库中创建，并在该数据库中创建“商商品数据表品数据表”、“商品类型表商品类型表”和和“用户用户表表”，其结构信息分别如表，其结构信息分别如表3-1、表、表3-2和和表表3-3所示。所示。字段名字段名数据类型数据类型字段名字段名数据类型数据类型商品商品IDint售出数量售出数量int商品编码商品编码nvarchar(10)图片地址图片地址nvarchar(100)商品名称商品名称nvarchar(100)大图片地址大图片地址nvarchar(100)型号参数型号参数nvarchar(100)上架时间上架

23、时间smalldatetime价格价格money是否推荐是否推荐bit优惠价格优惠价格money商品类型商品类型int库存数量库存数量int表表3-1“商品数据表商品数据表”的结构信息的结构信息 字段名字段名数据类型数据类型字段名字段名数据类型数据类型类型类型IDint层次层次int类型名称类型名称nvarchar(20)父类父类IDint表表3-2“商品类型表商品类型表”的结构信息的结构信息 字段名字段名数据类型数据类型字段名字段名数据类型数据类型用户用户IDintEmailnvarchar(50)用户名用户名nvarchar(30)用户类型用户类型nvarchar(20)密码密码nvarc

24、har(10)头像头像nvarchar(50)表表3-3“用户表用户表”的结构信息的结构信息 在计算机的在计算机的【资源管理器资源管理器】中创建文件中创建文件夹夹unit03。 启动启动Eclipse，设置工作空间为，设置工作空间为unit03，然，然后进入后进入Eclipse的开发环境。的开发环境。 在在Eclipse集成开发环境中配置与启动集成开发环境中配置与启动Tomcat服务器。服务器。 在在Eclipse集成开发环境中新建动态集成开发环境中新建动态Web项目项目project03。 将文件将文件sqljdbc4.jar拷贝到拷贝到Web项目项目project03的文件夹的文件夹“We

25、bContentWEB-INFlib”下，并在下，并在Eclipse集成开发环境的集成开发环境的“项目资源管理器项目资源管理器”刷新刷新Web项目项目project03。 在在Eclipse集成开发环境中创建包集成开发环境中创建包package03。【任务描述任务描述】【任务任务3-1】创建创建JSP页面页面task3-1.jsp，并，并在页面中动态显示商品数据在页面中动态显示商品数据 在在Web项目项目project03中创建中创建JSP页面页面task3-1.jsp。 在在JSP页面中通过页面中通过JDBC连接连接SQL Server 2008数据库数据库“eshop”。 将将“商品数据表

26、商品数据表”中前中前5条记录的商品名条记录的商品名称、型号参数、价格及图片显示在页面中。称、型号参数、价格及图片显示在页面中。【任务任务3-2】使用使用JSP+Servlet+JavaBean获获取数据，并在页面中动态显示商品数据取数据，并在页面中动态显示商品数据 创建名为创建名为“GoodsInfo”的类，该类是的类，该类是一个一个JavaBean，在该类定义多个属性及，在该类定义多个属性及相应的相应的getXXX()与与setXXX()方法。方法。 创建名为创建名为“ConnDB”的类，该类主要用的类，该类主要用于连接数据库，执行数据查询和关闭数据于连接数据库，执行数据查询和关闭数据库的连

27、接。库的连接。 创建名为创建名为“GoodsServlet”的的Servlet类，类，该类主要实现查询操作，从数据表中获取该类主要实现查询操作，从数据表中获取所需的数据。所需的数据。 创建创建JSP页面页面goodsSearch3-2.jsp，在，在该页面主要用于输出从数据表查询获取该页面主要用于输出从数据表查询获取的商品数据。的商品数据。 创建创建JSP页面页面task3-2.jsp，该页面用于，该页面用于重定向到重定向到Servlet映射地址映射地址GoodsServlet，并传递并传递keywords参数。参数。图图3-1在页面在页面goodsSearch3-2中动态显示商品数据的流程中

28、动态显示商品数据的流程 【任务实施任务实施】【网页结构设计网页结构设计】 本单元将会创建多个网页，其主体本单元将会创建多个网页，其主体结构的结构的HTML代码如表代码如表3-4所示。所示。行号行号HTML代码代码010203040506070809101112 表表3-4单元单元3网页主体结构的网页主体结构的HTML代码代码 行号行号HTML代码代码1314151617181920212223242526 续表续表 【网页网页CSS设计设计】 在在Dreamweaver CS6开发环境中创开发环境中创建两个建两个CSS文件：文件：base.css和和view.css，base.css文件中主要

29、的文件中主要的CSS代码如表代码如表3-5所所示，示，view.css文件中主要的文件中主要的CSS代码如表代码如表3-6所示。所示。 这两个这两个CSS文件具体的代码见本书提文件具体的代码见本书提供的电子资源。供的电子资源。【静态网页设计静态网页设计】行号行号CSS代码代码行号行号CSS代码代码0102030405060708091011121314151617181920212223242526.search-box position: absolute; height: 29px; width: 100%; top: 4px;.search-box inputtype=search he

30、ight:29px!important; line-height:27px; font-size:14px; border-radius:29px; padding:0 30px 0 5px; width:90%!important; margin:0 auto; border:1px solid #fff; border-bottom:none; background:#fff; color:#999; -webkit-box-sizing:border-box; overflow:hidden; position:absolute; left:5%; z-index:10;.search-

31、box .search-btn position:absolute;3637383940414243444546474849505152535455565758596061.list-ui-c li border-bottom:1px solid #ccc; padding:2px 0;.list-ui-c li p margin:2px 0;.wbox display:-webkit-box;.pro-list font-size:14px;.pro-list li position:relative; padding:10px 0;.pro-list li .pro-img margin-

32、right:10px;.pro-list li .pro-img a display:block; height:100%;表表3-5base.css文件的主要文件的主要CSS代码代码 行号行号CSS代码代码行号行号CSS代码代码272829303132333435 width:17px; height:17px; right:22px; top:6px; background:url(./images/seacher.png) no-repeat 0 0; z-index:11; background-size:contain;626364656667686970.pro-list li .

33、pro-info overflow:hidden; -webkit-box-flex:1;.pro-list li .pro-info p margin-bottom:5px; width:90%;续表续表 行号行号CSS代码代码行号行号CSS代码代码010203040506070809101112#filterPage box-shadow: 5px 0 5px #ccc; position: relative; z-index: 100;.search-result height: 29px; line-height: 29px; text-indent: 10; text-align:

34、center; display: block;131415161718192021222324.pro-list li .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-6view.css文件的主要文件的主要CSS代码代码 图图3-2网页网页unit03.h

35、tml的浏览效果的浏览效果 【网页功能实现网页功能实现】【任务任务3-1】创建创建JSP页面页面task3-1.jsp，并，并在页面中动态显示商品数据在页面中动态显示商品数据（1）创建）创建JSP页面页面task3-1.jsp 在项目在项目project03中创建一个中创建一个JSP页面页面task3-1.jsp。 （2）引入必要的包及相关类）引入必要的包及相关类 首先编写以下代码引入必要的包及首先编写以下代码引入必要的包及相关类：相关类： （3）引入所需的）引入所需的CSS样式文件样式文件 在在JSP页面页面task3-1.jsp中中和和之间编写代码，引入所需的之间编写代码，引入所需的CSS

36、样式文件和样式文件和JavaScript文件。文件。（4）编写代码连接与访问数据库）编写代码连接与访问数据库 在在JSP页面页面task3-1.jsp中编写连接与中编写连接与访问数据库的访问数据库的JSP代码，代码如表代码，代码如表3-11所所示。示。（5）编写代码显示从数据表获取的商品数）编写代码显示从数据表获取的商品数据据（6）运行程序输出结果）运行程序输出结果行号行号JSP代码代码0102030405060708091011121314表表3-11JSP页面页面task3-1.jsp中连接与访问数据库的中连接与访问数据库的JSP代码代码 图图3-3运行运行JSP页面页面task3-1.j

37、sp时从数据表中获取商品数据的显示结果时从数据表中获取商品数据的显示结果 【任务任务3-2】使用使用JSP+Servlet+JavaBean获获取数据，并在页面中动态显示商品数据取数据，并在页面中动态显示商品数据（1）创建名为）创建名为“GoodsInfo”的的Java类类（2）创建名为）创建名为“ConnDB”的的Java类类（3）创建名为）创建名为“GoodsServlet”Java类类图图3-4在快捷菜单中选择在快捷菜单中选择【新建新建】【类类】命令命令 （4）创建）创建JSP页面页面goodsSearch3-2.jsp（5）在）在web.xml文件中对文件中对GoodsServlet类

38、进类进行配置行配置（6）创建）创建JSP页面页面task3-2.jsp（7）运行程序输出结果）运行程序输出结果图图3-5JSP页面页面task3-2.jsp的部分外观的部分外观 图图3-6搜索搜索“苹果手机苹果手机”的结果的结果 【单元小结单元小结】 Java Web应用程序访问数据库时，首应用程序访问数据库时，首先需要实现先需要实现JSP应用程序与数据库的连接，应用程序与数据库的连接，JDBC是是Java程序连接关系数据库的标准，程序连接关系数据库的标准，由一组用由一组用Java语言编写的类和接口组成。语言编写的类和接口组成。 本单元主要探讨了购物网站商品展本单元主要探讨了购物网站商品展示、分页与查询功能的实现方法。示、分页与查询功能的实现方法。