在 Eclipse 中生成 Web 应用

  • 5 分钟

Eclipse 提供用于生成静态和动态 Web 项目的项目模板。 静态 Web 项目包括包含 HTML 和客户端 JavaScript 代码的文件。 动态 Web 项目通常包括包含在服务器上运行的 Java Server Pages (JSP) 的文件。 Azure 应用服务支持静态和动态 Web 项目。

在此单元中，你将了解有关如何使用 Eclipse 创建动态 Web 项目的基础知识。 在下一个单元中，你将完成一个练习，其中你将创建一个可以部署为 Azure Web 应用的动态 Web 项目。

如何创建动态 Web 应用

若要创建动态 Web 应用，请在 Eclipse 中的“文件”菜单上，选择“新建”，然后选择“动态 Web 项目”。

Screenshot of the New menu in Eclipse. The user has selected the Dynamic Web Project command.

“动态 Web 项目”向导会提示输入项目的基本详细信息。 唯一的必填项是项目名称；向导会为所有其他属性和配置详细信息提供默认值。 但是应验证目标运行时，以便确定将在 Web 应用中使用的功能。 在以下屏幕截图中，用户选择了“Apache Tomcat v8.0”服务器。 此服务器可用于在本地测试和调试。 测试 Web 应用之后，可以将它部署到 Azure。

Screenshot of the Dynamic Web Project wizard in Eclipse.

如何创建静态和动态网页

创建动态 Web 应用之后，可以使用“项目资源管理器”窗口将资源添加到项目，如 HTML 文件、JSP 文件和 CSS 样式表。 例如，若要向项目中添加新的 JSP 页面，请在“项目资源管理器”窗口中右键单击项目名称，选择“新建”，然后选择“JSP 文件”。

Screenshot of Eclipse. The user is creating a new JSP file for the dynamic web project.

Eclipse 会生成网页的基本样本代码。 随后可以使用 HTML 编辑器创建用于定义网页主要部分的 HTML 标记。 为提供帮助，该编辑器包括 IntelliSense 样式提示和代码完成功能。

Screenshot of the HTML editor in Eclipse, showing IntelliSense-style prompts.

动态网页包含 HTML 标记和 Java 代码的混合。 可使用 JSP 标记将 Java 代码添加到网页。 例如，以下步骤介绍如何以及何时使用这些标记：

  • 若要导入 Java 库，请使用 <%@ page ... %> 指令。 在下面的示例中，通过将指令添加到页面开头来导入 java.util 库：

    <%@ page import ="java.util.*" %>

  • 若要声明静态变量，请使用一对 <%! 和 %> 标记，可以同时初始化这些变量。 例如，在以下代码摘录中，counter 是整数变量，currencies 是一个集，其中包含在 java.util 库中可用的每种货币的详细信息。

    <%! int counter;
    Set<Currency> currencies = Currency.getAvailableCurrencies(); %>

    请注意，这些静态变量的值仅初始化一次，会在对 Web 应用的调用之间保留。

  • 若要添加过程代码，请将代码包含在一对 <% 和 %> 标记中。 过程代码可围绕常规 HTML 标记进行包装。 例如，在以下代码摘录中，for 循环会循环访问 currencies 集的内容，并在每次迭代期间输出一个 HTML 段落。 counter 变量跟踪进行的迭代次数，而“NNN”是一个临时占位符，将在下一个代码摘录中进行替换：

    <% counter = 1;
   for(Currency currency : currencies){ %>
    <p>Currency is NNN </p>
<%  counter++;
  } %>

  • 若要显示 Java 函数或表达式的结果，可以使用一对 <%= 和 %> 表达式标记。 例如，下面的代码摘录将上一个代码摘录中的“NNN”占位符替换为货币的字符串表示形式：

    <% counter = 1;
   for(Currency currency : currencies){ %>
   <p>Currency is <%= currency.toString() %> </p>
<%   counter++;
  } %>
<p> There are <%= counter %> currencies available.</p>

以下 JSP 页面显示一个完整示例，它使用 java.util 库中的 Currency.getAvailableCurrencies 方法检索货币列表。 此代码生成的 HTML 标记会将货币显示为一组 HTML 段落，并且末尾有一个汇总，对显示的货币数进行计数：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Currency Lister</title>
</head>
<body>
  <%! int counter;
      Set<Currency> currencies = Currency.getAvailableCurrencies(); %>
  
  <% counter = 1;
   for(Currency currency : currencies){ %>
        <p>Currency is <%= currency.toString() %> </p>
  <%    counter++;
    } %>
  <p> There are <%= counter %> currencies available.</p>

</body>
</html>

此代码生成的输出在下一节中显示。

如何在本地测试 Web 应用

若要测试 Web 应用，请在“运行”菜单上，选择“运行”，或在工具栏中选择“运行”按钮。 系统将提示你提供用于运行 Web 应用的服务器。 默认值与创建项目时指定的服务器运行时相同。

Screenshot of the Run On Server window in Eclipse. The user has selected the local Tomcat server.

选择“完成”以启动 Web 应用。 如果服务器当前已停止，则它会启动。 然后 Web 应用会运行，结果会显示在 Eclipse 的浏览器窗口中。 结果应与下图相似：

Screenshot of the static web app running in the browser window in Eclipse.