任务二  实现首页的新闻显示

任务二 实现首页的新闻显示

学习目标

了解绿吧门户网站首页的新闻浏览需求。

知道一般JSP网站项目的基本目录结构。

知道JSP脚本的基本语法。

知道out对象的常用方法。

会使用MyEclipse工具开发最简单的JSP网站项目。

会使用Java技术连接数据库。

会使用out对象输出数据访问的结果（HTML格式）。

任务描述

本次任务要求完成绿吧旅游用品公司首页的新闻显示，如图1-2-1所示。

因本书的重点是JSP网站开发技术的应用，对于网页设计的其他环节，如网页美工、静态页面设计和样式表设计等都不是本书要介绍的重点，所以本次任务将首页新闻显示的界面进行了简化，任务二要完成的新闻显示功能的最终效果如图1-2-2所示。

图1-2-1 首页新闻显示的效果图

图1-2-2 任务二效果图

任务分析与相关知识

1.JSP网站的基本目录结构

一个典型的JSP网站的目录结构，如图1-2-3所示。

图1-2-3 Web应用的目录结构

图1-2-3的粗体部分属于网站的私有资源，通常将一些类文件和配置文件放在WEB-INF文件夹下：Servlet类需要放在classes文件夹下，数据库访问的驱动类一般放置在lib文件夹下。

目录结构是JSP网站的身份标志之一，任何JSP网站项目都要维持这种固定的文档结构，反言之，任何用于部署JSP网站的Web服务器都支持这种结构的网站项目，都能运行这种网站。

2.MyEclipse的基本用法

MyEclipse企业级工作平台（MyEclipse Enterprise Workbench，简称MyEclipse）是对EclipseIDE的扩展，利用它可以在数据库和JavaEE的开发、发布以及应用程序服务器的整合方面极大地提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML、Struts、JSP、CSS、JavaScript、SQL和Hibernate。

本书使用MyEclipse来开发Web项目。下面通过一个简单的例子来说明MyEclipse如何创建Web项目。

演示一 创建一个Web项目，其名称是Hello，里面包含一个JSP网页index.jsp。（本演示使用的是MyEclipse6.0版本，如果是6.0以上版本，大部分的配置内容都是相同的，读者可根据对设置内容的理解自行调整。）

1）首先打开MyEclipse。按照如图1-2-4所示的步骤操作，进入如图1-2-5所示的启动界面。

图1-2-4 MyEclipse工具选择界面

图1-2-5 MyEclipse启动界面

2）设置工作目录。第一次运行MyEclipse，一般要求设置工作目录，这个工作目录就是以后创建各个Web项目的文件存储路径。设置界面如图1-2-6所示。

3）进入工作界面，如图1-2-7所示。

图1-2-6 设置工作目录界面

图1-2-7 工作界面

4）创建一个WebProject。按照如图1-2-8所示的步骤操作，单击“WebProject”之后，进入如图1-2-9所示的项目配置界面。

图1-2-8 添加一个Web Project

图1-2-9 Web Project配置界面

配置成功，进入如图1-2-10所示的项目开发界面。

图1-2-10 项目开发界面

5）修改项目的默认编码格式。单击菜单中的“Project”→“Properties”，按图1-2-11所示配置项目编码。

图1-2-11 配置项目编码界面

6）查看项目文件夹。项目创建完毕之后，在已经指定的工作目录下可以看到刚刚创建的网站项目根目录“Hello”，如图1-2-12所示。

7）按照如图1-2-13所示方式修改Hello项目中的默认页面index.jsp。

图1-2-12 项目文件夹

图1-2-13 编写index.jsp

8）配置JSP页面的运行环境。在工具栏中单击如图1-2-14所示的工具图标。

图1-2-14 单击“服务器配置”图标

然后按照如图1-2-15所示的方式，进行服务器配置。

图1-2-15 配置项目对应的服务器

9）测试网页index.jsp。在工具栏上单击如图1-2-16所示的工具图标。

图1-2-16 单击“运行”图标

运行结果如图1-2-17所示。

图1-2-17 运行结果

3.JSP脚本的基本语法

一个简单的JSP页面代码如下所示。

＜%…%＞是JSP脚本的最基本特点，这一点和ASP技术很相似，但JSP的基础是Java，所以天生具备面向对象程序设计的思想，在程序功能扩展性、兼容性、重用性和安全性等方面都比ASP有优势。

JSP脚本有3种基本的语法形式：JSP注释、JSP指令和JSP脚本元素。

1）JSP注释。JSP页面支持以下两种注释：

＜！--注释--＞

＜%--注释--%＞

注释的使用方法参考下面案例：

讨论 请将Hello项目中index.jsp中的代码替换为上面的代码，启动服务器，运行该项目，然后在浏览器中测试该页面，通过查看网页源代码比较两种注释的区别。

2）JSP指令。JSP指令是位于JSP文件头用来对JSP文件的相关配置进行设置的说明性代码。例如，在Hello项目中，index.jsp文件的第一行如下：

这一行就是JSP指令，它的格式如下：

这里面@符号是指令的身份象征，表示这一行是指令行，JSP支持3种指令类型：page、include和taglib。每一种类型的指令都有固定的一些属性值可以设置。

①page指令：用来对当前页面的各种相关环境进行配置。

②include指令：用来在一个文件中包含另一个文件的内容。

③taglib指令：用来申明用户自己定义的标签。

page指令可以设置的属性见表1-2-1。

表1-2-1 page指令属性列表

注：上述属性在一个网页中只能出现一次，import属性除外。

练习 使用page指令设置页面内容的类型是“text/html”，字符集是GBK，且导入java.sql和java.util包，应该如何写？

include指令主要设置的属性只有一个file，例如：

这句代码的意思是把in.jsp文件的全部内容直接复制到当前位置。

讨论 假设有一个login.jsp，代码如下，请问有什么作用？

taglib指令用来申明用户自己定义的标签，在任务十中有详细的介绍。

3）JSP脚本元素。JSP页面的大部分功能都是靠脚本来实现的，它有3种脚本元素。

第一种是申明，格式如下：

＜%！变量和方法的声明%＞

例如：

第1行申明了一个整数变量a，这个a可以在整个页面使用，属于页面级的变量。第2行申明了一个方法，同样这个方法可以在整个页面使用。

第二种是表达式，格式是

＜%=表达式%＞

例如：

＜%=newDate（）.toString（）%＞

这句代码的作用是在当前位置输出今天的日期，Date是一个日期类；newDate（）创建了一个日期对象，保存当前的系统时间；toString（）方法用来输出日期对象的字符串表达方式。

第三种是代码块，格式是

＜%这里可以放置Java代码%＞

这种语法是最灵活的，可以在＜%…%＞里面嵌入任何合法的Java代码。大部分网页的功能都是靠它来实现的，代码块也是用的最多的一种脚本元素。

演示二 在Hello项目中添加一个JSP网页test1-2-1.jsp，用来打印当天的日期。

1）在Hello项目中添加一个JSP文件test1-2-1.jsp，步骤如图1-2-18所示，在出现的向导中按照如图1-2-19所示配置文件名。

图1-2-18 添加JSP文件

图1-2-19 配置JSP文件的文件名

2）编写JSP文件test1-2-1.jsp的代码。

代码1-2-1 test1-2-1.jsp*

3）运行Hello网站项目，测试test1-2-1.jsp，效果如图1-2-20所示。

图1-2-20 test1-2-1.jsp运行效果

第38行的out是JSP页面的内置对象。内置对象是在JSP页面中不需要额外的申明、定义，可以直接使用的对象。如果JSP页面是一个提供Web服务的餐厅，那么内置对象就是这个餐厅里的服务员，你可以直接呼喊：服务员！他就会为你提供服务，但是他提供服务的内容是固定的，不是想要什么就有什么的，所以需要大致了解不同类型的服务员都固定提供哪些服务，这样才能充分地享受到良好的服务。

JSP页面常用的内置对象见表1-2-2。

表1-2-2 JSP内置对象表

演示三 在Hello项目中添加一个JSP网页test1-2-2.jsp（添加JSP文件的步骤参考上一个演示），用来展示JSP页面3种显示内容的方式。

代码1-2-2 test 1-2-2.jsp

第7～8行是在代码块中用out对象输出内容，使用out对象可以输出任何HTML代码，也可以输出各种Java表达式的结果，非常灵活。

第11行，使用表达式输出内容，一般这种方式会嵌入在HTML代码中，实现动态内容的显示。第13行是直接的HTML静态内容输出方式。

运行Hello网站项目，测试test1-2-2.jsp，效果如图1-2-21所示。

图1-2-21 test1-2-2.jsp运行效果

表1-2-2中的其他对象将在后续的任务中陆续解释。

4.JDBC数据库访问技术

JDBC是Java的数据库访问技术，Java主要靠驱动器来管理对各种数据库的访问，如图1-2-22所示。

图1-2-22 JDBC实现框架

JDBC访问数据库的基本步骤如图1-2-23所示。

图1-2-23 应用JDBC技术的基本步骤

下面对数据库访问技术的重要基本步骤进行详细的介绍。

1）加载驱动类。驱动类为访问数据库提供必须的底层支持。下面是3种不同数据源的驱动类加载方式。

①JDBC-ODBC桥：如果要访问ODBC数据源就使用这种方式。

②MySQL驱动：直接访问MySQL数据源。

③SQL Server驱动：直接访问SQL Server数据源。

第一种方式，Java的标准类库中提供了这种驱动类，所以事先不用下载专用的资源包了。后面两种方式需要先加载包含对应驱动类的资源包才可以正常工作。

2）和数据库建立连接。JDBC使用Connection类型的对象管理与数据库的连接。其实现语法如下：

后面两个参数很好理解，表示登录数据库的用户名和密码，如果没有，可以为空字符串。关键是第一个字符串的写法，它用来表示所要连接的数据库的类型、位置等信息。这里针对第一步加载的3种驱动类，编写其对应的3种URL字符串：

①连接ODBC：

②连接MySQL：

③连接SQL Server：

3）创建执行查询的对象。建立好数据库连接，就可以执行各种各样的SQL语句。JDBC使用Statement对象执行SQL语句，创建Statement对象的语法如下所示。

或者提供两个参数，用来确定查询结果的游标类型和读写权限，例如：

4）执行查询。把要执行的SQL语句交给第三步创建的Statement对象就可以了。当然不同类型的SQL语句执行之后的结果不同，如果是select语句，其执行结果是一个类似表结构的结果集，JDBC使用ResultSet类型的对象来存储这种结果集；如果是增删改语句，其返回结果是操作所影响的行数。

//如果执行select语句

5）检索查询的结果。第四步如果执行了select语句会返回一个ResultSet对象，该对象包含了所有的查询结果信息。使用Resultset提供的getXXX方法可以从结果中取出字段的值，例如：

当然，查询结果通常不止一行，可以使用ResultSet提供的next（）方法实现行的转移，定位到下一条要访问的记录行位置，如果当前访问的已经是最后一行数据，再执行next方法就会返回一个false状态。

6）关闭打开的对象。关闭所有数据库访问和操作对象，如下所示。

下面通过一个案例演示JDBC如何从MySQL数据库中提取数据。

演示四 测试JDBC的用法。

第一步：下载针对MySQL数据库的JDBC驱动类。在搜索引擎网站中输入“jdbcformysql”，根据搜索的结果，选择下载的网站，例如笔者搜索到的网站http：//dev.mysql.com/downloads/connector/j/下就有相关的下载链接，如图1-2-24所示。

图中两个下载可以二选一，无论你到什么网站，下载的是什么版本，都可以看到类似一个mysql-connector-java-某串代表版本的数字-bin.jar或者是mysql-connector-java-某串代表版本的数字-bin.zip的压缩包。这个压缩包提供了访问MySQL数据库的必要支持。

第二步：把第一步下载的压缩包mysql-connector-java-5.0.0-bin.jar（注意读者下载的版本不一定和本书一致，这并不影响程序的执行）放到Hello项目下Web根目录下的lib文件夹中，如图1-2-25所示。

图1-2-24 JDBC驱动下载示意图

图1-2-25 JDBC Driver的存储路径

第三步：在D盘下创建一个SQL文件test1-2-3.sql，该文件内容如下所示。

代码1-2-3 test1-2-3.sql

第四步：在MySQL数据库中创建数据库和表。如图1-2-26所示，选择MySQL启动命令，进入如图1-2-27所示的界面。

图1-2-26 MySQL程序启动1

图1-2-27 MySQL程序启动2

输入MySQL服务器安装配置时设置的root用户的密码。如果密码错误，启动界面会自动关闭；如果密码正确，出现如图1-2-28所示的界面。

在图1-2-28中输入“sourcetest1-2-3.sql的绝对路径”，例如，如果test1-2-3.sql位于D盘根目录下，就输入如图1-2-29所示的命令。

图1-2-28 MySQL程序启动3

图1-2-29 执行sql文件

完成上述步骤之后，MySQL中就创建了一个数据库HelloDB，可以使用如下几个命令查看MySQL数据库下的数据库对象。

1）use数据库名：用来转换当前使用的数据库。

2）showtables：用来显示当前数据库下的所有数据表。

3）desc表名：用来显示一个表的结构。例如，如果在图1-2-29所示的命令执行之后，再输入“descmember”，就会看到如图1-2-30所示的表结构。

图1-2-30 member表结构

第五步：在Hello项目中添加一个JSP文件test1-2-4.jsp，代码如下所示。

代码1-2-4 test1-2-4.jsp

第14、17、41行的System.out.println是将信息打印在服务器的控制台上，用来跟踪程序执行的过程；第21～35行中的out.println是使用out对象在网页上输出内容。

第六步：运行Hello网站，测试test1-2-4.jsp页面的输出结果如图1-2-31所示。

图1-2-31 test1-2-4.jsp运行效果

任务实施

1.任务单

本次任务的任务清单见表1-2-3。

表1-2-3 任务二的任务清单

2.实施步骤

步骤一 打开MyEclipse，创建一个新的Web项目GreenBar，并将访问MySQL所必需的JDBC驱动类文件包放到网站根目录下的WebRoot\WEB-INF下的lib文件夹中。具体操作参考本任务分析中的相关步骤。

步骤二 在D盘中创建一个数据库脚本文件greenbardb.sql，并输入如下代码（空格处代码请读者根据提示，自行完成）。

代码1-2-5 greenbardb.sql

【操作提示】

1）请模仿第15～18行的insertinto语句再编写五条insertinto语句向news表插入五条测试用数据。

2）请模仿第30行的insertinto语句再编写五条insertinto语句向newstypes表插入五条测试用数据。

步骤三 在MySQL中执行greenbardb.sql，创建GreanBar数据库及相关的两个表news和newstypes。

步骤四 在Web项目GreenBar的根目录下，添加一个JSP文件index_news.jsp，并输入如下代码。

代码1-2-6 index_news.jsp*

【操作提示】

1）请模仿代码1-2-4，填写第71～78行数据库连接的基本参数。

2）第85～87行根据注释所说的数据访问需求，从结果集中取数据，具体语法模仿代码1-2-4的第28行。

运行GreenBar网站，测试index_news.jsp页面的输出结果，如图1-2-32所示。

图1-2-32 index_news.jsp运行效果

自我评价

思考与练习

一、填空题

1.JSP项目中用来存储私有资源的文件夹名是____，用来配置网站信息的XML文件是____。

2.JSP有两种注释格式，分别是____和____

3.JSP指令的基本语法是：

＜%____属性名=属性值%＞

4.如果想在JSP网页中导入java.sql包，应该怎么写page指令：____

5.如果msg是一个字符串变量，要使用表达式在HTML文档中输出msg的值，应该这样写：

＜%____msg%＞

6.JSP网站要部署在服务器上，才能运行，支持JSP网站的服务器有________。

7.JDBC是Java访问数据库的技术，用来连接MySQL数据源的驱动类类名是________，用来描述数据源路径的格式是：

____//localhost/数据库名？____=utf-8

二、操作题

绿吧企业门户网站除了能显示最新新闻以外，还要显示企业重点宣传的产品信息，如图1-2-33所示。

图1-2-33 首页产品显示的效果图

1.在原有的GreenBar数据库中添加两个表：产品表和产品类型表（表结构参考任务一的表1-1-3、表1-1-4）。

2.模仿index_news.jsp，在GreenBar项目中添加一个JSP文件index_product.jsp，用来完成首页的产品显示功能。