// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Web 应用程序开发简介
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Web 应用程序开发简介 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Web 应用程序开发简介

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


image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0"]


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

|===
|软件或资源 |要求的版本 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4、8.0、Java EE 版本 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+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 容器。
* 如果要将项目与工作解决方案进行比较，可以link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/HelloWebEE6.zip[+下载样例应用程序+]。


== 设置 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 开发应用程序_中的link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG366[+创建 Java 项目+]。
5. 单击 "Next"（下一步）。此时将打开 "Server and Settings"（服务器和设置）面板。选择要与应用程序一起使用的 Java EE 版本。
6. 选择要在其中部署应用程序的服务器。这里仅列出了已在 IDE 中注册的服务器。请注意，服务器上的上下文路径将变为  ``/HelloWeb`` （基于您在上一步中为项目指定的名称）。
7. 单击 "Finish"（完成）。

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

image::images/projects-window.png[]

此项目文件夹包含所有源代码和项目元数据，例如项目的 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``  变量。

[source,java]
----

String name;
----


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

[source,java]
----

public NameHandler() { }
----


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

[source,java]
----

name = null;
----


=== 生成 getter 和 setter 方法

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

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

image::images/encapsulatefields-dialog.png[]


. 单击 "Refactor"（重构）。

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


[source,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"（插入窗体）对话框。


. 请指定以下值：
* *Action（操作）：*response.jsp
* *Method（方法）：*GET
* *Name（名称）：*Name Input Form

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

image::images/input-form.png[]


. 将一个 "Text Input"（文本输入）项拖至紧靠  ``</form>``  标记前面的位置，然后指定以下值：
* *Name（名称）：*name
* *Type（类型）：*text
单击 "OK"（确定）。将在  ``<form>``  标记之间添加一个 HTML  ``<input>``  标记。从此标记中删除  ``value``  属性。


. 将一个按钮项拖至紧靠  ``</form>``  标记前面的位置。请指定以下值：
* *Label（标签）：*OK
* *Type（类型）：*submit
单击 "OK"（确定）。将在  ``<form>``  标记之间添加一个 HTML 按钮。


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


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

[source,xml]
----

<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）对话框。指定下图中显示的值。

image::images/usebean-dialog.png[]

* *ID：*mybean
* *Class（类）：*org.mypackage.hello.NameHandler
* *Scope（范围）：*Session（会话）
单击 "OK"（确定）。请注意，将在  ``<body>``  标记的下方添加  ``<jsp:useBean>``  标记。


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

[source,java]
----

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

正如

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


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

[source,xml]
----

<h1>Hello, !</h1>
----


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

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

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


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

[source,xml]
----

<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 中运行应用程序。


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

image::images/app-output-tab.png[]


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

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

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

image::images/gf-output-tab.png[]


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

image::images/result1.png[]


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

image::images/result2.png[]


== 疑难解答

_我已经构建并运行了项目。当我单击  ``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"（运行）类别中。最后，下载link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/HelloWebEE6.zip[+样例项目+]并将其与您自己的项目进行比较。

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

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

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

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

link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Developing%20Web%20Applications[+发送有关此教程的反馈意见+]


== 另请参见

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

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

* link:quickstart-webapps-struts.html[+Struts Web 框架简介+]。介绍通过 NetBeans IDE 开发使用 Struts 框架的 Web 应用程序的基础知识。
* link:../../trails/java-ee.html[+Java EE 和 Java Web 学习资源+]