练习 - 在 Eclipse 中生成 Web 应用

已完成

安装 Azure Toolkit for Eclipse 之后,你会拥有可用于生成 Java Web 应用并将其部署到 Azure 的环境。

在此练习中,你将使用 Eclipse 创建一个 Java Web 应用,以使用 Java Server Pages (JSP) 生成适用于网页的动态内容。 该页面会显示当前日期和时间,以及运行连接到 Web 应用的 Web 浏览器的客户端计算机 IP 地址。 使用 Apache Tomcat 服务器在本地测试 Web 应用。

创建新的 Web 应用

  1. 如果 Eclipse 尚未运行,请启动它。

  2. 在“文件”菜单中,选择“新建”,然后选择“动态 Web 项目”

    Eclipse 中“文件”菜单的屏幕截图,其中选择了“动态 Web 项目”。

    如果未看到“动态 Web 项目”,请尝试“文件”>“其他”>“Web”>“动态 Web 项目”。 如果向导不存在,请确保已安装适用于企业 Java 和 Web 开发人员的 Eclipse IDE。

  3. 在“新建动态 Web 项目”向导中的“动态 Web 项目”页上,在“项目名称”中输入“SampleWebApp”。 确保将“目标运行时”设置为“Apache Tomcat v10.1”,然后选择“完成”

    Eclipse 中“新建动态 Web 项目”向导的“动态 Web 项目”页的屏幕截图。

    注意

    如果“Apache Tomcat v10.1”运行时未列出,请选择“新建运行时”,然后下载它。

  4. 在“项目资源管理器”窗格中,依次展开“SampleWebApp”和“Java 资源”,右键单击“src”,选择“新建”,然后选择“JSP 文件”

    源代码项目的“新建”菜单的屏幕截图,其中选择了“JSP 文件”。

  5. 在“新建 JSP 文件”向导中的“JSP”页上,验证父文件夹是否设置为“SampleWebApp/WebContent”。 对于“文件名”,请输入 index.jsp,然后选择“完成”。

    Eclipse 中“新建 JSP 文件”向导的屏幕截图,显示“JSP”页。

  6. 此时会出现显示 index.jsp 文件的代码编辑器窗口。 在页面的头部分中,将标题的 HTML 标记更改为“示例 Web 应用”。

    <head>
        <meta charset="UTF-8">
        <title>Sample Web App</title>
    </head>
    
  7. 在页面的正文部分中,添加以下代码:

    <body>
        <%! DateFormat fmt = new SimpleDateFormat("dd/MM/yy HH:mm:ss"); %>
        <p>Today's date is <%= fmt.format(new Date()) %></p>
        <p>Your IP address is <%= request.getRemoteAddr() %></p>
    </body>
    

    此代码会检索当前日期,然后设置其格式并进行显示。 此代码还会从请求消息中提取客户端的 IP 地址,并打印该地址。

  8. 在页面顶部附近的第一个 @page 指令(指定页面的语言和内容类型)之后,添加以下代码中所示的两个 @page 指令:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import ="java.util.*" %>
    <%@ page import ="java.text.*" %>
    

    这些指令会导入 java.util 和 java.text 库。 页面正文中的代码会使用这些库。

    完成的代码外观应如下示例所示:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ page import ="java.util.*" %>
    <%@ page import ="java.text.*" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Sample Web App</title>
    </head>
    <body>
        <%! DateFormat fmt = new SimpleDateFormat("dd/MM/yy HH:mm:ss"); %> 
        <p>Today's date is <%= fmt.format(new Date()) %></p>
        <p>Your IP address is <%= request.getRemoteAddr() %></p>
    </body>
    </html>
    
  9. 在“文件”菜单中,选择“保存”。

在本地测试 Web 应用

  1. 在“运行”菜单上,选择“运行”。

    Eclipse 中“运行”菜单的屏幕截图,其中选择了“运行”命令。

  2. 在“在服务器上运行”向导中,选择“localhost 上的 Tomcat v10.1 服务器”,然后选择“完成”

    Eclipse 中“在服务器上运行”向导的屏幕截图,其中选择了 localhost 服务器上的 Tomcat v10.1 服务器。

    注意

    如果最近安装了 Tomcat,则可能没有现有服务器可用。 选择“手动定义新服务器”,然后选择“Tomcat v10.1 服务器”

  3. 在 Tomcat 服务器启动时,会看到一些消息。 Eclipse 会将 Web 应用程序的输出显示在 IDE 内的浏览器窗口中,其外观应类似于以下图像。

    Eclipse 中示例 Web 应用程序的输出的屏幕截图。

  4. 选择“转到所选 URL”按钮(即“示例 Web 应用”窗口中 URL 旁边的绿色箭头)以刷新页面。 随着页面的重新生成和 Java 代码的再次运行,应会看到时间发生变化。

祝贺你! 你已使用 Eclipse 创建了一个示例 Web 应用并在本地进行了部署。 在下一练习中,你会将该 Web 应用部署到 Azure。