Web 应用程序开发简介

This tutorial needs a review. You can edit it in GitHub following these contribution guidelines.

本文档将向您介绍有关使用 NetBeans IDE 开发 Web 应用程序的基础知识。它将演示如何创建简单的 Web 应用程序，如何将该应用程序部署到服务器，以及如何在浏览器中查看该应用程序的表现形式。该应用程序采用 JavaServer Pages(tm) (JSP) 页来要求您输入姓名。然后，使用 JavaBeans 组件在 HTTP 会话期间保留该姓名，并检索该姓名以输出到第二个 JSP 页上。

netbeans stamp 80 74 73
Figure 1. 此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0

要学习本教程，您需要具备以下软件和资源。

软件或资源 要求的版本

NetBeans IDE

7.2、7.3、7.4、8.0、Java EE 版本

Java 开发工具包 (JDK)

版本 7 或 8

GlassFish Server Open Source Edition 或 Tomcat Servlet 容器 或 Oracle Web Logic 服务器

4.x 和

.x 或 8.x

11gR1 (10.3.3) 或更高版本

注：

  • Java EE 安装（不是 Java SE！）使您能够有选择地安装 GlassFish Server 和 Apache Tomcat Servlet 容器。

  • 如果要将项目与工作解决方案进行比较，可以下载样例应用程序。

设置 Web 应用程序项目

  1. 从主菜单中选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键）。在 "Categories"（类别）下，选择 "Java Web"。在 "Projects"（项目）下选择 "Web Application"（Web 应用程序），然后单击 "Next"（下一步）。

  2. 在步骤 2 中，在 "Project Name"（项目名称）文本框中输入 HelloWeb 。

  3. 将 "Project Location"（项目位置）指定为计算机上的任意目录。在本教程中，将此目录称为 $PROJECTHOME 。

  4. （可选）选中“使用专用文件夹存储库”复选框，并指定库文件夹的位置。有关此选项的详细信息，请参见_使用 NetBeans IDE 开发应用程序_中的创建 Java 项目。

  5. 单击 "Next"（下一步）。此时将打开 "Server and Settings"（服务器和设置）面板。选择要与应用程序一起使用的 Java EE 版本。

  6. 选择要在其中部署应用程序的服务器。这里仅列出了已在 IDE 中注册的服务器。请注意，服务器上的上下文路径将变为 /HelloWeb （基于您在上一步中为项目指定的名称）。

  7. 单击 "Finish"（完成）。

IDE 将创建 $PROJECTHOME/HelloWeb 项目文件夹。您可以在 "Files"（文件）窗口（Ctrl-2 组合键）中查看项目的文件结构，在 "Projects"（项目）窗口（Ctrl-1 组合键）中查看其逻辑结构。

projects window

此项目文件夹包含所有源代码和项目元数据，例如项目的 Ant 构建脚本。在 IDE 中，将打开 HelloWeb 项目。在主窗口的源代码编辑器中，将打开欢迎页 index.jsp 。

*注：*根据您在创建项目时指定的服务器和 Java EE 版本不同，IDE 可能会生成 index.html 作为 Web 项目的默认欢迎页面。可以执行本教程中的步骤并使用 index.html 文件，也可以使用新建文件向导生成 index.jsp 文件以用作欢迎页面，在这种情况下，应删除 index.html 文件。

创建并编辑 Web 应用程序源文件

创建并编辑源文件是 IDE 所提供的最重要的功能。毕竟，这大概是您花费时间最多的工作。IDE 提供了各种工具来迎合任何开发者的个人风格，无论您是愿意手动编写所有代码，还是希望 IDE 为您生成大量代码。

创建 Java 包和 Java 源文件

  1. 在 "Projects"（项目）窗口中，展开 "Source Packages"（源包）节点。请注意，"Source Packages"（源包）节点仅包含一个空的默认包节点。

  2. 右键单击 "Source Packages"（源包）节点，然后选择 "New"（新建）> "Java Class"（Java 类）。在 "Class Name"（类名）文本框中输入 NameHandler ，并在 "Package"（包）组合框中键入 org.mypackage.hello 。单击 "Finish"（完成）。请注意，将在源代码编辑器中打开新的 NameHandler.java 文件。

  3. 在源代码编辑器中，通过在紧靠类声明的下方键入以下代码行来声明一个 String 变量。

String name;

  1. 将以下构造函数添加到类中：

public NameHandler() { }

  1. 在 NameHandler() 构造函数中添加以下代码行：

name = null;

生成 getter 和 setter 方法

  1. 在源代码编辑器中右键单击 name 字段，然后选择 "Refactor"（重构）> "Encapsulate Fields"（封装字段）。

将打开 "Encapsulate Fields"（封装字段）对话框，其中列出 name 字段。请注意，默认情况下将 "Fields' Visibility"（字段的可视性）设置为 "private"，将 "Accessors' Visibility"（存取方法的可视性）设置为 "public"，这表示类变量声明的访问修饰符将被指定为 private，而 getter 和 setter 方法将分别以 public 和 private 修饰符生成。

encapsulatefields dialog

  1. 单击 "Refactor"（重构）。

将为 name 字段生成 getter 和 setter 方法。类变量的修饰符将被设置为 private ，而 getter 和 setter 方法将以 public 修饰符生成。Java 类现在应该与以下代码类似。

package org.mypackage.hello;

/**
 *
 * @author nbuser
 */

public class NameHandler {

    private String name;

    /** Creates a new instance of NameHandler */
    public NameHandler() {
       name = null;
    }

    public String getName() {
       return name;
    }

    public void setName(String name) {
       this.name = name;
    }

}

编辑默认的 JavaServer Pages 文件

  1. 通过单击在源代码编辑器顶部显示的 index.jsp 文件标签以重新选中该文件。 2. 在位于源代码编辑器右侧的 "Palette"（组件面板）（Ctrl-Shift-8 组合键）中，展开 "HTML Forms"（HTML 窗体），然后将一个窗体项拖至源代码编辑器中 <h1> 标记后的某个位置。

此时将显示 "Insert Form"（插入窗体）对话框。

  1. 请指定以下值：

    • *Action（操作）：*response.jsp

    • *Method（方法）：*GET

    • *Name（名称）：*Name Input Form

单击 "OK"（确定）。将在 index.jsp 文件中添加一个 HTML 窗体。

input form

  1. 将一个 "Text Input"（文本输入）项拖至紧靠 </form> 标记前面的位置，然后指定以下值：

    • *Name（名称）：*name

    • *Type（类型）：*text 单击 "OK"（确定）。将在 <form> 标记之间添加一个 HTML <input> 标记。从此标记中删除 value 属性。

  2. 将一个按钮项拖至紧靠 </form> 标记前面的位置。请指定以下值：

    • *Label（标签）：*OK

    • *Type（类型）：*submit 单击 "OK"（确定）。将在 <form> 标记之间添加一个 HTML 按钮。

  3. 在紧靠第一个 <input> 标记前面的位置键入 Enter your name: ，然后将 <h1> 标记之间的默认 Hello World! 文本更改为 Entry Form 。

  4. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键）以整理代码的格式。 index.jsp 文件现在应该与以下代码类似：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Entry Form</h1>

        <form name="Name Input Form" action="response.jsp">
            Enter your name:
            <input type="text" name="name" />
            <input type="submit" value="OK" />
        </form>
    </body>
</html>

创建 JavaServer Pages 文件

  1. 在 "Projects"（项目）窗口中，右键单击 "HelloWeb" 项目节点，然后选择 "New"（新建）> "JSP"。此时将打开新建 JSP 文件向导。将文件命名为 response ，然后单击 "Finish"（完成）。请注意，在 "Projects"（项目）窗口中的 index.jsp 下方将显示 response.jsp 文件节点，并且会在源代码编辑器中打开新文件。 2. 在位于源代码编辑器右侧的 "Palette"（组件面板）中，展开 "JSP"，然后将一个使用 Bean 项拖至源代码编辑器中紧靠 <body> 标记下方的位置。将打开 "Insert Use Bean"（插入使用 Bean）对话框。指定下图中显示的值。

usebean dialog

  • *ID：*mybean

  • *Class（类）：*org.mypackage.hello.NameHandler

  • *Scope（范围）：*Session（会话） 单击 "OK"（确定）。请注意，将在 <body> 标记的下方添加 <jsp:useBean> 标记。

    1. 将一个设置 Bean 属性项从 "Palette"（组件面板）拖至紧靠 <h1> 标记前面的位置，然后单击 "OK"（确定）。在出现的 <jsp:setProperty> 标记中，删除空的 value 属性，然后将其编辑为以下代码。如果 IDE 创建了 value = "" 属性，请将其删除！否则，它会覆盖传递到 index.jsp 中的 name 的值。

<jsp:setProperty name="mybean" property="name" />

正如

``<jsp:setProperty>``  文档中所述，可以通过各种方法来设置属性值。在本例中， ``index.jsp``  页上的用户输入将成为传递至  ``request``  对象的名称/值对。当使用  ``<jsp:setProperty>``  标记设置属性时，可以根据  ``request``  对象中包含的属性名称来指定值。因此，通过将  ``property``  设置为  ``name`` ，可以检索由用户输入所指定的值。

  1. 更改 <h1> 标记之间的文本，以使其如下所示：

<h1>Hello, !</h1>

  1. 将一个获取 Bean 属性项从 "Palette"（组件面板）拖放至 <h1> 标记之间的逗号后面。在 "Insert Get Bean Property"（插入获取 Bean 属性）对话框中指定以下值：

    • *Bean Name（Bean 名称）：*mybean

    • *Property Name（属性名称）：*name

单击 "OK"（确定）。请注意，此时将在 <h1> 标记之间添加 <jsp:getProperty> 标记。

*注：*属性名称区分大小写。"name" 属性在 response.jsp 和 index.jsp 的输入窗体中必须具有相同的大小写形式。

  1. 在源代码编辑器中单击鼠标右键，然后选择 "Format"（格式化代码）（Alt-Shift-F 组合键）以整理代码的格式。 response.jsp 文件的 <body> 标记现在应该与以下代码类似：

<body>
    <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
    <jsp:setProperty name="mybean" property="name" />
    <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
</body>

运行 Web 应用程序项目

IDE 使用 Ant 构建脚本来构建和运行 Web 应用程序。此构建脚本是由 IDE 基于您在新建项目向导中指定的选项以及项目的 "Project Properties"（项目属性）对话框（在 "Projects"（项目）窗口中，右键单击项目节点，然后从出现的菜单中选择 "Properties"（属性））中的选项来构建的。

  1. 在 "Projects"（项目）窗口中，右键单击 "HelloWeb" 项目节点，然后选择 "Run"（运行）（F6 键）。在运行 Web 应用程序时，IDE 会执行以下步骤：

    • 构建和编译应用程序代码（请参见下面的注释）。可以通过从项目节点上下文菜单中选择 "Build"（构建）或 "Clean and Build"（清理并构建）来单独执行此步骤。

    • 启动服务器。

    • 将应用程序部署至服务器。可以通过从项目节点上下文菜单中选择 "Deploy"（部署）来单独执行此步骤。

    • 在浏览器窗口中显示应用程序。

*注：*默认情况下，将在启用“在保存时编译”功能的情况下创建项目，因此无需先编译代码即可在 IDE 中运行应用程序。

  1. IDE 将打开一个输出窗口，其中显示运行应用程序的进度。查看 "Output"（输出）窗口中的 "HelloWeb" 标签。在此标签中，您可以遵循 IDE 执行的所有步骤。如果出现问题，IDE 将在此窗口中显示错误信息。

app output tab

  1. IDE 会打开一个显示服务器状态的输出窗口。在 "Output"（输出）窗口中查看具有服务器名称的标签。

*重要信息：*如果 GlassFish Server 无法启动，请将其手动启动并再次运行该项目。可以手动启动该服务器，方法是：在 "Services"（服务）窗口中右键单击该服务器节点，然后选择 "Start"（启动）。

服务器输出窗口会提供有关运行 Web 应用程序时所遇到问题的大量信息。服务器的日志也会很有帮助。它们位于服务器的相关域目录中。通过选择 "View"（视图）> "IDE log"（IDE 日志）还可以查看可见的 IDE 日志。

gf output tab

. 将在默认浏览器中打开 index.jsp 页。请注意，在 IDE 显示服务器输出之前，浏览器窗口可能会打开。

result1

. 在文本框中输入您的姓名，然后单击 "OK"（确定）。将出现 response.jsp 页，并向您显示一条简单的问候语。

result2

疑难解答

我已经构建并运行了项目。当我单击 index.jsp 中的 "OK" 按钮时，会显示一个指示 response.jsp 不可用的错误页。

您是否已查看 IDE "Output"（输出）窗口中的 "project"（项目）标签或 "server"（服务器）标签（Ctrl-4 组合键）？窗口中的错误消息是什么？项目使用的 JDK 是什么？什么服务器？JDK 7 需要 GlassFish 3.x 或 Tomcat 7.x。在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Properties"（属性）。JDK 位于 "Java Platform"（Java 平台）字段中的 "Libraries"（库）类别中。服务器版本位于 "Run"（运行）类别中。最后，下载样例项目并将其与您自己的项目进行比较。

我已经构建并运行了项目，但没有出现任何名称，只显示 "Hello, !"

<jsp:setProperty> 标记是否包含 value = "" 属性？此属性会覆盖传递到 index.jsp 窗体中的值，并将该值替换为一个空字符串。删除 value 属性。

我已经构建并运行了项目，但却得到 "Hello, null!"

首先，检查 IDE 用于应用程序和服务器的 "Output"（输出）窗口以及服务器日志。服务器是否正在运行？服务器是否已部署？如果服务器正在运行且应用程序已部署，您是否获得 org.apache.jasper.JasperException: java.lang.NullPointerException ？这通常意味着代码中的值未正确初始化。在本教程中，这意味着在 JSP 文件的属性名称中可能某处存在输入错误。请记得，属性名称区分大小写！

发送有关此教程的反馈意见

另请参见

“Web 应用程序开发简介”教程到此结束。本文档演示了如何使用 NetBeans IDE 创建简单的 Web 应用程序，如何将该应用程序部署到服务器，以及如何在浏览器中查看该应用程序的表现形式。此外，还说明了如何在应用程序中使用 JavaServer Pages 和 JavaBeans 来收集、保留和输出用户数据。

有关在 NetBeans IDE 中开发 Web 应用程序的更深入的相关信息，请参见以下资源：