1.4 使用Eclipse进行Java Web项目的开发——实例演示HelloWorld项目开发过程

在上一小节中我们安装和配置了Eclipse的开发环境,已经能够开发Java应用程序了。下面我们通过实现一个简单的HelloWorld项目,来演示使用Eclipse开发Java Web的过程,以展示开发过程中的各种技术。

具体内容如下:

● 认识Eclipse工作区。

● 新建Java Web项目demo。

● 新建一个Java包test.hello。

● 新建一个Java类HelloWorld.java。

● 新建一个HTML页面index.htm。

● 新建一个JSP页面helloworld.jsp。

● 新建Tomcat服务器集成配置。

● 运行项目查看结果。

● Tomcat的停止与重启。

● 导出war部署包。

通过本节的演示过程,我们将学会在Eclipse中开发Java Web项目、类、HTML和JSP页面的方法,以及集成配置Tomcat进行运行和发布的方法。这些方法代表了使用Eclipse进行Java Web项目开发的全部可视化操作过程,以后我们将根据该过程添加不同的技术和业务代码。

1.4.1 认识Eclipse工作区

启动Eclipse后,通常见到的界面都如图1-33所示,这是每一个Eclipse安装包都默认提供的界面,也是Eclipse最常用的工作区域状态。

图1-33 工作区划分

该工作平台的大多数特性,例如菜单和工具栏,都应该和其他那些熟悉的应用程序类似。除此之外,Eclipse的工作区域主要由几个称为视图(View)的窗格组成,下面是几个主要的视图窗口。

● Navigator视图:Navigator视图允许我们创建、选择和删除项目。

● 编辑器区域:Navigator右上侧的窗格是编辑器区域。取决于Navigator中选定的文档类型,一个适当的编辑器窗口将在这里打开。如果Eclipse没有注册用于某特定文档类型(例如Windows系统上的.doc文件)的适当编辑器,则Eclipse将设法使用外部编辑器来打开该文档。

● Outline视图:编辑器区域右侧的Outline视图在编辑器中显示文档的大纲;这个大纲的准确性取决于编辑器和文档的类型;对于Java源文件,该大纲将显示所有已声明的类、属性和方法。

● 选项卡视图:选项卡视图(Problems、Tasks等)收集关于我们正在操作的项目的信息;可以是Eclipse生成的信息,比如编译错误,也可以是我们手动添加的任务。

1.4.2 新建Java Web项目demo

进行Java Web项目开发的第一步,是新建一个Java Web项目。新建的方法是:用鼠标右键单击导航区的空白处,在弹出的快捷菜单中依次选择【New】→【Project】命令,如图1-34所示。

图1-34 新建项目

弹出的新建窗口如图1-35所示,该窗口中显示了新建项目的类型,我们依次选择【Web】→【Dynamic Web Project】选项即可,单击【Next】按钮进入如图1-36所示的界面。该界面用来输入新建项目的项目名demo。

图1-35 选择项目类型

图1-36 输入项目名称

输入完项目名后,单击【Next】按钮就会新建一个项目,此时的导航区中就会显示如图1-37所示的项目树形结构。该结构中包含了5个分支。

图1-37 项目结构图

● Deployment Descriptor:表示当前项目描述符web.xml的内容。

● Java Resources:存放Java类源文件,后面我们将在该目录下新建包和Java类。

● JavaScript Support:该目录展示了当前项目所支持的JavaScript函数。

● build:该目录是src目录中的Java源代码编译产生的class文件的目录。

● WebContent:是项目的主目录,用于存放HTML、JSP、图片等文件。

在以上5个分支中,只有src和WebContent目录是我们开发中需要添加文件的目录,一个用于添加Java源代码;另一个是Java Web应用的主目录。

1.4.3 新建一个Java包test.hello

在src目录中存放的是Java源代码。通常我们都习惯将类存放在某一个类包下,因此我们首先新建一个类包test.hello。新建的方法是:用鼠标右键单击导航区的空白处,在弹出的快捷菜单中依次选择【New】→【Package】命令,如图1-38所示。

图1-38 新建包

弹出的新建窗口如图1-39所示,该窗口中有两个参数。

图1-39 输入包名

● Source folder:指定新建包的存放目录,默认指定在当前项目的Java源代码目录下,即demo/src,该参数不需要修改。

● Name:新建包的名称,我们输入要新建的包名“test.hello”即可。

单击【Finish】按钮即完成包的创建,在src目录下就会显示一个包的图标。

1.4.4 新建一个Java类HelloWorld.java

下面在包test.hello下新建一个类HelloWorld.java,新建的方法是:在包test.hello的名称上单击鼠标右键,在弹出的快捷菜单中依次选择【New】→【Class】命令,如图1-40所示。

图1-40 新建类

确定后弹出新建类的窗口,如图1-41所示。该窗口中显示了新建类的属性。

图1-41 输入类名

● Source folder:用以指定类的存放目录,使用默认的demo/src即可。

● Package:指定包名,由于我们是在包test.hello上单击鼠标右键的,因此这里会自动输入包名,你也可以将其修改。

● Name:指定类名,输入“HelloWorld”。

下面的几个选项分别用于为该类设置修饰符、主函数等,我们暂不需要修改,单击【Finish】按钮即完成新建。此时在包test.hello下就会出现一个新的类HelloWorld.java。

下面我们要在该类中添加一个函数sayHello(),该函数根据输入的字符串参数world,返回一个欢迎信息,类似于“Hello World!”。代码如下所示:

            package test.hello;
            public class HelloWorld {
                public String sayHello(String world) {
                  return "Hello " + world + "!";
                }
            }

双击HelloWorld.java类名,就会在编辑区域打开该类的编辑器窗口,如图1-42所示。我们在该类中添加如上的sayHello()函数代码,通过单击【保存】按钮或按【Ctrl+S】组合键来保存该文件。

图1-42 编辑类代码

技巧提示

在保存的同时,Eclipse会执行对该类的编译,如果类代码有错误则会给出错误提示,如果正确就会将编译生成的class文件复制到build目录中。此时你查看磁盘上的D:\workspace\demo\build下,就会存在一个二进制文件test\hello\HelloWorld.java。

另外,你可以在编写Java类时通过添加main()函数来进行调试,例如:

            public static void main(String args[]) {
                HelloWorld hello = new HelloWorld();
                System.out.println(hello.sayHello("World"));
            }

然后可以直接运行该类,运行该类的方法是:在类名上单击鼠标右键,在弹出的快捷菜单中选择【Run As】→【Java Application】命令,就会在控制台选项卡【Console】中输出运行结果“Hello World!”。这表明该类的代码是正确的。

1.4.5 新建一个HTML页面index.htm

本项目的目的是根据用户的输入内容,返回一句欢迎信息。因此,首先需要新建一个HTML页面用来接受用户的输入。新建的方法是:在WebContent分支上单击鼠标右键,在弹出的快捷菜单中依次选择【New】→【HTML】命令,如图1-43所示。

图1-43 新建HTML页面

技巧提示

HTML、JSP、图片、CSS和JavaScript文件都属于Web文件,因此需要存放在WebContent目录下,新建这些文件时在WebContent分支上单击鼠标右键即可。

确定后弹出新建HTML页面的窗口,如图1-44所示。在【File name】文本框中输入新建的文件名index.htm,单击【Finish】按钮即会在WebContent下新建一个文件index.htm。

图1-44 输入HTML文件名

由于该页面需要接受用户的输入信息,因此需要添加一个如下的HTML表单,该表单包含了一个输入文本框world和一个提交按钮。代码如下所示:

            <form method="post" action="helloworld.jsp">
            输入:<input type="text" name="world">
            <input type="submit" value="提交">
            </form>

双击index.htm文件名,就会在编辑区域打开该类的编辑器窗口,如图1-45所示。我们在该文件中添加如上的HTML表单代码,通过单击【保存】按钮或按【Ctrl+S】组合键来保存该文件。

图1-45 编辑HTML文件代码

1.4.6 新建一个JSP页面helloworld.jsp

以上的index.htm页面中的表单提交地址是helloworld.jsp,该页面用来接收用户的表单提交请求,然后输出一个欢迎信息。新建JSP页面的方法是:在WebContent分支上单击鼠标右键,在弹出的快捷菜单中依次选择【New】→【JSP】命令,如图1-46所示。

图1-46 新建JSP页面

确定后弹出新建JSP页面的窗口,在【File name】文本框中输入新建的文件名helloworld.jsp,单击【Finish】按钮即会在WebContent下新建一个文件helloworld.jsp,如图1-47所示。

图1-47 输入JSP文件名

由于该页面需要取得用户输入的表单world的信息,因此需要先通过request取得该字段的信息。然后实例化一个HelloWorld类的对象hello,调用sayHello()函数来返回一个欢迎信息字符串,然后使用JSP的指令<%=helloworld%>输出该欢迎信息。代码如下所示:

            <%
            String world = request.getParameter("world");
            HelloWorld hello = new HelloWorld();
            String helloworld = hello.sayHello(world);
            %>
            <%=helloworld%>

双击helloworld.jsp文件名,就会在编辑区域打开该类的编辑器窗口,如图1-48所示。我们在该文件中添加如上的JSP代码,通过单击【保存】按钮或按【Ctrl+S】组合键来保存该文件。

图1-48 编辑JSP页面代码

到这里我们就完成了所有代码的开发。

1.4.7 新建Tomcat服务器集成配置

为了运行该代码,需要将该项目发布到Tomcat下运行,传统的方法是将WebContent下的所有文件复制到Tomcat的webapps目录下运行,但这样做太麻烦,Eclipse为我们提供了对Tomcat的简便集成,可以直接在Eclipse里运行Tomcat并自动发布代码来运行该项目。

运行的方法是:在项目demo上单击鼠标右键,在弹出的快捷菜单中依次选择【Run As】→【Run on Server】命令,如图1-49所示。

图1-49 开始运行项目

选择后弹出如图1-50所示的选择服务器类型的界面,该界面中列出了Eclipse已经集成的可用服务器类型,包括Tomcat、WebSphere等。由于我们已经安装了Tomcat,因此依次选择【Apache】→【Tomcat v6.0 Server】选项,单击【Next】按钮开始进行配置,弹出的窗口如图1-51所示。

图1-50 选择服务器类型Tomcat

图1-51 配置Tomcat服务器

该界面中显示了3个参数。

● Name:指定新建服务器的名称,使用默认的“Apache Tomcat v6.0”即可,该名称只是用做显示使用。

● Tomcat installation directory:指定Tomcat安装的主目录,我们安装的目录位置为D:\Tomcat 6.0,单击其后的【Browse】按钮,在弹出的如图1-52所示的窗口中来选择该目录,选定后单击【确定】按钮即可添加到该文本框中。

图1-52 选择Tomcat主目录

● JRE:指定当前Tomcat运行所使用的JDK目录,我们安装的位置是D:\jdk1.6.0_10,该目录已经通过Eclipse的属性配置添加进去了,因此在展开下拉列表中选择已经配置的jdk1.6.0_10即可。

配置完成后的参数界面如图1-53所示,单击【Next】按钮进入到项目列表界面,如图1-54所示。该界面中显示了当前将要发布到Tomcat下的项目,选中的项目将会自动被发布到Tomcat下运行。该界面中的左侧列表为待选择列表,右侧为已经选择的项目列表,由于我们是通过在demo项目上单击鼠标右键开始的新建过程,因此这里默认就把demo项目添加进去了。

图1-53 选择JDK

图1-54 添加要运行的项目

单击【Finish】按钮结束Tomcat服务器的配置,并将demo项目发布到Tomcat中,然后启动Tomcat服务器。完成后的导航区中多了一个Servers分支,该分支下拥有了刚才新建的Tomcat服务器的配置文件;在Servers选项卡中也拥有这个服务器列表,如图1-55所示。

图1-55 配置结果

1.4.8 运行项目查看结果

通过上面的配置,Tomcat已经将demo项目发布并启动了Tomcat服务器,下面我们来访问该项目的页面。在浏览器中输入http://localhost:8080/demo即会打开默认的首页页面index.htm,如图1-56所示。

图1-56 输入“World”

在该页面的文本框中输入“World”,单击【提交】按钮后就会跳转到helloworld.jsp,如图1-57所示。在该页面中显示了欢迎信息“Hello World!”,该信息是通过类HelloWorld.java的方法sayHello()返回的。

图1-57 提交页面

1.4.9 Tomcat的停止与重启

运行完项目后,还可以通过单击【Servers】选项卡中的红色按钮来停止Tomcat服务,停止后还可以通过单击该选项卡中的绿色启动按钮来启动Tomcat服务,如图1-58所示。

图1-58 服务器选项卡

1.4.10 导出war部署包

编写完成的demo项目在以上的环境中可以运行,但实际的项目需要部署在其他的部署服务器上,此时就需要使用项目的部署包war来部署。

Eclipse提供了导出war部署包的功能,导出的方法是:在demo项目上单击鼠标右键,在弹出的快捷菜单中选择【Export】命令,显示如图1-59所示的选择类型。

图1-59 选择导出类型

该列表中显示了Eclipse支持的所有导出文件类型,我们选择【WAR file】类型后单击【Next】按钮,弹出如图1-60所示的导出窗口,该窗口中的【Destination】文本框用于输入待导出的文件目录和文件名,单击【Browse】按钮指定导出的地址为D:\demo.war。

图1-60 输入war文件名

然后单击【Finish】按钮执行文件的导出,导出后的文件是一个可部署的war文件,可以直接复制到Tomcat的webapps目录下运行。导出的demo.war文件的结构如下所示:

            demo.war
            |  helloworld.jsp
            |  index.htm
            |
            ├─META-INF
            |     MANIFEST.MF
            |
            └─WEB-INF
                |  web.xml
                |
                ├─classes
                |  └─test
                |     └─hello
                |            HelloWorld.class
                |
                └─lib

到这里我们已经演示了在Eclipse中进行Java Web项目开发的整个过程,从项目的建立,到Java、HTML、JSP代码的编写,再到Tomcat服务器的配置和运行,最后讲解了打包的过程。这是实际Java Web项目的通用开发过程,掌握了这些方法就可以进行Java Web项目的开发和调试了。

1.4.11 打包eclipse.zip

经过以上的操作,完成了演示实例demo的开发,我们将该项目打包为eclipse.zip,其结构如下:

            eclipse.zip
            ├─src                                //Java源代码目录
            |  └─test
            |     └─hello
            |            HelloWorld.java
            |
            └─WebContent                         //Web代码目录
                |  helloworld.jsp
                |  index.htm
                |
                ├─META-INF
                |     MANIFEST.MF
                |
                └─WEB-INF
                  |  web.xml
                  |
                  └─lib

该文件放在光盘中的source目录下,可以直接导入该项目到Eclipse来运行。导入的方法是:首先将要运行的程序包demo.zip解压缩到Eclipse的工作目录(如D:\workspace)下,用鼠标右键单击Eclipse左侧的项目导航区空白处,在弹出的快捷菜单中选择【Import】命令,然后在弹出的导入窗口中选择【从现有项目到工作空间中】选项,并选择刚才解压缩后的程序目录,单击【确定】按钮即可导入到Eclipse中。

后文中产生的所有基于Eclipse开发的项目包,都可以使用这种方法导入。